/* ── Thème Clair (Par défaut) ──────────────────────────────── */ :root { --bg: #fbfcfd; --surface: #eef1f7; --border: #c4cfe5; --accent: #1779c4; --accent2: #4665a2; --text: #2f4153; --text-muted: #6f7e8e; --text-dim: #9cafd4; --code-bg: #f5f5f5; --heading: #354c7b; } /* ── Thème Sombre (Activé via la classe .dark sur ) ───── */ html.dark { --bg: #24283b; --surface: #1a1b26; --border: #565f89; --accent: #7aa2f7; --accent2: #bb9af7; --text: #a9b1d6; --text-muted: #9aa5ce; --text-dim: #565f89; --code-bg: #31364e; --heading: #c0caf5; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.8; min-height: 100vh; } .container { max-width: 860px; margin: 0 auto; padding: 0 28px 100px; position: relative; z-index: 1; } /* ── Bouton de Thème ──────────────────────────────────────── */ #theme-toggle { position: fixed; top: 20px; right: 24px; background: none; border: 1px solid var(--border); color: var(--text-muted); font-family: 'Noto Mono', monospace; font-size: 11px; letter-spacing: 0.1em; padding: 5px 10px; cursor: pointer; border-radius: 3px; transition: all 0.2s; z-index: 100; } #theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* HEADER */ header { border-bottom: 1px solid var(--border); padding: 64px 0 48px; margin-bottom: 56px; } .label { font-family: 'Noto Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .label::after { content: ''; flex: 1; height: 1px; background: var(--accent); opacity: 0.3; max-width: 60px; } h1 { font-family: 'Noto', serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; color: var(--heading); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; } h1 span { color: var(--accent); } .subtitle { font-family: 'Source Serif 4', serif; font-size: 1.1rem; font-style: italic; color: var(--text-muted); font-weight: 300; max-width: 600px; line-height: 1.6; } .meta { margin-top: 28px; display: flex; gap: 28px; font-family: 'Noto Mono', monospace; font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; } .meta span { color: var(--text-muted); } /* SECTIONS */ section { margin-bottom: 64px; } h2 { font-family: 'Noto', serif; font-size: 1.7rem; font-weight: 700; color: var(--heading); margin-bottom: 24px; padding-top: 8px; display: flex; align-items: center; gap: 14px; } h2::before { content: attr(data-n); font-family: 'Noto Mono', monospace; font-size: 11px; color: var(--accent2); border: 1px solid var(--accent2); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0; } h3 { font-family: 'Noto Mono', monospace; font-size: 0.85rem; font-weight: 500; color: var(--accent2); text-transform: uppercase; letter-spacing: 0.12em; margin: 36px 0 14px; } p { margin-bottom: 18px; color: var(--text); } /* LINKS */ a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(93, 172, 237, 0.2); transition: all 0.2s ease; } a:hover { border-bottom-color: var(--accent); background: rgba(93, 172, 237, 0.05); } /* CALLOUT BOXES */ .callout { border-left: 3px solid var(--accent); background: var(--surface); padding: 18px 22px; margin: 28px 0; border-radius: 0 4px 4px 0; } .callout.warn { border-left-color: var(--accent2); } .callout p { margin: 0; font-size: 0.95rem; } .callout-label { font-family: 'Noto Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .callout.warn .callout-label { color: var(--accent2); } /* CODE BLOCKS */ pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 22px 24px; overflow-x: auto; margin: 24px 0 32px; position: relative; } pre::before { content: attr(data-lang); position: absolute; top: 10px; right: 14px; font-family: 'Noto Mono', monospace; font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; } code { font-family: 'Noto Mono', monospace; font-size: 13.5px; line-height: 1.7; color: #37474f; } p code, li code { background: var(--code-bg); border: 1px solid var(--border); padding: 1px 7px; border-radius: 3px; font-size: 13px; color: var(--accent); } /* Syntax highlight colors */ .kw { color: #bb6bb2; } .fn { color: #5383d6; } .str { color: #438a59; } .cm { color: #969696; font-style: italic; } .num { color: #d67c3b; } .ty { color: #8258b3; } .op { color: #2f4153; } /* DIAGRAM */ .diagram { border-top: 2px solid var(--accent2); border-bottom: 1px solid var(--border); padding: 32px 0 24px; margin: 36px 0; overflow-x: auto; background: transparent; } .pipeline { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; min-width: 560px; margin-bottom: 16px; counter-reset: pipeline-step; } .pipe-step { flex: 1; border-right: 1px solid var(--border); padding: 16px 18px 14px; font-family: 'Noto Serif', Georgia, serif; font-size: 13px; color: var(--text-muted); position: relative; line-height: 1.5; counter-increment: pipeline-step; } .pipe-step:first-child { border-left: 1px solid var(--border); } .pipe-step::before { content: counter(pipeline-step, decimal-leading-zero); display: block; font-family: 'Noto Mono', monospace; font-size: 9px; letter-spacing: 0.15em; color: var(--accent2); margin-bottom: 10px; opacity: 0.8; } .pipe-step.active { background: rgba(245, 166, 35, 0.04); color: var(--text); } .pipe-step.active::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent2); } .pipe-step small { display: block; font-family: 'Noto Mono', monospace; font-size: 9px; color: var(--text-dim); margin-top: 6px; letter-spacing: 0.08em; text-transform: uppercase; } /* pipe-arrow hidden — visual separation handled by borders */ .pipe-arrow { display: none; } .pipe-step .title { font-family: 'Noto Serif', Georgia, serif; font-size: 13.5px; font-weight: 700; font-style: italic; color: var(--heading); display: block; margin-bottom: 5px; } .pipe-step .desc { font-family: 'Noto Serif', Georgia, serif; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } .pipe-step .num { font-family: 'Noto Mono', monospace; font-size: 9px; letter-spacing: 0.15em; color: var(--accent2); display: block; margin-bottom: 8px; text-transform: uppercase; } .pipe-step.buffer { display: inline-block; margin-top: 8px; font-family: 'Noto Mono', monospace; font-size: 10px; color: var(--accent); border-bottom: 1px dotted var(--accent); padding-bottom: 1px; } .diagram-caption { font-family: 'Noto Serif', Georgia, serif; font-size: 12px; font-style: italic; color: var(--text-dim); text-align: left; margin-top: 18px; padding-left: 2px; letter-spacing: 0; } /* FORMULA */ .formula { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 16px 24px; margin: 20px 0; font-family: 'Noto Mono', monospace; font-size: 13px; color: #4665a2; text-align: center; } /* TABLE */ table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; } th { font-family: 'Noto Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--border); padding: 10px 14px; text-align: left; } td { border-bottom: 1px solid var(--border); padding: 10px 14px; color: var(--text); vertical-align: top; } tr:hover td { background: var(--surface); } td code { font-size: 12px; } /* DIVIDER */ .divider { border: none; border-top: 1px solid var(--border); margin: 48px 0; } /* FOOTER */ footer { font-family: 'Noto Mono', monospace; font-size: 11px; color: var(--text-dim); text-align: center; padding-top: 32px; border-top: 1px solid var(--border); letter-spacing: 0.06em; } /* ANIMATIONS */ @keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } header { animation: fadeIn 0.6s ease both; } section { animation: fadeIn 0.5s ease both; } section:nth-child(2) { animation-delay: 0.08s; } section:nth-child(3) { animation-delay: 0.14s; } section:nth-child(4) { animation-delay: 0.20s; } section:nth-child(5) { animation-delay: 0.26s; } section:nth-child(6) { animation-delay: 0.32s; } /* Local font fallbacks and article-specific overrides */ body { font-family: 'Noto Serif', Georgia, serif; } h1, h2 { font-family: 'Noto Serif', serif; } h3, .label, .meta, pre, code, th, .diagram-caption, footer { font-family: 'Noto Mono', monospace; } ul { margin: 0 0 18px 0; padding-left: 24px; } ul li { margin-bottom: 6px; color: var(--text); line-height: 1.7; } .toc { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 24px 28px; margin-bottom: 56px; } .toc-title { font-family: 'Noto Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .toc ol { margin: 0; padding-left: 20px; counter-reset: none; } .toc li { font-family: 'Noto Mono', monospace; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; } .toc a { color: var(--text-muted); border-bottom: none; } .toc a:hover { color: var(--accent); background: none; } .badge { display: inline-block; font-family: 'Noto Mono', monospace; font-size: 10px; padding: 2px 8px; border-radius: 3px; border: 1px solid; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; margin-bottom: 4px; } .badge-blue { color: #1779c4; border-color: #1779c4; background: rgba(23,121,196,.07); } .badge-amber { color: #4665a2; border-color: #4665a2; background: rgba(70,101,162,.07); } .badge-green { color: #007a5e; border-color: #007a5e; background: rgba(0,122,94,.07); } .class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 20px 0 32px; } .class-card { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; } .class-card .cn { font-family: 'Noto Mono', monospace; font-size: 12px; color: var(--accent); display: block; margin-bottom: 4px; } .class-card .cd { font-size: 12px; color: var(--text-muted); line-height: 1.4; } .sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0; margin: 28px 0; border-top: 1px solid var(--border); } .sample-card { padding: 20px 0 18px; border-bottom: 1px solid var(--border); transition: none; position: relative; } .sample-grid .sample-card:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--border); } .sample-card .sc-title { font-family: 'Noto Serif', Georgia, serif; font-size: 15px; font-weight: 700; font-style: italic; color: var(--heading); display: block; margin-bottom: 7px; } .sample-card .sc-desc { font-family: 'Noto Serif', Georgia, serif; font-size: 13.5px; color: var(--text-muted); line-height: 1.65; margin: 0; } .sample-card .sc-tags { margin-top: 12px; display: flex; flex-wrap: wrap; } .sample-card .badge { font-family: 'Noto Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; border: none; border-radius: 0; background: transparent; padding: 0; margin-right: 14px; margin-bottom: 0; } .sample-card .badge::before { content: '\00B7'; margin-right: 5px; opacity: 0.4; } .sample-card .badge-blue { color: #1779c4; } .sample-card .badge-amber { color: #4665a2; } .sample-card .badge-green { color: #007a5e; } .arch-layer { display: flex; flex-direction: column; gap: 0; margin: 24px 0 36px; border-left: 2px solid var(--border); padding-left: 24px; } .layer-row { display: flex; gap: 0; align-items: baseline; padding: 10px 0; border-bottom: 1px dotted var(--border); } .layer-row:last-child { border-bottom: none; } .layer-box { flex: 1; text-align: left; padding: 0; font-family: 'Noto Serif', Georgia, serif; font-size: 13px; line-height: 1.5; background: transparent; border: none; } .layer-box::before { content: attr(data-label); display: block; font-family: 'Noto Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 3px; } .layer-app { color: var(--text); } .layer-app::before { color: #1779c4; } .layer-rhi { color: var(--text); } .layer-rhi::before { color: #4665a2; } .layer-back { color: var(--text); } .layer-back::before { color: #007a5e; } .layer-hw { color: var(--text-muted); } .layer-hw::before { color: var(--text-dim); } .layer-arrow { flex: none; width: 24px; text-align: center; color: var(--text-dim); font-size: 11px; align-self: center; padding: 0 4px; } /* ── Overrides hardcodés pour le dark mode ─────────────────── */ @media (prefers-color-scheme: dark) { /* Blocs de code — texte générique */ code { color: #888888; } p code, li code { color: var(--accent); } /* Syntax highlight */ .kw { color: #bb6bb2; } .fn { color: #4a6aaa; } .str { color: #c3e88d; } .cm { color: #546e7a; } .num { color: #f78c6c; } .ty { color: #C08050; } .op { color: #5b2bdd; } /* Formule */ .formula { color: #bb9af7; } /* Badges globaux */ .badge-blue { color: #7aa2f7; border-color: #7aa2f7; background: rgba(122,162,247,.07); } .badge-amber { color: #4665a2; border-color: #4665a2; background: rgba(70,101,162,.07); } .badge-green { color: #007a5e; border-color: #007a5e; background: rgba(0,122,94,.07); } /* Badges dans sample-card */ .sample-card .badge-blue { color: #7aa2f7; } .sample-card .badge-amber { color: #bb9af7; } .sample-card .badge-green { color: #9ece6a; } /* Arch layers */ .layer-app::before { color: #7aa2f7; } .layer-rhi::before { color: #bb9af7; } .layer-back::before { color: #9ece6a; } } html.dark code { color: #c9d1e8; } html.dark p code, html.dark li code { color: var(--accent); } html.dark .kw { color: #c792ea; } html.dark .fn { color: #82aaff; } html.dark .str { color: #c3e88d; } html.dark .cm { color: #546e7a; } html.dark .num { color: #f78c6c; } html.dark .ty { color: #ffcb6b; } html.dark .op { color: #89ddff; } html.dark .formula { color: #bb9af7; } html.dark .badge-blue { color: #7aa2f7; border-color: #7aa2f7; background: rgba(122,162,247,.07); } html.dark .badge-amber { color: #bb9af7; border-color: #bb9af7; background: rgba(187,154,247,.07); } html.dark .badge-green { color: #9ece6a; border-color: #9ece6a; background: rgba(158,206,106,.07); } html.dark .sample-card .badge-blue { color: #7aa2f7; } html.dark .sample-card .badge-amber { color: #bb9af7; } html.dark .sample-card .badge-green { color: #9ece6a; } html.dark .layer-app::before { color: #7aa2f7; } html.dark .layer-rhi::before { color: #bb9af7; } html.dark .layer-back::before { color: #9ece6a; }