:root {
  --bg: #081521;
  --bg-soft: #0a1926;
  --surface: #0e1e2d;
  --surface-2: #14283a;
  --surface-3: #193145;
  --text: #dce8ef;
  --muted: #9bb0bd;
  --soft: #78909e;
  --border: #244054;
  --border-soft: #1a3345;
  --accent: #55c7d4;
  --accent-strong: #91e5eb;
  --accent-deep: #1b8e9a;
  --gold: #c7a25d;
  --gold-strong: #dfbd78;
  --quote: #0d2232;
  --quote-bible: #17251f;
  --danger-soft: #3b2d1b;
  --shadow: 0 20px 60px rgba(0, 4, 10, .38);
  --reading-width: 49rem;
  --toolbar-height: 3.3rem;
  --radius: .85rem;
  --paragraph-gap: 1.06rem;
  --font-body: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  --bg: #f3f7f8;
  --bg-soft: #edf3f4;
  --surface: #ffffff;
  --surface-2: #eaf3f4;
  --surface-3: #dfedef;
  --text: #22323b;
  --muted: #617681;
  --soft: #788a94;
  --border: #cbdde1;
  --border-soft: #dbe7e9;
  --accent: #167f8b;
  --accent-strong: #0e6570;
  --accent-deep: #0f6974;
  --gold: #9b702d;
  --gold-strong: #7c581f;
  --quote: #eef7f8;
  --quote-bible: #f7f2e7;
  --danger-soft: #fbf4e8;
  --shadow: 0 18px 50px rgba(31, 52, 62, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--toolbar-height) + 1.2rem); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -12rem, color-mix(in srgb, var(--accent) 8%, transparent), transparent 38rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.73;
}
a { color: var(--accent-strong); text-underline-offset: .17em; text-decoration-thickness: .07em; }
a:hover { color: var(--gold-strong); }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: fixed; left: .75rem; top: -5rem; z-index: 100;
  background: var(--surface); padding: .6rem .9rem; border: 1px solid var(--border);
  border-radius: .55rem; font-family: var(--font-ui);
}
.skip-link:focus { top: .6rem; }

.site-toolbar {
  position: sticky; top: 0; z-index: 50; height: var(--toolbar-height);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 0 max(1rem, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  font-family: var(--font-ui);
}
.toolbar-button {
  appearance: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: .58rem; padding: .43rem .72rem; cursor: pointer;
  font: inherit; font-size: .86rem;
}
.toolbar-button:hover { border-color: var(--accent-deep); background: var(--surface-2); }
.toolbar-title { color: var(--muted); font-size: .82rem; letter-spacing: .035em; }
.toolbar-actions { display: flex; align-items: center; gap: .55rem; }
.toolbar-link {
  display: inline-flex; align-items: center; min-height: 2.15rem; padding: .4rem .68rem;
  border-radius: .58rem; color: var(--accent-strong); text-decoration: none;
  font: 600 .86rem/1 var(--font-ui);
}
.toolbar-link:hover { background: var(--surface-2); color: var(--gold-strong); }

.layout { position: relative; }
.document-shell { width: min(100% - 2rem, var(--reading-width)); margin: 0 auto; padding: 3rem 0 7rem; }
.document-header { padding: 1.2rem 0 2.8rem; border-bottom: 1px solid var(--border); }
.eyebrow {
  margin: 0 0 .58rem; color: var(--accent); font: 750 .75rem/1.3 var(--font-ui);
  letter-spacing: .15em; text-transform: uppercase;
}
.document-header > h1 {
  margin: 0; font: 760 clamp(2.25rem, 5vw, 3.65rem)/1.07 var(--font-ui);
  letter-spacing: -.045em; text-wrap: balance;
}
.document-author {
  margin: .55rem 0 0; color: var(--gold-strong); font: 560 .98rem/1.4 var(--font-ui);
  letter-spacing: .025em;
}
.presentation {
  margin-top: 1.55rem; color: color-mix(in srgb, var(--text) 90%, var(--muted) 10%);
  font-size: 1.01rem; line-height: 1.68;
}
.presentation-paragraph { margin: 0 0 .9rem; }
.presentation-paragraph:last-child { margin-bottom: 0; }
.presentation-note {
  margin: 1.55rem 0 0; padding: .9rem 1rem .88rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--border));
  border-left: 3px solid var(--gold); border-radius: .7rem;
  background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 7%, var(--surface)), var(--surface));
  color: var(--muted); font-family: var(--font-ui); font-size: .89rem; line-height: 1.55;
}
.presentation-note-text { margin: 0; }

/* Le sommaire est aussi une annonce du plan : il doit rester très lisible. */
.toc-inline {
  margin-top: 2.45rem; padding: 1.45rem 1.5rem 1.35rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.toc-inline h2 { margin: 0 0 1rem; color: var(--gold-strong); font: 780 1.28rem/1.3 var(--font-ui); }
.toc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .22rem; }
.toc-list li { margin: 0; }
.toc-list a {
  display: block; padding: .43rem .55rem; border-radius: .42rem;
  font: 1.02rem/1.48 var(--font-ui); text-decoration: none; color: var(--text);
}
.toc-list a:hover { background: var(--surface-2); color: var(--accent-strong); }
.toc-part a {
  margin-top: .68rem; padding-top: .7rem; font-size: 1.08rem; font-weight: 790; color: var(--gold-strong);
  border-top: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
}
.toc-title { padding-left: .9rem; }

.document-body { padding-top: 2.55rem; }
.part-heading, .section-heading, .subsection-heading {
  scroll-margin-top: calc(var(--toolbar-height) + 1.3rem);
  text-align: left;
  hyphens: none;
  word-spacing: normal;
  text-wrap: pretty;
}

/* Grande partie : séparateur de structure plutôt qu'un second énorme titre. */
.part-heading {
  position: relative; margin: 5.1rem 0 1.6rem; padding: 1.15rem 0 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 48%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  font-family: var(--font-ui);
}
.part-heading::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 5.25rem; height: 3px;
  border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--accent));
}
.part-kicker {
  display: block; margin-bottom: .28rem; color: var(--gold-strong);
  font: 800 .78rem/1.25 var(--font-ui); letter-spacing: .09em; text-transform: uppercase;
}
.part-title {
  display: block; color: var(--text);
  font: 770 clamp(1.42rem, 3vw, 1.72rem)/1.27 var(--font-ui); letter-spacing: -.022em;
}

/* Titres de chapitre : accent turquoise et fond très léger, pas seulement une différence de taille. */
.section-heading {
  margin: 3.35rem 0 1.35rem; padding: .72rem .95rem .75rem 1.05rem;
  border-left: 4px solid var(--accent-deep);
  border-radius: 0 .55rem .55rem 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 82%);
  color: var(--text);
  font: 760 clamp(1.35rem, 2.8vw, 1.72rem)/1.28 var(--font-ui); letter-spacing: -.018em;
}
.part-heading + .section-heading { margin-top: 1.45rem; }

/* Sous-titres : repère doré discret et filet, pour une troisième hiérarchie visuelle. */
.subsection-heading {
  position: relative; margin: 2.55rem 0 1rem; padding: 0 0 .48rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  font: 720 clamp(1.12rem, 2.25vw, 1.3rem)/1.34 var(--font-ui); letter-spacing: -.009em;
}
.subsection-heading::before {
  content: ""; position: absolute; left: 0; top: .47em; width: .42rem; height: .42rem;
  border-radius: 50%; background: var(--gold);
}

.document-body p { margin: 0 0 var(--paragraph-gap); }
.document-body ul, .document-body ol { margin: .2rem 0 1.45rem 1.15rem; padding-left: 1.05rem; }
.document-body li { margin: .57rem 0; padding-left: .27rem; }
.document-body li::marker { color: var(--accent); font-family: var(--font-ui); font-weight: 700; }
.document-body strong { color: color-mix(in srgb, var(--text) 88%, var(--accent-strong) 12%); font-weight: 780; }
.document-body em { font-style: italic; }

blockquote {
  margin: 1.55rem 0 1.75rem; padding: 1rem 1.15rem 1rem 1.3rem;
  border-radius: 0 var(--radius) var(--radius) 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 68%, transparent);
}
blockquote p { margin: 0 !important; }
.quote-quote { background: var(--quote); border-left: 3px solid var(--accent); }
.quote-bible { background: var(--quote-bible); border-left: 3px solid var(--gold); }
.quote-bible::before {
  content: "Texte biblique"; display: block; margin-bottom: .45rem;
  color: var(--gold-strong); font: 700 .7rem/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase;
}

.callout {
  margin: 2rem 0 2.2rem; padding: 1rem 1.15rem .2rem;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--border));
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 82%, var(--gold) 6%), var(--surface));
}
.callout-title { margin: 0 0 .85rem; color: var(--gold-strong); font: 760 .92rem/1.3 var(--font-ui); letter-spacing: .02em; }
.editor-note {
  margin: 1.5rem 0; padding: .9rem 1rem; border: 1px dashed var(--gold);
  border-radius: var(--radius); background: var(--danger-soft);
}
.editor-note p { margin-bottom: .7rem; }

.note-ref {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.22rem; height: 1.22rem; margin-left: .08rem; vertical-align: super;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-strong);
  text-decoration: none; font: 750 .71rem/1 var(--font-ui); transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.note-ref:hover, .note-ref[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 28%, transparent); border-color: var(--accent); color: var(--gold-strong);
}

.sources-section { margin-top: 5.5rem; padding-top: 2.1rem; border-top: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); }
.sources-section > h2 { margin: 0; font: 790 1.9rem/1.25 var(--font-ui); text-align: left; }
.sources-intro {
  margin: 1.2rem 0 1.7rem; padding: 1rem 1.05rem;
  border: 1px solid var(--border); border-radius: .7rem; background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--muted); font-family: var(--font-ui); font-size: .92rem; line-height: 1.58;
}
.sources-intro p { margin: 0 0 .75rem; }
.sources-intro p:last-child { margin-bottom: 0; }
.sources-list { margin-top: 1.25rem; }
.source-group {
  margin: 2.4rem 0 .45rem; padding-bottom: .45rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 34%, var(--border));
  color: var(--gold-strong); font: 740 1.02rem/1.3 var(--font-ui); text-align: left;
}
.source-entry {
  scroll-margin-top: calc(var(--toolbar-height) + 1rem);
  display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; padding: 1rem 0;
  border-top: 1px solid var(--border-soft);
}
.source-number {
  width: 1.72rem; height: 1.72rem; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border)); border-radius: 50%;
  color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 8%, transparent);
  font: 760 .78rem/1 var(--font-ui);
}
.source-body p { margin: 0 0 .68rem; font-size: .95rem; line-height: 1.62; }
.external-link { overflow-wrap: anywhere; }

.contact-section {
  scroll-margin-top: calc(var(--toolbar-height) + 1rem);
  margin-top: 5rem; padding: 2rem 0 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
}
.contact-section > h2 {
  margin: 0 0 1rem; color: var(--text); font: 790 1.75rem/1.25 var(--font-ui);
}
.contact-body {
  padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 90%, var(--accent) 5%), var(--surface));
}
.contact-body p { margin: 0; }
.contact-email { font-weight: 650; overflow-wrap: anywhere; }
.internal-link { font-weight: 650; }

.toc-drawer {
  position: fixed; left: 1rem; top: calc(var(--toolbar-height) + 1rem); z-index: 40;
  width: min(24rem, calc(100vw - 2rem)); max-height: calc(100vh - var(--toolbar-height) - 2rem); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  transform: translateX(calc(-100% - 2rem)); transition: transform .18s ease; font-family: var(--font-ui);
}
.toc-drawer.is-open { transform: translateX(0); }
.toc-drawer-inner { padding: .9rem; }
.toc-drawer-head {
  position: sticky; top: -.9rem; display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); padding: .55rem 0 .75rem; z-index: 1; color: var(--gold-strong);
}
.toc-drawer-head button, .note-popover-head button { border: 0; background: transparent; color: var(--text); font-size: 1.5rem; cursor: pointer; }
.toc-drawer a[aria-current="location"] { background: var(--surface-2); color: var(--accent-strong); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 4, 10, .48); z-index: 35; }

.note-popover {
  position: fixed; z-index: 70; width: min(31rem, calc(100vw - 2rem)); max-height: min(29rem, calc(100vh - 2rem)); overflow: auto;
  padding: .9rem 1rem 1rem; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius); box-shadow: var(--shadow); font-family: var(--font-ui);
}
.note-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
.note-popover-head strong { color: var(--gold-strong); }
.note-popover-content { padding-top: .75rem; color: var(--text); font-size: .9rem; line-height: 1.58; }
.note-popover-content p { margin: 0 0 .72rem; }
.note-jump { display: inline-block; margin-top: .3rem; font-size: .8rem; }

.back-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 30; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--accent-strong);
  box-shadow: var(--shadow); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .16s ease, border-color .16s ease;
}
.back-top.is-visible { opacity: 1; pointer-events: auto; }
.back-top:hover { border-color: var(--accent); }

/* Justification réservée au texte courant : les titres ne sont jamais justifiés. */
@media (min-width: 900px) {
  .document-body p,
  .document-body li { text-align: justify; hyphens: auto; }
}

@media (max-width: 720px) {
  :root { --reading-width: 100%; --paragraph-gap: 1rem; }
  body { font-size: 1.02rem; line-height: 1.69; }
  .document-shell { width: 100%; padding: 1.9rem 1rem 6rem; }
  .site-toolbar { padding: 0 .75rem; }
  .toolbar-title { display: none; }
  .toolbar-actions { gap: .32rem; }
  .toolbar-link, .toolbar-button { font-size: .82rem; padding-left: .58rem; padding-right: .58rem; }
  .document-header { padding-top: .7rem; }
  .document-header > h1 { font-size: 2.25rem; }
  .toc-inline { padding: 1.15rem 1rem; }
  .toc-inline h2 { font-size: 1.2rem; }
  .toc-list a { font-size: .94rem; padding: .4rem .42rem; }
  .toc-part a { font-size: .98rem; }
  .toc-title { padding-left: .42rem; }
  .part-heading { margin-top: 4rem; }
  .part-title { font-size: 1.4rem; }
  .section-heading { margin-top: 2.85rem; font-size: 1.35rem; padding-left: .85rem; }
  .part-heading + .section-heading { margin-top: 1.25rem; }
  .subsection-heading { margin-top: 2.25rem; font-size: 1.15rem; }
  blockquote { margin-left: 0; margin-right: 0; padding: .9rem .95rem; }
  .source-entry { grid-template-columns: 1.8rem 1fr; }
  .note-popover {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100%; max-height: 74vh; border-radius: 1rem 1rem 0 0; padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.source-entry, .source-body { min-width: 0; }
html, body { overflow-x: hidden; }