/* Bible et commentaires : feuille de style unique.
   Parti pris : le texte est l'interface. Une colonne de lecture, des commandes discrètes, des thèmes contrastés. */

/* ---------- Jetons ---------- */
:root {
  --bg: #f6f6f3;
  --fg: #1b1a18;
  --muted: #5a5750;
  --rule: #d3d0c8;
  --rubric: #8a2222;
  --soft: #ebeae5;
  --hl: #f3e3b4;
  --focus: #1f4e9c;
  --serif: "Literata", "Georgia", "Times New Roman", serif;
  --sans: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font: var(--serif);
  --size: 18px;
  --lh: 1.55;
  --measure: 100%;
  --margin: 18rem;
  color-scheme: light;
}
html[data-theme="sepia"] { --bg: #f3ead8; --fg: #2d2418; --muted: #675742; --rule: #d9cbb0; --rubric: #7f2a1e; --soft: #eadfc8; --hl: #e9d49c; --focus: #1f4e9c; }
html[data-theme="sombre"], html[data-theme="auto"].dark { --bg: #17181b; --fg: #dcdad3; --muted: #a39f97; --rule: #363840; --rubric: #e08c7c; --soft: #22242a; --hl: #4a3e1c; --focus: #8ab4ff; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] { --bg: #17181b; --fg: #dcdad3; --muted: #a39f97; --rule: #363840; --rubric: #e08c7c; --soft: #22242a; --hl: #4a3e1c; --focus: #8ab4ff; color-scheme: dark; }
}
html[data-theme="noir-sur-blanc"] { --bg: #ffffff; --fg: #000000; --muted: #2a2a2a; --rule: #7a7a7a; --rubric: #8a0000; --soft: #efefef; --hl: #fff2a8; --focus: #0000d0; }
html[data-theme="blanc-sur-noir"] { --bg: #000000; --fg: #ffffff; --muted: #d8d8d8; --rule: #8a8a8a; --rubric: #ffb0a0; --soft: #161616; --hl: #4d4200; --focus: #ffff00; color-scheme: dark; }

html[data-size="1"] { --size: 16px; } html[data-size="2"] { --size: 17px; } html[data-size="3"] { --size: 18px; } html[data-size="4"] { --size: 20px; }
html[data-size="5"] { --size: 22px; } html[data-size="6"] { --size: 24px; } html[data-size="7"] { --size: 27px; }
html[data-lh="1"] { --lh: 1.4; } html[data-lh="2"] { --lh: 1.55; } html[data-lh="3"] { --lh: 1.75; }
html[data-width="1"] { --measure: calc(var(--size) * 28); } html[data-width="2"] { --measure: calc(var(--size) * 34); } html[data-width="3"] { --measure: calc(var(--size) * 42); } html[data-width="4"] { --measure: 100%; }
html[data-width="4"] .page, html:not([data-width]) .page { max-width: none; }
html[data-font="sans"] { --font: var(--sans); }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 1rem; line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--rubric); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 500; line-height: 1.2; text-wrap: balance; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -200vw; top: .5rem; background: var(--fg); color: var(--bg); padding: .4rem .8rem; z-index: 50; }
.skip:focus { left: 1rem; }
html:not(.js) .js-only { display: none !important; }
html.js .js-hide { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); margin: 0 0 .4rem; }
mark { background: var(--hl); color: inherit; padding: 0 .1em; }
code, kbd { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: .9em; background: var(--soft); padding: .05em .35em; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: .35em; border: 1.5px solid var(--fg); background: transparent; color: var(--fg); padding: .4em .8em; border-radius: 3px; text-decoration: none; cursor: pointer; line-height: 1.2; min-height: 2.4rem; white-space: nowrap; }
.btn:hover { background: var(--soft); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: var(--rubric); border-color: var(--rubric); color: #fff; }
.btn-quiet { border-color: var(--rule); }
.btn-danger { border-color: var(--rubric); color: var(--rubric); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { text-decoration-color: var(--rubric); }
.seg { display: inline-flex; border: 1.5px solid var(--fg); border-radius: 3px; overflow: hidden; }
.seg-wrap { flex-wrap: wrap; }
.seg-btn { border: 0; background: transparent; padding: .4em .8em; min-height: 2.4rem; cursor: pointer; border-right: 1.5px solid var(--fg); }
.seg-btn:last-child { border-right: 0; }
.seg-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.seg output { padding: .4em .6em; min-width: 4.5em; text-align: center; border-right: 1.5px solid var(--fg); font-variant-numeric: tabular-nums; }
.inline { display: inline; }

/* ---------- En-tête ---------- */
.top { border-bottom: 1px solid var(--rule); padding: .6rem 0; display: flex; flex-direction: column; gap: .5rem; }
.top-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.goto { display: flex; flex: 1 1 18rem; min-width: 0; gap: .4rem; }
.goto input { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--rule); background: var(--bg); padding: .45em .7em; border-radius: 3px; min-height: 2.4rem; }
.goto input:focus { border-color: var(--fg); }
.top-ref { display: none; }
.top-tools { justify-content: flex-start; }
.version-form { display: flex; gap: .4rem; }
.version-form select { border: 1.5px solid var(--fg); background: var(--bg); padding: .35em .5em; border-radius: 3px; min-height: 2.4rem; }
@media (max-width: 600px) {
  .top-tools .btn, .top-tools .seg-btn, .version-form select { padding-left: .55em; padding-right: .55em; font-size: .95rem; }
  .top-tools .btn[href$="/aide"] { display: none; }
}
@media (min-width: 900px) {
  .top { flex-direction: row; justify-content: space-between; }
  .top-row { flex: 1 1 auto; }
  .top-tools { flex: 0 0 auto; }
}

/* ---------- Page ---------- */
.page { flex: 1 0 auto; width: 100%; max-width: 46rem; margin: 0 auto; padding-block: 1.5rem 3rem; }
.foot { border-top: 1px solid var(--rule); color: var(--muted); font-size: .8rem; padding: 1rem 0 1.5rem; }
.foot p { margin: 0; max-width: 60rem; }
.narrow { max-width: 38rem; }
.narrow h1 { font-size: 1.8rem; margin-bottom: .6rem; }
.narrow h2 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.help li { margin-bottom: .35rem; }
.form .block { display: block; margin: .8rem 0; }
.form input[type="password"] { display: block; width: 100%; max-width: 20rem; border: 1.5px solid var(--rule); padding: .45em .7em; border-radius: 3px; background: var(--bg); margin-top: .3rem; }

/* ---------- Accueil : table des livres ---------- */
.home-title { font-size: 1.8rem; margin: 0 0 .4rem; }
.resume { border-left: 3px solid var(--rubric); background: var(--soft); padding: .8rem 1rem; margin: 0 0 1.5rem; }
.resume p { margin: 0; }
.resume-link { font-family: var(--font); font-size: 1.25rem; }
.books { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem; margin-top: 1.2rem; }
@media (min-width: 720px) { .books { grid-template-columns: 1fr 1fr; } }
.testament h2 { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); font-family: var(--sans); font-weight: 600; margin: 0 0 .4rem; padding-bottom: .4rem; border-bottom: 2px solid var(--rubric); }
.book { border-bottom: 1px solid var(--rule); }
.book summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .2rem; cursor: pointer; list-style: none; min-height: 2.6rem; }
.book summary::-webkit-details-marker { display: none; }
.book summary::before { content: "›"; color: var(--muted); margin-right: .5rem; transition: transform .15s; display: inline-block; }
.book[open] summary::before { transform: rotate(90deg); }
.book summary:hover { background: var(--soft); }
.book-name { font-family: var(--font); font-size: 1.1rem; flex: 1 1 auto; }
.book-meta { color: var(--muted); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.count { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 1em; background: var(--rubric); color: #fff; text-align: center; font-weight: 600; }
html[data-theme="blanc-sur-noir"] .count { color: #000; }
.chapters { list-style: none; margin: 0; padding: .4rem 0 .9rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.chapters a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.6rem; border: 1px solid var(--rule); border-radius: 3px; text-decoration: none; font-variant-numeric: tabular-nums; position: relative; }
.chapters a:hover { border-color: var(--fg); background: var(--soft); }
.chapters a[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chapters a.has-comments::after { content: ""; position: absolute; right: .3rem; top: .3rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--rubric); }

.book-intro-link { font-family: var(--sans); font-size: .85rem; margin: .4rem 0 0; }
.eyebrow a { color: inherit; text-transform: none; letter-spacing: 0; }
.fallback { font-size: .85rem; margin: .2rem 0 0; }
.book-absent .book-name { color: var(--muted); }
.absent-mark { color: var(--rubric); margin-left: .25em; }
/* Page d'introduction d'un livre */
.intro-nav { font-family: var(--sans); font-size: .9rem; margin: .4rem 0 0; }
.intro-toc { font-family: var(--sans); font-size: .9rem; margin: 0 0 1.5rem; border-left: 3px solid var(--rubric); padding: .3rem 0 .3rem 1rem; }
.intro-toc ol { margin: 0; padding-left: 1.2rem; }
.intro-part { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rubric); margin: 2.4rem 0 .4rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.intro-text h3 { font-size: 1.15rem; margin: 1.6rem 0 .4rem; }
.intro-source { font-size: .85rem; margin: -.2rem 0 .4rem; }
.intro-table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-family: var(--sans); font-size: .78rem; line-height: 1.35; }
.intro-table caption { text-align: left; font-size: .8rem; color: var(--muted); margin-bottom: .4rem; }
.intro-table th, .intro-table td { border: 1px solid var(--rule); padding: .3rem .4rem; vertical-align: top; text-align: left; }
.intro-table th { background: var(--soft); font-weight: 600; }
.intro-figure { margin: 1.4rem 0; }
.intro-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.intro-figure figcaption { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-top: .4rem; }
@media (max-width: 640px) { .intro-table { display: block; overflow-x: auto; font-size: .72rem; } }
.intro-toc .toc-author { list-style: none; margin: .6rem 0 .2rem -1.2rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rubric); }
.intro-text { max-width: var(--measure); }
.intro-text h2 { font-size: 1.4rem; margin: 2rem 0 .8rem; }
.intro-text p { margin: 0 0 .85em; }

/* ---------- Navigation de chapitre ---------- */
.chapnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.chapnav a { text-decoration: none; padding: .5rem 0; min-height: 2.4rem; display: inline-flex; align-items: center; }
.chapnav a:hover { text-decoration: underline; }
.chapnav-bottom { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: .5rem; }
.chapnav-pick { position: relative; }
.chapnav-pick summary { list-style: none; cursor: pointer; padding: .4rem .6rem; border: 1.5px solid transparent; border-radius: 3px; }
.chapnav-pick summary::-webkit-details-marker { display: none; }
.chapnav-pick summary:hover { border-color: var(--rule); }
.chapnav-pick[open] summary { border-color: var(--fg); }
.chapnav-pick .chapters { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; z-index: 20; background: var(--bg); border: 1.5px solid var(--fg); padding: .6rem; width: min(22rem, 90vw); max-height: 60vh; overflow: auto; box-shadow: 0 6px 20px rgba(0,0,0,.15); }

/* ---------- Texte ---------- */
.chapter { position: relative; }
.chapter-head { margin: .5rem 0 1.5rem; }
.chapter-head h1 { font-size: 2.2rem; font-weight: 400; }
.text { font-family: var(--font); font-size: var(--size); line-height: var(--lh); max-width: var(--measure); hyphens: auto; -webkit-hyphens: auto; }
.text p, .intro-text p, .note p, .harm-text p { text-align: justify; text-justify: inter-word; }
.text p.q, .text p.q2, .text p.qs, .text p.r, .text p.d { text-align: left; }
.text p { margin: 0 0 .85em; }
.text p.q { margin: 0; padding-left: 1.5em; text-indent: -1.5em; }
.text p.q2 { padding-left: 3em; }
.text p.q + p:not(.q) { margin-top: .85em; }
.text p.li { padding-left: 1.5em; }
.text p.d { font-style: italic; color: var(--muted); margin-bottom: .6em; }
.text p.qs { text-align: right; font-style: italic; color: var(--muted); margin: 0 0 .85em; }
.text .b { height: .85em; }
.text h3.s, .text h4.s { font-family: var(--sans); font-weight: 600; font-size: .78em; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 1.6em 0 .5em; }
.text h3.ms, .text h4.ms { font-family: var(--sans); font-weight: 700; font-size: .85em; letter-spacing: .06em; text-transform: uppercase; margin: 1.8em 0 .6em; }
.text p.r { font-family: var(--sans); font-size: .72em; color: var(--muted); margin: -.3em 0 .7em; }
.text .nd { font-variant: small-caps; letter-spacing: .02em; }
.text .sc { font-variant: small-caps; }
.text .wj { }
html[data-wj="1"] .text .wj { font-weight: 600; }
html[data-wj="2"] .text .wj { color: var(--rubric); }
.panel-hint { font-family: var(--sans); font-size: .78rem; margin: .4rem 0 0; }
.v { font-family: var(--sans); font-size: .62em; font-weight: 600; color: var(--rubric); text-decoration: none; vertical-align: .45em; padding: 0 .25em 0 .05em; line-height: 1; }
.v:hover { text-decoration: underline; }
.vt.hl { background: var(--hl); box-shadow: 0 0 0 3px var(--hl); border-radius: 2px; }
.fn { font-size: .62em; vertical-align: .45em; line-height: 1; }
.fn-mark { background: none; border: 0; padding: 0 .1em; color: var(--muted); cursor: pointer; font-family: var(--sans); font-weight: 600; }
.fn-mark:hover, .fn.open .fn-mark { color: var(--rubric); }
.fn-body { display: none; }
.fn.open .fn-body { display: block; font-size: .85rem; line-height: 1.4; vertical-align: baseline; font-family: var(--sans); color: var(--muted); margin: .4rem 0 .4rem 1.2rem; padding-left: .6rem; border-left: 2px solid var(--rule); }
.fn-ref { font-weight: 600; color: var(--rubric); }
.fn-ref::after { content: " ·"; }
.fn-letter { font-weight: 400; margin-left: .15em; }
.fn-mark.lit { color: var(--rubric); background: var(--hl); border-radius: 2px; }
.fn-body.lit { color: var(--fg); border-left-color: var(--rubric) !important; }
.fn-body.lit .fn-ref { text-decoration: underline; text-underline-offset: .15em; }
.no-comments { font-family: var(--sans); font-size: .85rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: 1.5rem; max-width: var(--measure); }

/* Commentaires (en ligne, sous le passage) */
.note { font-family: var(--sans); font-size: .9rem; line-height: 1.45; border-left: 3px solid var(--rubric); background: var(--soft); padding: .7rem .9rem .5rem; margin: .6rem 0 1.1rem; max-width: var(--measure); }
.note p { margin: 0 0 .5rem; }
.note-head { font-size: .78rem; color: var(--muted); letter-spacing: .02em; }
.note-ref { color: var(--rubric); font-weight: 600; }
.note-author { color: var(--fg); font-weight: 600; }
.note-body p:last-child { margin-bottom: .3rem; }
.note-link, .note-actions { font-size: .8rem; }
.note-actions { margin: 0; }
.note:target { outline: 3px solid var(--rubric); outline-offset: 2px; }
/* Sélecteur d'auteurs : quels commentaires afficher dans ce chapitre. */
.authors { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-family: var(--sans); font-size: .82rem; margin: 0 0 1.2rem; max-width: var(--measure); }
.authors-label { color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; margin-right: .2rem; }
.author-btn { border: 1.5px solid var(--rubric); color: var(--rubric); background: transparent; border-radius: 3px; padding: .25em .6em; min-height: 2rem; cursor: pointer; }
.author-btn[aria-pressed="true"] { background: var(--rubric); color: #fff; }
html[data-theme="blanc-sur-noir"] .author-btn[aria-pressed="true"] { color: #000; }
.author-btn[aria-pressed="false"] { text-decoration: line-through; opacity: .8; }
.note.author-hidden { display: none !important; }
html[data-mode="lecture"] .authors { display: none; }
/* Commentaires longs : repliés au-delà de quelques lignes, « Lire la suite » les déplie. */
.note.folded .note-body { max-height: 7.2em; overflow: hidden; position: relative; }
.note.folded .note-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(to bottom, transparent, var(--soft)); }
.note.in-margin.folded .note-body::after { background: linear-gradient(to bottom, transparent, var(--bg)); }
.note .note-more { font-size: .8rem; margin: 0 0 .3rem; }
.note:not(.folded):not(.unfolded) .note-more { display: none; }

/* Mode Lecture : le texte seul */
html[data-mode="lecture"] .v, html[data-mode="lecture"] .fn, html[data-mode="lecture"] .note, html[data-mode="lecture"] .no-comments, html[data-mode="lecture"] .text p.r { display: none; }
html[data-mode="lecture"][data-headings="0"] .text h3, html[data-mode="lecture"][data-headings="0"] .text h4 { display: none; }
html[data-mode="lecture"] .text p.q { text-align: left; }

/* Mode Étude sur grand écran : notes et commentaires dans la marge droite */
@media (min-width: 1100px) {
  html[data-mode="etude"] body.is-chapter .page { max-width: calc(var(--measure) + var(--margin) + 4rem); }
  html[data-mode="etude"] .chapter:not(.is-parallel) { width: var(--measure); }
  html[data-mode="etude"][data-width="4"] .chapter:not(.is-parallel), html[data-mode="etude"]:not([data-width]) .chapter:not(.is-parallel) { width: calc(100% - var(--margin) - 2.5rem); }
  html[data-mode="etude"][data-width="4"] body.is-chapter .page, html[data-mode="etude"]:not([data-width]) body.is-chapter .page { max-width: none; }
  html[data-mode="etude"] .chapter:not(.is-parallel) .note.in-margin,
  html[data-mode="etude"] .chapter:not(.is-parallel) .fn-body.in-margin { position: absolute; left: calc(100% + 2.5rem); width: var(--margin); margin: 0; display: block; }
  html[data-mode="etude"] .chapter:not(.is-parallel) .note.in-margin { background: transparent; border-left: 2px solid var(--rubric); padding: .1rem 0 .1rem .7rem; font-size: .82rem; line-height: 1.4; }
  html[data-mode="etude"] .chapter:not(.is-parallel) .fn-body.in-margin { font-size: .78rem; line-height: 1.35; font-family: var(--sans); color: var(--muted); border-left: 2px solid var(--rule); padding-left: .6rem; vertical-align: baseline; }
  .chapnav { max-width: var(--measure); }
  html[data-mode="etude"] .chapter:not(.is-parallel) .no-comments { display: none; }
}
.harm { position: relative; }
.harm-text .note { max-width: none; }

/* Vue en parallèle */
.chapter.is-parallel .text { max-width: none; }
.page:has(.is-parallel) { max-width: 70rem; }
.parallel { display: table; width: 100%; border-collapse: collapse; }
.prow { display: table-row; }
.pnum, .pcell { display: table-cell; vertical-align: top; padding: .35em .6em .35em 0; border-bottom: 1px solid var(--rule); }
.pnum { width: 2.5em; white-space: nowrap; }
.phead .pcell { font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--rubric); }
.pnote .note { margin: .4rem 0; }
.pnote { display: table-row; }
.pnote .note { display: table-cell; }
html[data-mode="lecture"] .pnum { display: none; }
.parallel .v { vertical-align: baseline; font-size: .7em; }
.prow:target .pcell, .prow:target .pnum { background: var(--hl); }
@media (max-width: 640px) {
  .parallel, .prow, .pnum, .pcell { display: block; }
  .pnum { width: auto; padding-bottom: 0; border-bottom: 0; }
  .pcell { border-bottom: 0; padding-left: 0; }
  .pcell::before { content: attr(data-version); display: block; font-family: var(--sans); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .prow { border-bottom: 1px solid var(--rule); padding: .3em 0; }
  .phead { display: none; }
  .pnote .note { display: block; }
}

/* ---------- Recherche ---------- */
.search h1 { font-size: 1.8rem; margin-bottom: .4rem; }
.search-book { font-size: 1rem; font-family: var(--sans); font-weight: 600; margin: 1.6rem 0 .4rem; color: var(--rubric); }
.hits { list-style: none; padding: 0; margin: 0; }
.hits li { padding: .5rem 0; border-bottom: 1px solid var(--rule); font-family: var(--font); font-size: 1.05rem; line-height: 1.45; }
.hit-ref { font-family: var(--sans); font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--rubric); margin-right: .4rem; white-space: nowrap; }
.hit-ref:hover { text-decoration: underline; }

/* ---------- Volets (dialog) ---------- */
dialog.panel { border: 1.5px solid var(--fg); padding: 0; background: var(--bg); color: var(--fg); width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
dialog.panel::backdrop { background: rgba(0,0,0,.45); }
.panel-inner { padding: 1rem 1.2rem 1.2rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.panel-head h2 { font-size: 1.3rem; }
.panel fieldset { border: 0; padding: 0; margin: 0 0 .9rem; }
.panel legend { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; padding: 0; }
.panel-foot { margin: .5rem 0 0; font-size: .85rem; }
.panel .row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: .8rem; }
.panel .row label { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.panel .row .grow { flex: 1 1 10rem; }
.panel .row .grow input { flex: 1 1 auto; min-width: 0; }
.panel input[type="number"] { width: 4.5em; }
.panel input[type="number"], .panel input[type="text"], .panel input[type="url"], .panel input[type="password"], .panel textarea { border: 1.5px solid var(--rule); background: var(--bg); padding: .4em .6em; border-radius: 3px; min-height: 2.4rem; }
.panel input:focus, .panel textarea:focus { border-color: var(--fg); }
.panel .block { display: block; margin-bottom: .8rem; }
.panel .block input, .panel .block textarea { display: block; width: 100%; margin-top: .3rem; font-family: var(--font); font-size: 1rem; line-height: 1.5; }
.panel .block input { font-family: var(--sans); }
.panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.form-error { color: var(--rubric); font-weight: 600; margin: .4rem 0; }
/* Dans le volet : ce que les autres auteurs disent déjà de ce verset, un onglet par auteur. */
.existing { margin: 0 0 1rem; border-bottom: 1px solid var(--rule); padding-bottom: .8rem; }
.existing-title { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .4rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.tab { border: 1.5px solid var(--rule); background: transparent; border-radius: 3px; padding: .25em .7em; min-height: 2rem; cursor: pointer; font-size: .85rem; }
.tab[aria-selected="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.tabpane { max-height: 14rem; overflow: auto; font-family: var(--font); font-size: .95rem; line-height: 1.5; padding-right: .4rem; }
.existing-note { padding: .3rem 0 .5rem; border-bottom: 1px dotted var(--rule); }
.existing-note:last-child { border-bottom: 0; }
.existing-note .note-head { font-family: var(--sans); font-size: .75rem; color: var(--muted); margin: 0 0 .2rem; }
.existing-note p { margin: 0 0 .5rem; }
.login-block { border-top: 1px solid var(--rule); padding-top: .6rem; }

/* ---------- Impression ---------- */
@media print {
  .top, .foot, .chapnav, dialog, .no-comments, .note-actions, .skip, .to-top { display: none !important; }
  body { padding: 0; }
  .page { max-width: none; }
  .note.in-margin, .fn-body.in-margin { position: static; width: auto; }
  .fn-body { display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Harmonie des Évangiles ---- */
.harm-part { font-family: var(--sans); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--rubric); margin: 2rem 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--rule); }
.harm-toc-chapter { margin: 0 0 .7rem; }
.harm-toc-title { margin: 0; font-size: 1.05rem; }
.harm-toc-title a { text-decoration: none; }
.harm-toc-title a:hover { text-decoration: underline; }
.harm-toc-meta { font-family: var(--sans); font-size: .78rem; margin-left: .5rem; }
.harm-toc-scenes { font-family: var(--sans); font-size: .88rem; margin: .15rem 0 0; padding-left: 1.6rem; columns: 2; column-gap: 2rem; }
.harm-toc-scenes li { break-inside: avoid; margin: .1rem 0; }
.harm-toc-scenes a { text-decoration: none; color: var(--muted); }
.harm-toc-scenes a:hover { text-decoration: underline; color: var(--fg); }
@media (max-width: 600px) { .harm-toc-scenes { columns: 1; } }
.harm-intro { margin-bottom: 1rem; }
.harm-meta { font-family: var(--sans); font-size: .8rem; letter-spacing: .03em; color: var(--muted); margin: -.3rem 0 .8rem; }
.harm-meta-head { margin: .2rem 0 0; }
.harm-section { margin: 0 0 2.2rem; }
.harm-section h2.harm-title { font-size: 1.35rem; font-weight: 400; margin: 2.2rem 0 .3rem; }
.harm-ref { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--rubric); margin: 0 0 .3rem; }
.harm-ref a { color: inherit; text-decoration: none; }
.harm-ref a:hover { text-decoration: underline; }
.harm-compl { margin: 1rem 0 0 1.2rem; padding-left: 1rem; border-left: 2px solid var(--rule); font-size: .92em; color: var(--muted); }
.harm-compl .vt a.v { color: var(--muted); }
.harm-compl-label { color: var(--muted); }
.harm-note { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: .6rem 0 0; padding: .4rem .7rem; border-left: 2px dotted var(--rubric); }
.harm-source { font-size: .82rem; margin-top: 2rem; }
.harm .chapter-head h1 { font-size: 1.9rem; }

/* ---- Barre de navigation ---- */
.nav { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--rule); padding: 0 .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { display: none; }
.nav-item { font-family: var(--sans); font-size: .95rem; color: var(--fg); text-decoration: none; padding: .65rem .85rem .55rem; border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: .4em; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; line-height: 1.3; }
.nav-item:hover { text-decoration: none; border-bottom-color: var(--rule); }
.nav-item.is-active { border-bottom-color: var(--rubric); font-weight: 600; }
.nav-item small { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rubric); border: 1px solid var(--rubric); border-radius: 2px; padding: 0 .3em; line-height: 1.5; font-weight: 400; }
.nav-soon { color: var(--muted); cursor: default; }
.nav-soon small { color: var(--muted); border-color: var(--rule); }
.nav-sp { flex: 1 1 auto; }
.nav-right { color: var(--muted); font-size: .88rem; }
.nav-short { display: none; }
@media (max-width: 700px) {
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .nav-sp { flex: 0 0 .5rem; }
}
@media print { .nav { display: none !important; } }
/* ---- Cartes de l'accueil ---- */
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1rem 0 1.6rem; }
@media (max-width: 1000px) { .home-cards { grid-template-columns: repeat(2, 1fr); } }
.home-card { border-top: 2px solid var(--rubric); padding: .6rem 0 0; text-decoration: none; color: inherit; min-width: 0; }
.home-card:hover b { text-decoration: underline; text-decoration-color: var(--rubric); }
.home-card b { font-family: var(--font); font-weight: 500; font-size: 1.1rem; display: block; }
.home-card small { color: var(--muted); font-size: .85rem; display: block; margin-top: .25rem; line-height: 1.4; }
@media (max-width: 700px) { .home-cards { grid-template-columns: 1fr; gap: .8rem; } }
/* ---- Parcours ---- */
.parcours-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.parcours-part { font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rubric); margin: 1.6rem 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule); }
.parcours-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .45rem 0; border-bottom: 1px solid var(--soft); }
.parcours-title { font-family: var(--font); font-size: 1.08rem; text-decoration: none; }
.parcours-title:hover { text-decoration: underline; }
.parcours-ref { font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.parcours-ref a { color: inherit; }

/* ---- Renvois et info-bulles ---- */
.xref { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .15em; text-decoration-thickness: 1px; }
.xref:hover, .xref:focus-visible { text-decoration-color: var(--rubric); }
.xref-tip { position: absolute; z-index: 40; max-width: min(28rem, calc(100vw - 2rem)); background: var(--bg); color: var(--fg); border: 1.5px solid var(--fg); border-radius: 3px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .6rem .8rem .7rem; font-family: var(--font); font-size: .95rem; line-height: 1.45; text-align: left; }
.xref-tip .tip-head { font-family: var(--sans); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rubric); margin: 0 0 .3rem; display: flex; justify-content: space-between; gap: 1rem; }
.xref-tip .tip-head a { color: var(--muted); text-transform: none; letter-spacing: 0; }
.xref-tip p { margin: 0; }
.xref-tip .v { vertical-align: .35em; }
.parcours-jump { font-family: var(--sans); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0 0 .5rem; }
.parcours-jump a { text-decoration: none; }
.parcours-jump a:hover { text-decoration: underline; }
.parcours-jump small { color: var(--muted); }
.parcours-group h2.parcours-part { font-family: var(--sans); font-size: .85rem; }
.parcours-harm a { color: var(--muted); }

/* ---- Flèche flottante « haut de page » ---- */
.to-top { position: fixed; right: calc(1.1rem + env(safe-area-inset-right, 0px)); bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); z-index: 45; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--bg); background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.35); transition: transform .2s, background .2s; }
.to-top svg { display: block; }
.to-top:hover, .to-top:focus-visible { background: var(--rubric); color: #fff; transform: translateY(-2px); }
.to-top[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
.parcours-extra { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.parcours-family { font-family: var(--font); font-size: 1.35rem; font-weight: 400; margin: 0 0 .6rem; }

/* ---- Synopse : les quatre Évangiles côte à côte ---- */
.syn-pills { display: inline-flex; gap: .15rem; vertical-align: middle; margin-left: .4rem; }
.syn-pill { font-family: var(--sans); font-size: .62rem; letter-spacing: .04em; min-width: 1.6em; text-align: center; border: 1px solid var(--rule); border-radius: 2px; color: var(--muted); padding: 0 .2em; line-height: 1.5; }
.syn-pill.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.syn-head { font-family: var(--font); }
.syn-no { font-family: var(--sans); font-size: .72rem; color: var(--muted); display: inline-block; min-width: 2.4em; text-align: right; margin-right: .2em; }
.syn-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; font-family: var(--sans); }
.syn-tabs { display: inline-flex; gap: .3rem; }
.syn-tab { border: 1.5px solid var(--fg); background: transparent; color: var(--fg); border-radius: 3px; padding: .3em .7em; font-family: var(--sans); font-size: .9rem; cursor: default; display: inline-flex; align-items: baseline; gap: .4em; }
.syn-tab small { color: var(--muted); font-size: .72rem; }
.syn-tab.off { border-color: var(--rule); color: var(--muted); border-style: dashed; }
.syn-diff .seg-btn { font-size: .85rem; }
.syn-cols { display: grid; gap: 0 1.6rem; max-width: none; grid-template-columns: repeat(var(--syn-n, 1), minmax(0, 1fr)); }
.syn[data-cols="1"] .syn-cols { --syn-n: 1; max-width: 48rem; }
.syn[data-cols="2"] .syn-cols { --syn-n: 2; }
.syn[data-cols="3"] .syn-cols { --syn-n: 3; }
.syn[data-cols="4"] .syn-cols { --syn-n: 4; }
.syn-col { min-width: 0; padding-top: .2rem; border-top: 2px solid var(--rubric); }
.syn-col-head { font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); font-weight: 600; margin: .4rem 0 .6rem; }
.syn-cols .text, .syn-cols p.p { font-size: calc(var(--size) * .92); }
.syn[data-cols="4"] .syn-cols p.p { font-size: calc(var(--size) * .86); }
.syn-passage { margin: 0 0 1.2rem; }
.syn-passage p.p { text-align: left; hyphens: auto; }
.syn-role { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: 2px; padding: 0 .3em; margin-left: .3em; }
.syn-ajout p.p, .syn-complement p.p { color: var(--muted); }
.syn-legend { font-family: var(--sans); font-size: .8rem; margin-top: .6rem; }
/* Différences : par défaut rien ; 1 = mots propres en couleur ; 2 = mots communs soulignés en plus */
html[data-diff="1"] .syn .c-one, html[data-diff="2"] .syn .c-one, .syn-legend .c-one { color: var(--rubric); }
html[data-diff="2"] .syn .c-all, .syn-legend .c-all { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .15em; text-decoration-thickness: 2px; }
html[data-diff="2"] .syn .c-some, .syn-legend .c-some { font-style: italic; }
@media (max-width: 820px) {
  .syn .syn-cols { grid-template-columns: 1fr; }
  html.js .syn[data-cols="2"] .syn-col:not(.is-active), html.js .syn[data-cols="3"] .syn-col:not(.is-active), html.js .syn[data-cols="4"] .syn-col:not(.is-active) { display: none; }
  .syn-tab { cursor: pointer; }
  .syn-tab[aria-selected="true"] { background: var(--fg); color: var(--bg); }
  .syn-tab[aria-selected="true"] small { color: var(--bg); opacity: .8; }
}
.page:has(.syn) { max-width: none; }
@media print { .syn-bar { display: none; } .syn .syn-cols { grid-template-columns: repeat(var(--syn-n, 1), minmax(0, 1fr)); } }

/* ---- Frise chronologique ---- */
.frise-vue { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin: 0 0 1.4rem; font-family: var(--sans); }
.frise-vue a { display: block; text-decoration: none; border-top: 3px solid var(--rubric); padding: .4rem .2rem 0; color: var(--fg); font-size: .8rem; line-height: 1.25; }
.frise-vue a b { display: block; font-weight: 600; }
.frise-vue a small { color: var(--muted); }
.frise-vue a:hover b { text-decoration: underline; }
@media (max-width: 760px) { .frise-vue { grid-template-columns: repeat(3, 1fr); } }
.frise { list-style: none; margin: 0 0 1rem; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); font-family: var(--sans); }
.frise-item { position: relative; display: grid; grid-template-columns: 9rem 1fr; gap: .6rem; padding: .25rem 0 .25rem .6rem; font-size: .92rem; }
.frise-item::before { content: ""; position: absolute; left: -1.45rem; top: .75rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--rule); }
.frise-item.has-date::before { background: var(--rubric); }
.frise-date { color: var(--rubric); font-size: .8rem; letter-spacing: .02em; padding-top: .15rem; }
.frise-corps a { text-decoration: none; }
.frise-corps a:hover { text-decoration: underline; }
.frise-lieu { display: inline-block; margin-left: .5rem; color: var(--muted); font-size: .8rem; }
.frise-lieu::before { content: "· "; }
.frise-scenes { display: inline-block; margin-left: .5rem; font-size: .75rem; }
.frise-paque { margin: .8rem 0 .4rem -1.2rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); }
.frise-paque span { background: var(--bg); padding: 0 .4rem; }
@media (max-width: 600px) { .frise-item { grid-template-columns: 1fr; gap: 0; } }

/* ---- Carte des lieux ---- */
.carte-grid { display: grid; grid-template-columns: minmax(320px, 1fr) 1fr; gap: 1.5rem 2.5rem; align-items: start; }
@media (max-width: 900px) { .carte-grid { grid-template-columns: 1fr; } }
.carte-box { position: sticky; top: .5rem; max-height: 96vh; overflow: auto; }
@media (max-width: 900px) { .carte-box { position: static; max-height: none; overflow: visible; } }
.carte { width: 100%; height: auto; display: block; background: var(--soft); border: 1px solid var(--rule); font-family: var(--sans); }
.carte-mer { fill: color-mix(in srgb, var(--rubric) 10%, var(--bg)); }
.carte-mer-nom, .carte-eau-nom { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); opacity: .8; }
.carte-eau { fill: none; stroke: color-mix(in srgb, var(--rubric) 35%, var(--bg)); stroke-width: 4; stroke-linecap: round; }
.carte-lac { fill: color-mix(in srgb, var(--rubric) 14%, var(--bg)); stroke: color-mix(in srgb, var(--rubric) 35%, var(--bg)); stroke-width: 2; }
.carte-region { font-size: 20px; letter-spacing: .25em; fill: var(--rubric); opacity: .55; }
.carte-region:hover { opacity: 1; text-decoration: underline; }
.carte-lieu circle { fill: var(--rubric); stroke: var(--bg); stroke-width: 2; }
.carte-lieu text { font-size: 15px; fill: var(--fg); paint-order: stroke; stroke: var(--soft); stroke-width: 3px; stroke-linejoin: round; }
.carte-lieu:hover circle { fill: var(--fg); }
.carte-lieu:hover text { text-decoration: underline; }
.carte-lieu-vide circle { fill: var(--muted); opacity: .5; }
.carte-lieu-vide text { fill: var(--muted); font-size: 13px; }
.carte-liste .lieu { margin: 0 0 1.4rem; padding-top: .3rem; scroll-margin-top: .8rem; }
.carte-liste .lieu h2 { font-size: 1.2rem; font-weight: 400; margin: 0 0 .3rem; border-bottom: 1px solid var(--rule); }
.carte-liste .lieu:target h2 { color: var(--rubric); border-color: var(--rubric); }
.lieu-src { font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: .5rem 0 .15rem; }
.lieu-scenes { font-family: var(--sans); font-size: .88rem; margin: 0; padding-left: 1.2rem; }
.lieu-scenes li { margin: .1rem 0; }
.lieu-scenes a { text-decoration: none; }
.lieu-scenes a:hover { text-decoration: underline; }

.parcours-cards .home-card small .muted { display: block; margin-top: .2rem; }

/* =====================================================================
   Présentation « trois colonnes » (html[data-look="3"])
   Parti pris : la forme au service du fond. Au centre, une colonne de lecture à longueur de ligne confortable ;
   à gauche, où l'on est (table des livres ou sommaire) ; à droite, ce qui accompagne le texte (commentaires qui
   suivent la lecture, outils, progression). Tout se replie ; sous 1100 px, une seule colonne comme d'habitude.
   ===================================================================== */
.brand, .crumbs, .side, .btn-user, .btn-user-form { display: none; }
html[data-look="3"] .btn-user { display: inline-flex; }
html[data-look="3"] .btn-user-form { display: inline; }
.btn-user svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
html[data-look="3"] .nav-right { display: none; }
@media (max-width: 900px) { html[data-look="3"] .btn-user { font-size: 0; gap: 0; } html[data-look="3"] .btn-user svg { width: 1.2rem; height: 1.2rem; } }
.shell { display: contents; }

html[data-look="3"] {
  --chrome: #1f3a4b; --chrome-fg: #f5f2ea; --chrome-line: rgba(245, 242, 234, .38); --chrome-hover: rgba(255, 255, 255, .1);
  --panel: #fbfaf7; --side-l: 16.5rem; --side-r: clamp(19.5rem, 22vw, 27rem); --gutter: clamp(1.25rem, 2.2vw, 2.75rem);
  --read: calc(var(--size) * 46);
}
html[data-look="3"][data-width="1"] { --read: calc(var(--size) * 30); }
html[data-look="3"][data-width="2"] { --read: calc(var(--size) * 36); }
html[data-look="3"][data-width="3"] { --read: calc(var(--size) * 41); }
html[data-look="3"][data-theme="sepia"] { --chrome: #3b3127; --panel: #f8f0df; }
html[data-look="3"][data-theme="sombre"], html[data-look="3"][data-theme="auto"].dark { --chrome: #0f1519; --chrome-fg: #e6e3dc; --panel: #1d1f24; }
@media (prefers-color-scheme: dark) { html[data-look="3"][data-theme="auto"] { --chrome: #0f1519; --chrome-fg: #e6e3dc; --panel: #1d1f24; } }
html[data-look="3"][data-theme="noir-sur-blanc"] { --chrome: #000; --chrome-fg: #fff; --chrome-line: #fff; --panel: #fff; }
html[data-look="3"][data-theme="blanc-sur-noir"] { --chrome: #000; --chrome-fg: #fff; --chrome-line: #fff; --panel: #000; }

/* ---- Bandeau ---- */
html[data-look="3"] body { padding-left: 0; padding-right: 0; }
html[data-look="3"] .top { background: var(--chrome); color: var(--chrome-fg); border-bottom: 1px solid var(--chrome); padding: .65rem var(--gutter); }
html[data-look="3"][data-theme="blanc-sur-noir"] .top { border-bottom-color: #fff; }
html[data-look="3"] .brand { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; margin-right: .75rem; flex: 0 0 auto; }
.brand svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.brand-name { font-family: var(--serif); font-size: 1.18rem; font-weight: 500; line-height: 1.05; letter-spacing: .01em; }
.brand-name small { display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .08em; opacity: .75; margin-top: .15rem; }
html[data-look="3"] .top .btn, html[data-look="3"] .top .seg, html[data-look="3"] .top .version-form select { border-color: var(--chrome-line); color: var(--chrome-fg); background: transparent; }
html[data-look="3"] .top .btn:hover, html[data-look="3"] .top .seg-btn:hover { background: var(--chrome-hover); }
html[data-look="3"] .top .seg-btn { color: inherit; border-right-color: var(--chrome-line); }
html[data-look="3"] .top .seg-btn[aria-pressed="true"] { background: var(--chrome-fg); color: var(--chrome); }
html[data-look="3"] .top .btn-primary { background: var(--chrome-fg); color: var(--chrome); border-color: var(--chrome-fg); }
html[data-look="3"] .top .btn-primary:hover { background: #fff; color: var(--chrome); }
html[data-look="3"] .top select option { color: #1b1a18; background: #fff; }
html[data-look="3"] .goto { position: relative; max-width: 44rem; }
html[data-look="3"] .goto input { background: var(--bg); color: var(--fg); border-color: transparent; border-radius: 6px; min-height: 2.6rem; padding-left: 2.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 1.05rem; background-position: .75rem 50%; }
html[data-look="3"] .goto input:focus { border-color: var(--focus); }
html[data-look="3"] .top :focus-visible { outline-color: var(--chrome-fg); }
@media (max-width: 1280px) {
  html[data-look="3"] .brand-name small { display: none; }
  html[data-look="3"] .brand-name { font-size: 1.02rem; max-width: 7.5rem; }
}
@media (max-width: 600px) {
  html[data-look="3"] .brand-name { display: none; }
  html[data-look="3"] .brand { margin-right: .2rem; }
}

/* ---- Barre des sections et fil d'Ariane ---- */
html[data-look="3"] .nav { padding: 0 calc(var(--gutter) - .7rem); }
html[data-look="3"] .nav-item { padding-left: .7rem; padding-right: .7rem; }
html[data-look="3"] .crumbs { display: block; font-family: var(--sans); font-size: .8rem; color: var(--muted); padding: .7rem var(--gutter) 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .45rem; }
.crumbs li { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--muted); opacity: .7; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--fg); }
.crumbs [aria-current] { color: var(--fg); }

/* ---- Trois colonnes ---- */
html[data-look="3"] .shell { display: block; flex: 1 0 auto; padding: 0 var(--gutter); }
html[data-look="3"] .foot { padding-left: var(--gutter); padding-right: var(--gutter); }
.side-top { display: none; }
@media (min-width: 1100px) {
  html[data-look="3"] .shell { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-r); gap: 0 var(--gutter); align-items: start; }
  html[data-look="3"].side-r-off .shell { grid-template-columns: minmax(0, 1fr) 2.6rem; }
  html[data-look="3"] .shell > .page { max-width: none; margin: 0; min-width: 0; padding-top: 1.1rem; }
  html[data-look="3"] .shell > .page { grid-column: 1; grid-row: 1; }
  html[data-look="3"] .side-r { grid-column: 2; grid-row: 1; }
  html[data-look="3"] .side-r .side-top { display: flex; }
  /* Pages de lecture : la colonne de texte garde une longueur de ligne confortable, centrée entre les deux colonnes. */
  html[data-look="3"] .shell .chapter:not(.is-parallel), html[data-look="3"] .shell .harm { width: auto !important; max-width: var(--read); margin-inline: auto; min-height: 0 !important; }
  html[data-look="3"] body.is-chapter .shell > .page > .chapnav, html[data-look="3"] body.is-harm .shell > .page > .chapnav { max-width: var(--read); margin-inline: auto; }
  html[data-look="3"] .shell .intro-page:not(.syn-toc):not(.carte-page) { max-width: calc(var(--size) * 48); margin-inline: auto; }
  html[data-look="3"] .shell .no-comments { display: none; }
}
@media (min-width: 1360px) {
  html[data-look="3"] .shell { grid-template-columns: var(--side-l) minmax(0, 1fr) var(--side-r); }
  html[data-look="3"].side-l-off .shell { grid-template-columns: 2.6rem minmax(0, 1fr) var(--side-r); }
  html[data-look="3"].side-r-off .shell { grid-template-columns: var(--side-l) minmax(0, 1fr) 2.6rem; }
  html[data-look="3"].side-l-off.side-r-off .shell { grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; }
  html[data-look="3"] .side-l { display: block; grid-column: 1; grid-row: 1; }
  html[data-look="3"] .shell > .page { grid-column: 2; }
  html[data-look="3"] .side-r { grid-column: 3; }
  html[data-look="3"] .side-l .side-top { display: flex; }
  html[data-look="3"]:not(.side-l-off) .btn-books { display: none; }
  html[data-look="3"] body.no-side-l .side-l { display: none; }
  html[data-look="3"] body.no-side-l .shell { grid-template-columns: minmax(0, 1fr) var(--side-r); }
  html[data-look="3"].side-r-off body.no-side-l .shell { grid-template-columns: minmax(0, 1fr) 2.6rem; }
  html[data-look="3"] body.no-side-l .shell > .page { grid-column: 1; }
  html[data-look="3"] body.no-side-l .side-r { grid-column: 2; }
}

/* Colonnes : collées au haut de l'écran pendant la lecture, avec leur propre défilement. */
html[data-look="3"] .side { position: sticky; top: 0; max-height: 100vh; font-family: var(--sans); font-size: .9rem; }
html[data-look="3"] .side-l { overflow: auto; overscroll-behavior: contain; padding: .9rem .2rem 2rem 0; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
html[data-look="3"] .side-r { display: none; }
@media (min-width: 1100px) { html[data-look="3"] .side-r { display: flex; flex-direction: column; height: 100vh; padding: .9rem 0 1rem; } }
html[data-look="3"] .side-r .side-body { display: flex; flex-direction: column; gap: .8rem; flex: 1 1 auto; min-height: 0; }
.side-top { justify-content: flex-end; margin: 0 0 .3rem; }
.side-l .side-top { justify-content: flex-start; }
.side-toggle { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; padding: .3rem .2rem; cursor: pointer; border-radius: 4px; }
.side-toggle:hover { color: var(--fg); background: var(--soft); }
.side-toggle-ico { font-size: 1.15rem; line-height: 1; width: 1.4rem; text-align: center; }
/* Colonne repliée : un simple onglet vertical pour la rouvrir. */
html[data-look="3"].side-l-off .side-l .side-body, html[data-look="3"].side-r-off .side-r .side-body { display: none; }
html[data-look="3"].side-l-off .side-l, html[data-look="3"].side-r-off .side-r { padding-left: 0; padding-right: 0; height: auto; overflow: visible; }
html[data-look="3"].side-l-off .side-l .side-toggle, html[data-look="3"].side-r-off .side-r .side-toggle { flex-direction: column; writing-mode: vertical-rl; padding: .7rem .35rem; border: 1px solid var(--rule); background: var(--panel); color: var(--fg); }
html[data-look="3"].side-l-off .side-l .side-toggle-ico { transform: rotate(90deg) scaleY(-1); }
html[data-look="3"].side-r-off .side-r .side-toggle-ico { transform: rotate(90deg) scaleY(-1); }
html[data-look="3"]:not(.side-l-off) .side-l .side-toggle-label { display: none; }
html[data-look="3"]:not(.side-r-off) .side-r .side-toggle-label { display: none; }

/* ---- Colonne de gauche ---- */
.side-title { display: flex; align-items: center; gap: .5rem; font-family: var(--serif); font-size: 1.12rem; font-weight: 500; margin: 0 0 .7rem; }
.side-title a { text-decoration: none; }
.side-title svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--rubric); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.side-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; margin: 0 0 .6rem; }
.side-tabs button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; padding: .45rem .2rem; cursor: pointer; }
.side-tabs button + button { border-left: 1px solid var(--rule); }
.side-tabs button[aria-selected="true"] { background: var(--chrome); color: var(--chrome-fg); }
.side-books, .side-list { list-style: none; margin: 0; padding: 0; }
.side-book summary { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .3rem .4rem .3rem 1.25rem; cursor: pointer; list-style: none; position: relative; border-radius: 4px; }
.side-book summary::-webkit-details-marker { display: none; }
.side-book summary::before { content: "›"; position: absolute; left: .35rem; top: .2rem; color: var(--muted); transition: transform .15s; }
.side-book[open] > summary::before { transform: rotate(90deg); }
.side-book summary:hover { background: var(--soft); }
.side-count { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.side-book.is-current > summary { color: var(--rubric); font-weight: 600; }
.side-chapters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin: .25rem 0 .6rem 1.25rem; padding: 0; list-style: none; }
.side-chapters a { display: block; text-align: center; padding: .28rem 0; font-size: .78rem; text-decoration: none; border-radius: 3px; font-variant-numeric: tabular-nums; }
.side-chapters a:hover { background: var(--soft); }
.side-chapters a.is-current { background: var(--rubric); color: #fff; font-weight: 600; }
html[data-theme="blanc-sur-noir"] .side-chapters a.is-current { color: #000; }
.side-part { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--rubric); margin: 1rem 0 .3rem; padding-top: .5rem; border-top: 1px solid var(--rule); line-height: 1.35; }
.side-part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.side-link { display: block; padding: .28rem .45rem; border-left: 2px solid transparent; text-decoration: none; line-height: 1.35; border-radius: 0 4px 4px 0; }
a.side-link:hover { background: var(--soft); }
.side-link.is-current { border-left-color: var(--rubric); background: var(--soft); color: var(--rubric); font-weight: 600; }
.side-sub .side-link { padding-left: 1.1rem; font-size: .85rem; color: var(--muted); }
.side-sub .side-link.is-current { color: var(--rubric); }
.side-head { color: var(--muted); font-style: italic; }
.side-no { display: inline-block; min-width: 2.1em; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Colonne de droite ---- */
.sr-block { background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: .75rem .85rem; }
.sr-notes { flex: 1 1 auto; min-height: 14rem; display: flex; flex-direction: column; padding-bottom: .4rem; }
.sr-tools, .sr-progress { flex: 0 0 auto; }
.sr-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--rule); margin: -.15rem 0 .55rem; }
.sr-tab { border: 0; background: none; font: inherit; font-size: .88rem; color: var(--muted); padding: .2rem 0 .45rem; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.sr-tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--rubric); font-weight: 600; }
.sr-count { font-size: .72rem; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.sr-authors .authors { margin: 0 0 .4rem; gap: .3rem; font-size: .75rem; }
.sr-authors .authors-label { display: none; }
.sr-authors .author-btn { min-height: 1.7rem; padding: .1em .5em; }
.sr-follow { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); margin: 0 0 .45rem; cursor: pointer; }
.sr-pane { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative; padding-right: .35rem; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.sr-pane:focus-visible { outline-offset: -2px; }
.sr-pane .note { margin: 0 0 .7rem; padding: .45rem .1rem .3rem .7rem; background: transparent; border-left: 2px solid var(--rule); font-size: .86rem; line-height: 1.5; max-width: none; transition: background-color .2s, border-color .2s; }
.sr-pane .note.sr-on { border-left-color: var(--rubric); background: var(--soft); }
.sr-pane .note .note-date { display: none; }
.sr-pane .note-head { cursor: pointer; }
.sr-pane .note-head:hover .note-ref { text-decoration: underline; }
.sr-pane .note.folded .note-body::after { background: linear-gradient(to bottom, transparent, var(--panel)); }
.sr-pane .note.sr-on.folded .note-body::after { background: linear-gradient(to bottom, transparent, var(--soft)); }
.sr-fn { display: block; margin: 0 0 .5rem; padding: .3rem .1rem .3rem .65rem; border-left: 2px solid var(--rule); font-size: .82rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.sr-fn.sr-on { border-left-color: var(--rubric); color: var(--fg); background: var(--soft); }
.sr-fn .fn-ref { white-space: nowrap; }
.sr-empty { font-size: .85rem; color: var(--muted); margin: .4rem 0; line-height: 1.45; }
.sr-lecture { display: none; font-size: .85rem; color: var(--muted); margin: .2rem 0; line-height: 1.5; }
html[data-mode="lecture"] .sr-notes .sr-pane, html[data-mode="lecture"] .sr-notes .sr-tabs, html[data-mode="lecture"] .sr-notes .sr-follow, html[data-mode="lecture"] .sr-notes .sr-authors { display: none; }
html[data-mode="lecture"] .sr-lecture { display: block; }
html[data-mode="lecture"] .sr-notes { flex: 0 0 auto; min-height: 0; }
.vt.sr-hover { background: var(--hl); box-shadow: 0 0 0 2px var(--hl); border-radius: 2px; }

.sr-tools summary { font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sr-tools summary::-webkit-details-marker { display: none; }
.sr-tools summary::after { content: "›"; color: var(--muted); transform: rotate(90deg); transition: transform .15s; font-size: 1.1rem; }
.sr-tools:not([open]) summary::after { transform: rotate(0); }
.sr-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .5rem; font-size: .82rem; color: var(--muted); }
.sr-row .seg { border-width: 1px; border-color: var(--rule); border-radius: 5px; flex: 0 0 auto; }
.sr-row .seg-btn { min-height: 1.95rem; padding: .15em .5em; border-right: 1px solid var(--rule); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; }
.sr-row .seg output { border-right: 1px solid var(--rule); padding: .2em .4em; min-width: 3.6em; font-size: .78rem; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; }
.sr-row .seg-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.sr-row .sr-wj { color: var(--rubric); }
.sr-row .sr-wj[aria-pressed="true"] { color: var(--bg); background: var(--rubric); }
svg.i { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.i .fill { fill: currentColor; stroke: none; }
.sr-tools-foot { margin: .65rem 0 0; font-size: .78rem; color: var(--muted); }
.sr-tools-foot .link-btn, .sr-actions .link-btn, .sr-lecture .link-btn { font-size: inherit; }

.sr-progress p { margin: 0; }
.sr-prog-title { font-weight: 600; font-size: .9rem; }
.sr-prog-nav { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: .3rem 0 .1rem; font-size: .82rem; color: var(--muted); }
.sr-arrow { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; font-size: 1.1rem; color: var(--fg); }
.sr-arrow:hover { border-color: var(--fg); }
.sr-arrow.is-off { opacity: .35; }
.sr-bar { height: 4px; background: var(--soft); border-radius: 2px; overflow: hidden; margin: .35rem 0 .55rem; }
.sr-bar span { display: block; height: 100%; width: 0; background: var(--rubric); }
.sr-bar-page span { background: var(--muted); }
.sr-prog-page { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.sr-actions { font-size: .78rem; color: var(--muted); margin-top: .1rem !important; }

/* Écrans peu hauts : les outils se replient d'eux-mêmes (le script ferme le bloc) pour laisser la place aux commentaires. */
@media print {
  html[data-look="3"] .side, html[data-look="3"] .crumbs, html[data-look="3"] .brand { display: none !important; }
  html[data-look="3"] .shell { display: block !important; padding: 0; }
  html[data-look="3"] .top { background: none; color: inherit; }
}
@media (prefers-reduced-motion: reduce) { .side-book summary::before, .sr-pane .note, .sr-tools summary::after { transition: none; } }

/* ---- Plan de lecture en 15 jours ---- */
.plan-status { margin: 0 0 1.5rem; padding: .9rem 1rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--soft); font-family: var(--sans); }
.plan-status-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; }
.plan-count { margin: 0; font-size: .95rem; }
.plan-count b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.plan-bar { margin: .7rem 0 0; height: 6px; }
.plan-bar span { background: var(--rubric); }
.plan-reset { margin: .5rem 0 0; font-size: .8rem; }
.plan-days { list-style: none; margin: 0; padding: 0; }
.plan-day { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .2rem 1rem; align-items: start; padding: .9rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 1rem; }
.plan-num { width: 2.2rem; height: 2.2rem; border: 1.5px solid var(--rule); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-day.is-next .plan-num { border-color: var(--rubric); color: var(--rubric); }
.plan-day.is-done .plan-num { background: var(--rubric); border-color: var(--rubric); color: #fff; }
html[data-theme="blanc-sur-noir"] .plan-day.is-done .plan-num { color: #000; }
.plan-body h2 { font-size: 1.2rem; font-weight: 500; margin: .15rem 0 .25rem; }
.plan-body h2 a { text-decoration: none; }
.plan-body h2 a:hover { text-decoration: underline; }
.plan-body p { margin: 0 0 .25rem; }
.plan-meta { font-family: var(--sans); font-size: .8rem; color: var(--muted); }
.plan-day.is-done .plan-body { color: var(--muted); }
.plan-check { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--sans); font-size: .85rem; padding: .35rem .6rem; border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; white-space: nowrap; margin-top: .15rem; }
.plan-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--rubric); }
.plan-day.is-done .plan-check { border-color: var(--rubric); color: var(--rubric); }
@media (max-width: 560px) { .plan-day { grid-template-columns: 2.4rem 1fr; } .plan-check { grid-column: 2; justify-self: start; } }
.plan-mark { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin: 1.6rem 0 .6rem; padding: .45rem .75rem; border-left: 3px solid var(--rubric); background: var(--soft); }
.plan-mark a { color: var(--rubric); }
.plan-mark-end { margin: 1.4rem 0 2rem; padding: .8rem 1rem; }
.plan-mark-end p { margin: 0 0 .5rem; }
.plan-mark-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 !important; }
html[data-mode="lecture"] .plan-mark-start { display: none; }

/* ---- Index des personnages ---- */
.pers-tools { margin: 0 0 .8rem; }
.pers-filter { width: 100%; max-width: 26rem; border: 1.5px solid var(--rule); background: var(--bg); padding: .5em .8em; border-radius: 4px; min-height: 2.5rem; font-family: var(--sans); }
.pers-filter:focus { border-color: var(--fg); }
.pers-group { margin: 1.6rem 0 0; }
details.pers { border-bottom: 1px solid var(--rule); }
details.pers > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .6rem 0 .6rem 1.2rem; position: relative; }
details.pers > summary::-webkit-details-marker { display: none; }
details.pers > summary::before { content: "›"; position: absolute; left: .2rem; top: .55rem; color: var(--muted); transition: transform .15s; }
details.pers[open] > summary::before { transform: rotate(90deg); }
details.pers > summary:hover .pers-name { text-decoration: underline; text-decoration-color: var(--rubric); }
.pers-name { font-family: var(--font); font-size: 1.12rem; }
.pers-count { font-family: var(--sans); font-size: .78rem; color: var(--muted); text-align: right; white-space: nowrap; align-self: center; }
.pers-desc { grid-column: 1 / -1; font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.pers-scenes { list-style: none; margin: 0 0 .9rem 1.2rem; padding: 0; font-family: var(--sans); font-size: .88rem; }
.pers-scenes li { padding: .25rem 0; border-top: 1px dashed var(--rule); }
.pers-scenes a { text-decoration: none; }
.pers-scenes > li > a:hover { text-decoration: underline; }
.pers-refs { display: block; margin-left: 2.4em; font-size: .78rem; color: var(--muted); }
.pers-refs a { color: inherit; }
@media (max-width: 560px) { details.pers > summary { grid-template-columns: 1fr; } .pers-count { text-align: left; } }

/* ---- Barre des sections : libellés nets, survol franc (19/10/2026) ---- */
.nav { gap: .15rem; }
.nav-item { color: var(--fg); font-weight: 500; letter-spacing: .005em; border-radius: 4px 4px 0 0; transition: background-color .15s, color .15s, border-color .15s; }
.nav-item:hover, .nav-item:focus-visible { background: var(--soft); color: var(--rubric); border-bottom-color: var(--rubric); text-decoration: none; }
.nav-item.is-active { color: var(--fg); font-weight: 650; border-bottom-color: var(--rubric); }
.nav-item.is-active:hover { color: var(--rubric); }
.nav-right { color: var(--fg); font-weight: 500; opacity: .85; }
.nav-right:hover { opacity: 1; }
html[data-look="3"] .nav { background: color-mix(in srgb, var(--panel) 70%, var(--bg)); border-bottom: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .nav-item { transition: none; } }

/* ---- Photos d'en-tête (public/assets/img/hero/<page>.webp, 2400 x 800) ---- */
.chapter-head.has-hero { position: relative; isolation: isolate; min-height: 11.5rem; padding-right: min(38%, 26rem); }
.chapter-head.has-hero::after { content: ""; position: absolute; z-index: -1; top: -1.2rem; right: 0; bottom: -.6rem; width: min(58%, 44rem);
  background: var(--hero) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%); mask-composite: intersect;
  border-radius: 0 6px 0 0; }
html[data-theme="sombre"] .chapter-head.has-hero::after, html[data-theme="auto"].dark .chapter-head.has-hero::after { opacity: .4; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .chapter-head.has-hero::after { opacity: .4; } }
html[data-theme="noir-sur-blanc"] .chapter-head.has-hero::after, html[data-theme="blanc-sur-noir"] .chapter-head.has-hero::after { display: none; }
@media (max-width: 700px) {
  .chapter-head.has-hero { padding-right: 0; padding-top: 7.5rem; min-height: 0; }
  .chapter-head.has-hero::after { top: 0; left: 0; right: 0; bottom: auto; height: 7rem; width: auto; border-radius: 6px;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
}
@media print { .chapter-head.has-hero::after { display: none; } .chapter-head.has-hero { padding: 0; min-height: 0; } }

/* ---- Harmonie : commentaires chargés au fil de la lecture ---- */
html[data-mode="lecture"] .harm-notes { display: none; }

/* ---- Harmonie : commentaires repliés sous chaque passage ---- */
.harm-notes { margin: .15rem 0 1.2rem; font-family: var(--sans); }
.harm-notes > summary { list-style: none; cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; position: relative;
  padding: .35rem .75rem .35rem 1.55rem; border: 1px solid var(--rule); border-radius: 4px; font-size: .82rem; color: var(--muted); background: transparent; transition: border-color .15s, color .15s, background-color .15s; }
.harm-notes > summary::-webkit-details-marker { display: none; }
.harm-notes > summary::before { content: "›"; position: absolute; left: .6rem; top: .22rem; font-size: 1.05rem; color: var(--rubric); transition: transform .15s; }
.harm-notes[open] > summary::before { transform: rotate(90deg); }
.harm-notes > summary:hover { border-color: var(--rubric); background: var(--soft); }
.harm-notes[open] > summary { border-color: var(--rubric); }
.harm-notes-sum { color: var(--fg); font-weight: 600; }
.harm-notes-by { font-size: .78rem; }
.harm-notes[data-state="load"] .harm-notes-sum::after { content: " · chargement…"; font-weight: 400; color: var(--muted); }
html.js .harm-notes-nojs { display: none; }
.harm-notes-body { margin: .7rem 0 0; padding-left: .2rem; max-width: 50rem; }
.harm-notes-body .note { max-width: none; margin: 0 0 .8rem; }
.harm-notes-end { margin: .2rem 0 0; font-size: .8rem; }
html.sr-active .harm-notes { display: none; }
@media (prefers-reduced-motion: reduce) { .harm-notes > summary, .harm-notes > summary::before { transition: none; } }

/* =====================================================================
   Socle commun (20/10/2026) : un même style pour les deux présentations.
   Bandeau bleu nuit et marque, fil d'Ariane, menu au survol franc, en-têtes illustrés, cartes et sommaires
   dans l'esprit des maquettes. « Trois colonnes » n'ajoute plus que les colonnes.
   ===================================================================== */
:root { --chrome: #1f3a4b; --chrome-fg: #f5f2ea; --chrome-line: rgba(245, 242, 234, .38); --chrome-hover: rgba(255, 255, 255, .1);
  --panel: #fbfaf7; --gutter: clamp(1rem, 2.2vw, 2.75rem); --radius: 6px; }
html[data-theme="sepia"] { --chrome: #3b3127; --panel: #f8f0df; }
html[data-theme="sombre"], html[data-theme="auto"].dark { --chrome: #0f1519; --chrome-fg: #e6e3dc; --panel: #1d1f24; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --chrome: #0f1519; --chrome-fg: #e6e3dc; --panel: #1d1f24; } }
html[data-theme="noir-sur-blanc"] { --chrome: #000; --chrome-fg: #fff; --chrome-line: #fff; --panel: #fff; }
html[data-theme="blanc-sur-noir"] { --chrome: #000; --chrome-fg: #fff; --chrome-line: #fff; --panel: #000; }

/* ---- Bandeau ---- */
html body { padding-left: 0; padding-right: 0; }
html .top { background: var(--chrome); color: var(--chrome-fg); border-bottom: 1px solid var(--chrome); padding: .65rem var(--gutter); }
html[data-theme="blanc-sur-noir"] .top { border-bottom-color: #fff; }
html .brand { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; margin-right: .75rem; flex: 0 0 auto; }
html .top .btn, html .top .seg, html .top .version-form select { border-color: var(--chrome-line); color: var(--chrome-fg); background: transparent; border-radius: var(--radius); }
html .top .btn:hover, html .top .seg-btn:hover { background: var(--chrome-hover); }
html .top .seg-btn { color: inherit; border-right-color: var(--chrome-line); }
html .top .seg-btn[aria-pressed="true"] { background: var(--chrome-fg); color: var(--chrome); }
html .top .btn-primary { background: var(--chrome-fg); color: var(--chrome); border-color: var(--chrome-fg); }
html .top .btn-primary:hover { background: #fff; color: var(--chrome); }
html .top select option { color: #1b1a18; background: #fff; }
html .goto { position: relative; max-width: 44rem; }
html .goto input { background: var(--bg); color: var(--fg); border-color: transparent; border-radius: var(--radius); min-height: 2.6rem; padding-left: 2.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 1.05rem; background-position: .75rem 50%; }
html .goto input:focus { border-color: var(--focus); }
html .top :focus-visible { outline-color: var(--chrome-fg); }
html .btn-user { display: inline-flex; }
html .btn-user-form { display: inline; }
@media (max-width: 1280px) { html .brand-name small { display: none; } html .brand-name { font-size: 1.02rem; max-width: 7.5rem; } }
@media (max-width: 900px) { html .top .btn-user { font-size: 0; gap: 0; padding-left: .55em; padding-right: .55em; } html .top .btn-user svg { width: 1.2rem; height: 1.2rem; } }
@media (max-width: 600px) { html .brand-name { display: none; } html .brand { margin-right: .2rem; } html .top .btn-user, html .top .btn-user-form { display: none; } }

/* ---- Barre des sections : soulignement rouge qui se déploie au survol ---- */
html .nav { padding: 0 calc(var(--gutter) - .7rem); gap: 0; background: var(--panel); border-bottom: 1px solid var(--rule); }
html .nav-item { position: relative; border-bottom: 0; border-radius: 0; padding: .78rem .8rem .72rem; color: var(--fg); font-weight: 500; background: transparent; transition: color .15s, background-color .15s; }
html .nav-item::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--rubric);
  transform: scaleX(0); transform-origin: 50% 100%; transition: transform .2s ease; }
html .nav-item:hover, html .nav-item:focus-visible { color: var(--rubric); background: color-mix(in srgb, var(--rubric) 7%, transparent); border-bottom: 0; }
html .nav-item:hover::after, html .nav-item:focus-visible::after, html .nav-item.is-active::after { transform: scaleX(1); }
html .nav-item.is-active { color: var(--fg); font-weight: 650; }
html .nav-item.is-active:hover { color: var(--rubric); }
html .nav-right { display: none; }

/* ---- Fil d'Ariane, page, pied ---- */
html .crumbs { display: block; font-family: var(--sans); font-size: .8rem; color: var(--muted); padding: .75rem var(--gutter) 0; }
html:not([data-look="3"]):not([data-width="4"]) .crumbs ol { max-width: 46rem; margin-inline: auto; }
html .page { padding-inline: var(--gutter); }
html[data-look="3"] .shell > .page { padding-inline: 0; }
html .foot { padding-left: var(--gutter); padding-right: var(--gutter); }
html .btn, html .seg { border-radius: var(--radius); }

/* ---- En-têtes de page ---- */
.chapter-head .eyebrow { letter-spacing: .14em; font-size: .74rem; margin-bottom: .55rem; }
.intro-page > .chapter-head h1 { font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem); letter-spacing: -.01em; line-height: 1.1; }
@media (min-width: 701px) { .intro-page > .chapter-head.has-hero { min-height: 12.5rem; padding-top: .4rem; } }
/* Liens sous le titre : des onglets discrets, soulignés au survol (les « · » du texte sont masqués) */
.intro-nav { display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; font-size: 0 !important; margin: .9rem 0 0; }
.intro-nav a { position: relative; font-family: var(--sans); font-size: .88rem; color: var(--fg); text-decoration: none; padding: .3rem 0 .35rem; transition: color .15s; }
.intro-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rubric); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s ease; }
.intro-nav a:hover { color: var(--rubric); }
.intro-nav a:hover::after { transform: scaleX(1); }
.intro-nav a::before { content: "›"; color: var(--rubric); margin-right: .35rem; font-weight: 600; }

/* ---- Cartes (accueil, parcours) ---- */
.home-cards { gap: 1rem; }
.home-card { display: block; border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: var(--radius); padding: .95rem 1.1rem 1.05rem; background: var(--panel);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.home-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 20, 20, .08); border-color: color-mix(in srgb, var(--rubric) 45%, var(--rule)); border-top-color: var(--rubric); }
.home-card:hover b { text-decoration: none; color: var(--rubric); }
.home-card b::after { content: " →"; color: var(--rubric); opacity: 0; margin-left: -.2rem; transition: opacity .18s, margin .18s; }
.home-card:hover b::after { opacity: 1; margin-left: 0; }
html[data-theme="sombre"] .home-card:hover, html[data-theme="auto"].dark .home-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }

/* ---- Titres de parties : petite capitale rouge et filet ---- */
.harm-part { display: flex; align-items: center; gap: .8rem; border-top: 0; padding-top: 0; margin: 2.4rem 0 .6rem; font-size: .8rem; letter-spacing: .1em; }
.harm-part::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rubric); opacity: .35; }

/* ---- Sommaire de l'harmonie : numéro, titre, lieu et date, référence, chevron ---- */
.harm-toc { counter-reset: hchap; }
.harm-toc .harm-toc-chapter { counter-increment: hchap; position: relative; margin: 0; padding: .6rem 2.2rem .6rem 3.1rem; border-bottom: 1px solid var(--rule); border-radius: 4px; transition: background-color .15s; }
.harm-toc .harm-toc-chapter::before { content: counter(hchap); position: absolute; left: .45rem; top: .62rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--rubric); color: var(--bg); font: 600 .76rem/1 var(--sans); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.harm-toc .harm-toc-chapter::after { content: "›"; position: absolute; right: .7rem; top: .55rem; font-size: 1.25rem; color: var(--muted); transition: transform .15s, color .15s; }
.harm-toc .harm-toc-chapter:hover { background: var(--soft); }
.harm-toc .harm-toc-chapter:hover::after { color: var(--rubric); transform: translateX(3px); }
.harm-toc .harm-toc-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; font-size: 1.14rem; }
.harm-toc .harm-toc-title > a { font-family: var(--font); }
.harm-toc .harm-toc-title > a:hover { color: var(--rubric); text-decoration: none; }
.harm-toc .harm-toc-meta { margin-left: 0; }
.harm-toc-ref { margin-left: auto; font-family: var(--sans); font-size: .76rem; color: var(--muted); background: var(--soft); border: 1px solid var(--rule); border-radius: 999px; padding: .08rem .6rem; white-space: nowrap; }
.harm-toc .harm-toc-chapter:hover .harm-toc-ref { background: var(--bg); }
.harm-toc .harm-toc-scenes { padding-left: 0; margin-top: .35rem; }
.harm-toc .harm-toc-scenes a:hover { color: var(--rubric); text-decoration: none; }
@media (max-width: 600px) { .harm-toc .harm-toc-chapter { padding-right: 1.6rem; } .harm-toc-ref { margin-left: 0; } }
/* Sommaire de la synopse : même ligne, sans numéro rond (les sections ont déjà leur numéro) */
.syn-toc .harm-toc-chapter { margin: 0; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); border-radius: 4px; transition: background-color .15s; }
.syn-toc .harm-toc-chapter:hover { background: var(--soft); }
.syn-toc .harm-toc-title > a:hover { color: var(--rubric); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html .nav-item::after, .intro-nav a::after, .home-card, .home-card b::after, .harm-toc .harm-toc-chapter::after { transition: none; }
  .home-card:hover { transform: none; }
}

/* Accueil : même en-tête illustré que les autres pages */
.home > .chapter-head .home-title { font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem); margin: 0 0 .5rem; }
@media (min-width: 701px) { .home > .chapter-head.has-hero { min-height: 11rem; } }
.home-lead { max-width: 34rem; margin: 0; }

/* =====================================================================
   Carte dessinée (0.6.6) : fond fourni, lieux et trajets posés par coordonnées.
   Les couleurs ne suivent pas le thème : le dessin, lui, reste clair.
   ===================================================================== */
.carte.carte-fond-dessin { background: #e9dcc0; border-color: var(--rule); border-radius: var(--radius); font-family: var(--font); }
.carte-fond-dessin .carte-eau-nom { fill: #2f5f7a; opacity: .75; font-style: italic; letter-spacing: .12em; text-transform: none; }
.carte-fond-dessin .carte-region { fill: #6b2a1c; opacity: .5; letter-spacing: .3em; font-family: var(--sans); }
.carte-fond-dessin .carte-region:hover { opacity: .95; }
.carte-fond-dessin .carte-lieu circle { fill: #9b2c21; stroke: #fbf4e4; }
.carte-fond-dessin .carte-lieu text { fill: #2b2118; stroke: #f6ecd6; font-weight: 600; }
.carte-fond-dessin .carte-lieu:hover circle { fill: #2b2118; }
.carte-fond-dessin .carte-lieu-vide circle { fill: #6d6252; opacity: .6; }
.carte-fond-dessin .carte-lieu-vide text { fill: #6d6252; }
.carte-lieux, .carte-region { transition: opacity .2s; }
.carte.has-trajet .carte-lieux { opacity: .45; }
.carte.has-trajet .carte-region { opacity: .25; }
/* Trajets (style du calque reçu : rouge sombre, flèches, lieux numérotés) */
.carte .trajet { display: none; }
.carte .trajet.is-on { display: inline; }
.trajet-ligne { fill: none; stroke: #8a2222; stroke-linecap: round; stroke-linejoin: round; }
.trajet-fleche { fill: #8a2222; stroke: #fbf4e4; stroke-width: 1.5; }
.trajet-num circle { fill: #8a2222; stroke: #fbf4e4; stroke-width: 3; }
.trajet-num text { fill: #fff; font-family: var(--sans); font-weight: 700; }
/* Barre des trajets */
.trajets-bar { display: none; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem; font-family: var(--sans); scroll-margin-top: .5rem; }
html.js .trajets-bar { display: flex; }
.trajets-label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
.trajet-btn { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .86rem; color: var(--fg); background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; padding: .32rem .85rem .32rem .4rem; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.trajet-btn[data-trajet=""] { padding-left: .85rem; }
.trajet-btn-no { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--soft); color: var(--rubric); font-weight: 700; font-size: .74rem; }
.trajet-btn:hover { border-color: var(--rubric); color: var(--rubric); }
.trajet-btn[aria-pressed="true"] { background: var(--rubric); border-color: var(--rubric); color: var(--bg); }
.trajet-btn[aria-pressed="true"] .trajet-btn-no { background: var(--bg); color: var(--rubric); }
html[data-theme="blanc-sur-noir"] .trajet-btn[aria-pressed="true"] { color: #000; }
/* Légende du trajet */
.trajet-legende { border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: var(--radius); background: var(--panel); padding: .9rem 1.1rem 1rem; margin: 0 0 1.6rem; }
.trajet-legende h2 { font-size: 1.3rem; font-weight: 400; margin: 0 0 .6rem; }
.trajet-etapes { list-style: none; margin: 0; padding: 0; }
.trajet-etapes li { position: relative; padding: .3rem 0 .3rem 2.2rem; border-bottom: 1px dotted var(--rule); font-size: .98rem; }
.trajet-etapes li:last-child { border-bottom: 0; }
.trajet-pastille { position: absolute; left: 0; top: .32rem; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #8a2222; color: #fff; font: 700 .74rem/1.55rem var(--sans); text-align: center; }
.trajet-style { display: inline-block; width: 1.8rem; height: 0; vertical-align: middle; margin-left: .3rem; border-top: 3px dotted #8a2222; }
.trajet-style-tirets { border-top-style: dashed; }
.trajet-nav { display: flex; justify-content: space-between; margin: .7rem 0 0; font-family: var(--sans); font-size: .84rem; }
@media (prefers-reduced-motion: reduce) { .carte-lieux, .carte-region, .trajet-btn { transition: none; } }
.trajet-rappel { stroke: #8a2222; fill: none; }
.trajet-point { fill: #8a2222; stroke: #fbf4e4; stroke-width: 2; }
.trajet-hors { fill: #8a2222; font-weight: 700; font-style: italic; paint-order: stroke; stroke: #f6ecd6; stroke-linejoin: round; }

/* =====================================================================
   Refonte du 20/10/2026 : quatre portes d'entrée, accueil en trois choix, confort de lecture.
   - En-tête : marque, « Lire la Bible · Vie de Jésus · Étudier · Explorer » (panneau à quatre colonnes),
     recherche, Affichage, compte. Téléphone : un bouton « Menu » explicite, plus de barre qui défile.
   - Barre de lecture (chapitres, harmonie, synopse) : version, Lecture / Étude, Commenter.
   - Lecture : 70 signes environ par ligne par défaut, alignement à gauche, 19 px sur ordinateur, interligne 1,65,
     plancher de 14 px pour les notes et références.
   ===================================================================== */

/* ---------- Lecture ---------- */
:root { --lh: 1.65; }
html[data-lh="1"] { --lh: 1.45; } html[data-lh="2"] { --lh: 1.65; } html[data-lh="3"] { --lh: 1.85; }
@media (min-width: 700px) {
  html[data-size="1"] { --size: 17px; } html[data-size="2"] { --size: 18px; } html[data-size="3"] { --size: 19px; } html[data-size="4"] { --size: 21px; }
  html[data-size="5"] { --size: 23px; } html[data-size="6"] { --size: 25px; } html[data-size="7"] { --size: 28px; }
}
.text p, .intro-text p, .note p, .harm-text p { text-align: left; }
.text, .intro-text { hyphens: manual; -webkit-hyphens: manual; }

/* Plancher de lisibilité : notes, références, métadonnées (14 px au moins) */
.foot, .book-meta, .fallback, .intro-source, .intro-table, .intro-figure figcaption, .panel-hint, .fn.open .fn-body,
.no-comments, .note-link, .note-actions, .authors, .note .note-more, .hit-ref, .panel-foot, .tab, .harm-meta, .harm-ref,
.harm-note, .harm-source, .parcours-ref, .home-card small, .syn-legend, .syn-col-head, .frise-vue a, .frise-date, .frise-lieu,
.frise-scenes, .frise-paque, .sr-fn, .sr-row, .sr-prog-nav, .sr-empty, .sr-lecture, .harm-notes > summary { font-size: .875rem; }
.note, .sr-pane .note { font-size: .9375rem; }
@media (min-width: 1100px) {
  html[data-mode="etude"] .chapter:not(.is-parallel) .note.in-margin { font-size: .875rem; }
  html[data-mode="etude"] .chapter:not(.is-parallel) .fn-body.in-margin { font-size: .875rem; }
}
.syn-no, .harm-toc-meta, .side-chapters a, .sr-count, .side-count, .note-head, .existing-note .note-head { font-size: .8125rem; }

/* ---------- En-tête ---------- */
html .top { position: relative; display: block; padding: .55rem var(--gutter); z-index: 50; }
html .top-row { display: flex; flex-wrap: nowrap; align-items: center; gap: .6rem; }
html .brand { margin-right: .4rem; }
html .brand-name { display: inline-flex; flex-direction: column; line-height: 1.1; }
@media (max-width: 1280px) { html .brand-name small { display: none; } html .brand-name { max-width: none; } }
@media (max-width: 600px) { html .brand-name { display: inline-flex; font-size: .98rem; } html .brand { margin-right: 0; } }
@media (max-width: 380px) { html .brand-name { font-size: .9rem; } }

.mnav { flex: 1 1 auto; min-width: 0; display: flex; }
.mnav-top { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.mnav-btn, .mnav-toggle { position: relative; display: inline-flex; align-items: center; gap: .45rem; background: transparent; border: 0; color: var(--chrome-fg);
  font: 500 .98rem/1.2 var(--sans); padding: .6rem .8rem; border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: background-color .15s; }
.mnav-btn::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; background: currentColor; transform: scaleX(0); transition: transform .2s ease; }
.mnav-btn:hover, .mnav-btn[aria-expanded="true"], .mnav-toggle:hover, .mnav-toggle[aria-expanded="true"] { background: var(--chrome-hover); }
.mnav-btn:hover::after, .mnav-btn.is-active::after, .mnav-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.mnav-btn.is-active { font-weight: 650; }
.mnav-toggle { display: none; border: 1px solid var(--chrome-line); }
.mnav-toggle svg, .icon-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.mnav-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); color: var(--fg); border-bottom: 1px solid var(--rule);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14); padding: 1.4rem var(--gutter) 1.2rem; }
.mnav.is-open .mnav-panel { display: block; }
.mnav-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem 1.6rem; max-width: 76rem; margin: 0 auto; }
.mnav-col h2 { font: 700 .95rem/1.3 var(--sans); margin: 0 0 .5rem; padding-bottom: .45rem; border-bottom: 2px solid var(--rule); color: var(--fg); }
.mnav-col.is-hot h2 { border-bottom-color: var(--rubric); color: var(--rubric); }
.mnav-col ul { list-style: none; margin: 0; padding: 0; }
.mnav-col a { display: block; padding: .38rem 0; font: 400 .95rem/1.35 var(--sans); color: var(--fg); text-decoration: none; border-radius: 3px; }
.mnav-col a:hover { color: var(--rubric); text-decoration: underline; text-underline-offset: 3px; }
.mnav-col a[aria-current="page"] { color: var(--rubric); font-weight: 650; }
.mnav-foot { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; max-width: 70rem; margin: 1.1rem auto 0; padding-top: .8rem; border-top: 1px solid var(--rule); font: .9rem var(--sans); }
.mnav-foot a, .mnav-foot .link-btn { color: var(--muted); }
.mnav-foot a:hover, .mnav-foot .link-btn:hover { color: var(--rubric); }

/* Recherche et icônes */
html .goto { flex: 0 1 19rem; max-width: 19rem; }
html .goto .btn { display: none; }
.top-icons { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.top-icons form { display: inline; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.6rem; height: 2.6rem; padding: 0 .55rem; border: 1px solid var(--chrome-line);
  border-radius: var(--radius); background: transparent; color: var(--chrome-fg); text-decoration: none; cursor: pointer; font: 500 .92rem var(--sans); }
.icon-btn:hover { background: var(--chrome-hover); }
.icon-btn.is-on { background: var(--chrome-fg); color: var(--chrome); }
.js-search-toggle { display: none; }
@media (max-width: 1420px) {
  html .goto { display: none; }
  .js-search-toggle { display: inline-flex; }
  .top.search-open .top-row { flex-wrap: wrap; }
  .top.search-open .goto { display: flex; order: 10; flex: 1 0 100%; max-width: none; margin-top: .3rem; }
  .top.search-open .goto .btn { display: inline-flex; background: var(--chrome-fg); color: var(--chrome); border-color: var(--chrome-fg); }
}
@media (max-width: 1020px) { .icon-text { display: none; } }

/* Téléphone et tablette : « Menu » explicite, panneau en colonnes empilées (seuil relevé avec la cinquième porte, 0.8.3) */
@media (max-width: 1160px) {
  .mnav { flex: 0 0 auto; margin-left: auto; order: 2; }
  .top-icons { order: 3; }
  .mnav-top { display: none; }
  .mnav-toggle { display: inline-flex; }
  .mnav-panel { max-height: calc(100vh - 4rem); overflow-y: auto; padding-top: 1rem; }
  .mnav-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mnav-col a { padding: .55rem 0; }
}
@media (max-width: 520px) {
  .mnav-cols { grid-template-columns: 1fr; gap: 1rem; }
  .mnav-toggle span { display: none; }
  .mnav-toggle { min-width: 2.6rem; height: 2.6rem; justify-content: center; padding: 0; }
  .top-icons { gap: .25rem; }
}

/* ---------- Barre de lecture ---------- */
.readbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .5rem var(--gutter); background: var(--panel); border-bottom: 1px solid var(--rule); font-family: var(--sans); }
.readbar .btn, .readbar .seg-btn, .readbar select { min-height: 2.4rem; font-size: .92rem; }
.readbar .seg { border-color: var(--rule); }
.readbar .seg-btn { border-right-color: var(--rule); }
.readbar .version-form select { border-color: var(--rule); }
.readbar-books { font-weight: 600; }
.readbar .js-comment-new { margin-left: auto; }
/* Mode Lecture : la barre s'efface, le texte domine */
html[data-mode="lecture"] .readbar { background: transparent; border-bottom-color: transparent; }
html[data-mode="lecture"] .readbar-etude { display: none; }
@media (max-width: 520px) { .readbar { padding-block: .4rem; } .readbar .btn, .readbar .seg-btn, .readbar select { padding-inline: .55em; } }

/* ---------- Accueil : trois choix ---------- */
.home .chapter-head { margin-bottom: 1.2rem; }
.home-title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem); }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 0 0 1rem; }
.choice { position: relative; display: flex; flex-direction: column; gap: .55rem; border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: var(--radius); background: var(--panel); padding: 1.1rem 1.2rem 1.2rem; }
.choice h2 { font-size: 1.3rem; font-weight: 500; margin: 0; padding-right: 2.2rem; }
.choice-num { position: absolute; top: .9rem; right: 1rem; margin: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rubric); color: var(--bg); font: 700 .9rem/1.9rem var(--sans); text-align: center; }
.choice-text { margin: 0; color: var(--muted); font-size: .98rem; flex: 1 0 auto; }
.choice-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 0; }
.choice-go label { display: block; font: .875rem var(--sans); color: var(--muted); margin-bottom: .3rem; }
.choice-field { display: flex; gap: .4rem; }
.choice-field input { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--fg); border-radius: 3px; padding: .5em .7em; font-size: 1.05rem; min-height: 2.8rem; background: var(--bg); color: var(--fg); }
.choice-field .btn { min-height: 2.8rem; }
.choice-more { margin: 0; font: .95rem var(--sans); }
.choice-more .resume-link { font-family: var(--sans); font-size: .95rem; }
.home-also { font: .95rem var(--sans); color: var(--muted); margin: 0 0 2rem; }
@media (max-width: 980px) { .choices { grid-template-columns: 1fr; } .choice-read { order: -1; } }

/* Les 66 livres : deux onglets, filtre par nom */
.library { scroll-margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.library-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.2rem; }
.library-head h2 { font-size: 1.45rem; font-weight: 500; margin: 0; }
.library-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.lib-tabs .seg-btn[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.lib-filter input { border: 1.5px solid var(--rule); border-radius: 3px; padding: .45em .7em; min-height: 2.4rem; width: 15rem; max-width: 100%; background: var(--bg); color: var(--fg); }
.lib-filter input:focus { border-color: var(--fg); }
.lib-empty { margin: .8rem 0 0; }
.library .testament h3 { font: 600 .875rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); margin: 0 0 .4rem; padding-bottom: .4rem; border-bottom: 2px solid var(--rubric); }
html.js .library .books:not(.is-filtering)[data-tab="AT"] .testament[data-testament="NT"],
html.js .library .books:not(.is-filtering)[data-tab="NT"] .testament[data-testament="AT"] { display: none; }
html.js .library .books:not(.is-filtering) .testament h3 { display: none; }
.library .books { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .library .testament { columns: 2; column-gap: 2.5rem; }
  .library .testament > h3 { column-span: all; }
  .library .book { break-inside: avoid; }
}
@media (max-width: 600px) { .library-tools { width: 100%; } .lib-filter, .lib-filter input { width: 100%; } .lib-tabs { width: 100%; } .lib-tabs .seg-btn { flex: 1 1 50%; } }

@media (prefers-reduced-motion: reduce) { .mnav-btn::after, .mnav-btn, .mnav-toggle { transition: none; } }
/* La largeur réglée concerne la colonne de texte, pas la page : accueil, cartes, synopse et parcours gardent leur place. */
html body.is-page .page { max-width: 78rem; }
html[data-look="3"] body.is-page .shell > .page { max-width: none; }
@media (max-width: 480px) {
  .top-icons > a.icon-btn, .top-icons > form { display: none; }
  html .top-row { gap: .4rem; }
  .icon-btn, .mnav-toggle { min-width: 2.5rem; height: 2.5rem; }
}

/* =====================================================================
   Synopse 0.7.1 : lignes alignées, différences lisibles, choix des récits.
   ===================================================================== */
.syn [hidden] { display: none !important; }
.syn-modes { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Boutons des récits : on affiche ou masque chaque évangile */
.syn-tab { cursor: pointer; gap: .35rem; align-items: center; }
.syn-tab[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.syn-tab[aria-pressed="true"] small { color: var(--bg); opacity: .8; }
.syn-tab[aria-pressed="false"] { opacity: .75; }
.syn-tab-check { width: .8rem; height: .8rem; border: 1.5px solid currentColor; border-radius: 2px; display: inline-block; position: relative; }
.syn-tab[aria-pressed="true"] .syn-tab-check::after { content: ""; position: absolute; left: .18rem; top: .02rem; width: .22rem; height: .45rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.syn-tab.off { cursor: default; }
.syn-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Présentation : lignes alignées (par défaut) ou texte suivi */
html:not([data-synview="0"]) .syn[data-cols]:not([data-cols="1"]) .syn-cols { display: none; }
html[data-synview="0"] .syn-grid { display: none; }
.syn-grid { max-width: none; margin: 0 0 .5rem; }
.syn-ghead, .syn-row { display: grid; grid-template-columns: repeat(var(--syn-n, 1), minmax(0, 1fr)); column-gap: 1.6rem; }
.syn-ghead { position: sticky; top: 0; z-index: 6; background: var(--bg); border-bottom: 2px solid var(--rubric); padding: .55rem 0 .45rem; }
.syn-hcell { font-family: var(--sans); line-height: 1.3; min-width: 0; }
.syn-hname { display: block; font-size: .95rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rubric); }
.syn-hrefs { font-size: .875rem; color: var(--muted); }
.syn-hrefs a { color: inherit; }
.syn-row { border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); padding: .4rem 0; transition: background-color .12s; }
.syn-row:hover, .syn-row.is-focus { background: color-mix(in srgb, var(--soft) 80%, transparent); }
.syn-cell { min-width: 0; }
.syn-cell p.p { margin: 0; text-align: left; font-size: calc(var(--size) * .92); line-height: var(--lh); hyphens: manual; }
.syn[data-shown="4"] .syn-cell p.p, .syn[data-shown="3"] .syn-cell p.p { font-size: calc(var(--size) * .86); }
.syn-cell.is-empty { background-image: linear-gradient(to bottom, transparent calc(50% - .5px), color-mix(in srgb, var(--rule) 55%, transparent) calc(50% - .5px), color-mix(in srgb, var(--rule) 55%, transparent) calc(50% + .5px), transparent calc(50% + .5px)); background-size: 1.2rem 100%; background-repeat: no-repeat; background-position: 0 50%; opacity: .7; }
.syn-cref { font-family: var(--sans); font-size: .875rem; color: var(--muted); margin: 0 0 .2rem; }
.syn-ajout p.p { color: var(--muted); }

/* Différences : les mots propres surlignés (le rouge reste aux paroles de Jésus), les mots communs soulignés */
html[data-diff="1"] .syn .c-one, html[data-diff="2"] .syn .c-one, .syn-legend .c-one { color: inherit; }
html[data-diff="1"] .syn .c-one, .syn-legend-diff1 .c-one { background: color-mix(in srgb, var(--hl) 90%, transparent); border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--hl) 90%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-diff="2"] .syn .c-all, .syn-legend-diff2 .c-all { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: .18em; text-decoration-thickness: 1.5px; font-style: normal; }
html[data-diff="2"] .syn .c-some, .syn-legend-diff2 .c-some { text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: .18em; font-style: normal; }
.syn-legend .c-some { font-style: normal; }
html:not([data-diff="1"]) .syn-legend-diff1, html:not([data-diff="2"]) .syn-legend-diff2 { display: none; }
html[data-diff="0"] .syn-legend { display: none; }

/* Téléphone : deux récits au plus, côte à côte dans les lignes alignées, l'un sous l'autre en texte suivi */
@media (max-width: 820px) {
  .syn-ghead, .syn-row { column-gap: .9rem; }
  .syn-cell p.p { font-size: calc(var(--size) * .84) !important; line-height: 1.5; }
  .syn-hname { font-size: .82rem; }
  .syn .syn-cols { grid-template-columns: 1fr; }
  html.js .syn[data-cols] .syn-col:not([hidden]) { display: block; }
  .syn-bar { gap: .5rem; }
  .syn-tabs { flex-wrap: wrap; }
  .syn-modes, .syn-modes .seg { width: 100%; }
  .syn-modes .seg-btn { flex: 1 1 auto; padding-inline: .4em; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .syn-row { transition: none; } }
@media print { .syn-ghead { position: static; } .syn-row { break-inside: avoid; } }

/* ---------- Plans des quatre Évangiles ---------- */
.plans-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; margin: 0 0 1.2rem; font-family: var(--sans); }
.plans-jump { display: flex; flex-wrap: wrap; gap: .4rem; }
.plans-jump a { border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .9rem; text-decoration: none; color: var(--fg); font-size: .92rem; background: var(--panel); }
.plans-jump a:hover { border-color: var(--rubric); color: var(--rubric); }
.plans-own { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; cursor: pointer; }
.plans-own input { width: 1.1rem; height: 1.1rem; accent-color: var(--rubric); }
.plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.8rem; align-items: start; }
@media (max-width: 1350px) { .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .plans-grid { grid-template-columns: 1fr; } }
.plan { border-top: 3px solid var(--rubric); padding-top: .4rem; scroll-margin-top: 1rem; min-width: 0; }
.plan h2 { font-size: 1.55rem; font-weight: 500; margin: .2rem 0 .3rem; }
.plan-idee { font-style: italic; color: var(--muted); margin: 0 0 .5rem; font-size: .98rem; }
.plan-sections { font-family: var(--sans); font-size: .875rem; color: var(--muted); margin: 0 0 .6rem; }
.plan-part { margin: 0 0 1rem; }
.plan-part h3 { font-family: var(--sans); font-size: .98rem; font-weight: 700; margin: .9rem 0 .35rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; }
.plan-n { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--rubric); color: var(--bg); font-size: .78rem; flex: 0 0 auto; align-self: center; }
.plan-ref { font-weight: 400; color: var(--muted); font-size: .875rem; margin-left: auto; }
.plan-d { font-family: var(--sans); font-size: .875rem; color: var(--rubric); margin: 0 0 .3rem; }
.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-list li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: .5rem; padding: .28rem 0; border-bottom: 1px dotted var(--rule); font-size: .95rem; line-height: 1.35; }
.plan-vref { font-family: var(--sans); font-size: .82rem; color: var(--muted); padding-top: .12rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plan-title { color: var(--fg); text-decoration: none; }
.plan-title:hover { color: var(--rubric); text-decoration: underline; }
.plan-pills { grid-column: 2; display: flex; gap: .15rem; margin-top: .15rem; }
.plan-own-badge { font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bg); background: var(--rubric); border-radius: 2px; padding: 0 .35em; line-height: 1.5; }
.plan-list li.is-own .plan-title { font-weight: 600; }
.plans-page.only-own .plan-list li:not(.is-own) { display: none; }
.plans-page .syn-pill { font-size: .7rem; }
.plan-part h3 { display: grid; grid-template-columns: 1.45rem minmax(0, 1fr); column-gap: .5rem; row-gap: .1rem; align-items: start; }
.plan-part h3 .plan-n { grid-row: 1 / span 2; margin-top: .05rem; }
.plan-part h3 .plan-ref { grid-column: 2; margin-left: 0; }

/* ---------- Concordance ---------- */
.conc-form { border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: var(--radius); background: var(--panel); padding: 1rem 1.2rem; margin: 0 0 1rem; max-width: 52rem; }
.conc-label { display: block; font: 600 .95rem var(--sans); margin-bottom: .4rem; }
.conc-field { display: flex; flex-wrap: wrap; gap: .5rem; }
.conc-field input { flex: 1 1 14rem; min-width: 0; border: 1.5px solid var(--fg); border-radius: 3px; padding: .5em .7em; font-size: 1.05rem; min-height: 2.8rem; background: var(--bg); color: var(--fg); }
.conc-field select { border: 1.5px solid var(--fg); border-radius: 3px; padding: .4em .5em; min-height: 2.8rem; background: var(--bg); color: var(--fg); }
.conc-field .btn { min-height: 2.8rem; }
.conc-hint { font: .875rem var(--sans); margin: .5rem 0 0; }
.conc-alpha { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.4rem; font-family: var(--sans); }
.conc-alpha a { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; color: var(--fg); font-weight: 600; }
.conc-alpha a:hover, .conc-alpha a[aria-current] { background: var(--rubric); border-color: var(--rubric); color: var(--bg); }
.conc-message { border-left: 3px solid var(--rubric); background: var(--soft); padding: .7rem 1rem; font-family: var(--sans); font-size: .95rem; max-width: 52rem; }
.conc-letter h2, .conc-result h2 { font-size: 1.5rem; font-weight: 500; margin: .5rem 0 .8rem; }
.conc-result h2 small, .conc-letter h2 small { font: .95rem var(--sans); margin-left: .4rem; }
.conc-words { list-style: none; margin: 0; padding: 0; columns: 14rem; column-gap: 2rem; font-family: var(--sans); font-size: .95rem; }
.conc-words li { break-inside: avoid; padding: .12rem 0; display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dotted var(--rule); }
.conc-words a { text-decoration: none; color: var(--fg); }
.conc-words a:hover { color: var(--rubric); text-decoration: underline; }
.conc-neigh { margin: 0 0 1rem; font-family: var(--sans); }
.conc-neigh-t { font-size: .875rem; color: var(--muted); margin: 0 0 .4rem; }
.conc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.conc-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .7rem .2rem .5rem; font-size: .9rem; cursor: pointer; background: var(--panel); }
.conc-chip:has(input:checked) { border-color: var(--rubric); background: color-mix(in srgb, var(--rubric) 10%, var(--panel)); }
.conc-chip input { accent-color: var(--rubric); }
.conc-chip span { color: var(--muted); font-size: .8125rem; }
.conc-dist { margin: 0 0 1.2rem; font-family: var(--sans); }
.conc-dist-t { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
.conc-dist-t a { border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .85rem; text-decoration: none; color: var(--fg); font-size: .92rem; }
.conc-dist-t a span { color: var(--muted); margin-left: .25rem; }
.conc-dist-t a[aria-current] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.conc-dist-t a[aria-current] span { color: var(--bg); opacity: .75; }
.conc-books summary { cursor: pointer; font-size: .92rem; color: var(--muted); padding: .2rem 0; }
.conc-books ul { list-style: none; margin: .5rem 0 0; padding: 0; columns: 17rem; column-gap: 2rem; }
.conc-books li { break-inside: avoid; }
.conc-books a { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; align-items: center; gap: .5rem; padding: .15rem .2rem; text-decoration: none; color: var(--fg); font-size: .9rem; border-radius: 3px; }
.conc-books a:hover, .conc-books a[aria-current] { background: var(--soft); }
.conc-bar { height: .45rem; border-radius: 2px; background: linear-gradient(to right, var(--rubric) var(--w), transparent var(--w)); opacity: .75; }
.conc-bn { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.conc-book { font: 700 .95rem var(--sans); color: var(--rubric); text-transform: uppercase; letter-spacing: .06em; margin: 1.4rem 0 .4rem; padding-bottom: .3rem; border-bottom: 2px solid var(--rubric); max-width: 52rem; }
.conc-list { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.conc-list li { padding: .4rem 0; border-bottom: 1px dotted var(--rule); line-height: 1.55; }
.conc-ref { font: 600 .9rem var(--sans); margin-right: .35rem; white-space: nowrap; }
.conc-text mark { background: color-mix(in srgb, var(--hl) 90%, transparent); color: inherit; border-radius: 2px; padding: 0 .1em; font-weight: 600; }
.conc-pages { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.4rem 0; font-family: var(--sans); }
.conc-pages a, .conc-pages span[aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 2.2rem; border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; color: var(--fg); }
.conc-pages span[aria-current] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (max-width: 600px) { .conc-books a { grid-template-columns: 7rem 1fr 2.4rem; } .conc-field select, .conc-field .btn { flex: 1 1 auto; } }
.conc-list li { font-family: var(--font); font-size: 1.02rem; }
.search-conc { font-family: var(--sans); border-left: 3px solid var(--rubric); background: var(--soft); padding: .5rem .8rem; }

/* Choix de la version, toujours accessible (20/10/2026) : dans l'en-tête sur ordinateur et tablette,
   dans la barre de lecture et en haut du menu sur téléphone. */
.top-version { display: inline-flex; }
.top-version select { border: 1px solid var(--chrome-line); background: transparent; color: var(--chrome-fg); border-radius: var(--radius);
  height: 2.6rem; padding: 0 1.9rem 0 .7rem; font: 500 .92rem var(--sans); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5f2ea' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: .7rem; background-position: right .6rem center; }
.top-version select:hover { background-color: var(--chrome-hover); }
.top-version select option { color: #1b1a18; background: #fff; }
/* Sur ordinateur, la version est en haut : la barre de lecture ne la répète pas */
@media (min-width: 601px) { .readbar .readbar-version { display: none; } }
.menu-version { display: none; }
@media (max-width: 600px) {
  .top-version { display: none; }
  .menu-version { display: inline-flex; margin-right: auto; }
  .menu-version select { border: 1.5px solid var(--fg); border-radius: 3px; min-height: 2.4rem; padding: 0 .5rem; background: var(--bg); color: var(--fg); }
}

.menu-version-row { display: none; }
@media (max-width: 600px) {
  .menu-version-row { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rule); font: .95rem var(--sans); }
  .menu-version-row::before { content: "Version de la Bible"; font-weight: 600; }
  .menu-version-row .menu-version { margin-right: 0; }
}
html .top .mnav-panel .version-form select { color: var(--fg); border: 1.5px solid var(--fg); background-color: var(--bg); min-height: 2.4rem; padding: 0 .5rem; }

/* Icônes du menu (20/10/2026) */
.mnav-col a { display: flex; align-items: center; gap: .6rem; }
.mnav-col .mi { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: color .15s; }
.mnav-col a:hover .mi, .mnav-col a[aria-current="page"] .mi { color: var(--rubric); }
.mnav-col a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.mnav-col a:hover { text-decoration: none; }

/* Photos d'en-tête : version réduite (1000 px) sous 1100 px de large (20/10/2026) */
@media (max-width: 1100px) { .chapter-head.has-hero::after { background-image: var(--hero-s, var(--hero)); } }

/* =====================================================================================================================
   0.8.0 (20/10/2026) : page d'un verset, verset du jour, volet d'un verset, surlignages, lecture à voix haute,
   plans de lecture, mes notes, suggestions de recherche, barre de lecture du téléphone
   ===================================================================================================================== */
/* Couleurs de surlignage, lisibles en clair comme en sombre */
:root { --mk-jaune: #f6e58d; --mk-vert: #c8e6b5; --mk-bleu: #c4dcf2; --mk-rose: #f4c9d6; }
html[data-theme="sombre"], html[data-theme="auto"].dark, html[data-theme="blanc-sur-noir"] { --mk-jaune: #5c4f12; --mk-vert: #2f4a24; --mk-bleu: #233f5c; --mk-rose: #5a2a3a; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --mk-jaune: #5c4f12; --mk-vert: #2f4a24; --mk-bleu: #233f5c; --mk-rose: #5a2a3a; } }
.mk-jaune { background: var(--mk-jaune); } .mk-vert { background: var(--mk-vert); } .mk-bleu { background: var(--mk-bleu); } .mk-rose { background: var(--mk-rose); }
.vt.mk-jaune, .vt.mk-vert, .vt.mk-bleu, .vt.mk-rose { border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .08em; }
.text .vt { cursor: pointer; }
.text .vt.is-picked, .pcell.is-picked { outline: 2px dashed var(--rubric); outline-offset: 2px; border-radius: 3px; }
.text .vt.is-speaking, .prow.is-speaking { background: color-mix(in srgb, var(--rubric) 16%, transparent); border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mynote { font: inherit; font-size: .8em; line-height: 1; border: 0; background: none; color: var(--rubric); cursor: pointer; padding: 0 .15em; vertical-align: super; }

/* Message bref */
.toast { position: fixed; left: 50%; bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 1rem); z-index: 80; background: var(--fg); color: var(--bg);
  padding: .6rem 1rem; border-radius: 6px; font: 500 .92rem/1.35 system-ui, sans-serif; max-width: min(90vw, 28rem); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Volet d'un verset */
.vsheet { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); width: min(40rem, calc(100vw - 1.2rem));
  background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.28);
  padding: .7rem .9rem .9rem; font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-size: .95rem; }
.vsheet[hidden] { display: none; }
.vsheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.vsheet-ref { font: 600 1.05rem Literata, Georgia, serif; }
.vsheet-x { font-size: 1.5rem; line-height: 1; border: 0; background: none; color: var(--muted); cursor: pointer; width: 2.4rem; height: 2.4rem; }
.vsheet-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .55rem; }
.vsheet .btn { font-size: .9rem; }
.mk-dot { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--rule); cursor: pointer; }
.mk-dot[aria-pressed="true"], .vsheet [data-mark=""][aria-pressed="true"] { outline: 3px solid var(--rubric); outline-offset: 2px; }
.vsheet-note label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.vsheet-note textarea { width: 100%; font: inherit; padding: .45rem .55rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--soft); color: var(--fg); margin-bottom: .45rem; resize: vertical; }
body.has-vsheet .to-top, body.has-vsheet .bottombar { display: none !important; }

/* Lecture à voix haute */
.player { position: fixed; z-index: 65; left: 50%; transform: translateX(-50%); bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: .5rem;
  background: var(--fg); color: var(--bg); border-radius: 999px; padding: .35rem .45rem .35rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); font: .92rem system-ui, sans-serif; max-width: calc(100vw - 1.2rem); }
.player[hidden] { display: none; }
.player .btn { color: var(--bg); border-color: var(--bg); background: transparent; min-height: 2.2rem; font-size: .85rem; }
.player-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js-listen[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* Page d'un verset */
.verse-page .chapnav-chapter { font-weight: 600; }
.verse-head h1 { margin-bottom: .2rem; }
.verse-texts { display: grid; gap: 1rem; margin: 1rem 0 1.2rem; }
.verse-text { margin: 0; }
.verse-text blockquote { margin: 0; padding: .9rem 1.1rem; border-left: 4px solid var(--rubric); background: var(--soft); border-radius: 0 6px 6px 0; }
.verse-text blockquote p { margin: 0; font-family: Literata, Georgia, serif; font-size: 1.22em; line-height: 1.55; }
.verse-text figcaption { font-size: .85rem; color: var(--muted); margin: .35rem 0 0 1.2rem; }
.verse-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.4rem; }
.verse-mynote { border-left: 3px solid var(--rubric); padding: .3rem .8rem; color: var(--fg); font-style: italic; white-space: pre-line; }
.verse-section { margin: 1.6rem 0; }
.verse-section h2 { font-size: 1.15rem; border-bottom: 1px solid var(--rule); padding-bottom: .3rem; }
.verse-section h2 small { font-size: .8rem; color: var(--muted); font-weight: 400; }
.verse-section aside.note { position: static; width: auto; margin: .8rem 0; }
.verse-notes-version { font-size: .85rem; color: var(--muted); margin: .6rem 0 .2rem; }
.verse-notes { margin: 0; padding-left: 1.2rem; } .verse-notes li { margin: .2rem 0; }
.verse-links { padding-left: 1.2rem; } .verse-links li { margin: .3rem 0; }
.verse-words a { display: inline-block; margin: 0 .15rem .35rem 0; padding: .15rem .55rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; font-size: .92rem; }
.verse-words a:hover { border-color: var(--rubric); color: var(--rubric); }
.verse-index { margin: 1.5rem 0 .5rem; font-size: .92rem; }
.verse-index summary { cursor: pointer; color: var(--muted); }
.verse-index .chapters { margin-top: .6rem; }

/* Verset du jour (accueil) */
.daily { margin: 1.4rem 0 .4rem; padding: 1.1rem 1.3rem 1rem; border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: 6px; background: var(--soft); }
.daily-title { font: 600 .78rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); margin: 0 0 .6rem; }
.daily-text { margin: 0; } .daily-text p { margin: 0; font: 1.3rem/1.5 Literata, Georgia, serif; }
.daily-ref { margin: .5rem 0 .7rem; font-weight: 600; }
.daily-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }

/* Plans de lecture */
.lecture-plans { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.lecture-plan { border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: 6px; padding: .9rem 1.1rem; background: var(--soft); }
.lecture-plan h2 { font-size: 1.12rem; margin: 0 0 .4rem; } .lecture-plan h2 a { text-decoration: none; } .lecture-plan h2 a:hover { text-decoration: underline; }
.lecture-plan p { margin: .3rem 0; }
.reading-days .plan-meta a { color: inherit; }

/* Mes notes */
.my-notes-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; }
.my-notes-list h2 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; }
.my-note { border-left: 4px solid var(--rule); padding: .5rem .8rem; margin: 0 0 .7rem; border-radius: 0 6px 6px 0; }
.my-note.mk-jaune, .my-note.mk-vert, .my-note.mk-bleu, .my-note.mk-rose { border-left-color: var(--rubric); }
.my-note a { font-weight: 600; }
.my-note textarea { display: block; width: 100%; margin: .4rem 0; font: inherit; padding: .4rem .5rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); color: var(--fg); }
.my-note-actions { display: flex; gap: .4rem; margin: 0; }

/* Suggestions de recherche */
form.has-suggest { position: relative; }
.suggest { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + .25rem); margin: 0; padding: .3rem 0; list-style: none; background: var(--bg); color: var(--fg);
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.2); min-width: 16rem; font: .95rem/1.3 system-ui, sans-serif; }
.suggest[hidden] { display: none; }
.suggest a { display: flex; flex-wrap: wrap; gap: .1rem .5rem; padding: .5rem .8rem; text-decoration: none; color: inherit; }
.suggest li[aria-selected="true"] a, .suggest a:hover { background: var(--soft); }
.suggest .sg-label { font-weight: 600; } .suggest .sg-hint { color: var(--muted); font-size: .85rem; }

/* Barre de lecture du téléphone (chapitres) */
.bottombar { display: none; }
@media (max-width: 700px) {
  .bottombar { display: flex; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; gap: .2rem;
    padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--rule); box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
  .bb-btn { width: 2.9rem; height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--fg); border-radius: 8px; flex: 0 0 auto; }
  .bb-btn[hidden] { display: none; }
  .bb-btn svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .bb-btn:active { background: var(--soft); }
  .bb-label { flex: 1 1 auto; text-align: center; font: 600 1rem Literata, Georgia, serif; color: var(--fg); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: .6rem .3rem; }
  body.is-chapter { padding-bottom: calc(3.8rem + env(safe-area-inset-bottom, 0px)); }
  body.is-chapter .to-top { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  body.has-player .bottombar { display: none; }
  .vsheet { bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media print { .vsheet, .player, .bottombar, .toast, .verse-actions, .daily-actions { display: none !important; } }
@media (max-width: 700px) { .readbar .js-listen { display: none !important; } }

/* Paroles du Christ (20/10/2026) */
.paroles-groups { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem; margin: 1.2rem 0 2rem; }
.paroles-groups a { display: block; padding: .8rem 1rem; border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: 6px; background: var(--soft); text-decoration: none; height: 100%; }
.paroles-groups a:hover { border-color: var(--rubric); }
.pg-title { display: block; font: 600 1.1rem Literata, Georgia, serif; }
.pg-meta { display: block; font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.paroles-cross ol { padding-left: 1.4rem; }
.paroles-cross li { margin: 0 0 .9rem; }
.pc-title { margin: 0; font-weight: 600; } .pc-text { margin: .15rem 0 0; font-family: Literata, Georgia, serif; font-size: 1.08em; }
.paroles-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; }
.paroles-tabs a { padding: .3rem .8rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; font-size: .92rem; }
.paroles-tabs a[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.paroles-filter input { font: inherit; padding: .4rem .6rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); color: var(--fg); min-width: 16rem; margin-left: .4rem; }
.paroles-list { list-style: none; padding: 0; }
.parole { padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.parole-head { margin: 0 0 .3rem; font-size: .92rem; } .parole-head a { font-weight: 600; } .parole-head span { color: var(--muted); }
.parole-text { margin: 0; font-family: Literata, Georgia, serif; font-size: 1.08em; line-height: 1.6; }
.parole-text .pv { font-size: .6em; color: var(--muted); margin-right: .15em; font-family: system-ui, sans-serif; }
.parole-why { margin: .3rem 0 0; font-size: .88rem; }
.parole[hidden] { display: none; }
html[data-wj="2"] .paroles-page .wj { color: var(--rubric); }
html[data-wj="1"] .paroles-page .wj { font-weight: 650; }

/* Bibliothèque chrétienne (20/10/2026) */
.shelf { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.shelf-book { border: 1px solid var(--rule); border-top: 3px solid var(--rubric); border-radius: 6px; padding: .9rem 1.1rem 1rem; background: var(--soft); display: flex; flex-direction: column; }
.shelf-book.is-soon { border-top-color: var(--rule); opacity: .82; background: transparent; }
.sb-era { margin: 0; font: 600 .72rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); }
.shelf-book.is-soon .sb-era { color: var(--muted); }
.shelf-book h2 { font-size: 1.2rem; margin: .45rem 0 .2rem; line-height: 1.25; }
.shelf-book h2 a { text-decoration: none; } .shelf-book h2 a:hover { text-decoration: underline; }
.sb-author { margin: 0 0 .5rem; font-weight: 600; font-size: .95rem; }
.sb-text { margin: 0 0 .6rem; font-size: .95rem; flex: 1 1 auto; }
.sb-meta { margin: 0; font-size: .85rem; color: var(--muted); }
.sb-soon { font-style: italic; }
.lib-note { font-size: .88rem; }
.lb-author { font-weight: 600; margin: .2rem 0 .4rem; } .lb-resume { margin: 0; max-width: 46rem; }
.lb-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 .4rem; }
.lb-meta { font-size: .88rem; }
.lb-toc h2 { font-size: 1.15rem; border-bottom: 1px solid var(--rule); padding-bottom: .3rem; margin-top: 1.6rem; }
.lb-toc h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; color: var(--rubric); }
.lb-toc ol { list-style: none; padding: 0; margin: 0; columns: 2 22rem; column-gap: 2rem; }
.lb-toc li { break-inside: avoid; margin: 0 0 .45rem; }
.lb-toc a { text-decoration: none; display: block; } .lb-toc a:hover .toc-t { text-decoration: underline; }
.toc-t { font-weight: 600; } .toc-s { color: var(--muted); font-size: .92rem; }
.lb-toc li.is-current a .toc-t::after { content: " · vous en êtes là"; color: var(--rubric); font-weight: 400; font-size: .85rem; }
.lb-toc li.is-read .toc-t { color: var(--muted); }
.lb-about { margin: 2rem 0 0; font-size: .95rem; } .lb-about h2 { font-size: 1.1rem; }
.book-reader .br-sub { font-family: Literata, Georgia, serif; font-size: 1.15rem; font-style: italic; margin: .3rem 0 0; }
.book-text h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
.book-text p.poeme { margin-left: 1.5rem; font-style: italic; }
.book-text p.fin { text-align: center; font-weight: 600; letter-spacing: .1em; }
.book-text .sc { font-variant: small-caps; }
.book-text sup.nref { font-size: .65em; line-height: 0; margin-left: .05em; } .book-text sup.nref a { text-decoration: none; color: var(--rubric); }
.book-notes { margin: 2rem 0 1rem; border-top: 1px solid var(--rule); padding-top: .8rem; font-size: .9rem; }
.book-notes h2 { font-size: 1rem; margin: 0 0 .5rem; }
.book-notes ol { padding-left: 1.6rem; columns: 2 18rem; column-gap: 2rem; } .book-notes li { margin: 0 0 .3rem; break-inside: avoid; }
.book-notes .back { text-decoration: none; color: var(--muted); }
.book-source { font-size: .85rem; margin: 1.5rem 0; }
.book-text h3.frag { font: 600 .78rem/1 system-ui, sans-serif; color: var(--muted); letter-spacing: .06em; margin: 1.6rem 0 .45rem; padding-top: .7rem; border-top: 1px dotted var(--rule); }
.book-text h3.frag::before { content: "Fragment "; font-weight: 400; }
.book-text .secnum { font: 600 .8em system-ui, sans-serif; color: var(--rubric); margin-right: .2em; }
.book-text a.bref { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.book-text a.bref:hover { text-decoration-color: var(--rubric); }