/* ===================================================================
   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{
  --parchemin:#F6F1E7; --parchemin-2:#EFE7D6;
  --encre:#23201B;         /* corps : ~13:1 (AAA) */
  --encre-douce:#5A5348;
  --or:#7A5B12;            /* texte / liens : ~5:1 (AA) */
  --or-clair:#A9812B;      /* ornements NON-textuels */
  --terre:#9C4A2F;         /* accent secondaire */
  --indigo:#2E4057;

  --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);
}

body.theme-dark{
  --parchemin:#17150F; --parchemin-2:#1E1B14;
  --encre:#E8E0CE; --encre-douce:#A79C86;
  --or:#D8B15A; --or-clair:#C9A24A; --terre:#C46A4A;
}

/* ---------- 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); }
.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); will-change:transform; }

/* ---------- 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; }
@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(--terre); }
.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(--terre); 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(156,74,47,.30); border-color:var(--terre); transform:translateY(-2px); } }
.viz-immunitaire .vi-boucle{ margin-top:1rem; font-size:.82rem; font-style:italic; color:var(--terre); }
@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; }
}
