/* ===================================================================
   atelier.e-e-e.bible — COUCHE D'IDENTITÉ
   Refonte « depuis le début » (2026-09-03). Identité minimaliste
   biblique : parchemin, encre, or-terre, Fraunces, souffle et gravitas.

   PRINCIPE DIRECTEUR — double registre.
   Le clair et le sombre sont deux COMPOSITIONS À PART ENTIÈRE, chacune
   écrite en valeurs explicites et calibrée WCAG AA séparément. On ne
   dérive plus l'une de l'autre par le pont automatique light↔dark : ce
   pont laissait la palette Remmers (calibrée pour le parchemin) tomber
   à 1,5–2,5:1 en sombre, sans qu'aucun gate ne le voie — le preflight
   teste le contraste contre le parchemin en dur, et le render-check ne
   rend que le thème par défaut. Chaque token doctrinal a désormais sa
   variante sombre : MÊME sens, MÊME teinte, luminance recalibrée.

   PÉRIMÈTRE. Ce bloc ne couvre que l'identité (tokens, typographie,
   mise en page, surfaces, mouvement, a11y). Les composants viz-*, le
   lecteur biblique .br-*, les callouts ITS et le bloc palette généré
   vivent plus bas et ne sont pas touchés ici.
   =================================================================== */

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

/* ═══ 1. REGISTRE CLAIR — composition complète ═══════════════════════
   Fond parchemin. Accents doctrinaux à leur valeur canonique Remmers. */
:root,
:root[saved-theme="light"]{
  /* -- fondations -- */
  --parchemin:#F6F1E7;      /* le sol : papier, pas blanc écran        */
  --parchemin-2:#E0D7C2;    /* filets, séparateurs, aplats discrets    */
  --encre:#23201B;          /* le texte : brun-noir, jamais #000       */
  --encre-douce:#5A5348;    /* texte secondaire — 6,75:1               */
  --or:#765811;             /* liens & accent porteur — 5,88:1 sur le
                               parchemin ET 4,62:1 sur --parchemin-2, où
                               #7A5B12 tombait à 4,40:1 (fonds teintés :
                               angle mort du gate, vu au render-check)  */
  --or-clair:#A9812B;       /* filets, liserés, focus — 3,18:1 (large) */
  --terre:#9C4A2F;          /* 5,43:1                                  */
  --indigo:#2E4057;         /* 9,39:1                                  */

  /* -- pont thème Quartz : le chrome du site suit la MÊME composition.
        --gray était #9A8E76 → 2,87:1 sur parchemin : sous le seuil AA,
        rustiné jusqu'ici cas par cas (.search, .br-attrib). Corrigé ici
        à la source, une fois pour toutes. -- */
  --light:var(--parchemin);
  --lightgray:var(--parchemin-2);
  --gray:#766B57;           /* 4,65:1 — était 2,87:1                   */
  --darkgray:var(--encre-douce);
  --dark:var(--encre);
  --secondary:var(--or);
  --tertiary:var(--terre);

  /* -- surfaces : en clair, la profondeur se lit par l'OMBRE -- */
  --surface-0:var(--parchemin);
  --surface-1:#FBF8F2;
  --surface-2:#EFE8DA;
  --surface-3:#E7DECB;
  --surface-survol:#F3ECDD;
  --bord-1:#E0D7C2;
  --bord-2:#CFC3A8;

  /* Couples REMPLISSAGE / AVANT-PLAN.
     Un token doctrinal a deux métiers distincts : être lu COMME texte sur le
     fond de la page, et servir de FOND de pastille. En clair les deux valeurs
     coïncidaient ; en sombre non — une couleur assez claire pour se lire sur
     du presque-noir est trop claire pour du texte blanc et trop foncée pour
     du texte encre. D'où deux jeux séparés, et --on-* garanti AA sur son fond. */
  --fill-or-clair:#A9812B;  --on-or-clair:var(--etiq-encre);  /* 4,53 */
  --fill-terre:#9C4A2F;     --on-terre:var(--etiq-lin);       /* 5,72 */
  --fill-indigo:#2E4057;    --on-indigo:var(--etiq-lin);      /* 9,88 */
  --fill-airain:#8C5A2B;    --on-airain:var(--etiq-lin);      /* 5,43 */
  --fill-pourpre:#5B2A4E;   --on-pourpre:var(--etiq-lin);     /* 10,41 */
  --fill-sang:#6E1414;      --on-sang:var(--etiq-lin);        /* 11,07 */
  --fill-eau:#35708E;       --on-eau:var(--etiq-lin);         /* 5,09 */
  --fill-bleu-ciel:#2E4A7A; --on-bleu-ciel:var(--etiq-lin);   /* 8,26 */
  --fill-fer:#454A50;       --on-fer:var(--etiq-lin);         /* 8,36 */
  --fill-ecarlate:#9E2A2B;  --on-ecarlate:var(--etiq-lin);    /* 6,96 */
  --fill-feu:#B5541C;       --on-feu:var(--etiq-lin);         /* 4,62 — #C25A1E tombait à 4,11 */
  --fill-encre-douce:#5A5348; --on-encre-douce:var(--etiq-lin); /* 7,10 — pour .br-legend[renvoi] */

  --ombre-1:0 1px 2px rgba(35,32,27,.07);
  --ombre-2:0 4px 12px rgba(35,32,27,.10);
  --ombre-3:0 14px 34px rgba(35,32,27,.14);
  --halo:0 0 0 3px rgba(169,129,43,.26);
}

/* ═══ 2. REGISTRE SOMBRE — composition complète ══════════════════════
   Fond encre profonde. Chaque token doctrinal est recalibré ≥4,6:1 sur
   ce fond, en conservant sa teinte. Les rouges sont DÉSATURÉS (−30 à
   −38 %) pour rester mats : le contrat visuel interdit le rouge criard,
   et un rouge éclairci sans désaturation vire au néon. */
:root[saved-theme="dark"]{
  --parchemin:#17150F;
  --parchemin-2:#2A2620;
  --encre:#E8E0CE;          /* 13,89:1                                 */
  --encre-douce:#A79C86;    /* 6,73:1                                  */
  --or:#D8B15A;             /* 9,00:1                                  */
  --or-clair:#C9A24A;       /* 7,61:1                                  */
  --terre:#C46A4A;          /* 4,79:1                                  */
  --indigo:#7B97AA;         /* 5,95:1                                  */

  --light:var(--parchemin);
  --lightgray:var(--parchemin-2);
  --gray:#8C7E6A;           /* 4,61:1 — était 3,00:1                   */
  --darkgray:var(--encre-douce);
  --dark:var(--encre);
  --secondary:var(--or);
  --tertiary:#C99A57;

  /* -- variantes sombres des tokens Remmers. Le bloc palette généré
        (plus bas) reste la source canonique du registre CLAIR ; on ne
        l'édite jamais à la main. Ici on ne fait que COMPOSER le sombre.
        Sens doctrinal inchangé : airain=jugement, or=gloire,
        écarlate=péché, argent=rédemption. -- */
  --bleu-ciel:#6081BA;      /* 4,65:1 — était 2,07:1                   */
  --pourpre:#AF699C;        /* 4,63:1 — était 1,64:1                   */
  --sang:#C26666;           /* 4,68:1 — était 1,54:1 · mat (−38 % sat) */
  --ecarlate:#BC6869;       /* 4,63:1 — était 2,45:1 · mat (−34 % sat) */
  --airain:#AD733D;         /* 4,60:1 — était 3,14:1                   */
  --fer:#79818A;            /* 4,62:1 — était 2,04:1                   */
  --feu:#BC6B3D;            /* 4,61:1 — était 4,15:1 · mat (−30 % sat) */
  --eau:#4788A9;            /* 4,66:1 — était 3,35:1                   */
  /* argent #A7ADB5 (8,07) · lin #FAF7F0 (17,06) · feu-2 #E0A32E (8,21)
     passent déjà AA sur ce fond : inchangés. */

  /* -- surfaces : en sombre l'ombre ne se lit pas. La profondeur passe
        par la LUMINANCE de la surface + un liseré, pas par le noir. -- */
  --surface-0:var(--parchemin);
  --surface-1:#1E1B15;
  --surface-2:#2A2620;
  --surface-3:#332E26;
  --surface-survol:#302B23;
  --bord-1:#332E26;
  --bord-2:#474035;

  /* Remplissages du registre sombre : la teinte canonique profonde reprend du
     service comme FOND, sous l'encre claire du registre. Seuls or-clair, airain,
     eau et feu demandent un assombrissement. */
  --fill-or-clair:#7B5E1F;  --on-or-clair:var(--encre);   /* 4,62 */
  --fill-terre:#9C4A2F;     --on-terre:var(--encre);      /* 4,65 */
  --fill-indigo:#2E4057;    --on-indigo:var(--encre);     /* 8,04 */
  --fill-airain:#87572A;    --on-airain:var(--encre);     /* 4,66 */
  --fill-pourpre:#5B2A4E;   --on-pourpre:var(--encre);    /* 8,48 */
  --fill-sang:#6E1414;      --on-sang:var(--encre);       /* 9,01 */
  --fill-eau:#316884;       --on-eau:var(--encre);        /* 4,64 */
  --fill-bleu-ciel:#2E4A7A; --on-bleu-ciel:var(--encre);  /* 6,73 */
  --fill-fer:#454A50;       --on-fer:var(--encre);        /* 6,81 */
  --fill-ecarlate:#9E2A2B;  --on-ecarlate:var(--encre);   /* 5,67 */
  --fill-feu:#9E4918;       --on-feu:var(--encre);        /* 4,67 */

  --ombre-1:0 1px 2px rgba(0,0,0,.34);
  --ombre-2:0 4px 12px rgba(0,0,0,.42);
  --ombre-3:0 14px 34px rgba(0,0,0,.52);
  --halo:0 0 0 3px rgba(201,162,74,.34);
}

/* ═══ 3. INVARIANTS — indépendants du registre ═══════════════════════ */
:root{
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --ui:system-ui, -apple-system, 'Segoe UI', sans-serif;

  --mesure:66ch;                                   /* mesure de lecture */
  --pas:clamp(1rem, .6rem + 1.6vw, 1.5rem);        /* pas d'espacement  */

  --r-1:4px; --r-2:8px; --r-3:14px; --r-pilule:999px;
  --ease-doux:cubic-bezier(.22,.61,.36,1);
  --ease-ressort:cubic-bezier(.68,-.55,.265,1.55);
  --duree-1:.18s; --duree-2:.28s; --duree-3:.45s;
}

/* ═══ 4. CORPS & RYTHME — l'espace blanc porte la gravitas ═══════════ */
.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 var(--duree-3) ease, color var(--duree-3) ease;
}
.markdown-preview-sizer{ max-width:var(--mesure); margin-inline:auto; padding-block:calc(var(--pas)*2); }

/* Mesure de lecture. .markdown-preview-sizer n'existe PAS dans le build
   Quartz : --mesure y serait mort et la prose se rendrait à ~79ch. On
   porte donc la mesure sur les blocs de prose réels. Les grilles de
   cartes et le lecteur biblique gardent leur pleine largeur ; les
   composants viz-* conservent leurs 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; }
article.cards .markdown-preview-view > ul:not([class]){ max-width:none; }
.center:has(#eee-bible) .markdown-preview-view > *{ max-width:none; }
/* ...mais la prose de la page-lecteur reste de la prose. Seul div#eee-bible a
   besoin de la pleine largeur ; le titre et les paragraphes (dont le badge
   DALIA) sortaient à 93ch. Spécificité : :is() vaut (0,0,1), donc cette règle
   l'emporte sur le > * qui précède. */
.center:has(#eee-bible) .markdown-preview-view > :is(p, h1, h2, h3){ max-width:var(--mesure); margin-inline:auto; }
.markdown-preview-view p{ margin-block:0 var(--pas); }
.markdown-preview-view hr{ border:none; height:1px; background:var(--bord-1); margin-block:calc(var(--pas)*1.5); }

/* ═══ 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;
}

/* ═══ 6. LIENS — soulignement révélé, jamais de bleu ═════════════════ */
.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 var(--duree-2) var(--ease-doux), color var(--duree-1) ease;
}
.markdown-preview-view a:hover{ background-size:100% 1px; }
a.internal-link.is-unresolved{ color:var(--encre-douce); background:none; cursor:default; }
.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;
}

/* ═══ 7. CITATIONS ══════════════════════════════════════════════════ */
.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 var(--duree-2) var(--ease-doux);
}
.markdown-preview-view blockquote:hover{ transform:translateY(-2px); }

/* ═══ 8. BADGES — maturité, garde-dépôt, langue ═════════════════════ */
/* Les badges sont des ESTAMPILLES : leur fond ne bascule pas avec le thème
   (une étiquette sémantique qui change de teinte selon le registre n'est plus
   une étiquette). Chaque fond porte donc son avant-plan choisi au contraste —
   le blanc systématique faisait tomber garde-dépôt 3/7/8 à 2,4-3,2:1, jamais
   signalé car le gate ne teste que le fond parchemin. */
:root{
  --etiq-lin:#FAF7F0;
  --etiq-encre:#23201B;

  /* Rampe unique des affinités C1→C5 (règles d'affinité, Henebury). Sœur de
     l'échelle des rangs ci-dessous, et jusqu'ici la SEULE des deux à ne pas
     avoir de tokens : les 5 valeurs étaient recopiées à l'identique dans
     .viz-affinity et .viz-constellation — dont le commentaire revendiquait
     pourtant « source unique de la sémantique proche/loin du texte ». Dix
     littéraux pour une échelle doctrinale : la doctrine disait une source,
     le code en avait deux.
     INVARIANTE par thème, et c'est voulu : pastille claire + encre sombre
     dans les deux thèmes. Contrastes mesurés sur --affinite-fg :
     C1 6,27:1 · C2 6,58:1 · C3 7,03:1 · C4 6,58:1 · C5 5,72:1 — tous AA. */
  --affinite-fg:#2a2620;
  --affinite-c1:#C9A24A;
  --affinite-c2:#C3A968;
  --affinite-c3:#B7B295;
  --affinite-c4:#ACACA4;
  --affinite-c5:#A0A099;

  /* Rampe unique de l'échelle des rangs / garde-dépôt (1→8). Elle était
     recopiée à l'identique en quatre endroits (estampilles, .viz-rangs,
     .viz-sources .rang, .viz-tension .pole) TOUJOURS avec color:#fff —
     donc les degrés 2, 3, 7 et 8 tombaient entre 2,4 et 3,4:1. Un seul
     jeu de couples fond/avant-plan, calibré une fois.
     2026-09-14 — recalibrée en EXTINCTION : L_ok monotone croissante,
     chroma monotone décroissante, teinte tenue dans la famille or (88°→70°).
     L'ancienne version n'était pas une extinction : sa luminance montait,
     chutait au rang 4 (rupture or→vert-gris, ΔE 0,189), puis remontait —
     deux sous-rampes collées. La couleur ne DISTINGUE pas les 8 niveaux
     (ΔE adjacent ~0,033, sous le seuil de perception isolée) : c'est
     délibéré, les pastilles portent le texte « rang N ». La couleur
     SIGNIFIE que l'autorité s'éteint. Rampe partagée avec le plugin
     brethren-editor-translator (.is-rang-N) — source unique ici. */
  --rang-1-bg:#8c6b00; --rang-1-fg:var(--etiq-lin);    /* 4.65 */
  --rang-2-bg:#a78331; --rang-2-fg:var(--etiq-encre);    /* 4.59 */
  --rang-3-bg:#b39258; --rang-3-fg:var(--etiq-encre);    /* 5.54 */
  --rang-4-bg:#baa077; --rang-4-fg:var(--etiq-encre);    /* 6.48 */
  --rang-5-bg:#c0ac8f; --rang-5-fg:var(--etiq-encre);    /* 7.37 */
  --rang-6-bg:#c6b7a5; --rang-6-fg:var(--etiq-encre);    /* 8.28 */
  --rang-7-bg:#ccc2b7; --rang-7-fg:var(--etiq-encre);    /* 9.25 */
  --rang-8-bg:#d2cdc8; --rang-8-fg:var(--etiq-encre);    /* 10.28 */
}
[data-maturity]::before,
[data-garde-depot]::before{
  font-family:var(--ui); font-weight:600; border-radius:var(--r-pilule);
  margin-right:.5em; vertical-align:middle;
  background:var(--etiq-bg); color:var(--etiq-fg);
}
[data-maturity]::before{ font-size:.66rem; padding:2px 9px; }
[data-garde-depot]::before{ font-size:.64rem; padding:2px 8px; content:"dépôt " attr(data-garde-depot); }

[data-maturity="en-cours"]::before{ content:"sur le métier"; --etiq-bg:var(--fill-terre); --etiq-fg:var(--on-terre); }
[data-maturity="en-tissage"]::before{ content:"en tissage"; --etiq-bg:var(--fill-or-clair); --etiq-fg:var(--on-or-clair); }
[data-maturity="tisse"]::before{ content:"tissé"; --etiq-bg:var(--fill-indigo); --etiq-fg:var(--on-indigo); }

[data-garde-depot="1"]::before{ --etiq-bg:var(--rang-1-bg); --etiq-fg:var(--rang-1-fg); } /* 4.65 */
[data-garde-depot="2"]::before{ --etiq-bg:var(--rang-2-bg); --etiq-fg:var(--rang-2-fg); } /* 4.59 */
[data-garde-depot="3"]::before{ --etiq-bg:var(--rang-3-bg); --etiq-fg:var(--rang-3-fg); } /* 5.54 */
[data-garde-depot="4"]::before{ --etiq-bg:var(--rang-4-bg); --etiq-fg:var(--rang-4-fg); } /* 6.48 */
[data-garde-depot="5"]::before{ --etiq-bg:var(--rang-5-bg); --etiq-fg:var(--rang-5-fg); } /* 7.37 */
[data-garde-depot="6"]::before{ --etiq-bg:var(--rang-6-bg); --etiq-fg:var(--rang-6-fg); } /* 8.28 */
[data-garde-depot="7"]::before{ --etiq-bg:var(--rang-7-bg); --etiq-fg:var(--rang-7-fg); } /* 9.25 */
[data-garde-depot="8"]::before{ --etiq-bg:var(--rang-8-bg); --etiq-fg:var(--rang-8-fg); } /* 10.28 */

/* Langue biblique — une seule teinte --l, bg et bord dérivés. */
.lang{
  --l:var(--encre-douce);
  font-family:var(--ui); font-size:.72rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.3em;
  padding:.12em .6em; border-radius:var(--r-pilule); vertical-align:baseline;
  color:var(--l);
  background:color-mix(in srgb, var(--l) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--l) 34%, transparent);
  transition:background-color var(--duree-1) var(--ease-doux), transform var(--duree-1) var(--ease-ressort);
}
.lang:hover{ background:color-mix(in srgb, var(--l) 22%, transparent); transform:translateY(-1px); }
.lang[data-langue="he"]{ --l:var(--airain); }
.lang[data-langue="gr"]{ --l:var(--eau); }
.lang[data-langue="ar"]{ --l:var(--pourpre); }
.lang[data-langue="la"]{ --l:var(--fer); }
.lang .lang-mot{ font-family:'Noto Serif', Georgia, serif; font-weight:400; font-size:1.06em; }

.markdown-preview-view small{ font-family:var(--ui); font-size:.75rem; color:var(--encre-douce); }

/* ═══ 9. SURFACES & ÉLÉVATION ═══════════════════════════════════════ */
article.cards .markdown-preview-view > ul:not([class]) > li,
.viz-carte{
  background:var(--surface-1); border:1px solid var(--bord-1); border-radius:var(--r-3);
  box-shadow:var(--ombre-1);
  transition:transform var(--duree-2) var(--ease-doux),
             box-shadow var(--duree-2) var(--ease-doux),
             border-color var(--duree-2) var(--ease-doux);
}
article.cards .markdown-preview-view > ul:not([class]) > li:hover,
.viz-carte:hover{ transform:translateY(-3px); box-shadow:var(--ombre-3); border-color:var(--or-clair); }
article.cards .markdown-preview-view > ul:not([class]) > li:focus-within{
  border-color:var(--or-clair); box-shadow:var(--ombre-2), var(--halo);
}

/* En-tête collant à flou */
.br-bar, .eee-collant{
  background:color-mix(in srgb, var(--surface-0) 78%, transparent);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border-bottom:1px solid var(--bord-1);
}
@supports not (backdrop-filter:blur(1px)){ .br-bar, .eee-collant{ background:var(--surface-0); } }

/* ═══ 10. MOUVEMENT ═════════════════════════════════════════════════ */
@keyframes enter{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.markdown-preview-sizer{ animation:enter .5s ease both; }

/* Révélation au défilement : natif là où il existe (Chrome), repli JS
   ailleurs (Firefox/Safari n'avaient AUCUNE révélation jusqu'ici). */
@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%;
  }
}
@supports not (animation-timeline: view()){
  .markdown-preview-view :is(h2,h3,blockquote,table,.markdown-embed,figure)[data-reveal]{
    opacity:0; transform:translateY(10px);
    transition:opacity var(--duree-3) var(--ease-doux), transform var(--duree-3) var(--ease-doux);
  }
  .markdown-preview-view [data-reveal].is-animated{ opacity:1; transform:none; }
}

/* Barre de progression de lecture (posée par atelier-core.js) */
.eee-progres{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:80;
  background:linear-gradient(90deg, var(--or-clair), var(--or));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}
.eee-compteur{ font-family:var(--serif); font-variant-numeric:tabular-nums; font-weight:560; color:var(--or); }
[data-parallax]{ will-change:transform; }

/* ═══ 11. ToC & NAVIGATION ══════════════════════════════════════════ */
.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 var(--duree-1), border-color var(--duree-1);
}
.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); }

.site-body-left-column .tree-item-self{
  font-family:var(--ui); font-size:.86rem; border-radius:var(--r-1);
  transition:background-color var(--duree-1);
}
.site-body-left-column .tree-item-self:hover{ background:var(--surface-2); }
.site-body-left-column .is-active .tree-item-self{ color:var(--or); font-weight:600; }

/* ═══ 12. 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; }

/* ═══ 13. ACCESSIBILITÉ (WCAG 2.1 AA) ═══════════════════════════════
   --gray est corrigé à la source (§1/§2), donc les rustines ponctuelles
   sur .search et .br-attrib ne sont plus nécessaires : on garde ici les
   seules règles qui relèvent de l'INDICATEUR, pas de la couleur. */
:where(a,button,[tabindex],.tree-item-self):focus-visible{
  outline:2px solid var(--or-clair); outline-offset:3px; border-radius:2px;
}
.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;
}
/* Chrome de recherche : Quartz met le libellé sur --gray et le trait de l'icône
   sur --darkgray — deux gris différents côte à côte. On aligne le libellé sur
   l'encre douce (6,75:1 au lieu de 4,65:1). Règle récupérée de publish-livres.css,
   retirée du site le 2026-09-03 : feuille d'un AUTRE site, qui redéfinissait au
   passage toute la palette doctrinale. */
.search > .search-button > p{ color:var(--encre-douce); }

/* Cibles tactiles. Deux critères DISTINCTS de WCAG 2.2 :
   - 2.5.8 Target Size (Minimum) = 24×24px, niveau AA  -> plancher inconditionnel
   - 2.5.5 Target Size (Enhanced) = 44×44px, niveau AAA -> à partir de 720px
   À 390px la rangée d'icônes déborderait à 44px (mesuré : conteneur de 122px) ;
   24px tient et suffit à la conformité AA. */
button.search-button, button.darkmode, button.readermode, button.eee-textsize{
  min-height:44px; min-width:24px; display:inline-flex; align-items:center; justify-content:center;
}
@media (min-width:720px){
  button.search-button, button.darkmode, button.readermode, button.eee-textsize{ min-width:44px; }
}
/* Un seul <h1> par page : les pages-listes (index, tags, légal) n'ont pas
   de h1 markdown et gardent donc leur titre de page-header. */
.center:has(.markdown-preview-view h1) .page-header .article-title{ display:none; }

/* Mouvement réduit — garde universelle, en dernier mot. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .eee-progres{ display:none; }
  .markdown-preview-view [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-parallax]{ transform:none !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; padding:.55em .9em; border-radius:99px; white-space:nowrap; transition:transform .4s ease; }
.viz-tension .pole-a{ background:var(--fill-or-clair); color:var(--on-or-clair); }  /* 4,53 — était 3,35 en blanc */
.viz-tension .pole-b{ background:var(--fill-indigo); color:var(--on-indigo); }             /* 9,88 */
.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:var(--affinite-fg); transition:transform .2s; }
.viz-affinity li:nth-child(1){background:var(--affinite-c1)}.viz-affinity li:nth-child(2){background:var(--affinite-c2)}.viz-affinity li:nth-child(3){background:var(--affinite-c3)}.viz-affinity li:nth-child(4){background:var(--affinite-c4)}.viz-affinity li:nth-child(5){background:var(--affinite-c5)}
.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; 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:var(--rang-1-fg); background:var(--rang-1-bg); border-radius:99px; padding:.18em .6em; white-space:nowrap; align-self:start; }
.viz-sources .rang.r2{ background:var(--rang-2-bg); color:var(--rang-2-fg); }
.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(--fill-or-clair); color:var(--on-or-clair); }  /* blanc sur or-clair = 3,35:1 */
.viz-sources .rang[data-note]:hover{ filter:brightness(1.12); text-decoration:underline; }
/* La légende est du texte courant, pas la grille : elle ne doit pas hériter des
   44rem du composant. --mesure vaut 66ch et `ch` est relatif à la fonte — le même
   token rend ~500px ici (12px) et ~525px dans la prose (16px). Mesuré : 92ch avant. */
.viz-sources .src-legende{ margin:.95rem 0 0; padding-top:.75rem; border-top:1px solid var(--parchemin); font-size:.75rem; color:var(--encre-douce); max-width:var(--mesure); }
.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; transition:transform .2s; }
.viz-rangs li:hover{ transform:translateY(-4px); z-index:2; }
.viz-rangs li:nth-child(1){background:var(--rang-1-bg);color:var(--rang-1-fg)}.viz-rangs li:nth-child(2){background:var(--rang-2-bg);color:var(--rang-2-fg)}.viz-rangs li:nth-child(3){background:var(--rang-3-bg);color:var(--rang-3-fg)}.viz-rangs li:nth-child(4){background:var(--rang-4-bg);color:var(--rang-4-fg)}.viz-rangs li:nth-child(5){background:var(--rang-5-bg);color:var(--rang-5-fg)}.viz-rangs li:nth-child(6){background:var(--rang-6-bg);color:var(--rang-6-fg)}.viz-rangs li:nth-child(7){background:var(--rang-7-bg);color:var(--rang-7-fg)}.viz-rangs li:nth-child(8){background:var(--rang-8-bg);color:var(--rang-8-fg)}
.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(--fill-airain); color:var(--on-airain); 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: .78rem; line-height: 1.5; color: var(--encre-douce); font-family: var(--ui, system-ui, sans-serif); }  /* .74rem = 11,84px, sous le plancher de lisibilité de 12px — 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; }
/* Les pastilles utilisaient var(--indigo/--pourpre/--terre/--or-clair/--sang/
   --encre-douce) — qui BASCULENT avec le thème — sous un color:#fff fixe.
   Mesuré : 5 des 6 sous 4,5:1 en thème sombre, et `citation` échouait dans les
   DEUX (3,58 clair / 2,40 sombre). Même bug que [data-maturity] ligne 289,
   déjà diagnostiqué là-bas (« était 3,35 en blanc ») et jamais reporté ici.
   Correctif : les paires --fill-*/--on-*, invariantes et à contraste garanti. */
.br-legend .lg { padding: .12rem .5rem; border-radius: 99px; }
.br-legend .lg[data-k="definition"]  { background: var(--fill-indigo); color: var(--on-indigo); }
.br-legend .lg[data-k="tension"]     { background: var(--fill-pourpre); color: var(--on-pourpre); }
.br-legend .lg[data-k="cadre"]       { background: var(--fill-terre); color: var(--on-terre); }
.br-legend .lg[data-k="citation"]    { background: var(--fill-or-clair); color: var(--on-or-clair); }
.br-legend .lg[data-k="wiki"]        { background: var(--fill-sang); color: var(--on-sang); }
.br-legend .lg[data-k="renvoi"]      { background: var(--fill-encre-douce); color: var(--on-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:var(--rang-1-fg); background:var(--rang-1-bg); 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); }


/* ===================================================================
   16-18 — J3 — arêtes doctrinales : amas (donné) · constellation (perspectival) · Toulmin
   Politique de publication J1 (validée rang-1). SP ⊥ C :
   - Amas = versant DONNÉ (nécessité, Berding) → PORTE TOUJOURS le badge de faillibilité.
   - Constellation = versant PERSPECTIVAL (explanation + affinité) → coloration de nœud
     par grade C1→C5 (distance au texte), JAMAIS d'amas, JAMAIS de badge.
   Palette non-adversariale (or/terre/gris), pas de rouge (les rouges mats --ecarlate/--sang
   restent réservés à la confrontation/hérésie). Gardes a11y : focus-visible hérité (§ global),
   mouvement sous prefers-reduced-motion.
   =================================================================== */

/* 16 — Amas doctrinal (versant DONNÉ : « le texte lie ») */
.viz-amas{ font-family:var(--ui); max-width:44rem; margin:calc(var(--pas)*1.7) auto; padding:1rem 1.25rem 0;
  background:var(--parchemin-2); border-radius:8px; border-left:3px solid var(--or-clair); }
.viz-amas .amas-titre{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--encre-douce); margin-bottom:.85rem; }
.viz-amas .amas-titre em{ font-style:normal; color:var(--or); text-transform:none; letter-spacing:0; }
.viz-amas .amas-membres{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.viz-amas .amas-membre{ background:var(--parchemin); border:1px solid transparent; border-radius:99px; padding:.35em .85em; font-size:.82rem; font-weight:500; transition:transform .2s ease, box-shadow .2s ease; }
.viz-amas .amas-membre a{ background:none; border:none; color:var(--encre); font-weight:500; }
.viz-amas .amas-membre a:hover{ color:var(--or); }
.viz-amas .amas-membre.amas-pivot{ background:var(--fill-or-clair); border-color:var(--fill-or-clair); font-weight:700; }
.viz-amas .amas-membre.amas-pivot a{ color:var(--on-or-clair); }  /* blanc = 3,35:1 */
.viz-amas .amas-membre:hover{ transform:translateY(-2px); box-shadow:0 3px 12px rgba(35,32,27,.14); }
/* badge de faillibilité — le sceau qui distingue le révisable (notre tracé) de l'irrévisable (la Parole) */
.viz-amas .amas-faillibilite{ margin:1rem -1.25rem 0; padding:.7rem 1.25rem; border-top:1px solid var(--parchemin);
  font-size:.74rem; font-style:italic; line-height:1.5; color:var(--encre-douce); }
.viz-amas .amas-faillibilite::before{ content:"\26E9\FE0E"; font-style:normal; color:var(--or-clair); margin-right:.5em; }
@media (prefers-reduced-motion:reduce){ .viz-amas .amas-membre:hover{ transform:none; } }

/* 17 — Constellation doctrinale (versant PERSPECTIVAL) + coloration de nœud par grade d'affinité */
.viz-constellation{ font-family:var(--ui); max-width:44rem; margin:calc(var(--pas)*1.7) auto; padding:1rem 1.25rem; }
.viz-constellation .cst-titre{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--encre-douce); margin-bottom:.85rem; }
.viz-constellation .cst-titre em{ font-style:normal; color:var(--indigo); text-transform:none; letter-spacing:0; }
.viz-constellation .cst-noeuds{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.viz-constellation .cst-noeud{ display:inline-flex; align-items:center; gap:.45em; border-radius:99px; padding:.32em .5em .32em .85em; font-size:.82rem; font-weight:500; color:var(--affinite-fg); transition:transform .2s ease; }
.viz-constellation .cst-noeud a{ background:none; border:none; color:inherit; font-weight:600; }
.viz-constellation .cst-noeud a:hover{ text-decoration:underline; }
.viz-constellation .cst-grade{ font-size:.62rem; font-weight:700; letter-spacing:.02em; background:rgba(42,38,32,.18); border-radius:99px; padding:.1em .5em; }
/* coloration C1→C5 = distance au texte : C1 le plus proche (or), C5 le plus éloigné (gris).
   Rampe identique à .viz-affinity (source unique de la sémantique « proche/loin du texte »). */
.viz-constellation .cst-noeud[data-grade="c1"]{ background:var(--affinite-c1); }
.viz-constellation .cst-noeud[data-grade="c2"]{ background:var(--affinite-c2); }
.viz-constellation .cst-noeud[data-grade="c3"]{ background:var(--affinite-c3); }
.viz-constellation .cst-noeud[data-grade="c4"]{ background:var(--affinite-c4); }
.viz-constellation .cst-noeud[data-grade="c5"]{ background:var(--affinite-c5); }
/* explanation : nœud NON coloré (aucun grade d'affinité) — tracé perspectival pur, liseré indigo */
.viz-constellation .cst-noeud.cst-explanation{ background:none; border:1px dashed var(--indigo); color:var(--encre); padding-right:.85em; }
.viz-constellation .cst-noeud.cst-explanation a{ color:var(--encre); }
.viz-constellation .cst-noeud:hover{ transform:translateY(-2px); }
.viz-constellation .cst-legende{ font-size:.74rem; color:var(--encre-douce); margin:.95rem 0 0; }
.viz-constellation .cst-legende b{ color:var(--encre); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .viz-constellation .cst-noeud:hover{ transform:none; } }

/* 18 — viz-map Toulmin : claim / grounds (définition-corpus, jamais un verset) / warrant (garant) */
.viz-map-toulmin .viz-map-root[data-slot="claim"]{ background:var(--encre); color:var(--parchemin); }
.viz-map-node.n-grounds{ background:var(--fill-terre); color:var(--on-terre); }
.viz-map-node.n-warrant{ background:var(--fill-indigo); color:var(--on-indigo); }
.viz-map-toulmin .tln-source{ font-family:var(--ui); font-size:.75rem; color:var(--encre-douce); margin:.9rem 0 0; }
.viz-map-toulmin .tln-source a{ color:var(--or); border-bottom:1px solid var(--or-clair); }