/*
 * HOCUS — lisibilité, lot 1 (audit du 7 octobre 2026).
 *
 * Feuille chargée en dernier sur toutes les pages publiques, hors Acolyte (corrigé dans sa propre
 * source, hocus-acolyte). Elle relève les composants récurrents repérés par l'audit, sans toucher
 * à la composition des pages :
 *   1. couleurs « texte » : le terracotta et le laiton de marque passent à 3,1–4,3 de contraste en
 *      petit corps sur les fonds crème ; ces teintes plus sombres dépassent 4,5 sur tous ces fonds ;
 *   2. tailles : 12 px au moins pour ce qui se lit (menus, boutons, sur-titres, légendes) ;
 *   3. cibles tactiles : 44 px de haut pour les liens du menu, 36 px pour le choix de langue ;
 *   4. longueur des lignes (~68 caractères) et interligne des encadrés de texte suivi.
 * Les libellés internes aux schémas et visualisations ne sont pas concernés (lot ultérieur).
 * Les sections sombres gardent leurs teintes claires : leurs règles, plus spécifiques, l'emportent,
 * et celles qui n'en avaient pas sont rétablies ici (« fonds sombres »).
 */
:root {
  --lisi-terra: #953d22;   /* petit texte terracotta : 4,7 à 6,4 sur les fonds crème */
  --lisi-brass: #6e5420;   /* petit texte laiton : 4,75 à 6,5 */
  --lisi-title: #c4502f;   /* grands titres en italique : 3,1 à 4,1 (seuil 3 pour le grand corps) */
  --lisi-ink: #0b0f14;
  --lisi-measure: 68ch;
}

/* ---------- 1. Menus des landings et des hubs ---------- */
:is(.hb-nav, .st-nav, .lo-nav, .sm-nav, .dg-nav, .fg-nav, .wk-nav, .sc-nav) a { font-size: 12.5px; }
:is(.hb-nav-cta, .st-nav-cta, .lo-nav-cta, .sm-nav-cta, .dg-nav-cta, .fg-nav-cta, .wk-nav-cta, .sc-nav-cta) { font-size: 12px; }
.case-language button, .languages button { min-width: 36px; min-height: 36px; font-size: 12px; }
.case-language button span { font-size: 12px; }
.case-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--lisi-terra); }
@media (max-width: 760px) {
  :is(.hb-nav, .st-nav, .lo-nav, .sm-nav, .dg-nav, .fg-nav, .wk-nav, .sc-nav) a { display: inline-flex; align-items: center; min-height: 44px; }
  :is(.hb-brand, .st-brand, .lo-brand, .sm-brand, .dg-brand, .fg-brand, .wk-brand, .sc-brand) { display: inline-flex; align-items: center; min-height: 44px; }
  :is(.hb-nav-cta, .st-nav-cta, .lo-nav-cta, .sm-nav-cta, .dg-nav-cta, .fg-nav-cta, .wk-nav-cta, .sc-nav-cta) { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- 2. Sur-titres ---------- */
:is(.hb-eyebrow, .st-eyebrow, .lo-eyebrow, .sm-eyebrow, .dg-eyebrow, .fg-eyebrow, .wk-eyebrow, .sc-eyebrow) { font-size: 12px; color: var(--lisi-terra); }
:is(.v3-eyebrow, .sh-eyebrow, .ev-eyebrow, .sh-path-title, .scroll-spotlight-label) { font-size: 12px; color: var(--lisi-terra); }
:is(.v3-reference-heading, .v3-founder-identity) small { font-size: 12px; color: var(--lisi-terra); }
/* Pages de cas : contextes clairs seulement (diapositives paper, sand, amber ; bandeaux et cartes clairs).
   Les diapositives scrolls-dark et scrolls-cover gardent le terracotta vif. */
:is(.scrolls-paper, .scrolls-sand, .scrolls-amber) :is(.scrolls-slide-index, .slide-index) { font-size: 12px; color: var(--lisi-terra); }
:is(.scrolls-scope-strip, .scrolls-aside-card:not(.aside-dark):not(.scrolls-aside-cta)) > p.eyebrow { font-size: 12px; color: var(--lisi-terra); }
/* Hubs : cartes .kick (les sections .dark sont rétablies plus bas). */
.hb-card .kick { font-size: 12px; color: var(--lisi-terra); }

/* ---------- 3. Titres en italique sur fond clair ---------- */
:is(.hb-sec-head, .fg-sec-head, .dg-field, .wk-index) > h2 > em { color: var(--lisi-title); }
:is(.scrolls-paper, .scrolls-sand, .scrolls-amber) :is(.scrolls-slide-copy, .slide-copy) > h3 > em { color: var(--lisi-title); }

/* ---------- 4. Boutons et liens d'action ---------- */
:is(.hb-btn, .st-btn, .lo-btn, .sm-btn, .dg-btn, .fg-btn, .wk-btn, .sc-btn) { font-size: 12px; }
/* Texte blanc sur corail (3,4) : on garde le corail, on écrit en encre. */
:is(a.button.primary, .scrolls-aside-cta > a, .aside-cta > a) { color: var(--lisi-ink); }
:is(.sh-link, .ev-link) > span, .sh-pre > a, .sh-notes.sh-acolyte > p > b, strong.v3-keyword { color: var(--lisi-terra); }
:is(.v3-founder-link, .v3-link, .more, .scrolls-slide-link, .slide-link) { font-size: 12px; }
@media (max-width: 760px) {
  :is(.v3-founder-link, .v3-link, .more, .scrolls-slide-link, .slide-link, .wk-fare-links > a, .sh-notes-links > a, .scrolls-case-footer > a, .scrolls-aside-cta > a, .aside-cta > a) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- 5. Petites mentions qui se lisent ---------- */
:is(.st-bubble, .lo-bubble, .sm-bubble, .dg-bubble, .fg-bubble, .wk-bubble, .sc-bubble) small { font-size: 11.5px; color: var(--lisi-terra); }
:is(.st-for, .lo-for, .sm-for, .sc-for, .wk-for, .dg-for) > span { color: #5b5750; }
:is(.hb-hero, .st-hero, .lo-hero, .sm-hero, .dg-hero, .fg-hero, .wk-hero, .sc-hero) figcaption { font-size: 12px; }
.v3-reference-card small, .sh-for > b, .sh-items-title { font-size: 12px; }
:is(.v3-stack-visual, .v3-arcana-visual) figcaption { font-size: 12px; }
.ev-tier { color: var(--lisi-brass); }
:is(.fg-stamp, .fg-dlv > li > span, .fg-steps > li > span, .nt-figures > div > span, .nt-steps > li > b) { color: var(--lisi-terra); }
.fg-stamp { font-size: 11px; }
.fg-steps > li > small { color: var(--lisi-brass); }
.wk-board-note, .lbl { color: #5b5750; }
.scrolls-confidential, .case-confidential { color: rgba(245, 241, 234, .72); }

/* ---------- 6. Longueur des lignes et interligne ---------- */
:is(.st-for, .lo-for, .sm-for, .sc-for, .wk-for, .dg-for) { max-width: var(--lisi-measure); }
:is(.st-cta, .lo-cta, .sm-cta, .sc-cta, .wk-cta, .dg-cta) > div > p { max-width: 62ch; }
:is(.st-myth, .lo-myth, .sm-myth, .sc-myth, .wk-myth, .dg-myth, .fg-myth) { max-width: 62ch; line-height: 1.5; }
:is(.hb-sec-head, .fg-sec-head) > p { max-width: var(--lisi-measure); }
:is(.nt-note, .northstar-caveat, .scrolls-scope-strip > p) { max-width: var(--lisi-measure); }
.fg-note { max-width: var(--lisi-measure); font-size: 12px; }
.article-endnote > p { line-height: 1.45; }

/* ---------- Fonds sombres : teintes claires conservées ---------- */
.dark :is(.hb-eyebrow, .hb-sec-head > h2 > em, .hb-card .kick) { color: var(--terra, #e4572e); }
/* Sections de démonstration et bandeaux sombres des landings (sky, demo, dark, night). */
:is(.dark, [class*="-dark"], [class*="-demo"], [class*="-sky"], [class*="-night"]) :is(.st-eyebrow, .lo-eyebrow, .sm-eyebrow, .dg-eyebrow, .fg-eyebrow, .wk-eyebrow, .sc-eyebrow, .hb-eyebrow) { color: var(--terra, #e4572e); }

/* ---------- En-tête : le logo de la home sur toutes les pages (9 octobre 2026) ----------
   Même image et mêmes largeurs que l'en-tête de la home (site/home.css, .topbar .brand). */
.brand:has(> .brand-logo) { display: block; width: clamp(180px, 14vw, 210px); line-height: 0; letter-spacing: 0; }
.brand-logo { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .brand:has(> .brand-logo) { width: 145px; } }