.rich {
    --u: 8px;
    --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas, "Courier New", monospace;
    --muted: #605e56;
    --line: #d3d2c8;
    --accent: #ee7620;
    --accent-ink: #a8480a;
    --ink-soft: #2c2c2c;
    max-width: 72ch;
    font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 16px;
    line-height: calc(var(--u) * 3);
    color: #0d0d0d;
}
:root[data-theme="dark"] .rich {
    --muted: #8a90a0;
    --line: #23262f;
    --accent: #ff7a1a;
    --accent-ink: #ff8a33;
    --ink-soft: #c9cbd2;
    color: #f0f1f3;
}
.rich p,
.rich .ce-paragraph { line-height: calc(var(--u) * 3);text-align:justify }
.rich h2, .rich h3 { margin-top: calc(var(--u) * 5); }
.rich a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.rich img,
.rich img.cdx-image-tool { margin: calc(var(--u) * 3) 0; border: 1px solid var(--line);border-radius:0; }
.rich figure { margin: calc(var(--u) * 4) 0; }
.rich figcaption,
.rich .cdx-image-tool__caption { font-family: var(--font-mono); font-size: 12px; color: var(--muted);
    margin-top: -16px; letter-spacing: .04em; text-align: center; margin-bottom: 48px;}
.rich blockquote { margin: calc(var(--u) * 4) 0; padding-left: calc(var(--u) * 3);
    border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic; }

/* --- Bloc de code (Prism) : surface sombre « terminal » dans les deux thèmes --- */
.rich pre {
    margin: calc(var(--u) * 4) 0;
    padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
    background: #14161c;
    border: 1px solid #2a2d38;
    border-left: 3px solid var(--accent);
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: calc(var(--u) * 2.75);
    color: #e6e6e6;
    tab-size: 2; -moz-tab-size: 2;
}
.rich pre code { font: inherit; color: inherit; background: none; padding: 0; white-space: pre; }
/* Conteneur du bloc code (ajouté par richblocks.js) : ancre le bouton « copier »
   pour qu'il reste fixe pendant le défilement du code. */
.rich .code-wrap { position: relative; margin: calc(var(--u) * 4) 0; }
.rich .code-wrap > pre { margin: 0; }
.rich .code-copy {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid #2a2d38; background: rgba(255, 255, 255, .05);
    color: #9aa0aa; cursor: pointer; opacity: .55;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.rich .code-wrap:hover .code-copy, .rich .code-copy:focus-visible { opacity: 1; }
.rich .code-copy:hover { color: var(--accent); border-color: var(--accent); }
.rich .code-copy.is-done { color: #4ec9b0; border-color: #4ec9b0; opacity: 1; }
.rich .code-copy.is-fail { color: #ff6b6b; border-color: #ff6b6b; opacity: 1; }
.rich .code-copy svg { width: 15px; height: 15px; }
/* Code en ligne (dans un paragraphe) : discret, teinte accent. */
.rich :not(pre) > code {
    font-family: var(--font-mono); font-size: .88em;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-ink); padding: .1em .35em;
}
/* Coloration syntaxique — jetons Prism (thème maison, aligné cyberpunk). */
.rich pre .token.comment, .rich pre .token.prolog, .rich pre .token.doctype, .rich pre .token.cdata { color: #6b7280; font-style: italic; }
.rich pre .token.punctuation { color: #9aa0aa; }
.rich pre .token.property, .rich pre .token.tag, .rich pre .token.boolean, .rich pre .token.number, .rich pre .token.constant, .rich pre .token.symbol, .rich pre .token.deleted { color: #ff9a52; }
.rich pre .token.selector, .rich pre .token.attr-name, .rich pre .token.string, .rich pre .token.char, .rich pre .token.builtin, .rich pre .token.inserted { color: #4ec9b0; }
.rich pre .token.operator, .rich pre .token.entity, .rich pre .token.url, .rich pre .token.variable { color: #56c8ff; }
.rich pre .token.atrule, .rich pre .token.attr-value, .rich pre .token.keyword { color: var(--accent); }
.rich pre .token.function, .rich pre .token.class-name { color: #dcdcaa; }
.rich pre .token.regex, .rich pre .token.important { color: #ff7a1a; }

/* --- Intégration CodePen (iframe construite côté client depuis data-pen) --- */
.rich figure.codepen { margin: calc(var(--u) * 4) 0; border: 1px solid var(--line); }
.rich figure.codepen .codepen-frame { display: block; width: 100%; border: 0; background: #14161c; }
.rich figure.codepen.is-invalid::after {
    content: "Pen CodePen indisponible."; display: block;
    padding: calc(var(--u) * 2); font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}