/* ===================================================================
   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                   */
  --emeraude:#6BAA8A;       /* 6,73:1 — était 2,90:1                   */
  --taisson:#93A6AE;        /* 7,22:1 — était 3,29: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;
}
/* Titres équilibrés (2026-11-07). Le navigateur répartit les mots entre les
   lignes au lieu de laisser un mot seul sur la dernière. Mesuré sur 39 pages
   avant pose : mots seuls 4 → 1 à 390 px, 3 → 0 à 1280 px, nombre de lignes
   inchangé. La prose n'a rien à recevoir : base.scss de Quartz pose déjà
   text-wrap:pretty sur p, li, a, td. Limite connue : les 158 paires de
   guillemets publiées portent des espaces ordinaires, donc sécables ; un titre
   équilibré peut alors ouvrir une ligne par le guillemet fermant (1 cas mesuré,
   « La profondeur d'une tension » à 390 px). Le remède est l'espace insécable
   dans le texte, pas une règle ici. Navigateur trop ancien : la ligne est ignorée. */
.markdown-preview-view :is(h1,h2,h3,h4), .page-header .article-title{ text-wrap:balance; }

/* ═══ 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(--indigo); }  /* 2026-09-21 : était --airain, désormais réservé au jugement d'un énoncé humain (MoC Remmers, règle 5) */
.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; }

/* Barre du haut sur téléphone : elle passe à la ligne plutôt que de déborder.
   Mesuré le 2026-11-04 : avec le titre du site en Fraunces (plus large que
   Schibsted Grotesk), la rangée d'outils (recherche 132 px + 3 boutons)
   sortait de 4 px à 390 px — 43 constats 🔴 du render-check, publication
   bloquée à raison. `div.left.sidebar` : une règle de Quartz chargée après
   l'emportait sur `.left > .flex-component`. */
@media (max-width:800px){
  div.left.sidebar{ flex-wrap:wrap; row-gap:.5rem; }
  div.left.sidebar > .flex-component{ flex-wrap:wrap; min-width:0; }
}

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

/* 1bis — Profondeur d'une tension (2026-09-22) — projection publique des coordonnées (L, T).
   Source unique de la règle : note « La profondeur d'une tension » (33.02 Content) ; producteur
   mécanique : edge-bridge.py depuis l'arête `tension: {target, L, T}`. Aucune couleur nouvelle.
   Le DEGRÉ (axe T) est porté par l'état du LIEN ; l'APPARENCE (axe L) par la légende seule.
     data-profondeur = resout | tient | contemple | brise      data-apparence = contradictoire */
.viz-tension[data-profondeur]{ flex-wrap:wrap; }
/* ○ se résout — le lien se détend : plus de respiration, trait neutre, CONTINU.
   Opacité relevée de .45 à .72 le 2026-09-23 : à .45 le trait se lisait comme un lien
   AFFAIBLI, donc comme un cousin du rompu. Une tension résolue n'est pas une tension
   abîmée — elle est close. Le trait doit être calme et entier, pas pâle. */
.viz-tension[data-profondeur="resout"] .link{ animation:none; background:var(--encre-douce); opacity:.72; }
/* ◐ se tient — charnière : un pivot tient les deux pôles */
.viz-tension[data-profondeur="tient"] .link{ animation:none; position:relative; }
.viz-tension[data-profondeur="tient"] .link::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; translate:-50% -50%; border-radius:50%; background:var(--parchemin); border:2px solid var(--or); }
/* ● se contemple — le lien respire (état historique du composant) et porte un halo */
.viz-tension[data-profondeur="contemple"] .link{ box-shadow:0 0 0 6px color-mix(in srgb, var(--or-clair) 46%, transparent), 0 0 18px 4px color-mix(in srgb, var(--or) 26%, transparent); }
/* ✕ se brise — un pôle a été retranché : le lien est ROMPU, le pôle s'efface.
   Refait le 2026-09-23. L'ancien pointillé gris se confondait avec le trait « résout » :
   deux traits ternes et pâles, l'un continu l'autre tireté — la différence ne survivait
   pas à un coup d'œil. Trois signaux la portent désormais, et aucun n'est une nuance :
     (a) une VRAIE cassure — le trait s'interrompt à 42 % et l'autre moitié reprend décalée
         vers le bas (::after), silhouette d'un trait cassé net, pas d'un trait discontinu ;
     (b) la couleur --terre, jeton EXISTANT jamais utilisé par les tensions (donc aucune
         couleur nouvelle, l'invariant de l'en-tête tient) — la rupture est la seule chose
         colorée de la série, tout le reste est encre ou or ;
     (c) le pôle retranché est barré, pas seulement pâli : quelqu'un l'a ôté. */
.viz-tension[data-profondeur="brise"] .link{ animation:none; position:relative; height:3px; opacity:1; background:linear-gradient(90deg, var(--terre) 0 42%, transparent 42%); }
.viz-tension[data-profondeur="brise"] .link::after{ content:""; position:absolute; right:0; top:5px; width:58%; height:3px; border-radius:2px; background:var(--terre); }
.viz-tension[data-profondeur="brise"] .pole-b{ opacity:.32; text-decoration:line-through; }
/* Légende : le degré nommé sous la figure, jamais un nombre */
.viz-tension .profondeur{ flex-basis:100%; text-align:center; margin:.55rem 0 0; font-family:var(--ui); font-size:.78rem; color:var(--encre-douce); }
.viz-tension .profondeur b{ color:var(--encre); font-weight:600; }
.viz-tension .profondeur .apparence{ font-style:italic; }

/* 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(--parchemin-2); border-radius:.6rem; }
/* 2026-09-21 : liseré par défaut neutre. L'airain n'est plus un défaut (réservé au
   jugement, MoC Remmers règle 5) ; une figure d'airain le déclare via data-token. */
.viz-type[data-token="airain"]{ border-left-color:var(--airain); }
.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;
  --emeraude:#2E6B52;
  --taisson:#5A6B72;
}
/* --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 ; ① et ② : émeraude et taisson, Annexe A de la MoC Remmers, choix EEE ; usage futur JS/HTML) ---- */
:root{
  --seuil-interpreter:var(--emeraude); /* ① Interpréter — établir, penser, situer       */
  --seuil-garder:var(--taisson);       /* ② Garder — doctrine & sources                 */
  --seuil-connaitre:var(--or-clair);   /* ③ Connaître Dieu — 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); }

/* ---- Bouton « Commencer ici » (Accueil) : encadré [!commencer] ; décalque de .viz-grammaire button[aria-selected] ---- */
.callout[data-callout="commencer"]{ --cl:var(--encre-douce); text-align:center; border:none; background:none; padding:0; }
.callout[data-callout="commencer"] .callout-title{ justify-content:center; font-weight:400; }
.callout[data-callout="commencer"] .callout-icon{ display:none; }
.callout[data-callout="commencer"] .callout-content a{ display:inline-block; font-family:var(--ui); font-weight:700; font-size:1rem; padding:.7em 1.6em; border-radius:99px; background:var(--encre); color:var(--parchemin); text-decoration:none; transition:.2s; }
.callout[data-callout="commencer"] .callout-content a:hover,
.callout[data-callout="commencer"] .callout-content a:focus-visible{ background:var(--or); color:var(--encre); }

/* ---- 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É (fondements grounds attestés par le texte ; « nécessité Berding »
     périmée depuis le 2026-09-12) → PORTE TOUJOURS le badge de faillibilité.
   - Constellation = versant PERSPECTIVAL (affinité ; « explanation » retirée du
     vocabulaire d'arêtes le 2026-09-12, spec § 11-D) → 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); }
/* sans grade : nœud NON coloré (aucun grade d'affinité) — liseré indigo. Ex-« cst-explanation » (2026-11-02). */
.viz-constellation .cst-noeud.cst-sans-grade{ background:none; border:1px dashed var(--indigo); color:var(--encre); padding-right:.85em; }
.viz-constellation .cst-noeud.cst-sans-grade 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); }

/* 19 — Carte doctrinale (viz-carte) : affinité (colonnes, C1-C5) × rang d'intendance (lignes, SP1-SP5),
   la VIE de la doctrine portée par l'anneau du jeton — jamais par un chiffre.
   Remplace le quadrantChart Mermaid, qui ne pouvait pas porter le 3e axe et forçait des
   coordonnées continues (0.26, 0.58) là où les deux échelles sont DISCRÈTES.
   Structure : <table> réelle — en-têtes scope=col/row, donc lisible au lecteur d'écran et
   navigable en mode tableau sans un octet de JS. Aucune information en hover seul :
   l'anneau est doublé d'un libellé visible en légende (survit à l'impression et au tactile).
   Rampe des colonnes = --affinite-c1..c5, SOURCE UNIQUE de la sémantique proche/loin du texte
   (identique à .viz-affinity et .viz-constellation). L'anneau n'emprunte JAMAIS cette rampe :
   la distance au texte et la vie de la doctrine sont deux choses, et deux palettes. */
.viz-carte{ margin:calc(var(--pas)*1.7) auto; max-width:46rem; font-family:var(--ui); }
.viz-carte .vc-titre{ font-size:.95rem; font-weight:700; color:var(--encre); margin-bottom:.2rem; }
.viz-carte .vc-titre em{ font-weight:400; color:var(--encre-douce); font-style:italic; }
.viz-carte .vc-plan{ width:100%; border-collapse:separate; border-spacing:3px; table-layout:fixed; }
.viz-carte .vc-plan-leg{ caption-side:bottom; font-size:.74rem; color:var(--encre-douce); text-align:left; padding-top:.6rem; }
.viz-carte .vc-plan thead th{ font-size:.72rem; font-weight:700; color:var(--affinite-fg); border-radius:4px; padding:.3em 0; }
.viz-carte .vc-plan thead th[data-grade="c1"]{ background:var(--affinite-c1); }
.viz-carte .vc-plan thead th[data-grade="c2"]{ background:var(--affinite-c2); }
.viz-carte .vc-plan thead th[data-grade="c3"]{ background:var(--affinite-c3); }
.viz-carte .vc-plan thead th[data-grade="c4"]{ background:var(--affinite-c4); }
.viz-carte .vc-plan thead th[data-grade="c5"]{ background:var(--affinite-c5); }
.viz-carte .vc-plan tbody th[scope="row"]{ width:9.5rem; text-align:right; font-size:.72rem; font-weight:600; color:var(--encre-douce); padding-right:.5em; white-space:nowrap; }
.viz-carte .vc-plan tbody td{ background:var(--parchemin-2); border-radius:4px; height:3.1rem; vertical-align:middle; padding:.2em; }
.viz-carte .vc-jeton{ display:block; background:var(--parchemin); color:var(--encre); border-radius:5px; padding:.35em .45em; font-size:.72rem; font-weight:600; line-height:1.15; text-align:center; }
.viz-carte .vc-jeton small{ display:block; font-weight:400; font-size:.86em; color:var(--encre-douce); }
/* L'anneau : trois états, trois épaisseurs. Jamais une couleur de la rampe d'affinité. */
.viz-carte .vc-jeton[data-vie="contemplee"]{ box-shadow:0 0 0 3px var(--airain); }
.viz-carte .vc-jeton[data-vie="tenue"]{ box-shadow:0 0 0 1px var(--airain); }
.viz-carte .vc-jeton[data-vie="creuse"]{ box-shadow:none; border:1px dashed var(--encre-douce); }
.viz-carte .vc-legende{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.74rem; color:var(--encre-douce); }
.viz-carte .vc-legende li{ display:flex; align-items:center; gap:.45em; }
.viz-carte .vc-legende li::before{ content:""; width:.85em; height:.85em; border-radius:50%; background:var(--parchemin); flex:0 0 auto; }
.viz-carte .vc-legende li[data-vie="contemplee"]::before{ box-shadow:0 0 0 3px var(--airain); }
.viz-carte .vc-legende li[data-vie="tenue"]::before{ box-shadow:0 0 0 1px var(--airain); }
.viz-carte .vc-legende li[data-vie="creuse"]::before{ border:1px dashed var(--encre-douce); }
.viz-carte .vc-note,.viz-carte .vc-hors{ font-size:.78rem; color:var(--encre-douce); margin:.9rem 0 0; max-width:68ch; }   /* 68ch : sans elle, ~94 car./ligne sur tablette (render-check du 2026-10-31) */
.viz-carte .vc-note code{ font-size:.92em; }
.viz-carte .vc-hors{ border-left:2px solid var(--or-clair); padding-left:.7em; }
/* Les deux plans jumeaux (Quartz) : même grille, deux fois — « tel que mesuré » / « tel que vécu ».
   DÉMONSTRATION, jamais un diagnostic porté sur une doctrine réelle. */
.viz-carte-jumeaux{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--pas)*1.1); align-items:start; }
.viz-carte-jumeaux>.viz-carte{ max-width:none; margin:0; }
@media (max-width:820px){ .viz-carte-jumeaux{ grid-template-columns:1fr; } }
@media (max-width:560px){ .viz-carte .vc-plan tbody th[scope="row"]{ width:4.2rem; white-space:normal; } }
/* Le glyphe de vie (◉ ◎ ○) double l'anneau : il porte l'information quand AUCUN style
   n'est chargé — impression, export PDF/reMarkable, et coffre Obsidian où publish.css
   n'est pas servi. Sans lui, le 3e axe disparaîtrait côté coffre : une figure qui perd
   justement l'axe qu'elle est censée rendre visible. */
.viz-carte .vc-vie{ font-size:.9em; color:var(--airain); }
/* État « non évalué » : aucun anneau, aucun pointillé — l'absence de jugement se distingue
   de l'état « creuse », qui EST un jugement. Trois états portent une mesure, celui-ci dit
   qu'aucune mesure n'a été conduite. */
.viz-carte .vc-jeton[data-vie="nonevalue"]{ box-shadow:none; border:1px solid var(--parchemin-2); }

/* 2026-10-19 — Animations sobres de viz-carte : (1) apparition par étapes, (2) mise en évidence au survol/focus.
   publish.css coupe déjà toute animation sous prefers-reduced-motion (ligne 442-443) ; on la coupe aussi à l'impression. */
@keyframes vc-apparition{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
.viz-carte .vc-jeton{ animation:vc-apparition .5s var(--ease-doux) both; }
.viz-carte tbody tr:nth-child(5) .vc-jeton{ animation-delay:.05s }   /* SP1 d'abord : on monte du socle */
.viz-carte tbody tr:nth-child(4) .vc-jeton{ animation-delay:.2s }
.viz-carte tbody tr:nth-child(3) .vc-jeton{ animation-delay:.35s }
.viz-carte tbody tr:nth-child(2) .vc-jeton{ animation-delay:.5s }
.viz-carte tbody tr:nth-child(1) .vc-jeton{ animation-delay:.65s }
.viz-carte .vc-jeton a[data-note]{ color:inherit; text-decoration:none; }
.viz-carte .vc-jeton:hover,.viz-carte .vc-jeton:focus-within{ background:var(--parchemin-2); outline:2px solid var(--or-clair); outline-offset:1px; transition:background-color var(--duree-1) ease; }
.viz-carte .vc-jeton a[data-note]:hover,.viz-carte .vc-jeton a[data-note]:focus-visible{ text-decoration:underline; text-decoration-color:var(--or); text-underline-offset:2px; }
@media print{ .viz-carte .vc-jeton{ animation:none } }

/* ═══ EMBLÈMES DES PERSONNAGES (v2, linogravure) ═══════════════════════
   Une image par personnage, quartz/static/emblemes/<persona>.svg (dépôt du site), teintée par la
   couleur de son seuil : jetons --seuil-*, que le thème sombre redéfinit. Pages : 160 px sous le
   titre ; Accueil : 32 px devant le nom. Décision d'Olivier du 2026-10-31. */
.embleme{ display:block; width:160px; height:160px; margin:calc(var(--pas)*1.2) auto calc(var(--pas)*1.6);
  background-color:var(--embleme-couleur, currentColor);
  -webkit-mask:var(--embleme-image) center/contain no-repeat; mask:var(--embleme-image) center/contain no-repeat; }
.embleme.mini{ display:inline-block; width:32px; height:32px; margin:0 .5em 0 0; vertical-align:middle; }
.embleme[data-seuil="interpreter"]{ --embleme-couleur:var(--seuil-interpreter); }
.embleme[data-seuil="garder"]{ --embleme-couleur:var(--seuil-garder); }
.embleme[data-seuil="connaitre"]{ --embleme-couleur:var(--seuil-connaitre); }
.embleme[data-seuil="vivre"]{ --embleme-couleur:var(--seuil-vivre); }
.embleme[data-persona="exegete"]{ --embleme-image:url("/static/emblemes/exegete.svg"); }
.embleme[data-persona="penseur"]{ --embleme-image:url("/static/emblemes/penseur.svg"); }
.embleme[data-persona="historien"]{ --embleme-image:url("/static/emblemes/historien.svg"); }
.embleme[data-persona="gardien"]{ --embleme-image:url("/static/emblemes/gardien.svg"); }
.embleme[data-persona="bibliothecaire"]{ --embleme-image:url("/static/emblemes/bibliothecaire.svg"); }
.embleme[data-persona="adorateur"]{ --embleme-image:url("/static/emblemes/adorateur.svg"); }
.embleme[data-persona="contemplateur"]{ --embleme-image:url("/static/emblemes/contemplateur.svg"); }
.embleme[data-persona="serviteur"]{ --embleme-image:url("/static/emblemes/serviteur.svg"); }
.embleme[data-persona="disciple"]{ --embleme-image:url("/static/emblemes/disciple.svg"); }
@media (forced-colors:active){ .embleme{ background-color:CanvasText; } }

/* ═══ EMBLÈMES DU CIEL (v1, linogravure) ═══════════════════════════════
   Dix-huit images, quartz/static/emblemes/ciel/ (dépôt du site), allégées par
   chaine-de-production/scripts/alleger.py (14,4 Mo -> 3,5 Mo, 0 pixel changé).
   Règle des couleurs (note « Le ciel de l'atelier », §5) : chaque emblème prend la couleur
   que le site donne déjà à la chose. Galaxies, amas, constellations = UNE couleur : pochoir
   (mask) teint par un jeton, comme les personnages, donc le thème sombre suit tout seul.
   Étoiles = DEUX couleurs (gravure = sens, cœur = lumière) : un pochoir les aplatirait,
   d'où une image par thème (-couleur / -couleur-sombre). Page : « Le ciel de l'atelier ». */
.embleme[data-ciel]{ width:96px; height:96px; margin:0 auto calc(var(--pas)*.5); }
.embleme[data-ciel^="g-"]{ --embleme-couleur:var(--terre); }
.embleme[data-ciel="a-ouvert"],.embleme[data-ciel="a-globulaire"]{ --embleme-couleur:var(--or); }
.embleme[data-ciel="a-association"]{ --embleme-couleur:var(--encre-douce); }
.embleme[data-ciel^="c-"]{ --embleme-couleur:var(--indigo); }
.embleme[data-ciel="g-spirale"]{ --embleme-image:url("/static/emblemes/ciel/g-spirale.svg"); }
.embleme[data-ciel="g-barree"]{ --embleme-image:url("/static/emblemes/ciel/g-barree.svg"); }
.embleme[data-ciel="g-elliptique"]{ --embleme-image:url("/static/emblemes/ciel/g-elliptique.svg"); }
.embleme[data-ciel="g-irreguliere"]{ --embleme-image:url("/static/emblemes/ciel/g-irreguliere.svg"); }
.embleme[data-ciel="g-eteinte"]{ --embleme-image:url("/static/emblemes/ciel/g-eteinte.svg"); }
.embleme[data-ciel="a-ouvert"]{ --embleme-image:url("/static/emblemes/ciel/a-ouvert.svg"); }
.embleme[data-ciel="a-globulaire"]{ --embleme-image:url("/static/emblemes/ciel/a-globulaire.svg"); }
.embleme[data-ciel="a-association"]{ --embleme-image:url("/static/emblemes/ciel/a-association.svg"); }
.embleme[data-ciel="c-affinite"]{ --embleme-image:url("/static/emblemes/ciel/c-affinite.svg"); }
.embleme[data-ciel="c-garant"]{ --embleme-image:url("/static/emblemes/ciel/c-garant.svg"); }
/* étoiles : image pleine, pas de pochoir */
.embleme[data-ciel^="e-"]{ -webkit-mask:none; mask:none; background:var(--embleme-fond) center/contain no-repeat; }
.embleme[data-ciel="e-naine-brune"]{ --embleme-fond:url("/static/emblemes/ciel/e-naine-brune-couleur.svg"); }
.embleme[data-ciel="e-naine-rouge"]{ --embleme-fond:url("/static/emblemes/ciel/e-naine-rouge-couleur.svg"); }
.embleme[data-ciel="e-sequence-principale"]{ --embleme-fond:url("/static/emblemes/ciel/e-sequence-principale-couleur.svg"); }
.embleme[data-ciel="e-geante-rouge"]{ --embleme-fond:url("/static/emblemes/ciel/e-geante-rouge-couleur.svg"); }
.embleme[data-ciel="e-naine-blanche"]{ --embleme-fond:url("/static/emblemes/ciel/e-naine-blanche-couleur.svg"); }
.embleme[data-ciel="e-neutrons"]{ --embleme-fond:url("/static/emblemes/ciel/e-neutrons-couleur.svg"); }
.embleme[data-ciel="e-variable"]{ --embleme-fond:url("/static/emblemes/ciel/e-variable-couleur.svg"); }
.embleme[data-ciel="e-errante"]{ --embleme-fond:url("/static/emblemes/ciel/e-errante-couleur.svg"); }
:root[saved-theme="dark"] .embleme[data-ciel="e-naine-brune"]{ --embleme-fond:url("/static/emblemes/ciel/e-naine-brune-couleur-sombre.svg"); }
:root[saved-theme="dark"] .embleme[data-ciel="e-naine-rouge"]{ --embleme-fond:url("/static/emblemes/ciel/e-naine-rouge-couleur-sombre.svg"); }
:root[saved-theme="dark"] .embleme[data-ciel="e-sequence-principale"]{ --embleme-fond:url("/static/emblemes/ciel/e-sequence-principale-couleur-sombre.svg"); }
:root[saved-theme="dark"] .embleme[data-ciel="e-geante-rouge"]{ --embleme-fond:url("/static/emblemes/ciel/e-geante-rouge-couleur-sombre.svg"); }
:root[saved-theme="dark"] .embleme[data-ciel="e-naine-blanche"]{ --embleme-fond:url("/static/emblemes/ciel/e-naine-blanche-couleur-sombre.svg"); }
:root[saved-theme="dark"] .embleme[data-ciel="e-neutrons"]{ --embleme-fond:url("/static/emblemes/ciel/e-neutrons-couleur-sombre.svg"); }
:root[saved-theme="dark"] .embleme[data-ciel="e-variable"]{ --embleme-fond:url("/static/emblemes/ciel/e-variable-couleur-sombre.svg"); }
:root[saved-theme="dark"] .embleme[data-ciel="e-errante"]{ --embleme-fond:url("/static/emblemes/ciel/e-errante-couleur-sombre.svg"); }
/* planche : une grille de vignettes, nom en gras, glose en encre douce */
.ciel-planche{ list-style:none; padding:0; margin:calc(var(--pas)*.8) 0 calc(var(--pas)*1.4);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(10.5rem, 1fr)); gap:calc(var(--pas)*.8); }
.ciel-planche > li{ margin:0; padding:calc(var(--pas)*.6) calc(var(--pas)*.5); text-align:center;
  background:var(--parchemin-2); border-radius:6px; font-family:var(--serif); line-height:1.4; }
.ciel-planche > li > b{ display:block; color:var(--encre); }
.ciel-planche > li > small{ display:block; color:var(--encre-douce); font-size:.85rem; margin-top:.2em; }
@media (forced-colors:active){ .embleme[data-ciel^="e-"]{ forced-color-adjust:none; } }