/* ═══════════════════════════════════════════ rr/ : page de lecture (article, étude, blog) À charger après rr-tokens.css, avec class="rr-article" sur . Tout ce qui touche des éléments génériques (body, main, h1-h3, nav, footer) est limité à .rr-article, pour ne pas altérer les autres pages du projet. Guide : guide/web.md (« Page de lecture »). ═══════════════════════════════════════════ */ /* ── Base ── */ .rr-article, .rr-article *, .rr-article *::before, .rr-article *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } .rr-article { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.7; background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; transition: background-color var(--transition-smooth), color var(--transition-smooth); } .rr-article a { color: var(--accent); text-underline-offset: 3px; } .rr-article ::selection { background: var(--accent); color: var(--bg-primary); } .rr-article :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Navigation (56 px, collante) : rr/ › fil d'Ariane, bouton de thème à droite ── */ .rr-article .nav { position: sticky; top: 0; z-index: 100; background: var(--bg-primary); border-bottom: 1px solid var(--line); } .rr-article .nav-inner { max-width: 800px; margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .rr-article .nav-brand { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; color: var(--text-primary); text-decoration: none; } .rr-article .nav-brand span { color: var(--accent); } .rr-article .nav-brand .crumb { color: var(--text-muted); font-weight: 400; } /* Fil d'Ariane en chemin : rr/blog/page. Les segments se touchent, chaque « / » est prune. */ .rr-article .nav-path { display: flex; align-items: baseline; min-width: 0; margin-right: auto; font-family: var(--font-mono); font-size: 0.95rem; } .rr-article .nav-crumb { color: var(--text-muted); text-decoration: none; } .rr-article .nav-crumb:hover { color: var(--accent); } .rr-article .nav-crumb::after { content: "/"; color: var(--accent); } .rr-article .nav-here { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rr-article .theme-btn { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .rr-article .theme-btn svg { width: 16px; height: 16px; } .rr-article .theme-btn:hover { border-color: var(--line-strong); color: var(--text-primary); } .rr-article .icon-sun { display: none; } [data-theme="dark"] .rr-article .icon-sun { display: block; } [data-theme="dark"] .rr-article .icon-moon { display: none; } /* ── Mise en page : colonne de lecture de 800 px ── */ .rr-article main { max-width: 800px; margin: 0 auto; padding: 40px 16px 96px; } .page-tag { display: block; font-family: var(--font-mono); font-size: 0.8rem; text-transform: lowercase; color: var(--accent); margin-bottom: 12px; } .rr-article h1, .rr-article h2, .rr-article h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; } .rr-article h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; margin: 0 0 16px; } .rr-article h1 em { font-style: italic; color: var(--accent); } .rr-article h2 { position: relative; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.15; margin: 72px 0 20px; padding-bottom: 16px; } /* filet pointillé ASCII */ .rr-article h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-image: radial-gradient(circle, var(--text-muted) 0.9px, transparent 1.3px); background-size: 8px 2px; opacity: 0.7; } .rr-article h3 { font-size: 1.4rem; line-height: 1.25; margin: 40px 0 10px; } .rr-article h3::before { content: '# '; font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent); } .rr-article p, .rr-article li { color: var(--text-secondary); } .rr-article strong { color: var(--text-primary); font-weight: 600; } .rr-article .lede { font-size: 1.1rem; color: var(--text-secondary); max-width: 60ch; margin: 0; } /* ── Sommaire en arbre ASCII ── */ .toc { margin: 32px 0 8px; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg-card); font-family: var(--font-mono); font-size: 0.85rem; } .toc strong { display: block; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; } .toc strong::before { content: '┌─ '; } .toc ol { list-style: none; margin: 0; padding: 0; } .toc li { position: relative; padding-left: 2.2em; color: var(--text-muted); } .toc li::before { content: '├─'; position: absolute; left: 0; } .toc li:last-child::before { content: '└─'; } .toc a { color: var(--text-secondary); text-decoration: none; } .toc a:hover { color: var(--accent); } /* ── Encadré : .note (ajout) et .note.warning (attention) ── */ .note { border-left: 1px dashed var(--line-strong); padding: 4px 0 4px 18px; font-size: 0.95rem; } .note::before { content: 'ajout'; display: block; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; color: var(--accent); } .note.warning { border-left: 2px solid var(--warning); } .note.warning::before { content: 'attention'; color: var(--warning); } .note[hidden] { display: none; } /* ── Carte de graphique : fenêtre de terminal, coins ASCII au survol ── */ figure.chart { position: relative; margin: 32px 0; padding: 18px 20px 14px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color var(--transition-fast); } figure.chart::after { content: ''; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); --c: var(--accent); --s: 14px; background: linear-gradient(var(--c), var(--c)) top left / var(--s) 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px var(--s) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--s) 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px var(--s) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--s) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--s) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--s) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--s) no-repeat; } figure.chart:hover { border-color: var(--line-strong); } figure.chart:hover::after { opacity: 1; } figure.chart > .chart-title { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.25; color: var(--text-primary); margin: 0; } figure.chart > .chart-subtitle { font-size: 0.88rem; color: var(--text-muted); margin: 4px 0 14px; } .chart-empty { margin: 24px 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); } .plot { width: 100%; min-height: 40px; } .plot svg { display: block; overflow: visible; --plot-background: var(--bg-card); } /* ── Contrôles : boutons radio ASCII ( ) / (•) ── */ .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 4px 0 14px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); } .controls label { display: flex; align-items: center; gap: 10px; text-transform: lowercase; } .controls input[type="range"] { width: 180px; accent-color: var(--accent); } .presets { display: flex; flex-wrap: wrap; gap: 4px 16px; } .presets button { font: inherit; padding: 2px 0; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--transition-fast); } .presets button::before { content: '( ) '; white-space: pre; } .presets button:hover { color: var(--text-primary); } .presets button[aria-pressed="true"] { color: var(--text-primary); } .presets button[aria-pressed="true"]::before { content: '(•) '; color: var(--accent); } /* Filtre placé dans la barre de navigation (ex. périmètre des données) */ .rr-article .nav .scope { margin-left: auto; font-family: var(--font-mono); font-size: 0.78rem; gap: 4px 12px; } @media (max-width: 520px) { /* Pas la place sur une ligne : le filtre passe sous la marque et le bouton de thème. */ .rr-article .nav-inner:has(.scope) { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; row-gap: 2px; } .rr-article .nav .scope { order: 3; width: 100%; margin-left: 0; } } /* ── Lecture chiffrée ── */ .readout { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0 0 10px; } .readout .stat-label { font-family: var(--font-mono); font-size: 0.74rem; text-transform: lowercase; color: var(--text-muted); } .readout .stat-label::before { content: '└─ '; } .readout .stat-value { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.15; color: var(--text-primary); } /* ── Légende ── */ .legend { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin: 0 0 8px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); } .legend li { display: flex; align-items: center; gap: 7px; } .legend li[hidden] { display: none; } .key { display: inline-block; flex: none; background: var(--c); } .key-line { width: 16px; height: 2px; } .key-rect { width: 10px; height: 10px; border-radius: var(--radius-sm); } .key-wash { width: 12px; height: 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--c) 25%, transparent); } .key-dot { width: 8px; height: 8px; border-radius: 50%; } /* ── Vue tableau sous un graphique ── */ details.table-view { margin-top: 10px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); } details.table-view summary { cursor: pointer; width: fit-content; list-style: none; transition: color var(--transition-fast); } details.table-view summary::-webkit-details-marker { display: none; } details.table-view summary::before { content: '$ '; color: var(--accent); } details.table-view summary:hover { color: var(--text-primary); } details.table-view .table-wrap { max-height: 280px; overflow: auto; margin-top: 8px; border-top: 1px dashed var(--line); } details.table-view table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } details.table-view th, details.table-view td { text-align: right; padding: 4px 8px; border-bottom: 1px dashed var(--line); color: var(--text-secondary); } details.table-view th { position: sticky; top: 0; background: var(--bg-card); color: var(--text-primary); font-weight: 500; } details.table-view th:first-child, details.table-view td:first-child { text-align: left; } /* ── Sections d'annexe repliables : titre cliquable, marqueur [+] / [−] ── */ details.annexe { border-top: 1px dashed var(--line); } details.annexe:last-of-type { border-bottom: 1px dashed var(--line); } details.annexe > summary { cursor: pointer; list-style: none; padding: 4px 0; } details.annexe > summary::-webkit-details-marker { display: none; } details.annexe > summary h3 { display: inline; margin: 0; font-size: 1.2rem; } details.annexe > summary h3::after { content: ' [+]'; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); } details.annexe[open] > summary h3::after { content: ' [−]'; } details.annexe > summary:hover h3::after { color: var(--accent); } details.annexe[open] { padding-bottom: 8px; } /* ── Tableau dans le texte ── */ .rr-article main > .table-wrap, details.annexe .table-wrap { overflow-x: auto; margin: 12px 0 20px; } table.data { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; } table.data th, table.data td { text-align: right; padding: 5px 10px; border-bottom: 1px dashed var(--line); color: var(--text-secondary); } table.data th { color: var(--text-primary); font-weight: 500; border-bottom-color: var(--line-strong); } table.data th:first-child, table.data td:first-child { text-align: left; } /* ── Formules KaTeX ── */ .katex { font-size: 1.05em; } .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; } /* ── Pied de page ── */ .rr-article .footer { max-width: 800px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--line-strong); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rr-article *, .rr-article *::before, .rr-article *::after { transition: none !important; } } @media (max-width: 520px) { figure.chart { padding: 14px 12px 10px; } .controls label { flex-wrap: wrap; width: 100%; } .controls input[type="range"] { width: 100%; } .readout { gap: 8px 24px; } .readout .stat-value { font-size: 1.6rem; } }