/* ===================================================================== LA CORVÉE — docs.css (Phase 2, dé-violettisation de la doc) Remplace `app.css` (thème violet électrique sombre + dark-mode) par le système « papier chaud / encre hue 48 » de la vitrine, aligné sur corvee-tokens.css (source de vérité). Décision gelée Phase 2 : DARK MODE SUPPRIMÉ — un seul thème clair, chaud, lisible. Contrainte forte : les partials de doc (nav, sidebar, toc, search-modal, pagination) sont fournis par le BUNDLE Leaf et NE DOIVENT PAS être forkés (couplage JS search/sidebar/lang). On restyle donc leurs classes SANS toucher au markup. Les 4 tokens Tailwind qui restaient sur (bg-deep / text-body / font-body / antialiased) sont couverts en CSS plain ci-dessous → le CDN Tailwind est retiré. corvee-tokens.css est linké AVANT cette feuille (head.latte) : on RÉ-MAPPE ici les noms de tokens attendus par les classes du bundle (--bg-deep, --text, --accent…) vers les primitives papier/encre. Le `#themeToggle` du bundle est masqué (plus de bascule de thème). ===================================================================== */ /* ── Ré-mappage des tokens bundle → papier/encre chaud ────────────── Ces noms viennent de l'ancien app.css violet ; les classes du bundle (.site-nav, .sidebar-link, .prose…) les consomment. On les redéfinit sur :root avec les valeurs chaudes (via corvee-tokens.css, linké avant). Fallbacks en dur = table hex canonique de corvee-tokens.css. */ :root { color-scheme: light; --bg-deep: var(--paper, #fefcf8); --bg-surface: var(--paper-2, #fbf5ee); --bg-elevated: var(--warm, #f9eee4); --border: var(--line, #e6ded7); --border-accent: var(--tom-line, #aedabd); --text: var(--ink-1, #463a34); --text-bright: var(--ink-0, #251c17); --text-muted: var(--ink-mute, #786e67); --accent: var(--tom, #118951); --accent-light: var(--tom-deep, #006c3d); --accent-glow: var(--tom-soft, #ddf6e5); --nav-bg: color-mix(in oklab, var(--paper, #fefcf8) 82%, transparent); --overlay-bg: color-mix(in oklab, var(--ink-0, #251c17) 22%, transparent); --search-overlay: color-mix(in oklab, var(--ink-0, #251c17) 30%, transparent); --code-tab-header: var(--warm, #f9eee4); --font-body: var(--font-sans, 'Hanken Grotesk', system-ui, -apple-system, sans-serif); --font-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); --font-display: var(--font-display, 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif); --nav-height: 4rem; --sidebar-width: 16rem; --toc-width: 14rem; --content-max: 48rem; } /* Plus de dark-mode : on neutralise toute préférence système sombre. (les media queries ne lisent pas les custom props — on ré-affirme les valeurs claires en dur, mais ici tout est déjà clair par défaut, donc aucun override sombre n'existe.) */ /* ── Utilitaires Tailwind rapatriés (le CDN est retiré) ───────────── Seuls ces 4 tokens étaient réellement utilisés sur . */ .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .font-body { font-family: var(--font-body); } .bg-deep { background-color: var(--bg-deep); } .text-body { color: var(--text); } .bg-surface { background-color: var(--bg-surface); } .bg-elevated { background-color: var(--bg-elevated); } .text-bright { color: var(--text-bright); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent); } .border-border { border-color: var(--border); } /* ── Resets & Base ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 1.5rem); } body { margin: 0; font-family: var(--font-body); background: var(--bg-deep); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Couleur de lien AA : --accent (--tom #118951) tombe à 4.35:1 sur --paper (< 4.5:1 AA texte normal). On passe à --accent-light (--tom-deep #006c3d, table hex canonique) = 6.34:1. Les liens de nav/ sidebar/toc gardent leurs couleurs propres (--text / --text-muted, AA) et restent sans soulignement ; le soulignement est ajouté au contenu courant (.prose a) pour l'affordance non-couleur. */ a { color: var(--accent-light); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--accent-ink, #00552e); } code, pre, kbd { font-family: var(--font-mono); } /* Global inline code styling (outside .prose) */ code:not(pre code) { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.1rem 0.35rem; font-size: 0.8em; color: var(--accent-light); } /* Global pre/code block styling (outside .prose) */ pre:not(.prose pre) { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem 1.25rem; margin: 0.5rem 0 1rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.7; } pre:not(.prose pre) code { background: transparent; border: none; padding: 0; font-size: inherit; color: var(--text); } /* Prism theme overrides (global) — fond code = papier chaud */ pre[class*="language-"], code[class*="language-"] { color: var(--text); background: var(--bg-surface); text-shadow: none !important; } /* ── Navigation ─────────────────────────────────────────────────── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-height); background: var(--nav-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border); } .nav-container { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 90rem; margin: 0 auto; padding: 0 1.5rem; } .nav-left { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .nav-logo-text { gap: 0.5rem; color: var(--text-bright); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.125rem; } .nav-logo-img { height: 28px; width: auto; } .nav-links { display: flex; align-items: center; gap: 1.25rem; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: none; border: 1px solid var(--border); border-radius: 0.5rem; color: var(--text); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; flex-shrink: 0; } .nav-toggle:hover { border-color: var(--border-accent); color: var(--text-bright); background: var(--bg-elevated); } .nav-link { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; transition: color 0.15s ease; white-space: nowrap; } .nav-link:hover { color: var(--text-bright); } /* Language switcher */ .lang-switcher { position: relative; display: inline-flex; flex-shrink: 0; } .lang-switcher-button { display: inline-flex; align-items: center; gap: 0.35rem; height: 2rem; padding: 0 0.6rem; background: none; border: 1px solid var(--border); border-radius: 0.5rem; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .lang-switcher-button:hover, .lang-switcher[data-open="true"] .lang-switcher-button { border-color: var(--border-accent); color: var(--text-bright); background: var(--bg-elevated); } .lang-switcher-menu { position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 7rem; margin: 0; padding: 0.3rem; list-style: none; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 0.6rem; box-shadow: var(--shadow-lg, 0 28px 56px rgba(54,26,10,0.10), 0 8px 20px rgba(54,26,10,0.06)); z-index: 50; } .lang-switcher-menu li + li { margin-top: 0.15rem; } .lang-switcher-option { display: block; padding: 0.4rem 0.6rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text); text-decoration: none; border-radius: 0.4rem; transition: background 0.12s ease, color 0.12s ease; } .lang-switcher-option:hover { background: var(--bg-elevated); color: var(--text-bright); } .lang-switcher-option.is-active { background: var(--accent-glow); color: var(--accent-light); } /* Theme toggle — SUPPRIMÉ (dark mode gelé). Le bouton est émis par le bundle nav (markup non forkable) : on le masque proprement. */ .theme-toggle { display: none !important; } .version-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--accent-light); background: var(--accent-glow); border: 1px solid var(--border-accent); border-radius: 9999px; } /* Mobile sidebar overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: var(--overlay-bg); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } /* ── Docs Layout ────────────────────────────────────────────────── */ .docs-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr var(--toc-width); max-width: 90rem; margin: 0 auto; padding-top: var(--nav-height); min-height: 100vh; } @media (max-width: 1280px) { .docs-layout { grid-template-columns: var(--sidebar-width) 1fr; } .docs-toc { display: none; } } @media (max-width: 768px) { .docs-layout { grid-template-columns: 1fr; } .docs-sidebar { display: none; } } /* ── Docs Sidebar ───────────────────────────────────────────────── */ .docs-sidebar { position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; padding: 1.5rem 1rem 1rem 1.5rem; border-right: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border) transparent; display: flex; flex-direction: column; } .sidebar-nav { display: block; } .sidebar-group { margin-bottom: 1.5rem; } .sidebar-group-title { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 0.5rem; padding: 0 0.5rem; } .sidebar-links { list-style: none; margin: 0; padding: 0; } .sidebar-link { display: block; padding: 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--text); border-radius: 0.5rem; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; border-left: 2px solid transparent; } .sidebar-link:hover { color: var(--text-bright); background: var(--bg-elevated); } .sidebar-link.active { color: var(--accent-light); background: var(--accent-glow); border-left-color: var(--accent); font-weight: 600; } /* Sidebar footer */ .sidebar-footer { margin-top: auto; padding: 1rem 0.75rem 0.5rem; border-top: 1px solid var(--border); } .sidebar-mobile-links { display: none; margin-bottom: 0.75rem; } .sidebar-footer-link { display: block; padding: 0.3rem 0; font-size: 0.8125rem; color: var(--text-muted); transition: color 0.15s ease; } .sidebar-footer-link:hover { color: var(--text-bright); } .sidebar-copyright { font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 0.25rem; } .sidebar-powered { font-size: 0.6875rem; color: var(--text-muted); } .sidebar-powered a { color: var(--accent-light); font-weight: 600; } .sidebar-powered a:hover { color: var(--accent-light); } /* ── Docs Main Content ──────────────────────────────────────────── */ .docs-main { padding: 2rem 2.5rem 4rem; max-width: var(--content-max); min-width: 0; } .docs-content { width: 100%; } /* ── Docs TOC (Right Sidebar) ───────────────────────────────────── */ .docs-toc { position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; padding: 1.5rem 1.5rem 2rem 1rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .toc-wrapper { border-left: 1px solid var(--border); padding-left: 1rem; } .toc-title { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 0.75rem; } .toc-links { list-style: none; margin: 0; padding: 0; } .toc-item { margin-bottom: 0.25rem; } .toc-item-sub { padding-left: 0.75rem; } .toc-link { display: block; padding: 0.25rem 0; font-size: 0.75rem; color: var(--text-muted); transition: color 0.15s ease; line-height: 1.4; } .toc-link:hover { color: var(--text); } .toc-link.active { color: var(--accent-light); font-weight: 600; } /* ── Prose (Documentation Content) ──────────────────────────────── */ .prose { font-size: 0.9375rem; line-height: 1.8; color: var(--text); } /* Liens de contenu : soulignés (affordance non-couleur, en plus de la couleur AA --accent-light héritée de la règle `a` globale). */ .prose a { text-decoration: underline; text-underline-offset: 0.15em; } .prose a:hover { text-decoration-thickness: 2px; } .prose h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-bright); margin: 0 0 1rem; line-height: 1.3; } .prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text-bright); margin: 2.5rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); line-height: 1.3; } .prose h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--text-bright); margin: 2rem 0 0.5rem; line-height: 1.4; } .prose h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-bright); margin: 1.5rem 0 0.5rem; } .prose p { margin: 0 0 1.25rem; } .prose strong { color: var(--text-bright); font-weight: 600; } .prose ul { margin: 0 0 1.25rem; padding-left: 1.5rem; list-style-type: disc; } .prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; list-style-type: decimal; } .prose li { margin-bottom: 0.375rem; } .prose li::marker { color: var(--text-muted); } .prose li > p { margin-bottom: 0.5rem; } .prose blockquote { margin: 1.25rem 0; padding: 0.85rem 1.15rem; border-left: 3px solid var(--accent); background: var(--accent-glow); border-radius: 0 0.5rem 0.5rem 0; color: var(--text); } .prose blockquote p:last-child { margin-bottom: 0; } /* Inline code */ .prose code:not(pre code) { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0.3rem; padding: 0.12rem 0.4rem; font-size: 0.8125em; color: var(--accent-light); white-space: nowrap; } /* Code blocks */ .prose pre { background: var(--bg-surface) !important; border: 1px solid var(--border); border-radius: 0.6rem; padding: 1rem 1.25rem; margin: 0 0 1.25rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.7; position: relative; } .prose pre code { background: transparent !important; border: none; padding: 0; font-size: inherit; color: var(--text); white-space: pre; } .prose pre[class*="language-"], .prose code[class*="language-"] { color: var(--text); background: var(--bg-surface); text-shadow: none; } /* Copy code button */ .code-block-wrapper { position: relative; } .copy-code-btn { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); border-radius: 0.4rem; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease; z-index: 1; } .code-block-wrapper:hover .copy-code-btn, .prose pre:hover + .copy-code-btn, .copy-code-btn:hover { opacity: 1; } .copy-code-btn:hover { color: var(--text-bright); border-color: var(--border-accent); } .copy-code-btn.copied { color: var(--herb-ink, #086034); border-color: var(--herb-line, #acdcb8); } /* Heading permalink */ .heading-permalink { color: var(--accent); font-weight: 400; margin-right: 0.5rem; opacity: 0.45; transition: opacity 0.15s ease, color 0.15s ease; font-size: 0.85em; } .prose h2:hover .heading-permalink, .prose h3:hover .heading-permalink, .prose h4:hover .heading-permalink { opacity: 1; } .heading-permalink:hover { color: var(--accent-light); } /* Tables */ .prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.8125rem; } .prose th { text-align: left; padding: 0.625rem 0.75rem; background: var(--bg-surface); border-bottom: 2px solid var(--border); color: var(--text-bright); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); } .prose tr:last-child td { border-bottom: none; } /* Horizontal rule */ .prose hr { margin: 2rem 0; border: none; border-top: 1px solid var(--border); } /* Images */ .prose img { max-width: 100%; height: auto; border-radius: 0.5rem; border: 1px solid var(--border); } /* ── Docs Pagination ────────────────────────────────────────────── */ .docs-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .pagination-link { display: flex; flex-direction: column; padding: 1rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 0.6rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .pagination-link:hover { border-color: var(--border-accent); box-shadow: var(--shadow-md, 0 6px 18px rgba(60,30,12,0.07), 0 1px 3px rgba(60,30,12,0.05)); transform: translateY(-1px); } .pagination-next { text-align: right; } .pagination-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; } .pagination-title { font-size: 0.875rem; font-weight: 600; color: var(--accent-light); } /* ── Search Modal ───────────────────────────────────────────────── */ .search-trigger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 0.5rem; color: var(--text-muted); font-size: 0.8125rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .search-trigger:hover { border-color: var(--border-accent); color: var(--text); } .search-trigger kbd { font-family: var(--font-mono); color: var(--text); /* AA : héritait de --text-muted, 10px sur fond élevé (axe lot 6) */ font-size: 0.625rem; padding: 0.125rem 0.375rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0.25rem; } .search-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: var(--search-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: flex-start; justify-content: center; padding-top: 15vh; } .search-overlay.active { display: flex; } .search-dialog { width: 100%; max-width: 36rem; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 0.85rem; box-shadow: var(--shadow-xl, 0 48px 90px rgba(54,26,10,0.16), 0 18px 36px rgba(54,26,10,0.08)); overflow: hidden; } .search-input-wrapper { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-bright); font-size: 1rem; font-family: var(--font-body); } .search-input::placeholder { color: var(--text-muted); } .search-icon { color: var(--text-muted); flex-shrink: 0; } .search-results { max-height: 24rem; overflow-y: auto; padding: 0.5rem; } .search-result-item { display: block; padding: 0.75rem 1rem; border-radius: 0.5rem; transition: background 0.1s ease; cursor: pointer; } .search-result-item:hover, .search-result-item.active { background: var(--bg-elevated); } .search-result-title { font-size: 0.875rem; font-weight: 600; color: var(--text-bright); margin-bottom: 0.125rem; } .search-result-section { font-size: 0.75rem; color: var(--text-muted); } .search-result-excerpt { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.4; } .search-empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; } .search-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-top: 1px solid var(--border); font-size: 0.6875rem; color: var(--text-muted); } /* ── Site footer (page 404) ─────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); } .site-footer-inner { max-width: 90rem; margin: 0 auto; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--text-muted); } @media (min-width: 640px) { .site-footer-inner { flex-direction: row; } } .footer-link { color: var(--text-muted); transition: color 0.15s ease; } .footer-link:hover { color: var(--accent-light); } /* ── Animations ─────────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.4s ease both; } .animate-fade-in-up { animation: fadeInUp 0.5s ease both; } .stagger > *:nth-child(1) { animation-delay: 0ms; } .stagger > *:nth-child(2) { animation-delay: 60ms; } .stagger > *:nth-child(3) { animation-delay: 120ms; } .stagger > *:nth-child(4) { animation-delay: 180ms; } .stagger > *:nth-child(5) { animation-delay: 240ms; } .stagger > *:nth-child(6) { animation-delay: 300ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .animate-fade-in, .animate-fade-in-up { animation: none; } } /* ── Mobile Adjustments ─────────────────────────────────────────── */ @media (max-width: 768px) { :root { --toc-width: 0; } .nav-container { position: relative; } .nav-toggle { display: flex; } .nav-left { position: static; } .nav-logo { position: absolute; left: 50%; transform: translateX(-50%); } .nav-links { gap: 0.75rem; } .nav-links .search-trigger span, .nav-links .search-trigger kbd { display: none; } .nav-links .search-trigger { padding: 0.375rem; } .nav-links .version-badge, .nav-links .nav-link { display: none; } .sidebar-mobile-links { display: block; border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 0.5rem; } .docs-layout { grid-template-columns: 1fr; } .docs-sidebar { display: block; position: fixed; top: var(--nav-height); left: 0; bottom: 0; width: 18rem; z-index: 40; background: var(--bg-deep); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; } .docs-sidebar.active { transform: translateX(0); } .docs-main { padding: 1.5rem 1rem 3rem; } .install-box { font-size: 0.75rem; flex-wrap: wrap; justify-content: center; text-align: center; } .docs-pagination { grid-template-columns: 1fr; } }