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

/* ===================================================================
   publish-livres-identite.css — COPIE GÉNÉRÉE, NE PAS ÉDITER À LA MAIN.
   Couche d'identité de l'atelier EEE (atelier.e-e-e.bible), recopiée par
   tools/identite-atelier.py depuis publish.css du coffre.
   Empreinte de la source : d38758f4eb65235f
   Révision nommée du contrat de page, § 1bis (2026-11-04) : harmonisation
   avec l'atelier. Les quatre proscrits du contrat (§ 3) sont retirés.
   Ce fichier se charge AVANT publish-livres.css (ordre alphabétique de
   Head.tsx) : il pose le socle, la feuille de la vitrine l'habille.
   =================================================================== */

/* ═══ 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-eau:#35708E;       --on-eau:var(--etiq-lin);         /* 5,09 */
  --fill-bleu-ciel:#2E4A7A; --on-bleu-ciel:var(--etiq-lin);   /* 8,26 */
  --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                   */
  --airain:#AD733D;         /* 4,60:1 — était 3,14: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-eau:#316884;       --on-eau:var(--encre);        /* 4,64 */
  --fill-bleu-ciel:#2E4A7A; --on-bleu-ciel:var(--encre);  /* 6,73 */
  --fill-feu:#9E4918;       --on-feu:var(--encre);        /* 4,67 */

  --ombre-1:0 1px 2px rgba(0,0,0,.34);
  --ombre-2:0 4px 12px rgba(0,0,0,.42);
  --ombre-3:0 14px 34px rgba(0,0,0,.52);
  --halo:0 0 0 3px rgba(201,162,74,.34);
}
/* ═══ 3. INVARIANTS — indépendants du registre ═══════════════════════ */
:root{
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --ui:system-ui, -apple-system, 'Segoe UI', sans-serif;

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

  --r-1:4px; --r-2:8px; --r-3:14px; --r-pilule:999px;
  --ease-doux:cubic-bezier(.22,.61,.36,1);
  --ease-ressort:cubic-bezier(.68,-.55,.265,1.55);
  --duree-1:.18s; --duree-2:.28s; --duree-3:.45s;
}
/* ═══ 4. CORPS & RYTHME — l'espace blanc porte la gravitas ═══════════ */
.published-container{
  background:var(--parchemin); color:var(--encre);
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height:1.75; font-weight:380;
  text-rendering:optimizeLegibility;
  transition:background-color var(--duree-3) ease, color var(--duree-3) ease;
}
.markdown-preview-sizer{ max-width:var(--mesure); margin-inline:auto; padding-block:calc(var(--pas)*2); }

/* Mesure de lecture. .markdown-preview-sizer n'existe PAS dans le build
   Quartz : --mesure y serait mort et la prose se rendrait à ~79ch. On
   porte donc la mesure sur les blocs de prose réels. Les grilles de
   cartes et le lecteur biblique gardent leur pleine largeur ; les
   composants viz-* conservent leurs max-width via :not([class]). */
.markdown-preview-view > p,
.markdown-preview-view > blockquote,
.markdown-preview-view > :is(h1,h2,h3,h4,h5,h6),
.markdown-preview-view > ul:not([class]),
.markdown-preview-view > ol:not([class]),
.markdown-preview-view > hr,
.markdown-preview-view > pre,
.markdown-preview-view > table{ max-width:var(--mesure); margin-inline:auto; }
article.cards .markdown-preview-view > ul:not([class]){ max-width:none; }
.center:has(#eee-bible) .markdown-preview-view > *{ max-width:none; }
/* ...mais la prose de la page-lecteur reste de la prose. Seul div#eee-bible a
   besoin de la pleine largeur ; le titre et les paragraphes (dont le badge
   DALIA) sortaient à 93ch. Spécificité : :is() vaut (0,0,1), donc cette règle
   l'emporte sur le > * qui précède. */
.center:has(#eee-bible) .markdown-preview-view > :is(p, h1, h2, h3){ max-width:var(--mesure); margin-inline:auto; }
.markdown-preview-view p{ margin-block:0 var(--pas); }
.markdown-preview-view hr{ border:none; height:1px; background:var(--bord-1); margin-block:calc(var(--pas)*1.5); }
/* ═══ 5. TITRES — Fraunces, optical size haute ═══════════════════════ */
.markdown-preview-view :is(h1,h2,h3,h4){
  font-family:var(--serif); line-height:1.15; letter-spacing:-.011em; color:var(--encre);
  margin-block:calc(var(--pas)*1.6) var(--pas);
  font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0;
}
.markdown-preview-view h1{ font-weight:560; font-size:clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-top:0; }
.markdown-preview-view h2{ font-weight:520; font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.markdown-preview-view h3{ font-weight:500; }
.markdown-preview-view h2::after{
  content:""; display:block; width:2.5rem; height:2px; margin-top:.5rem;
  background:var(--or-clair); opacity:.85;
}
/* ═══ 6. LIENS — soulignement révélé, jamais de bleu ═════════════════ */
.published-container a.internal-link, .markdown-preview-view a{
  color:var(--or); text-decoration:none; font-weight:440;
  background:linear-gradient(var(--or),var(--or)) 0 92% / 0 1px no-repeat;
  transition:background-size var(--duree-2) var(--ease-doux), color var(--duree-1) ease;
}
.markdown-preview-view a:hover{ background-size:100% 1px; }
a.internal-link.is-unresolved{ color:var(--encre-douce); background:none; cursor:default; }
.published-container a.lien-scripture{
  color:var(--or); font-variant:small-caps; text-decoration:none;
  border-bottom:1.5px solid var(--or-clair); background:none;
}
/* ═══ 7. CITATIONS ══════════════════════════════════════════════════ */
.markdown-preview-view blockquote{
  border-left:2px solid var(--or-clair); margin-inline:0; padding:.2rem 0 .2rem 1.4rem;
  font-style:italic; color:var(--encre-douce);
  transition:transform var(--duree-2) var(--ease-doux);
}
.markdown-preview-view blockquote:hover{ transform:translateY(-2px); }
/* ═══ 8. (non copiée : badges propres à l'atelier) — seuls ses deux
   jetons d'étiquette sont repris, les couples fill/on des §§ 1-2 en dépendent. */
:root{
  --etiq-lin:#FAF7F0;
  --etiq-encre:#23201B;
}
/* ═══ 9. SURFACES & ÉLÉVATION ═══════════════════════════════════════ */
article.cards .markdown-preview-view > ul:not([class]) > li,
.viz-carte{
  background:var(--surface-1); border:1px solid var(--bord-1); border-radius:var(--r-3);
  box-shadow:var(--ombre-1);
  transition:transform var(--duree-2) var(--ease-doux),
             box-shadow var(--duree-2) var(--ease-doux),
             border-color var(--duree-2) var(--ease-doux);
}
article.cards .markdown-preview-view > ul:not([class]) > li:hover,
.viz-carte:hover{ transform:translateY(-3px); box-shadow:var(--ombre-3); border-color:var(--or-clair); }
article.cards .markdown-preview-view > ul:not([class]) > li:focus-within{
  border-color:var(--or-clair); box-shadow:var(--ombre-2), var(--halo);
}

/* En-tête collant à flou */
.br-bar, .eee-collant{
  background:color-mix(in srgb, var(--surface-0) 78%, transparent);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border-bottom:1px solid var(--bord-1);
}
@supports not (backdrop-filter:blur(1px)){ .br-bar, .eee-collant{ background:var(--surface-0); } }
/* ═══ 10. MOUVEMENT ═════════════════════════════════════════════════ */
@keyframes enter{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.markdown-preview-sizer{ animation:enter .5s ease both; }

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

/* Barre de progression de lecture (posée par atelier-core.js) */
.eee-progres{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:80;
  background:linear-gradient(90deg, var(--or-clair), var(--or));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}
.eee-compteur{ font-family:var(--serif); font-variant-numeric:tabular-nums; font-weight:560; color:var(--or); }
[data-parallax]{ will-change:transform; }
/* ═══ 11. ToC & NAVIGATION ══════════════════════════════════════════ */
.eee-toc{
  font-family:var(--ui); font-size:.82rem; position:sticky; top:2rem;
  display:grid; gap:.35rem; padding-left:.5rem;
}
.eee-toc a{
  color:var(--encre-douce); border-left:2px solid transparent; padding-left:.7rem;
  line-height:1.35; text-decoration:none; background:none;
  transition:color var(--duree-1), border-color var(--duree-1);
}
.eee-toc a[data-lvl="H3"]{ padding-left:1.3rem; font-size:.95em; }
.eee-toc a:hover{ color:var(--or); }
.eee-toc a[aria-current]{ color:var(--or); border-color:var(--or-clair); }

.site-body-left-column .tree-item-self{
  font-family:var(--ui); font-size:.86rem; border-radius:var(--r-1);
  transition:background-color var(--duree-1);
}
.site-body-left-column .tree-item-self:hover{ background:var(--surface-2); }
.site-body-left-column .is-active .tree-item-self{ color:var(--or); font-weight:600; }
/* ═══ 12. PERFORMANCE ═══════════════════════════════════════════════ */
.markdown-preview-view > .markdown-preview-section{ content-visibility:auto; contain-intrinsic-size:auto 480px; }
.markdown-preview-view img{ height:auto; max-width:100%; border-radius:3px; }
/* ═══ 13. ACCESSIBILITÉ (WCAG 2.1 AA) ═══════════════════════════════
   --gray est corrigé à la source (§1/§2), donc les rustines ponctuelles
   sur .search et .br-attrib ne sont plus nécessaires : on garde ici les
   seules règles qui relèvent de l'INDICATEUR, pas de la couleur. */
:where(a,button,[tabindex],.tree-item-self):focus-visible{
  outline:2px solid var(--or-clair); outline-offset:3px; border-radius:2px;
}
.nav-file-title:focus-visible, .folder-button:focus-visible, .toc-item a:focus-visible{
  outline:2px solid var(--or-clair); outline-offset:2px; border-radius:2px;
}
/* Chrome de recherche : Quartz met le libellé sur --gray et le trait de l'icône
   sur --darkgray — deux gris différents côte à côte. On aligne le libellé sur
   l'encre douce (6,75:1 au lieu de 4,65:1). Règle récupérée de publish-livres.css,
   retirée du site le 2026-09-03 : feuille d'un AUTRE site, qui redéfinissait au
   passage toute la palette doctrinale. */
.search > .search-button > p{ color:var(--encre-douce); }

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

/* Mouvement réduit — garde universelle, en dernier mot. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .eee-progres{ display:none; }
  .markdown-preview-view [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-parallax]{ transform:none !important; }
}
/* 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;
  --argent:#A7ADB5;
  --airain:#8C5A2B;
  --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 */