/* ===================================================================
   Obsidian Publish — atelier.e-e-e.bible
   Identité « minimaliste biblique » : parchemin, encre, or-terre,
   Fraunces variable, souffle et gravitas. WCAG 2.1 AA.
   CSS-first ; publish.js ne fait que : re-anim SPA, ToC, lazy-img,
   marquage scriptural, badge maturité. Tokens partagés avec Ghost.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..650;1,9..144,300..600&display=swap');

/* ---------- Tokens (calibrés WCAG AA) ---------- */
:root{
  /* pont vers le thème Quartz : parchemin/encre/or suivent automatiquement light↔dark */
  --parchemin:var(--light); --parchemin-2:var(--lightgray);
  --encre:var(--dark); --encre-douce:var(--darkgray);
  --or:var(--secondary);
  --or-clair:#A9812B; --terre:#9C4A2F; --indigo:#2E4057;  /* accents (variantes dark plus bas) */

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --ui:system-ui, -apple-system, 'Segoe UI', sans-serif;

  --mesure:66ch;
  --pas:clamp(1rem, 0.6rem + 1.6vw, 1.5rem);
}

/* dark : parchemin/encre/or viennent déjà du thème Quartz ; on ne surcharge que les accents fixes */
:root[saved-theme="dark"]{
  --or-clair:#C9A24A; --terre:#C46A4A; --indigo:#7B97AA;
}

/* ---------- Corps & rythme (l'espace blanc) ---------- */
.published-container{
  background:var(--parchemin); color:var(--encre);
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height:1.75; font-weight:380;
  text-rendering:optimizeLegibility;
  transition:background-color .4s ease, color .4s ease;
}
.markdown-preview-sizer{ max-width:var(--mesure); margin-inline:auto; padding-block:calc(var(--pas)*2); }
/* Mesure de lecture (Quartz) — .markdown-preview-sizer n'existe PAS dans le build Quartz, donc
   --mesure:66ch y était mort : la prose se rendait à ~79ch. On porte la mesure sur les blocs de
   prose réels (conteneur = .markdown-preview-view). Les grilles de cartes et le lecteur biblique
   gardent leur pleine largeur (exceptions ci-dessous). Les composants viz-* (ul/div à classe)
   conservent leurs propres max-width via :not([class]). */
.markdown-preview-view > p,
.markdown-preview-view > blockquote,
.markdown-preview-view > :is(h1,h2,h3,h4,h5,h6),
.markdown-preview-view > ul:not([class]),
.markdown-preview-view > ol:not([class]),
.markdown-preview-view > hr,
.markdown-preview-view > pre,
.markdown-preview-view > table{
  max-width:var(--mesure); margin-inline:auto;
}
/* Exceptions : grille de cartes (large) + lecteur biblique (gouttière) → pleine largeur */
article.cards .markdown-preview-view > ul:not([class]){ max-width:none; }
.center:has(#eee-bible) .markdown-preview-view > *{ max-width:none; }
.markdown-preview-view p{ margin-block:0 var(--pas); }
.markdown-preview-view hr{ border:none; height:1px; background:var(--parchemin-2); margin-block:calc(var(--pas)*1.5); }

/* ---------- Titres (Fraunces, optical size haute) ---------- */
.markdown-preview-view :is(h1,h2,h3,h4){
  font-family:var(--serif); line-height:1.15; letter-spacing:-.011em; color:var(--encre);
  margin-block:calc(var(--pas)*1.6) var(--pas);
  font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0;
}
.markdown-preview-view h1{ font-weight:560; font-size:clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-top:0; }
.markdown-preview-view h2{ font-weight:520; font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.markdown-preview-view h3{ font-weight:500; }
.markdown-preview-view h2::after{ content:""; display:block; width:2.5rem; height:2px; margin-top:.5rem; background:var(--or-clair); opacity:.85; }

/* ---------- Liens (or foncé AA, soulignement révélé) ---------- */
.published-container a.internal-link, .markdown-preview-view a{
  color:var(--or); text-decoration:none; font-weight:440;
  background:linear-gradient(var(--or),var(--or)) 0 92% / 0 1px no-repeat;
  transition:background-size .28s ease, color .2s ease;
}
.markdown-preview-view a:hover{ background-size:100% 1px; }
a.internal-link.is-unresolved{ color:var(--encre-douce); background:none; cursor:default; }
/* citations bibliques marquées .lien-scripture par publish.js */
.published-container a.lien-scripture{ color:var(--or); font-variant:small-caps; text-decoration:none; border-bottom:1.5px solid var(--or-clair); background:none; }

/* ---------- Citations / blockquote (gravitas) ---------- */
.markdown-preview-view blockquote{
  border-left:2px solid var(--or-clair); margin-inline:0; padding:.2rem 0 .2rem 1.4rem;
  font-style:italic; color:var(--encre-douce); transition:transform .25s ease;
}
.markdown-preview-view blockquote:hover{ transform:translateY(-2px); }

/* ---------- Badges « atelier » (posés par publish.js ; dégradation gracieuse) ---------- */
[data-maturity]::before{ font-family:var(--ui); font-size:.66rem; font-weight:600; padding:2px 9px; border-radius:99px; margin-right:.5em; color:#fff; vertical-align:middle; }
[data-maturity="en-cours"]::before{ content:"sur le métier"; background:var(--terre); }
[data-maturity="en-tissage"]::before{ content:"en tissage"; background:var(--or-clair); }
[data-maturity="tisse"]::before{ content:"tissé"; background:var(--indigo); }
[data-garde-depot]::before{ font-family:var(--ui); font-size:.64rem; font-weight:600; padding:2px 8px; border-radius:99px; margin-right:.5em; color:#fff; content:"dépôt " attr(data-garde-depot); }
[data-garde-depot="1"]::before{background:#8a6a00}[data-garde-depot="2"]::before{background:#A9812B}[data-garde-depot="3"]::before{background:#b8925f}[data-garde-depot="4"]::before{background:#5B6C5D}[data-garde-depot="5"]::before{background:#556070}[data-garde-depot="6"]::before{background:#6b6b76}[data-garde-depot="7"]::before{background:#8a8a90}[data-garde-depot="8"]::before{background:#a9a29b}

/* badge DALIA en pied */
.markdown-preview-view small{ font-family:var(--ui); font-size:.75rem; color:var(--encre-douce); }

/* ---------- Micro-animations (CSS-only) ---------- */
@keyframes enter{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.markdown-preview-sizer{ animation:enter .5s ease both; }
@supports (animation-timeline: view()){
  .markdown-preview-view :is(h2,h3,blockquote,table,.markdown-embed,ul,ol){
    animation:enter linear both; animation-timeline:view(); animation-range:entry 0% entry 28%;
  }
}

/* ---------- ToC interactive (colonne droite, posée par publish.js) ---------- */
.eee-toc{ font-family:var(--ui); font-size:.82rem; position:sticky; top:2rem; display:grid; gap:.35rem; padding-left:.5rem; }
.eee-toc a{ color:var(--encre-douce); border-left:2px solid transparent; padding-left:.7rem; line-height:1.35; text-decoration:none; background:none; transition:color .2s, border-color .2s; }
.eee-toc a[data-lvl="H3"]{ padding-left:1.3rem; font-size:.95em; }
.eee-toc a:hover{ color:var(--or); }
.eee-toc a[aria-current]{ color:var(--or); border-color:var(--or-clair); }

/* ---------- Navigation (colonne gauche) ---------- */
.site-body-left-column .tree-item-self{ font-family:var(--ui); font-size:.86rem; border-radius:5px; transition:background-color .2s; }
.site-body-left-column .tree-item-self:hover{ background:var(--parchemin-2); }
.site-body-left-column .is-active .tree-item-self{ color:var(--or); font-weight:600; }

/* ---------- Performance ---------- */
.markdown-preview-view > .markdown-preview-section{ content-visibility:auto; contain-intrinsic-size:auto 480px; }
.markdown-preview-view img{ height:auto; max-width:100%; border-radius:3px; }  /* aspect-ratio posé en JS (anti-CLS) */

/* ---------- a11y (WCAG 2.1 AA) ---------- */
:where(a,button,[tabindex],.tree-item-self):focus-visible{ outline:2px solid var(--or-clair); outline-offset:3px; border-radius:2px; }
/* Barre de recherche Quartz : le label « Recherche » héritait de --gray (#9A8E76 → 2.87:1 sur parchemin,
   sous le seuil AA). On force la couleur secondaire calibrée AA. Détecté par publish.quartz.render-check. */
.search > .search-button > p{ color:var(--encre-douce); }
.search > .search-button > svg .search-path{ stroke:var(--encre-douce); }
/* Liens d'explorateur Quartz : non couverts par le :where(...) (spécificité 0, battu par le thème).
   On leur redonne un indicateur de focus clavier explicite. Détecté par publish.quartz.render-check. */
.nav-file-title:focus-visible, .folder-button:focus-visible, .toc-item a:focus-visible{ outline:2px solid var(--or-clair); outline-offset:2px; border-radius:2px; }
/* Cibles tactiles ≥ 44×44px (WCAG 2.5.5) — contrôles de la barre d'en-tête (recherche, thème,
   mode lecture, taille de texte), rendus à 20-32px par le thème. Détecté par render-check (touch-target). */
button.search-button, button.darkmode, button.readermode, button.eee-textsize{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
}
/* min-width réservé au ≥720px : à 390px la rangée d'icônes ne tient pas sinon (débordement). */
@media (min-width:720px){
  button.search-button, button.darkmode, button.readermode, button.eee-textsize{ min-width:44px; }
}
/* Un seul <h1> par page : quand le corps markdown porte SON propre <h1> (pages persona/article),
   on masque le doublon (même texte) injecté par le page-header Quartz. Les pages-listes (index,
   tags, légal) n'ont pas de h1 markdown → elles GARDENT leur titre de page-header. Détecté par
   render-check (multiple-h1). */
.center:has(.markdown-preview-view h1) .page-header .article-title{ display:none; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ===================================================================
   Composants génératifs (viz-*) — dessins CSS/JS qui incarnent les
   concepts. Coller le bloc HTML correspondant dans une note.
   =================================================================== */

/* 1 — Tension tenue */
.viz-tension{ display:flex; align-items:center; justify-content:center; gap:clamp(1.2rem,7vw,4rem); margin:calc(var(--pas)*1.6) auto; }
.viz-tension .pole{ font-family:var(--ui); font-size:.8rem; font-weight:600; color:#fff; padding:.55em .9em; border-radius:99px; white-space:nowrap; transition:transform .4s ease; }
.viz-tension .pole-a{ background:var(--or-clair); } .viz-tension .pole-b{ background:var(--indigo); }
.viz-tension .link{ flex:0 1 9rem; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--or-clair),var(--indigo)); animation:tension-breathe 3.2s ease-in-out infinite; transform-origin:center; }
@keyframes tension-breathe{ 0%,100%{transform:scaleX(.94)} 50%{transform:scaleX(1.06)} }
.viz-tension:hover .pole-a{ transform:translateX(-7px); } .viz-tension:hover .pole-b{ transform:translateX(7px); }
@media (prefers-reduced-motion:reduce){ .viz-tension .link{ animation:none; } }

/* 2 — Échelle d'affinité */
.viz-affinity{ list-style:none; display:flex; gap:3px; max-width:34rem; margin:calc(var(--pas)*1.6) auto; padding:0; font-family:var(--ui); }
.viz-affinity li{ position:relative; flex:1; height:34px; border-radius:4px; display:grid; place-items:center; font-size:.72rem; font-weight:700; color:#2a2620; transition:transform .2s; }
.viz-affinity li:nth-child(1){background:#C9A24A}.viz-affinity li:nth-child(2){background:#C3A968}.viz-affinity li:nth-child(3){background:#B7B295}.viz-affinity li:nth-child(4){background:#ACACA4}.viz-affinity li:nth-child(5){background:#A0A099}
.viz-affinity li:hover{ transform:translateY(-4px); z-index:2; }
.viz-affinity li::after{ content:attr(data-label); position:absolute; bottom:calc(100% + 6px); left:50%; translate:-50% 0; background:var(--encre); color:var(--parchemin); font-size:.7rem; font-weight:500; white-space:nowrap; padding:.3em .6em; border-radius:4px; opacity:0; pointer-events:none; transition:opacity .2s; }
.viz-affinity li:hover::after{ opacity:1; }

/* 3 — Grammaire du dépôt (interactif) */
.viz-grammaire{ max-width:26rem; margin:calc(var(--pas)*1.6) auto; text-align:center; }
.viz-grammaire .stage{ position:relative; height:110px; }
.viz-grammaire .c{ position:absolute; top:50%; width:66px; height:66px; border-radius:50%; translate:-50% -50%; mix-blend-mode:multiply; transition:left .5s cubic-bezier(.6,0,.2,1), opacity .5s; }
.viz-grammaire .c-a{ left:40%; background:var(--or-clair); } .viz-grammaire .c-b{ left:60%; background:var(--indigo); }
.viz-grammaire[data-state="confondus"] .c-a,.viz-grammaire[data-state="confondus"] .c-b{ left:50%; }
.viz-grammaire[data-state="separes"] .c-a{left:18%} .viz-grammaire[data-state="separes"] .c-b{left:82%}
.viz-grammaire[data-state="sacrifie"] .c-a{left:50%} .viz-grammaire[data-state="sacrifie"] .c-b{opacity:0}
.viz-grammaire .controls{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-top:.5rem; }
.viz-grammaire button{ font-family:var(--ui); font-size:.78rem; padding:.35em .8em; border:1px solid var(--parchemin-2); background:var(--parchemin-2); color:var(--encre-douce); border-radius:99px; cursor:pointer; transition:.2s; }
.viz-grammaire button[aria-selected="true"]{ background:var(--encre); color:var(--parchemin); border-color:var(--encre); }
.viz-grammaire .caption{ font-family:var(--ui); font-size:.82rem; color:var(--encre-douce); min-height:1.4em; margin-top:.5rem; }

/* 4 — Séparateur narratif */
.viz-rule{ display:flex; align-items:center; gap:1rem; height:2rem; margin:calc(var(--pas)*1.5) auto; max-width:36rem; }
.viz-rule::before,.viz-rule::after{ content:""; flex:1; height:1px; }
.viz-rule::before{ background:linear-gradient(90deg,transparent,var(--or-clair)); }
.viz-rule::after{ background:linear-gradient(90deg,var(--or-clair),transparent); }
.viz-rule span{ inline-size:8px; block-size:8px; background:var(--or-clair); rotate:45deg; flex:none; }

/* 5 — Tissage chaîne/trame */
.viz-weave{ height:56px; margin:calc(var(--pas)*1.5) auto; max-width:var(--mesure); border-radius:4px; opacity:.5;
  background:repeating-linear-gradient(90deg,var(--or-clair) 0 2px,transparent 2px 12px),
            repeating-linear-gradient(0deg,var(--indigo) 0 2px,transparent 2px 12px), var(--parchemin-2);
  animation:weave-shift 14s linear infinite; }
@keyframes weave-shift{ to{ background-position:12px 0, 0 12px, 0 0; } }
@media (prefers-reduced-motion:reduce){ .viz-weave{ animation:none; } }

/* 6 — Carte-réseau (remplace l'embed .canvas, non rendu sur Publish) */
.viz-map{ margin:calc(var(--pas)*1.8) auto; max-width:var(--mesure); text-align:center; font-family:var(--ui); }
.viz-map-root{ display:inline-block; position:relative; background:var(--encre); color:var(--parchemin); padding:.6em 1.1em; border-radius:8px; font-weight:600; font-size:.9rem; }
.viz-map-root small{ display:block; font-weight:400; font-size:.72rem; opacity:.82; margin-top:.15em; }
.viz-map-root::after{ content:""; position:absolute; top:100%; left:50%; width:2px; height:1.5rem; background:var(--or-clair); translate:-50% 0; }
.viz-map-row{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:1.7rem; }
.viz-map-row::before{ content:""; position:absolute; top:-.85rem; left:15%; right:15%; height:2px; background:var(--or-clair); }
.viz-map-node{ position:relative; flex:1 1 8rem; max-width:11rem; padding:.55em .6em; border-radius:6px; font-size:.74rem; font-weight:600; color:#fff; line-height:1.25; }
.viz-map-node::before{ content:""; position:absolute; bottom:100%; left:50%; width:2px; height:.85rem; background:var(--or-clair); translate:-50% 0; }
.viz-map-node em{ display:block; font-style:normal; font-weight:400; opacity:.88; font-size:.9em; margin-top:.15em; }
.viz-map-node.n-para{ background:var(--terre); } .viz-map-node.n-prog{ background:#B08A2E; } .viz-map-node.n-incl{ background:#5B6C5D; }
@media (max-width:640px){ .viz-map-row::before, .viz-map-node::before{ display:none; } }

/* ===================================================================
   Fiche vivante (pilote tensions) — v2
   7 verset-héros + contexte · 8 exégèse dynamique (affinité+paramètres)
   9 sources brethren (rang 1-2) · 10 versets cliquables
   + illustrations agrandies au survol / cliquables → fiche
   =================================================================== */

/* 7 — Verset-héros dans son contexte de passage */
.viz-verset{ margin:calc(var(--pas)*1.9) auto; max-width:54ch; text-align:center; }
.viz-verset .vv-contexte{ font-family:var(--serif); font-size:.9rem; line-height:1.6; color:var(--encre-douce); font-style:italic; opacity:.78; max-width:48ch; margin-inline:auto; }
.viz-verset .vv-contexte.avant{ margin-bottom:.7rem; } .viz-verset .vv-contexte.apres{ margin-top:.7rem; }
.viz-verset .vv-ancre{ font-family:var(--serif); font-weight:520; font-size:clamp(1.5rem,1.05rem+1.9vw,2.35rem); line-height:1.32; color:var(--encre); letter-spacing:-.012em; font-style:normal; margin:.15em auto; border:none; padding:0; }
.viz-verset .vv-ancre .vv-ref{ display:block; font-family:var(--ui); font-style:normal; font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--or); margin-bottom:.55rem; text-decoration:none; }
.viz-verset .vv-ancre a.vv-ref{ width:max-content; max-width:100%; cursor:pointer; border-bottom:1px dotted var(--or-clair); padding-bottom:1px; transition:color .15s, border-color .15s; }
.viz-verset .vv-ancre a.vv-ref:hover{ color:var(--terre); border-bottom-color:var(--terre); }
.viz-verset .vv-passage{ display:inline-block; margin-top:1rem; font-family:var(--ui); font-size:.8rem; font-weight:500; color:var(--or); background:none; border-bottom:1.5px solid var(--or-clair); }
.viz-verset::after{ content:""; display:block; width:2.5rem; height:2px; margin:1.2rem auto 0; background:var(--or-clair); opacity:.7; }

/* 8 — Exégèse dynamique : affinité (C1-C5) + paramètres de sens (Henebury) */
.viz-exegese{ font-family:var(--ui); max-width:42rem; margin:calc(var(--pas)*1.4) auto; }
.viz-exegese .ex-puce{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--ui); font-size:.82rem; font-weight:600; color:var(--parchemin); background:var(--indigo); border:none; border-radius:99px; padding:.5em 1.05em; cursor:pointer; list-style:none; transition:transform .2s, box-shadow .2s; }
.viz-exegese .ex-puce::-webkit-details-marker{ display:none; }
.viz-exegese .ex-puce::before{ content:attr(data-aff); font-weight:700; background:rgba(255,255,255,.2); border-radius:99px; padding:.08em .55em; }
.viz-exegese .ex-puce::after{ content:"\25B8"; transition:transform .25s; opacity:.75; }
.viz-exegese .ex-puce:hover{ transform:translateY(-1px); }
.viz-exegese[open] .ex-puce{ box-shadow:0 3px 12px rgba(35,32,27,.18); }
.viz-exegese[open] .ex-puce::after{ transform:rotate(90deg); }
.viz-exegese .ex-panneau{ margin-top:.85rem; border-left:2px solid var(--or-clair); padding-left:1.05rem; animation:enter .35s ease both; }
.viz-exegese .ex-panneau[hidden]{ display:none; }
.viz-exegese .ex-quoi{ font-family:var(--serif); font-size:1.02rem; font-style:italic; color:var(--encre-douce); margin:.1rem 0 1rem; }
.viz-exegese .ex-quoi b{ font-style:normal; color:var(--encre); }
.viz-exegese .ex-params{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.viz-exegese .ex-params li{ display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:.6em; font-size:.85rem; color:var(--encre); }
.viz-exegese .ex-params li::before{ content:""; width:10px; height:10px; border-radius:50%; }
.viz-exegese .ex-params li[data-sev="critique"]::before{ background:var(--ecarlate); }
.viz-exegese .ex-params li[data-sev="majeur"]::before{ background:var(--or); }
.viz-exegese .ex-params li[data-sev="modere"]::before{ background:var(--indigo); }
.viz-exegese .ex-params li[data-sev="mineur"]::before{ background:var(--encre-douce); }
.viz-exegese .ex-params b{ font-family:var(--ui); color:var(--or); font-weight:700; white-space:nowrap; }
.viz-exegese .ex-params i{ font-style:normal; color:var(--encre-douce); font-size:.94em; }
.viz-exegese .ex-legende{ font-size:.73rem; color:var(--encre-douce); margin-top:.8rem; }
.viz-exegese .ex-legende b{ color:var(--encre); font-weight:600; }

/* 9 — Sources brethren (rang 1-2) avec lien vers l'article complet */
.viz-sources{ font-family:var(--ui); max-width:44rem; margin:calc(var(--pas)*1.5) auto; padding:1rem 1.25rem; background:var(--parchemin-2); border-radius:8px; }
.viz-sources > b{ display:block; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--encre-douce); margin-bottom:.75rem; }
.viz-sources ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.viz-sources li{ display:grid; grid-template-columns:auto 1fr; gap:.65em; align-items:baseline; font-size:.87rem; line-height:1.45; }
.viz-sources .rang{ font-size:.62rem; font-weight:700; color:#fff; background:#8a6a00; border-radius:99px; padding:.18em .6em; white-space:nowrap; align-self:start; }
.viz-sources .rang.r2{ background:#A9812B; }
.viz-sources a{ background:none; border-bottom:1px solid var(--or-clair); color:var(--or); font-weight:500; }
.viz-sources .src-auteur{ font-weight:600; color:var(--encre); }
.viz-sources .src-note{ display:block; color:var(--encre-douce); font-size:.93em; margin-top:.1em; }

/* 10 — Versets « en clair » rendus cliquables par publish.js (concordance.bible / biblicom) */
.published-container a.lien-verset{ color:var(--encre); font-weight:inherit; padding-bottom:1px; text-decoration:none;
  background:linear-gradient(var(--or-clair),var(--or-clair)) 0 100% / 100% 1px no-repeat; transition:background-size .2s, color .2s; }
.published-container a.lien-verset:hover{ color:var(--or); background-image:linear-gradient(var(--or),var(--or)); background-size:100% 2px; }

/* --- Illustrations dynamiques : agrandies au survol, cliquables → fiche --- */
[data-note]{ cursor:pointer; }
.viz-tension[data-note]{ position:relative; border-radius:12px; padding:.8rem 1.1rem; transition:transform .3s ease, background-color .3s ease; }
.viz-tension[data-note]:hover, .viz-tension[data-note]:focus-visible{ transform:scale(1.05); background:var(--parchemin-2); outline:none; }
.viz-tension .detail{ position:absolute; left:50%; top:calc(100% + .25rem); translate:-50% 0; font-family:var(--ui); font-size:.72rem; font-weight:500; color:var(--or); background:var(--parchemin); padding:.2em .65em; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s; }
.viz-tension[data-note]:hover .detail, .viz-tension[data-note]:focus-visible .detail{ opacity:1; }
.viz-map-node[data-note]{ transition:transform .25s ease, box-shadow .25s ease; }
.viz-map-node[data-note]:hover, .viz-map-node[data-note]:focus-visible{ transform:translateY(-4px) scale(1.04); box-shadow:0 6px 18px rgba(35,32,27,.24); outline:none; z-index:3; }
.viz-map-node .plus{ display:block; max-height:0; overflow:hidden; opacity:0; font-weight:400; font-size:.9em; transition:max-height .3s ease, opacity .3s ease, margin .3s ease; }
.viz-map-node[data-note]:hover .plus, .viz-map-node[data-note]:focus-visible .plus{ max-height:5rem; opacity:.95; margin-top:.35em; }

/* -- exégèse portée par le verset-héros (affinité + paramètres sur le verset de départ) -- */
.viz-verset .viz-exegese{ margin:1.5rem auto 0; max-width:40rem; }
.viz-verset .viz-exegese .ex-panneau{ text-align:left; }

/* -- sources : liens de CONTENU (FR/EN) + rang cliquable vers l'échelle des rangs -- */
.viz-sources .src-liens{ display:inline-flex; gap:.4rem; margin-left:.45em; vertical-align:baseline; }
.viz-sources a.src-lang{ font-family:var(--ui); font-size:.66rem; font-weight:700; letter-spacing:.04em; color:var(--or); background:none; border:1px solid var(--or-clair); border-radius:99px; padding:.06em .5em; }
.viz-sources a.src-lang:hover{ background:var(--or-clair); color:#fff; }
.viz-sources .rang[data-note]:hover{ filter:brightness(1.12); text-decoration:underline; }
.viz-sources .src-legende{ margin:.95rem 0 0; padding-top:.75rem; border-top:1px solid var(--parchemin); font-size:.75rem; color:var(--encre-douce); }
.viz-sources .src-legende b{ color:var(--encre); }
.viz-sources .src-rangs-lien{ color:var(--or); border-bottom:1px solid var(--or-clair); }

/* 11 — Échelle des rangs (1-8) : palette « garde-dépôt », sœur de viz-affinity */
.viz-rangs{ list-style:none; display:flex; gap:3px; max-width:36rem; margin:calc(var(--pas)*1.6) auto; padding:0; font-family:var(--ui); }
.viz-rangs li{ position:relative; flex:1; height:34px; border-radius:4px; display:grid; place-items:center; font-size:.74rem; font-weight:700; color:#fff; transition:transform .2s; }
.viz-rangs li:hover{ transform:translateY(-4px); z-index:2; }
.viz-rangs li:nth-child(1){background:#8a6a00}.viz-rangs li:nth-child(2){background:#A9812B}.viz-rangs li:nth-child(3){background:#b8925f}.viz-rangs li:nth-child(4){background:#5B6C5D}.viz-rangs li:nth-child(5){background:#556070}.viz-rangs li:nth-child(6){background:#6b6b76}.viz-rangs li:nth-child(7){background:#8a8a90}.viz-rangs li:nth-child(8){background:#a9a29b}
.viz-rangs li::after{ content:attr(data-label); position:absolute; bottom:calc(100% + 6px); left:50%; translate:-50% 0; background:var(--encre); color:var(--parchemin); font-size:.7rem; font-weight:500; white-space:normal; text-align:center; max-width:15rem; width:max-content; padding:.35em .65em; border-radius:4px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:4; }
.viz-rangs li:hover::after{ opacity:1; }

/* 13 — Boucle auto-immune de la dérive doctrinale (CSS-only) */
.viz-immunitaire{ margin:calc(var(--pas)*1.7) auto; max-width:46rem; font-family:var(--ui); text-align:center; }
.viz-immunitaire .vi-cycle{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1.9rem; counter-reset:vi; }
.viz-immunitaire .vi-cycle li{ position:relative; counter-increment:vi; flex:0 1 10rem; background:var(--parchemin-2); color:var(--encre); border:1px solid transparent; border-radius:8px; padding:.6em .8em; font-size:.78rem; font-weight:500; line-height:1.3; animation:vi-pulse 5.2s ease-in-out infinite; }
.viz-immunitaire .vi-cycle li:nth-child(2){ animation-delay:1.3s; } .viz-immunitaire .vi-cycle li:nth-child(3){ animation-delay:2.6s; } .viz-immunitaire .vi-cycle li:nth-child(4){ animation-delay:3.9s; }
.viz-immunitaire .vi-cycle li::before{ content:counter(vi); display:inline-grid; place-items:center; width:1.35em; height:1.35em; margin-right:.45em; border-radius:50%; background:var(--airain); color:#fff; font-size:.72em; font-weight:700; vertical-align:middle; }
.viz-immunitaire .vi-cycle li:not(:last-child)::after{ content:"\2192"; position:absolute; right:-1.35rem; top:50%; translate:0 -50%; color:var(--or-clair); font-weight:700; }
@keyframes vi-pulse{ 0%,100%{ box-shadow:none; border-color:transparent; transform:none; } 12%{ box-shadow:0 4px 16px rgba(140,90,43,.30); border-color:var(--airain); transform:translateY(-2px); } }
.viz-immunitaire .vi-boucle{ margin-top:1rem; font-size:.82rem; font-style:italic; color:var(--airain); }
@media (max-width:640px){ .viz-immunitaire .vi-cycle li::after{ display:none; } }

/* 14 — Questions repliables (style briefing/étude, réponses masquées — <details> natif) */
.qa-bloc{ max-width:var(--mesure); margin:calc(var(--pas)*2.2) auto 0; }
.qa-bloc > .qa-titre{ font-family:var(--ui); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-douce); margin-bottom:.9rem; display:flex; align-items:center; gap:.7rem; }
.qa-bloc > .qa-titre::after{ content:""; flex:1; height:1px; background:var(--parchemin-2); }
details.qa{ border-bottom:1px solid var(--parchemin-2); }
details.qa > summary{ list-style:none; cursor:pointer; position:relative; padding:.8rem 2rem .8rem 0; font-family:var(--serif); font-weight:500; font-size:1.02rem; line-height:1.4; color:var(--encre); transition:color .2s; }
details.qa > summary::-webkit-details-marker{ display:none; }
details.qa > summary::after{ content:"+"; position:absolute; right:.2rem; top:.7rem; font-family:var(--ui); font-size:1.35rem; font-weight:300; color:var(--or); transition:transform .25s ease; }
details.qa[open] > summary::after{ transform:rotate(45deg); }
details.qa > summary:hover{ color:var(--or); }
details.qa .qa-rep{ padding:0 0 1.1rem; color:var(--encre-douce); font-size:.97rem; line-height:1.75; animation:qa-in .3s ease both; }
@keyframes qa-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
:where(details.qa > summary):focus-visible{ outline:2px solid var(--or-clair); outline-offset:3px; border-radius:2px; }

/* 12 — Footer légal (injecté par publish.js en bas de chaque page) */
.eee-footer{ max-width:var(--mesure); margin:calc(var(--pas)*3) auto 0; padding-top:var(--pas); border-top:1px solid var(--parchemin-2); font-family:var(--ui); text-align:center; }
.eee-footer nav{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; justify-content:center; font-size:.8rem; }
.eee-footer nav a{ color:var(--encre-douce); background:none; border-bottom:1px solid transparent; padding-bottom:1px; }
.eee-footer nav a:hover{ color:var(--or); border-color:var(--or-clair); }
.eee-footer small{ display:block; margin-top:.7rem; font-size:.72rem; color:var(--encre-douce); opacity:.85; }
.eee-footer small a{ color:var(--encre-douce); background:none; border-bottom:1px solid var(--or-clair); }
.eee-footer small a:hover{ color:var(--or); }

/* 15 — Menu de navigation (haut, sticky, langue-aware ; motif disclosure sur mobile) */
.eee-nav{ position:sticky; top:0; z-index:60; border-bottom:1px solid var(--parchemin-2);
  background:var(--parchemin); background:color-mix(in srgb, var(--parchemin) 90%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.eee-nav-in{ position:relative; max-width:var(--mesure); margin-inline:auto; display:flex; align-items:center; gap:1rem; padding:.5rem var(--pas); }
.eee-nav-home{ font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:.06em; color:var(--encre); background:none; }
.eee-nav-home:hover{ color:var(--or); }
.eee-nav-links{ list-style:none; display:flex; flex-wrap:wrap; gap:.15rem; margin:0 0 0 auto; padding:0; }
.eee-nav-links a{ display:block; font-family:var(--ui); font-size:.84rem; color:var(--encre-douce); background:none; padding:.4em .75em; border-radius:7px; transition:background-color .2s, color .2s; }
.eee-nav-links a:hover{ color:var(--or); background:var(--parchemin-2); }
.eee-nav-links a[aria-current]{ color:var(--or); font-weight:600; box-shadow:inset 0 -2px 0 var(--or-clair); }
.eee-nav-toggle{ display:none; margin-left:auto; font-size:1.35rem; line-height:1; background:none; border:none; color:var(--encre); cursor:pointer; padding:.15em .4em; border-radius:7px; }
.eee-nav-toggle:hover{ color:var(--or); background:var(--parchemin-2); }
.eee-lang{ display:inline-flex; align-items:center; font-family:var(--ui); font-size:.8rem; margin-left:.7rem; padding-left:.75rem; border-left:1px solid var(--parchemin-2); }
.eee-lang-cur{ font-weight:700; color:var(--or); padding:.2em .35em; }
.eee-lang-alt{ color:var(--encre-douce); background:none; padding:.2em .4em; border-radius:5px; transition:background-color .2s, color .2s; }
.eee-lang-alt:hover{ color:var(--or); background:var(--parchemin-2); }
@media (max-width:720px){
  .eee-lang{ order:2; margin-left:auto; }
  .eee-nav-toggle{ order:3; margin-left:.4rem; }
  .eee-nav-in{ flex-wrap:wrap; }
  .eee-nav-toggle{ display:block; }
  .eee-nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; margin:0;
    background:var(--parchemin); border-bottom:1px solid var(--parchemin-2); padding:.25rem var(--pas) .6rem; box-shadow:0 10px 24px rgba(35,32,27,.14); }
  .eee-nav.is-open .eee-nav-links{ display:flex; }
  .eee-nav-links a{ font-size:.95rem; padding:.65em .4em; border-bottom:1px solid var(--parchemin-2); border-radius:0; }
  .eee-nav-links a[aria-current]{ box-shadow:none; }
}

@media (prefers-reduced-motion:reduce){
  .viz-tension[data-note]:hover, .viz-tension[data-note]:focus-visible,
  .viz-map-node[data-note]:hover, .viz-map-node[data-note]:focus-visible{ transform:none; }
  .viz-exegese .ex-panneau{ animation:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:800px){
  .published-container{ font-size:1.05rem; }
  .markdown-preview-sizer{ padding-inline:1.1rem; }
  .viz-verset .vv-ancre{ font-size:1.5rem; }
}

/* ---------- Sélecteur de langue FR↔ES (item 4) ---------- */
.lang-switch{
  float:right; margin:.1em 0 .5em 1em;
  display:inline-flex; gap:.45em; align-items:center;
  font-family:var(--ui); font-size:.75rem; font-weight:600; letter-spacing:.02em;
  padding:.28em .7em; border-radius:99px;
  background:var(--parchemin-2); border:1px solid rgba(0,0,0,.08);
}
.lang-switch .ls-cur{ color:var(--encre-douce); }
.lang-switch a{ color:var(--or); text-decoration:none; }
.lang-switch a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- Toggle taille de texte (reader, cf. bible.com) ---------- */
/* Échelle relative posée sur <html data-text-size> par eee.js (+ garde anti-FOUC
   inline dans Head.tsx). Appliquée en em sur le conteneur de lecture : une seule
   passe, pas de compounding ; les titres (clamp) restent structurels. À l'échelle 1
   = aucun changement visuel, et neutre sous Obsidian Publish (attribut jamais posé). */
:root{ --eee-text-scale:1; }
:root[data-text-size="s"]{  --eee-text-scale:.92; }
:root[data-text-size="m"]{  --eee-text-scale:1; }
:root[data-text-size="l"]{  --eee-text-scale:1.14; }
:root[data-text-size="xl"]{ --eee-text-scale:1.28; }
article .markdown-preview-view{ font-size:calc(1em * var(--eee-text-scale)); }

/* bouton "A" injecté dans la toolbar (à côté du mode sombre) — le glyphe grandit avec le niveau */
button.eee-textsize{
  background:none; border:none; cursor:pointer; padding:0;
  width:2rem; height:2rem; display:flex; align-items:center; justify-content:center;
  color:var(--encre-douce); font-family:var(--serif); font-weight:600; line-height:1;
  transition:color .2s ease;
}
button.eee-textsize:hover{ color:var(--or); }
button.eee-textsize[data-level="s"]{  font-size:.8rem; }
button.eee-textsize[data-level="m"]{  font-size:1rem; }
button.eee-textsize[data-level="l"]{  font-size:1.2rem; }
button.eee-textsize[data-level="xl"]{ font-size:1.42rem; }

/* ---------- Grille de cartes pour les pages Index (cssclass: cards) ---------- */
/* Scopé aux listes de PREMIER niveau (> ul) : les sous-listes restent des listes
   normales à l'intérieur de la carte. auto-fill => 1 colonne sur mobile. */
article.cards .markdown-preview-view > ul{
  list-style:none; padding-left:0; margin-block:var(--pas);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); gap:.9rem;
}
article.cards .markdown-preview-view > ul > li{
  margin:0; padding:.85rem 1rem;
  background:var(--parchemin); border:1px solid var(--parchemin-2); border-radius:.6rem;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
article.cards .markdown-preview-view > ul > li:hover{
  border-color:var(--or-clair); box-shadow:0 6px 18px rgba(35,32,27,.09); transform:translateY(-2px);
}
article.cards .markdown-preview-view > ul > li > strong:first-child{
  display:block; font-family:var(--serif); font-weight:560; margin-bottom:.15em;
}
article.cards .markdown-preview-view > ul > li ul{
  list-style:disc; padding-left:1.1em; margin-block:.35em 0; display:block; gap:0;
}
@media (prefers-reduced-motion:reduce){
  article.cards .markdown-preview-view > ul > li:hover{ transform:none; }
}

/* BEGIN viz-type (scaffold) — figure typologique Remmers : objet + matiere/couleur + sens (gate-validated) */
.viz-type{ display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.15rem; align-items:baseline;
  max-width:44rem; margin:calc(var(--pas)*1.6) auto; padding:1rem 1.2rem;
  background:var(--parchemin); border:1px solid var(--parchemin-2); border-left:3px solid var(--airain); border-radius:.6rem; }
.viz-type[data-token="sang"]{ border-left-color:var(--sang); }
.viz-type[data-token="ecarlate"]{ border-left-color:var(--ecarlate); }
.viz-type[data-token="or"]{ border-left-color:var(--or-clair); }
.viz-type[data-token="bleu-ciel"]{ border-left-color:var(--bleu-ciel); }
.viz-type[data-token="eau"]{ border-left-color:var(--eau); }
.viz-type[data-token="feu"]{ border-left-color:var(--feu); }
.viz-type .vt-objet{ grid-column:1; font-family:var(--serif); font-weight:560; font-size:1.05rem; line-height:1.25; color:var(--encre); }
.viz-type .vt-ref{ display:block; font-family:var(--ui); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--encre-douce); margin-top:.2em; }
.viz-type .vt-sens{ grid-column:2; font-family:var(--serif); font-size:.98rem; line-height:1.62; color:var(--encre-douce); }
.viz-type .vt-sens b{ color:var(--encre); font-weight:520; font-style:normal; }
@media (max-width:560px){ .viz-type{ grid-template-columns:1fr; } .viz-type .vt-sens{ grid-column:1; } }
/* END viz-type */

/* BEGIN palette-remmers (generated) — source: Symbolique biblique (Remmers) — palette et motifs pour l'atelier EEE (MoC).md; do not edit by hand, run user-publish-palette-sync */
:root{
  --bleu-ciel:#2E4A7A;
  --pourpre:#5B2A4E;
  --sang:#6E1414;
  --ecarlate:#9E2A2B;
  --argent:#A7ADB5;
  --airain:#8C5A2B;
  --fer:#454A50;
  --lin:#FAF7F0;
  --feu:#C25A1E;
  --feu-2:#E0A32E;
  --eau:#35708E;
}
/* --parchemin/--encre/--or are theme-bridged in :root; intentionally not generated. */
/* END palette-remmers */

/* ============================================================
   Bible : références inline (hover-card) + lecteur trois-panneaux
   ============================================================ */
.vv-scripture { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; color: inherit; }
.vv-scripture:hover { color: var(--secondary); }

.eee-bibcard {
  position: absolute; z-index: 70; max-width: 340px; padding: .7rem .9rem;
  background: var(--light); color: var(--darkgray);
  border: 1px solid var(--lightgray); border-radius: 8px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .16);
  font-size: .88rem; line-height: 1.45;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.eee-bibcard.is-open { opacity: 1; visibility: visible; }
.eee-bibcard strong { color: var(--secondary); }
.eee-bibcard p { margin: .35rem 0 0; }
.eee-bibcard .muted { color: var(--gray); font-style: italic; }
.eee-bibcard .bc-notes { margin-top: .5rem; font-size: .82rem; }
.eee-bibcard .bc-ext { margin-top: .4rem; font-size: .78rem; }

/* Lecteur (cf. biblearc) : barre de référence + sélecteur livre/chapitre + colonne de lecture */
.br { max-width: 40rem; margin: 0 auto; position: relative; }
.br-bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 0; background: var(--light); border-bottom: 1px solid var(--lightgray);
}
.br-ref { font-weight: 600; font-size: 1.1rem; padding: .3rem .9rem; border-radius: 999px; background: none; border: 1px solid var(--lightgray); color: inherit; cursor: pointer; }
.br-ref:hover, .br-ref[aria-expanded="true"] { background: var(--lightgray); }
.br-nav { width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--lightgray); background: none; color: inherit; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.br-nav:hover { background: var(--lightgray); }
.br-nav[disabled] { opacity: .3; cursor: default; }

.br-picker {
  position: absolute; left: 0; right: 0; top: 3rem; z-index: 10; max-height: 70vh; overflow: auto; padding: 1rem 1.2rem;
  background: var(--light); border: 1px solid var(--lightgray); border-radius: 10px; box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}
.br-picker[hidden] { display: none; }
.br-picker h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray); margin: .2rem 0 .5rem; }
.br-testament + .br-testament, .br-chaps-wrap { margin-top: .9rem; }
.br-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
.br-chip { padding: .22rem .55rem; border-radius: 6px; border: 1px solid transparent; background: var(--lightgray); color: inherit; cursor: pointer; font-size: .85rem; }
.br-chip.is-empty { opacity: .4; }                              /* aucun texte chargé */
.br-chip.is-cited { border-color: var(--secondary); }          /* discuté dans l'atelier */
.br-chip.is-current { background: var(--secondary); color: var(--light); }
.br-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); gap: .25rem; }
.br-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: var(--lightgray); border: 1px solid transparent; color: inherit; cursor: pointer; font-size: .82rem; position: relative; }
.br-cell.is-empty { opacity: .4; }                              /* chapitre sans texte chargé */
.br-cell.is-cited { border-color: var(--secondary); }
.br-cell.is-cited::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--secondary); }
.br-cell.is-current { background: var(--secondary); color: var(--light); }

.br-text { font-family: Georgia, "Iowan Old Style", Palatino, serif; font-size: 1.08rem; line-height: 1.85; margin-top: 1.5rem; text-align: justify; hyphens: auto; }
.br-text .v sup { color: var(--gray); font-weight: 600; font-size: .68em; margin: 0 .15em 0 .1em; user-select: none; }
.br-text .v.is-cited { background: color-mix(in srgb, var(--tertiary) 16%, transparent); border-radius: 3px; padding: 0 .08em; }
.br-text .v.is-target { box-shadow: inset 0 -.6em 0 color-mix(in srgb, var(--tertiary) 34%, transparent); }
.br-empty { color: var(--gray); font-style: italic; }

/* Notes de l'atelier en marge (sidenote flottée, cf. Tufte) — repli popover sur écran étroit */
.center:has(#eee-bible) { max-width: min(64rem, 96vw); }        /* élargit la colonne pour loger la gouttière */
.vn.is-note { color: var(--secondary); }                        /* verset cité : numéro accentué = affordance */
.br-mnote { color: var(--gray); font-size: .82rem; line-height: 1.45; }
.br-mnote .mn-ref { font-weight: 600; color: var(--secondary); white-space: nowrap; }
.br-mnote a { border-bottom: 1px solid transparent; }
.br-mnote a:hover { border-color: currentColor; }
.v.is-hl { background: color-mix(in srgb, var(--tertiary) 30%, transparent) !important; }
.br-pop { max-width: 300px; }

@media (max-width: 59.99rem) {           /* étroit : note repliée -> popover au clic sur le verset */
  .br-mnote { display: none; }
  .v.is-cited { cursor: pointer; }
  .br-text { text-align: left; hyphens: none; }
}
@media (min-width: 60rem) {              /* large : texte à gauche, notes flottées dans la marge droite */
  .br { max-width: 58rem; }
  .br-bar, .br-picker, .br-text { max-width: 38rem; }
  .br-mnote {
    float: right; clear: right; width: 17rem; margin: .15rem -20rem .7rem 0; text-align: left;
    font-family: var(--ui, system-ui, sans-serif);
  }
  .v.is-cited:hover + .br-mnote, .br-mnote:hover { color: var(--darkgray); }
}

.br-attrib { margin: 2rem auto 0; max-width: 38rem; padding-top: .7rem; border-top: 1px solid var(--lightgray); font-size: .74rem; line-height: 1.5; color: var(--encre-douce); font-family: var(--ui, system-ui, sans-serif); }  /* --gray (#9A8E76) échouait AA sur parchemin (2.87:1) — render-check */
.br-attrib a { color: inherit; text-decoration: underline; }

/* Req 1 — couleur du verset selon le type de note liée (palette Remmers) + légende */
.br-text .v.is-cited { background: color-mix(in srgb, var(--tertiary) 14%, transparent); }
.br-text .v[data-k="definition"] { background: color-mix(in srgb, var(--indigo) 16%, transparent); }
.br-text .v[data-k="tension"]    { background: color-mix(in srgb, var(--pourpre) 18%, transparent); }
.br-text .v[data-k="cadre"]      { background: color-mix(in srgb, var(--terre) 15%, transparent); }
.br-text .v[data-k="citation"]   { background: color-mix(in srgb, var(--or-clair) 22%, transparent); }
.br-text .v[data-k="wiki"]       { background: color-mix(in srgb, var(--sang) 15%, transparent); }
.br-text .v[data-k="renvoi"]     { background: color-mix(in srgb, var(--encre-douce) 16%, transparent); }
.br-text .v[data-k="definition"] .vn.is-note, .br-mnote[data-k="definition"] .mn-ref { color: var(--indigo); }
.br-text .v[data-k="tension"] .vn.is-note,    .br-mnote[data-k="tension"] .mn-ref    { color: var(--pourpre); }
.br-text .v[data-k="cadre"] .vn.is-note,      .br-mnote[data-k="cadre"] .mn-ref      { color: var(--terre); }
.br-text .v[data-k="citation"] .vn.is-note,   .br-mnote[data-k="citation"] .mn-ref   { color: var(--or-clair); }
.br-text .v[data-k="wiki"] .vn.is-note,       .br-mnote[data-k="wiki"] .mn-ref       { color: var(--sang); }
.br-text .v[data-k="renvoi"] .vn.is-note,     .br-mnote[data-k="renvoi"] .mn-ref     { color: var(--encre-douce); }

.br-legend { max-width: 38rem; margin: 1.4rem auto 0; display: flex; flex-wrap: wrap; gap: .4rem; font-family: var(--ui, system-ui, sans-serif); font-size: .72rem; }
.br-legend .lg { padding: .12rem .5rem; border-radius: 99px; color: #fff; }
.br-legend .lg[data-k="definition"] { background: var(--indigo); }
.br-legend .lg[data-k="tension"]    { background: var(--pourpre); }
.br-legend .lg[data-k="cadre"]      { background: var(--terre); }
.br-legend .lg[data-k="citation"]   { background: var(--or-clair); }
.br-legend .lg[data-k="wiki"]       { background: var(--sang); }
.br-legend .lg[data-k="renvoi"]     { background: var(--encre-douce); }

/* Req 3 — poésie : sauts de ligne + indentation */
.br-text.is-poetry { text-align: left; hyphens: none; }
.br-text .poem[data-p="2"] { padding-left: 1.5rem; }
.br-text .poem[data-p="3"] { padding-left: 3rem; }
.br-text .poem[data-p="4"] { padding-left: 4.5rem; }

/* ===================================================================
   ITS-inspired — collection de callouts, lede/seuil, cartes découverte
   Palette : tokens Remmers existants uniquement (aucune couleur neuve).
   Cible : callouts Quartz (.callout[data-callout]) + classes HTML inline.
   =================================================================== */

/* ---- Tokens de seuil (réutilisent la palette ; usage futur JS/HTML) ---- */
:root{
  --seuil-voir:var(--indigo);     /* ① Voir   — établir, penser, situer */
  --seuil-garder:var(--terre);    /* ② Garder — doctrine & sources      */
  --seuil-adorer:var(--or-clair); /* ③ Adorer — admirer, faire admirer  */
  --seuil-vivre:var(--sang);      /* ④ Vivre & transmettre — vie en J    */
}

/* ---- Lede : la 1re citation d'une page = accroche/seuil mise en valeur ---- */
article blockquote:first-of-type{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem, .95rem + .6vw, 1.35rem); line-height:1.5;
  color:var(--encre-douce); max-width:var(--mesure);
  margin:0 auto calc(var(--pas)*1.4); padding:.2em 0 .2em 1.1rem;
  border-left:3px solid var(--or-clair);
}
article blockquote:first-of-type strong{ font-style:normal; color:var(--encre); }

/* ---- Collection de callouts (signature ITS) — bordure + titre + fond teinté ---- */
.callout{
  --cl:var(--indigo);
  border-radius:8px; border:1px solid color-mix(in srgb, var(--cl) 30%, transparent);
  border-left:4px solid var(--cl);
  background:color-mix(in srgb, var(--cl) 7%, var(--parchemin));
  margin:calc(var(--pas)*1.2) auto; padding:.9rem 1.1rem; max-width:var(--mesure);
}
.callout-title{ font-family:var(--ui); font-weight:700; font-size:.9rem; color:var(--cl);
  display:flex; align-items:center; gap:.5em; letter-spacing:.01em; }
.callout-content{ margin-top:.5rem; }
.callout-content > :first-child{ margin-top:0; } .callout-content > :last-child{ margin-bottom:0; }
.callout[data-callout="note"],.callout[data-callout="info"],.callout[data-callout="abstract"],.callout[data-callout="example"]{ --cl:var(--indigo); }
.callout[data-callout="tip"],.callout[data-callout="hint"],.callout[data-callout="important"],.callout[data-callout="quote"],.callout[data-callout="cite"]{ --cl:var(--or-clair); }
.callout[data-callout="success"],.callout[data-callout="check"],.callout[data-callout="done"]{ --cl:var(--or); }
.callout[data-callout="question"],.callout[data-callout="help"],.callout[data-callout="faq"]{ --cl:var(--pourpre); }
.callout[data-callout="warning"],.callout[data-callout="caution"],.callout[data-callout="attention"]{ --cl:var(--terre); }
.callout[data-callout="danger"],.callout[data-callout="error"],.callout[data-callout="bug"]{ --cl:var(--ecarlate); }
.callout[data-callout="failure"],.callout[data-callout="missing"]{ --cl:var(--sang); }

/* ---- qa-bloc : styliser le <summary> (mes notes) au niveau du design ---- */
.qa-bloc > summary{ font-family:var(--ui); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-douce); margin-bottom:.9rem; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:.7rem; }
.qa-bloc > summary::-webkit-details-marker{ display:none; }
.qa-bloc > summary::before{ content:"\25B8"; color:var(--or-clair); transition:transform .25s; }
.qa-bloc[open] > summary::before{ transform:rotate(90deg); }
.qa-bloc > summary::after{ content:""; flex:1; height:1px; background:var(--parchemin-2); }
.qa-bloc[open] > summary{ margin-bottom:1.1rem; }

/* ---- Utilitaire multi-colonnes (ITS) — via <div class="columns"> en HTML ---- */
.columns{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:clamp(1rem,3vw,2rem); align-items:start; margin:calc(var(--pas)*1.2) auto; }

/* ---- Pied « découverte » (chantier C) : styles posés d'avance, dégradation gracieuse ---- */
.decouverte{ display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem,1fr)); gap:.8rem;
  max-width:var(--mesure); margin:calc(var(--pas)*2.4) auto 0; padding-top:1.4rem;
  border-top:1px solid var(--parchemin-2); font-family:var(--ui); }
.decouverte a{ display:block; padding:.85rem 1rem; border:1px solid var(--parchemin-2); border-radius:10px;
  text-decoration:none; color:var(--encre); background:var(--parchemin); transition:transform .18s, border-color .18s, box-shadow .18s; }
.decouverte a:hover{ transform:translateY(-3px); border-color:var(--or-clair); box-shadow:0 6px 18px rgba(35,32,27,.10); }
.decouverte .d-k{ display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--or); margin-bottom:.3rem; }
.decouverte .d-t{ font-family:var(--serif); font-size:1rem; line-height:1.3; }
.decouverte a[data-porte="proche"]:hover{ border-color:var(--indigo); }
.decouverte a[data-porte="inconnu"]:hover{ border-color:var(--pourpre); }
.decouverte a[data-porte="jamais-vu"]:hover{ border-color:var(--sang); }
.decouverte a[data-porte="proche"] .d-k{ color:var(--indigo); }
.decouverte a[data-porte="inconnu"] .d-k{ color:var(--pourpre); }
.decouverte a[data-porte="jamais-vu"] .d-k{ color:var(--sang); }
@media (prefers-reduced-motion:reduce){ .decouverte a:hover{ transform:none; } }

/* 14 — Confrontation de citations : amorce inductive (besoin de savoir), subordonnée à une tension biblique.
   Ouvreur haut de page ; pose la question AVANT la règle (show-don't-tell). data-fonction="porteur". */
.viz-confrontation{ font-family:var(--ui); max-width:var(--mesure); margin:calc(var(--pas)*1.8) auto; }
.viz-confrontation .cf-amorce{ font-family:var(--serif); font-size:clamp(1.15rem,1rem+.7vw,1.5rem); font-style:italic; line-height:1.45; color:var(--encre); text-align:center; max-width:46ch; margin:0 auto 1.2rem; }
.viz-confrontation .cf-quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; }
.viz-confrontation .cf-quote{ margin:0; padding:.9rem 1.1rem; background:var(--parchemin-2); border-radius:8px; border-left:4px solid var(--indigo); }
.viz-confrontation .cf-quote[data-relation="parallele"]{ border-left-color:var(--indigo); }
.viz-confrontation .cf-quote[data-relation="divergent"]{ border-left-color:var(--or-clair); }
.viz-confrontation .cf-quote[data-relation="contradictoire"]{ border-left-color:var(--terre); }
.viz-confrontation .cf-quote p{ font-family:var(--serif); font-size:.95rem; line-height:1.5; color:var(--encre); margin:0 0 .6rem; }
.viz-confrontation .cf-quote cite{ font-style:normal; font-size:.78rem; color:var(--encre-douce); }
.viz-confrontation .cf-quote cite .src-auteur{ font-weight:600; color:var(--encre); }
.viz-confrontation .cf-quote cite a{ background:none; border-bottom:1px solid var(--or-clair); color:var(--or); }
.viz-confrontation .cf-quote .rang{ font-size:.6rem; font-weight:700; color:#fff; background:#8a6a00; border-radius:99px; padding:.16em .55em; margin-right:.4em; }
.viz-confrontation .cf-quote .rang.r2{ background:var(--or-clair); }
.viz-confrontation .cf-tension{ margin:1.2rem auto 0; padding-top:.8rem; border-top:1px solid var(--parchemin-2); text-align:center; font-size:.82rem; color:var(--encre-douce); }
.viz-confrontation .cf-tension a{ color:var(--or); border-bottom:1px solid var(--or-clair); }

/* 15 — Cas : jugement situé (know-when), branches en <details> natif (sans JS). data-fonction="porteur". */
.viz-cas{ font-family:var(--ui); max-width:44rem; margin:calc(var(--pas)*1.6) auto; padding:1rem 1.25rem; background:var(--parchemin-2); border-radius:8px; }
.viz-cas .cas-situation{ font-family:var(--serif); font-size:1rem; line-height:1.55; color:var(--encre); margin:0 0 1rem; }
.viz-cas .cas-situation b{ font-family:var(--ui); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--terre); margin-right:.5em; }
.viz-cas .cas-branches{ display:grid; gap:.55rem; }
.viz-cas .cas-branche{ border-left:2px solid var(--or-clair); }
.viz-cas .cas-branche > summary{ list-style:none; cursor:pointer; font-weight:600; font-size:.9rem; color:var(--encre); padding:.5rem .9rem; background:var(--parchemin); border-radius:0 6px 6px 0; transition:background-color .2s; }
.viz-cas .cas-branche > summary::-webkit-details-marker{ display:none; }
.viz-cas .cas-branche > summary::before{ content:"\25B8"; color:var(--or); margin-right:.55em; transition:transform .25s; display:inline-block; }
.viz-cas .cas-branche[open] > summary::before{ transform:rotate(90deg); }
.viz-cas .cas-branche > summary:hover{ background:var(--parchemin-2); }
.viz-cas .cas-issue{ font-family:var(--serif); font-size:.92rem; line-height:1.55; color:var(--encre-douce); padding:.7rem .9rem .3rem 1.4rem; }
.viz-cas .cas-issue b{ font-style:normal; color:var(--encre); }