/* Generated by layout. Base, vault snippets (palette, palette-adaptive, md-callouts, md-code-blocks, md-headings, md-inline, md-text, status-bar), site. */

/*
 * Base : les variables et le rendu de la vue lecture d'Obsidian (thème par
 * défaut), réécrits pour le site — pas une copie d'app.css. Les snippets du
 * vault viennent ensuite et s'appliquent tels quels, puisqu'ils lisent les
 * mêmes variables et visent le même DOM (.markdown-rendered, .callout…).
 */

/* --- Variables ------------------------------------------------------------ */
:root {
  --font-text: ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Inter", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-interface: var(--font-text);
  --font-monospace: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
  --font-text-size: 16px;
  --font-ui-smaller: 12px;
  --font-ui-small: 13px;
  --font-ui-medium: 15px;
  --font-smaller: 0.875em;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --line-height-normal: 1.6;
  --line-height-tight: 1.3;
  --p-spacing: 1rem;
  --h1-size: 1.75em;
  --h2-size: 1.4em;
  --h3-size: 1.2em;
  --h4-size: 1.1em;
  --h5-size: 1em;
  --h6-size: 0.95em;
  --h1-weight: 700;
  --h2-weight: 650;
  --h3-weight: 620;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;
  --heading-spacing: 1.6em;

  --size-2-1: 2px; --size-2-2: 4px; --size-2-3: 6px;
  --size-4-1: 4px; --size-4-2: 8px; --size-4-3: 12px; --size-4-4: 16px;
  --size-4-5: 20px; --size-4-6: 24px; --size-4-8: 32px; --size-4-12: 48px;
  --radius-s: 4px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 16px;
  --border-width: 1px;
  --icon-size: 16px;
  --icon-stroke: 1.75px;
  --anim-duration-fast: 140ms;
  --anim-duration-moderate: 300ms;
  --file-line-width: 700px;

  --list-indent: 2em;
  --list-spacing: 0.075em;
  --list-bullet-size: 0.3em;
  --list-bullet-radius: 50%;
  --list-bullet-border: none;
  --list-bullet-transform: none;
  --checkbox-size: 1em;

  --callout-padding: 12px 12px 12px 24px;
  --callout-radius: var(--radius-s);
  --callout-border-width: 0px;
  --callout-border-opacity: 0.25;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-title-weight: 600;
  --callout-content-padding: 0;
  --callout-content-background: transparent;
  --callout-blend-mode: normal;

  --callout-default: var(--color-blue);
  --callout-info: var(--color-blue);
  --callout-todo: var(--color-blue);
  --callout-summary: var(--color-cyan);
  --callout-tip: var(--color-cyan);
  --callout-important: var(--color-cyan);
  --callout-success: var(--color-green);
  --callout-question: var(--color-orange);
  --callout-warning: var(--color-orange);
  --callout-fail: var(--color-red);
  --callout-error: var(--color-red);
  --callout-bug: var(--color-red);
  --callout-example: var(--color-purple);
  --callout-quote: #9e9e9e;

  /* Couleurs nommées d'Obsidian ; la palette commune (snippet) les remplace. */
  --color-red: #e93147; --color-orange: #ec7500; --color-yellow: #e0ac00;
  --color-green: #08b94e; --color-cyan: #00bfbc; --color-blue: #086ddd;
  --color-purple: #7852ee; --color-pink: #d53984;

  --accent-light: #8f5f4a;
  --accent-dark: #c08a72;
}

.theme-light {
  color-scheme: light;
  --color-accent: var(--accent-light);
  --background-primary: #ffffff;
  --background-primary-alt: #fafafa;
  --background-secondary: #f6f6f6;
  --background-secondary-alt: #fbfbfb;
  --background-modifier-border: #e3e3e3;
  --background-modifier-border-hover: #d4d4d4;
  --background-modifier-border-focus: #bababa;
  --background-modifier-hover: rgba(0, 0, 0, 0.055);
  --background-modifier-active-hover: color-mix(in oklch, var(--color-accent) 12%, transparent);
  --text-normal: #222222;
  --text-muted: #5c5c5c;
  --text-faint: #ababab;
  --text-on-accent: #ffffff;
  --code-background: #f7f7f7;
  --code-normal: #5c5c5c;
  --text-highlight-bg: rgba(255, 208, 0, 0.4);
  --text-selection: color-mix(in oklch, var(--color-accent) 22%, transparent);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.03), 0 3.4px 6.7px rgba(0, 0, 0, 0.05), 0 15px 30px rgba(0, 0, 0, 0.08);
  --shadow-l: 0 1.8px 7.3px rgba(0, 0, 0, 0.07), 0 6.3px 24.7px rgba(0, 0, 0, 0.1), 0 30px 90px rgba(0, 0, 0, 0.18);
}

.theme-dark {
  color-scheme: dark;
  --color-accent: var(--accent-dark);
  --background-primary: #1e1e1e;
  --background-primary-alt: #242424;
  --background-secondary: #262626;
  --background-secondary-alt: #1e1e1e;
  --background-modifier-border: #363636;
  --background-modifier-border-hover: #474747;
  --background-modifier-border-focus: #5c5c5c;
  --background-modifier-hover: rgba(255, 255, 255, 0.075);
  --background-modifier-active-hover: color-mix(in oklch, var(--color-accent) 18%, transparent);
  --text-normal: #dadada;
  --text-muted: #b3b3b3;
  --text-faint: #6e6e6e;
  --text-on-accent: #ffffff;
  --code-background: #262626;
  --code-normal: #b3b3b3;
  --text-highlight-bg: rgba(255, 208, 0, 0.3);
  --text-selection: color-mix(in oklch, var(--color-accent) 30%, transparent);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3.4px 6.7px rgba(0, 0, 0, 0.2), 0 15px 30px rgba(0, 0, 0, 0.3);
  --shadow-l: 0 1.8px 7.3px rgba(0, 0, 0, 0.2), 0 6.3px 24.7px rgba(0, 0, 0, 0.3), 0 30px 90px rgba(0, 0, 0, 0.5);
}

:is(.theme-light, .theme-dark) {
  --text-accent: var(--color-accent);
  --text-accent-hover: color-mix(in oklch, var(--color-accent) 80%, var(--text-normal));
  --interactive-accent: var(--color-accent);
  --link-color: var(--text-accent);
  --link-external-color: var(--text-accent);
  --list-marker-color: var(--text-faint);
  --blockquote-border-color: var(--interactive-accent);
  --hr-color: var(--background-modifier-border);
  --table-border-color: var(--background-modifier-border);
  --icon-color: var(--text-muted);
  --icon-opacity: 0.85;
  --embed-border-color: var(--interactive-accent);
}

/* --- Document ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background-primary);
  color: var(--text-normal);
  font-family: var(--font-text);
  font-size: var(--font-text-size);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--text-selection); }
img, video, iframe, svg { max-width: 100%; }
.svg-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  stroke-width: var(--icon-stroke);
  flex-shrink: 0;
  vertical-align: middle;
}

/* --- Vue lecture ---------------------------------------------------------- */
.markdown-rendered { overflow-wrap: break-word; }
.markdown-rendered > :first-child { margin-top: 0; }
.markdown-rendered :is(p, ul, ol, table, pre, blockquote, details) { margin-block: var(--p-spacing); }
.markdown-rendered :is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--line-height-tight);
  margin-block: var(--heading-spacing) 0.5em;
  scroll-margin-top: var(--size-4-6);
}
.markdown-rendered h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); }
.markdown-rendered h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); }
.markdown-rendered h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); }
.markdown-rendered h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); }
.markdown-rendered h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); }
.markdown-rendered h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); color: var(--text-muted); }
.markdown-rendered strong { font-weight: var(--font-bold); }

.markdown-rendered a { color: var(--link-color); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.markdown-rendered a:hover { color: var(--text-accent-hover); }
.markdown-rendered .internal-link.is-unresolved,
.markdown-rendered .internal-link.is-unpublished { color: inherit; opacity: 0.7; cursor: default; }
.markdown-rendered .tag {
  color: var(--text-accent);
  background: color-mix(in oklch, var(--color-accent) 10%, transparent);
  border-radius: 2em;
  padding: 0.1em 0.55em;
  font-size: var(--font-smaller);
}

.markdown-rendered mark {
  background-color: var(--text-highlight-bg);
  color: inherit;
  border-radius: 2px;
  padding-inline: 1px;
}
.markdown-rendered del { color: var(--text-muted); }
.markdown-rendered kbd {
  font-family: var(--font-monospace);
  font-size: 0.85em;
  padding: 0.05em 0.35em;
  border: 1px solid var(--background-modifier-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-s);
  background: var(--background-primary-alt);
}

/* Listes : puces d'Obsidian. */
.markdown-rendered :is(ul, ol) { padding-inline-start: var(--list-indent); }
.markdown-rendered li { margin-block: var(--list-spacing); }
.markdown-rendered li > :is(ul, ol) { margin-block: 0; }
.markdown-rendered ul.has-list-bullet { list-style-type: "\200b"; }
.markdown-rendered ul.has-list-bullet > li::marker { color: transparent; }
.markdown-rendered .list-bullet {
  float: left;
  margin-inline-start: -0.8em;
  color: transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.markdown-rendered .list-bullet::before { content: "\200b"; }
.markdown-rendered .list-bullet::after {
  position: absolute;
  content: "\200b";
  width: var(--list-bullet-size);
  height: var(--list-bullet-size);
  border-radius: var(--list-bullet-radius);
  border: var(--list-bullet-border);
  transform: var(--list-bullet-transform);
  background-color: var(--list-marker-color);
}
.markdown-rendered ol > li::marker { color: var(--list-marker-color); }
.markdown-rendered .task-list-item > .list-bullet { display: none; }
.markdown-rendered ul.contains-task-list { padding-inline-start: 1.5em; }
.markdown-rendered .task-list-item { list-style: none; }
.markdown-rendered .task-list-item-checkbox {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0 0.5em 0 -1.5em;
  vertical-align: -0.125em;
  accent-color: var(--interactive-accent);
}
.markdown-rendered .task-list-item.is-checked { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }

.markdown-rendered blockquote {
  margin-inline: 0;
  padding: 0 0 0 var(--size-4-6);
  border-inline-start: 2px solid var(--blockquote-border-color);
}
.markdown-rendered hr {
  border: none;
  border-top: var(--border-width) solid var(--hr-color);
  margin-block: 2em;
}

/* Code. */
.markdown-rendered :is(code, pre) { font-family: var(--font-monospace); }
.markdown-rendered :not(pre) > code {
  font-size: 0.875em;
  color: var(--code-normal);
  background-color: var(--code-background);
  border-radius: var(--radius-s);
  padding: 0.1em 0.25em;
}
.markdown-rendered pre {
  position: relative;
  padding: var(--size-4-3) var(--size-4-4);
  background-color: var(--code-background);
  border-radius: var(--radius-s);
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.5;
}
.markdown-rendered pre code { background: none; padding: 0; white-space: pre; }
.markdown-rendered pre.shiki { background-color: var(--code-background) !important; }
.markdown-rendered pre.shiki span { color: var(--shiki-light); }
.theme-dark .markdown-rendered pre.shiki span { color: var(--shiki-dark); }

/* Tableaux. */
.markdown-rendered table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; width: max-content; }
.markdown-rendered :is(th, td) {
  border: var(--border-width) solid var(--table-border-color);
  padding: var(--size-2-2) var(--size-4-2);
  text-align: start;
  vertical-align: top;
}
.markdown-rendered th { font-weight: var(--font-semibold); }

/* Images et médias. */
.markdown-rendered img { height: auto; vertical-align: middle; }
.markdown-rendered .image-embed img { border-radius: var(--radius-s); }
.markdown-rendered .internal-embed { display: inline-block; max-width: 100%; }
.markdown-rendered .audio-embed { display: block; }
.markdown-rendered .audio-embed audio { width: 100%; }
.markdown-rendered .video-embed { display: block; }
.markdown-rendered .video-embed video { width: 100%; border-radius: var(--radius-s); }
.markdown-rendered .external-embed.video-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--background-secondary);
}
.markdown-rendered .pdf-embed { display: block; }
.markdown-rendered .pdf-embed iframe {
  width: 100%;
  height: min(80vh, 720px);
  border: var(--border-width) solid var(--background-modifier-border);
  border-radius: var(--radius-s);
}
.markdown-rendered .pdf-open { display: inline-flex; gap: 0.3em; align-items: center; font-size: var(--font-ui-small); color: var(--text-muted); }
.markdown-rendered .file-embed { display: inline-flex; gap: 0.4em; align-items: center; padding: var(--size-4-2) var(--size-4-3); border: var(--border-width) solid var(--background-modifier-border); border-radius: var(--radius-s); }
.markdown-rendered .internal-embed.is-unresolved,
.markdown-rendered .internal-embed.is-unpublished { color: var(--text-faint); font-style: italic; }

/* Note embarquée (`![[Note]]`). */
.markdown-rendered .markdown-embed {
  display: block;
  position: relative;
  margin-block: var(--p-spacing);
  padding: 0 0 0 var(--size-4-6);
  border-inline-start: 2px solid var(--embed-border-color);
}
.markdown-rendered .markdown-embed-title { font-weight: var(--font-semibold); font-size: var(--h4-size); margin-bottom: 0.4em; }
.markdown-rendered .markdown-embed-content > .markdown-rendered > :last-child { margin-bottom: 0; }
.markdown-rendered .markdown-embed-link {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  color: var(--icon-color);
  opacity: 0;
  padding: var(--size-2-2);
  border-radius: var(--radius-s);
  transition: opacity var(--anim-duration-fast);
}
.markdown-rendered .markdown-embed:hover > .markdown-embed-link { opacity: var(--icon-opacity); }

/* Icônes en ligne : emojis d'Emoji Engine et icônes Lucide. */
.markdown-rendered img.emoji,
.markdown-rendered .lucide-icon .svg-icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.lucide-icon { display: inline-flex; vertical-align: baseline; }
img.emoji { display: inline-block; margin: 0 0.05em; border-radius: 2px; }
.note-icon.lucide-icon .svg-icon, img.note-icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
img.note-icon { border-radius: 3px; object-fit: cover; }
.internal-link .note-icon { margin-inline-end: 0.25em; }

/* Notes de bas de page. */
.markdown-rendered .footnote-ref a { text-decoration: none; }
.markdown-rendered .footnotes { font-size: var(--font-smaller); color: var(--text-muted); }
.markdown-rendered .footnotes-sep { margin-block: 2em 1em; }

/* --- Callouts ------------------------------------------------------------- */
.callout {
  --callout-color: var(--callout-default);
  overflow: hidden;
  border-style: solid;
  border-color: color-mix(in oklch, var(--callout-color) calc(var(--callout-border-opacity) * 100%), transparent);
  border-width: var(--callout-border-width);
  border-radius: var(--callout-radius);
  margin: 1em 0;
  mix-blend-mode: var(--callout-blend-mode);
  background-color: color-mix(in oklch, var(--callout-color) 10%, transparent);
  padding: var(--callout-padding);
}
.callout-title {
  padding: var(--callout-title-padding);
  display: flex;
  gap: var(--size-4-1);
  font-size: var(--callout-title-size);
  color: var(--callout-color);
  line-height: var(--line-height-tight);
  align-items: flex-start;
}
summary.callout-title { cursor: pointer; list-style: none; }
summary.callout-title::-webkit-details-marker { display: none; }
.callout-icon { flex: 0 0 auto; display: flex; align-items: center; }
.callout-icon .svg-icon { color: var(--callout-color); }
.callout-icon::after { content: "\200b"; }
.callout-title-inner { font-weight: var(--callout-title-weight); color: var(--callout-title-color, inherit); }
.callout-title-inner > p { margin: 0; }
.callout-fold { display: flex; align-items: center; padding-inline-end: var(--size-4-2); }
.callout-fold .svg-icon { transition: transform 100ms ease-in-out; }
details.callout:not([open]) .callout-fold .svg-icon { transform: rotate(-90deg); }
.callout-content { overflow-x: auto; padding: var(--callout-content-padding); background-color: var(--callout-content-background); }
.callout[data-callout="info"] { --callout-color: var(--callout-info); }
.callout[data-callout="todo"] { --callout-color: var(--callout-todo); }
.callout:is([data-callout="abstract"], [data-callout="summary"], [data-callout="tldr"]) { --callout-color: var(--callout-summary); }
.callout:is([data-callout="tip"], [data-callout="hint"], [data-callout="important"]) { --callout-color: var(--callout-tip); }
.callout:is([data-callout="success"], [data-callout="check"], [data-callout="done"]) { --callout-color: var(--callout-success); }
.callout:is([data-callout="question"], [data-callout="help"], [data-callout="faq"]) { --callout-color: var(--callout-question); }
.callout:is([data-callout="warning"], [data-callout="caution"], [data-callout="attention"]) { --callout-color: var(--callout-warning); }
.callout:is([data-callout="failure"], [data-callout="fail"], [data-callout="missing"]) { --callout-color: var(--callout-fail); }
.callout:is([data-callout="danger"], [data-callout="error"]) { --callout-color: var(--callout-error); }
.callout[data-callout="bug"] { --callout-color: var(--callout-bug); }
.callout[data-callout="example"] { --callout-color: var(--callout-example); }
.callout:is([data-callout="quote"], [data-callout="cite"]) { --callout-color: var(--callout-quote); }


/* --- snippet: palette --- */
/*
 * Palette commune : les couleurs de Notion (celles d'Emoji Engine), le violet
 * remplacé par l'accent par défaut d'Obsidian, plus un turquoise, un rose
 * clair, et deux nuances marquées de gris et de vert (foncé et clair, pour
 * des états qu'on doit distinguer d'un coup d'œil). Une seule valeur par
 * couleur, pour les deux thèmes.
 *
 * Les couleurs nommées d'Obsidian (`--color-red` … `--color-pink`) prennent
 * ces valeurs : callouts, Canvas, surlignages, messages d'erreur ou de
 * réussite et tout snippet qui les lit suivent sans rien changer. Le cyan
 * d'Obsidian devient le turquoise. Les couleurs absentes d'Obsidian
 * s'ajoutent sous le même nom (`--color-dark-grey`, `--color-grey`,
 * `--color-stone`, `--color-light-grey`, `--color-brown`, `--color-deep-green`,
 * `--color-light-green`, `--color-teal`, `--color-light-pink`).
 *
 * Chaque couleur a aussi sa variante `-rgb` (triplet) : Obsidian s'en sert
 * pour les teintes transparentes, et la feuille du site Publish définit les
 * couleurs des callouts avec elle.
 *
 * Les custom plugins proposent la même liste dans leurs sélecteurs de couleur
 * (`src/core/color-palette.js`) : changer une valeur ici, c'est la changer là aussi.
 */
.theme-light,
.theme-dark {
  --color-dark-grey: #4d4d4d;
  --color-dark-grey-rgb: 77, 77, 77;
  --color-grey: #6b6b6b;
  --color-grey-rgb: 107, 107, 107;
  --color-stone: #a6a39a;
  --color-stone-rgb: 166, 163, 154;
  --color-light-grey: #c4c2ba;
  --color-light-grey-rgb: 196, 194, 186;
  --color-brown: #a47e65;
  --color-brown-rgb: 164, 126, 101;
  --color-yellow: #d49b32;
  --color-yellow-rgb: 212, 155, 50;
  --color-orange: #e5780b;
  --color-orange-rgb: 229, 120, 11;
  --color-deep-green: #275f45;
  --color-deep-green-rgb: 39, 95, 69;
  --color-green: #438b69;
  --color-green-rgb: 67, 139, 105;
  --color-light-green: #8fcba0;
  --color-light-green-rgb: 143, 203, 160;
  --color-teal: #3a9a96;
  --color-teal-rgb: 58, 154, 150;
  --color-cyan: var(--color-teal);
  --color-cyan-rgb: var(--color-teal-rgb);
  --color-blue: #3d8cbd;
  --color-blue-rgb: 61, 140, 189;
  --color-purple: #8a5cf5;
  --color-purple-rgb: 138, 92, 245;
  --color-pink: #c34f91;
  --color-pink-rgb: 195, 79, 145;
  --color-light-pink: #e38fb8;
  --color-light-pink-rgb: 227, 143, 184;
  --color-red: #d95852;
  --color-red-rgb: 217, 88, 82;
}


/* --- snippet: palette-adaptive --- */
/*
 * Palette commune, une variante par thème. S'active EN PLUS de palette.css :
 * c'est l'interrupteur « couleurs différenciées ». Éteint, chaque couleur
 * garde une seule valeur ; allumé, elle prend son équivalent clair ou sombre.
 *
 * Équivalences : même teinte et même chroma (OKLCH), seule la clarté bouge,
 * et seulement si la couleur n'atteint pas 4.5:1 sur le fond du thème
 * (#ffffff, #1e1e1e) ; 3:1 pour Stone, Light grey, Light green et Light
 * pink, pâles par nature. Une
 * couleur déjà lisible garde sa valeur de palette.css.
 *
 * `body.theme-*` l'emporte sur les `.theme-*` de palette.css quel que soit
 * l'ordre de chargement. Le cyan d'Obsidian suit le turquoise (palette.css).
 * Les custom plugins lisent ces variables ; leurs valeurs de repli sont dans
 * `src/core/color-palette.js`, à garder identiques.
 */
body.theme-light {
  --color-dark-grey: #4d4d4d;
  --color-dark-grey-rgb: 77, 77, 77;
  --color-grey: #6b6b6b;
  --color-grey-rgb: 107, 107, 107;
  --color-stone: #97958c;
  --color-stone-rgb: 151, 149, 140;
  --color-light-grey: #97958d;
  --color-light-grey-rgb: 151, 149, 141;
  --color-brown: #946e56;
  --color-brown-rgb: 148, 110, 86;
  --color-yellow: #9d6e04;
  --color-yellow-rgb: 157, 110, 4;
  --color-orange: #b85e02;
  --color-orange-rgb: 184, 94, 2;
  --color-deep-green: #275f45;
  --color-deep-green-rgb: 39, 95, 69;
  --color-green: #3b8462;
  --color-green-rgb: 59, 132, 98;
  --color-light-green: #66a178;
  --color-light-green-rgb: 102, 161, 120;
  --color-teal: #1d8480;
  --color-teal-rgb: 29, 132, 128;
  --color-blue: #2d7dae;
  --color-blue-rgb: 45, 125, 174;
  --color-purple: #8657f0;
  --color-purple-rgb: 134, 87, 240;
  --color-pink: #c04c8e;
  --color-pink-rgb: 192, 76, 142;
  --color-light-pink: #ce7ba4;
  --color-light-pink-rgb: 206, 123, 164;
  --color-red: #cb4c47;
  --color-red-rgb: 203, 76, 71;
}

body.theme-dark {
  --color-dark-grey: #858585;
  --color-dark-grey-rgb: 133, 133, 133;
  --color-grey: #858584;
  --color-grey-rgb: 133, 133, 132;
  --color-stone: #a6a39a;
  --color-stone-rgb: 166, 163, 154;
  --color-light-grey: #c4c2ba;
  --color-light-grey-rgb: 196, 194, 186;
  --color-brown: #a47e65;
  --color-brown-rgb: 164, 126, 101;
  --color-yellow: #d49b32;
  --color-yellow-rgb: 212, 155, 50;
  --color-orange: #e5780b;
  --color-orange-rgb: 229, 120, 11;
  --color-deep-green: #599174;
  --color-deep-green-rgb: 89, 145, 116;
  --color-green: #4b9370;
  --color-green-rgb: 75, 147, 112;
  --color-light-green: #8fcba0;
  --color-light-green-rgb: 143, 203, 160;
  --color-teal: #3a9a96;
  --color-teal-rgb: 58, 154, 150;
  --color-blue: #3d8cbd;
  --color-blue-rgb: 61, 140, 189;
  --color-purple: #9468ff;
  --color-purple-rgb: 148, 104, 255;
  --color-pink: #d15b9d;
  --color-pink-rgb: 209, 91, 157;
  --color-light-pink: #e38fb8;
  --color-light-pink-rgb: 227, 143, 184;
  --color-red: #dc5b55;
  --color-red-rgb: 220, 91, 85;
}


/* --- snippet: md-callouts --- */
/*
 * Callouts — Obsidian 1.13.
 *
 * Balanced callouts, in the spirit of Notion's:
 * - the same padding on every side (Obsidian pads the left twice as much);
 * - the icon sits in its own column and the text of the content lines up
 *   with the title's, not with the icon;
 * - the title stays close to its content and the last paragraph adds no
 *   empty band at the bottom;
 * - a softer tint with a hairline border of the same hue, and a title in a
 *   readable shade of the callout colour rather than the raw colour.
 *
 * Reading mode and Live Preview share the same DOM (`.callout`), so every
 * rule applies to both.
 *
 * Two optional modifiers, written after the type: `> [!note|flat]` drops the
 * tint for a coloured rule on the left, `> [!note|no-icon]` hides the icon
 * and lets the content use the full width. They can be combined:
 * `> [!tip|flat no-icon]`.
 *
 * A call to action: `> [!button] [Label](https://…)`, alone on its line.
 * The callout disappears and its link becomes a button, with the site's
 * icon (QOL Engine in the vault, publish.js on the site). Several links make
 * a row of buttons; a link to a note (`[[v1.0 — App|v1.0]]`, the release
 * notes an update announces) is a blue one, after the others; a link to a
 * file (`[[report.pdf|Report - PDF]]`) stays plain, with a download icon.
 *
 * A gallery: `> [!gallery]`, then one paragraph per item, its media and,
 * on the next line, its label (text, a link, the URL of a post). The
 * callout disappears: up to three items fill one row, four make two
 * columns, more flow in three masonry columns; label under media, images
 * uncropped.
 *
 * An update's item: `> [!update] [[Note]] `New release``, then its text,
 * its row of buttons and its gallery (`> > [!gallery]`, its media in one
 * row). A discreet card (no fill, a light hairline), no icon; the title in
 * regular weight, the tag pushed right.
 *
 * An update's note: `> [!aside]`, then its text. A small soft block (a
 * light fill, no border), no title, no icon: next to the cards, a few
 * words in passing. `> [!aside|lead]`, the note that opens the update:
 * plain text, no fill. A gallery attached to a note or a card
 * (`> > [!gallery]` inside it) looks like any other gallery: up to three
 * items fill one row, more flow in masonry columns.
 * `> [!gallery|end]`, the gallery that closes an update: more space above.
 *
 * An embedded callout (`![[Note#^block]]`, a block that is a callout: a
 * version's callout, written on its project page, shown at the top of its
 * release note) looks like the callout itself, without the embed's frame
 * and title.
 */

body {
  --co-padding-y: 0.75em;
  --co-padding-x: 1em;
  --co-radius: var(--radius-m);
  --co-icon-size: 17px;
  --co-gap: 0.5em;
  --co-tint: 7%;
  --co-border: 16%;
  --co-title-shade: 72%;
}

.theme-dark {
  --co-tint: 11%;
  --co-border: 20%;
  --co-title-shade: 80%;
}

.callout {
  --callout-padding: var(--co-padding-y) var(--co-padding-x);
  --callout-radius: var(--co-radius);
  --callout-border-width: 1px;
  --callout-border-opacity: 1;
  --callout-title-color: color-mix(in oklch, var(--callout-color) var(--co-title-shade), var(--text-normal));
  --co-indent: calc(var(--co-icon-size) + var(--co-gap));
  border-color: color-mix(in oklch, var(--callout-color) var(--co-border), transparent);
  background-color: color-mix(in oklch, var(--callout-color) var(--co-tint), transparent);
}

/* --- Title --------------------------------------------------------------- */
.callout-title {
  gap: var(--co-gap);
}

.callout-icon {
  --icon-size: var(--co-icon-size);
  width: var(--co-icon-size);
  justify-content: center;
}

.callout-title-inner {
  --callout-title-weight: 600;
}

/* The fold arrow stays next to the title but lighter. */
.callout-fold {
  padding-inline-end: 0;
  opacity: 0.7;
}

/* --- Content ------------------------------------------------------------- */
.callout-content {
  padding-inline-start: var(--co-indent);
}

.callout-content > :first-child {
  margin-block-start: 0.35em;
}

.callout-content > :last-child {
  margin-block-end: 0;
}

/* Lists already push their text in: they only need the icon column. */
.callout-content > :is(ul, ol):first-child {
  margin-block-start: 0.25em;
}

/* A callout inside a callout keeps a clear gap from its neighbours. */
.callout-content .callout {
  margin-block: 0.75em;
}

.callout-content > .callout:last-child {
  margin-block-end: 0.15em;
}

/* --- Modifiers ----------------------------------------------------------- */
.callout[data-callout-metadata~="flat"] {
  background-color: transparent;
  border-width: 0 0 0 3px;
  border-color: var(--callout-color);
  border-radius: 0;
  padding-block: 0.1em;
}

.callout[data-callout-metadata~="no-icon"] {
  --co-indent: 0px;
}

.callout[data-callout-metadata~="no-icon"] > .callout-title > .callout-icon {
  display: none;
}

/* A file (a PDF to download): the plain button, with a download icon
 * instead of the tag. */
.callout[data-callout="button"] .callout-title-inner a.internal-link:is([data-href$=".pdf" i], [data-href$=".zip" i], [data-href$=".docx" i], [data-href$=".pptx" i], [data-href$=".key" i], [data-href$=".epub" i]) {
  border-color: var(--background-modifier-border-hover);
  background-color: var(--background-primary);
  color: var(--text-normal);
}

.callout[data-callout="button"] .callout-title-inner a.internal-link:is([data-href$=".pdf" i], [data-href$=".zip" i], [data-href$=".docx" i], [data-href$=".pptx" i], [data-href$=".key" i], [data-href$=".epub" i]):hover {
  background-color: var(--background-modifier-hover);
}

.callout[data-callout="button"] .callout-title-inner a.internal-link:is([data-href$=".pdf" i], [data-href$=".zip" i], [data-href$=".docx" i], [data-href$=".pptx" i], [data-href$=".key" i], [data-href$=".epub" i])::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

/* --- Update item ---------------------------------------------------------- */
/* A discreet card: no fill, a hairline lighter than the usual border,
 * rounded like the callouts; cards spaced like paragraphs. */
.callout[data-callout="update"] {
  --co-indent: 0px;
  --callout-title-color: var(--text-normal);
  margin-block: 0.75em;
  padding: 0.75em 0.95em;
  border: var(--border-width) solid color-mix(in oklch, var(--background-modifier-border) 65%, transparent);
  border-radius: var(--radius-m);
  background: none;
}

.callout[data-callout="update"] > .callout-title > .callout-icon {
  display: none;
}

/* The title on the left, the tag on the right; regular weight. */
.callout[data-callout="update"] > .callout-title > .callout-title-inner {
  --callout-title-weight: var(--font-normal, 400);
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35em;
  font-weight: var(--font-normal, 400);
}

.callout[data-callout="update"] > .callout-title :is(a, strong) {
  font-weight: inherit;
}

.callout[data-callout="update"] > .callout-title > .callout-title-inner > code:last-child {
  margin-inline-start: auto;
  white-space: nowrap;
  font-size: 0.8em;
  color: var(--text-muted);
}

.callout[data-callout="update"] > .callout-content > .callout:last-child {
  margin-block-end: 0;
}

/* --- Aside (an update's note) -------------------------------------------- */
/* A small block of text: a light fill of the text colour, no border, no
 * title; spaced like the cards around it. */
.callout[data-callout="aside"] {
  --co-indent: 0px;
  --callout-blend-mode: normal;
  margin-block: 0.75em;
  padding: 0.75em 0.95em;
  border: none;
  border-radius: var(--radius-m);
  background: color-mix(in oklch, var(--text-normal) 4%, transparent);
}

.theme-dark .callout[data-callout="aside"] {
  background: color-mix(in oklch, var(--text-normal) 6%, transparent);
}

.callout[data-callout="aside"] > .callout-title {
  display: none;
}

.callout[data-callout="aside"] > .callout-content > :first-child {
  margin-block-start: 0;
}

/* The note that opens the update: plain text, no block. */
.callout[data-callout="aside"][data-callout-metadata~="lead"] {
  padding: 0;
  background: none;
}

/* --- Button -------------------------------------------------------------- */
.callout[data-callout="button"] {
  --callout-blend-mode: normal;
  width: fit-content;
  overflow: visible;
  padding: 0;
  border: none;
  background: none;
}

.callout[data-callout="button"] > .callout-title {
  padding: 0;
}

.callout[data-callout="button"] > .callout-title > .callout-icon {
  display: none;
}

.callout[data-callout="button"] .callout-title-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
}

.callout[data-callout="button"] .callout-title-inner a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  padding-inline-end: 0.75em !important; /* QOL Engine sets it to 0 on mentions. */
  border: var(--border-width) solid var(--background-modifier-border-hover);
  border-radius: var(--radius-s);
  background-color: var(--background-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); /* not --shadow-xs: wide and soft in Obsidian */
  color: var(--text-normal);
  font-weight: var(--font-medium, 500);
  text-decoration: none;
}

.callout[data-callout="button"] .callout-title-inner a:hover {
  background-color: var(--background-modifier-hover);
}

.callout[data-callout="button"] .callout-title-inner a :is(.hp-link-title, .hp-link-icon) {
  margin: 0;
  text-decoration-line: none;
}

/* A note (a version's release notes): the same button (size, border,
 * shadow), only its colours tinted blue, with a tag icon before its label. */
.callout[data-callout="button"] .callout-title-inner a.internal-link {
  --cb-note: var(--color-blue);
  border-color: color-mix(in oklch, var(--cb-note) 32%, transparent);
  background-color: color-mix(in oklch, var(--cb-note) 9%, var(--background-primary));
  color: color-mix(in oklch, var(--cb-note) 78%, var(--text-normal));
}

.callout[data-callout="button"] .callout-title-inner a.internal-link:hover {
  background-color: color-mix(in oklch, var(--cb-note) 16%, var(--background-primary));
}

.callout[data-callout="button"] .callout-title-inner a.internal-link::before {
  content: "";
  flex-shrink: 0;
  width: 0.95em;
  height: 0.95em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Gallery ------------------------------------------------------------- */
.callout[data-callout="gallery"] {
  --co-indent: 0px;
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
}

.callout[data-callout="gallery"] > .callout-title {
  display: none;
}

/* Masonry, from four items: columns that each item fills from the top,
 * images at their own proportions, never cropped (up to three columns, at
 * least 180 px wide). */
.callout[data-callout="gallery"] > .callout-content {
  display: block;
  columns: 3 180px;
  column-gap: var(--size-4-3);
  padding: 0;
}

.callout[data-callout="gallery"] > .callout-content > p {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--size-4-4);
  break-inside: avoid;
  color: var(--text-muted);
  font-size: var(--font-smaller, 0.875em);
  line-height: 1.4;
}

.callout[data-callout="gallery"] > .callout-content > p > br {
  display: none;
}

.callout[data-callout="gallery"] .internal-embed:is(.image-embed, .video-embed, .media-embed) {
  display: block;
  margin-bottom: 0.45em;
}

.callout[data-callout="gallery"] :is(.image-embed img, video) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-s);
  background-color: var(--background-modifier-hover);
}

/* The gallery that closes an update (`[!gallery|end]`): set apart from the
 * entry above. */
.callout[data-callout="gallery"][data-callout-metadata~="end"] {
  margin-block-start: 2.5em;
}

/* One row: up to three items share the full width, one alone taking it
 * all, whether the gallery stands on its own or sits in a card or a note.
 * From four items on, the masonry above. */
.callout[data-callout="gallery"] > .callout-content:not(:has(> p:nth-of-type(4))) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: start;
  gap: var(--size-4-3);
  columns: auto;
}

.callout[data-callout="gallery"] > .callout-content:not(:has(> p:nth-of-type(4))) > p {
  margin: 0;
}

/* Four items: two columns over the full width. In three, the browser
 * balances them into two and leaves the third empty. */
.callout[data-callout="gallery"] > .callout-content:has(> p:nth-of-type(4)):not(:has(> p:nth-of-type(5))) {
  columns: 2 180px;
}

/* --- Embedded callout ---------------------------------------------------- */
.internal-embed.markdown-embed[src*="#^"]:has(.callout) {
  --embed-border-start: none;
  --embed-border-end: none;
  --embed-padding: 0;
  --embed-background: transparent;
  --embed-max-height: none;
  margin-block: 0;
  padding: 0;
  border: none;
  background: none;
}

.internal-embed.markdown-embed[src*="#^"]:has(.callout) > .markdown-embed-title {
  display: none;
}

.internal-embed.markdown-embed[src*="#^"]:has(.callout) :is(.markdown-embed-content, .markdown-preview-view, .markdown-preview-sizer) {
  max-height: none;
  padding: 0;
  overflow: visible;
}



/* --- snippet: md-code-blocks --- */
/*
 * Code blocks — Obsidian 1.13.
 *
 * Every code block gets a header, as in Claude and most documentation
 * sites: the language on the left, the copy button on the right, always
 * visible. A hairline border, rounder corners, a little more line height
 * and a quieter syntax palette (operators and punctuation muted, comments
 * italic).
 *
 * Reading mode: `pre > code.language-xx` plus Obsidian's copy button. The
 * header is `pre::before`; its label comes from the table below, or from a
 * `data-cb-label` attribute when the QOL Engine plugin names the
 * language (any language, with the names Live Preview uses).
 *
 * Live Preview: the opening fence line becomes the header. Away from the
 * cursor, Obsidian hides the fence and shows the language in a
 * `.code-block-flair` that copies the code when clicked; it moves to the
 * left, and a copy icon marks the right. The header keeps its height while
 * editing, so nothing jumps when the cursor enters the block.
 */

body {
  --cb-header: calc(var(--font-text-size) * 2.2);
  --cb-radius: var(--radius-m);
  --cb-border: var(--background-modifier-border);
  --cb-header-background: color-mix(in oklch, var(--text-normal) 3%, var(--code-background));
  --cb-label-color: var(--text-muted);
  /* Label of a block written without a language. */
  --cb-plain-label: "Text";
  --cb-line-height: 1.6;
  --cb-padding-x: var(--size-4-4, 16px);
  --cb-padding-y: 0.8em;
}

/* Obsidian reads these on the block itself: inline code keeps its own. */
.markdown-rendered pre,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
  --code-radius: var(--cb-radius);
  --code-border-width: 1px;
  --code-border-color: var(--cb-border);
  --code-operator: var(--text-muted);
  --code-punctuation: var(--text-muted);
  line-height: var(--cb-line-height);
}

.markdown-rendered pre :is(.token.comment, .token.prolog),
.markdown-source-view.mod-cm6 .HyperMD-codeblock .cm-comment {
  font-style: italic;
}

/* --- Reading mode -------------------------------------------------------- */
.markdown-rendered pre {
  padding: calc(var(--cb-header) + var(--cb-padding-y)) var(--cb-padding-x) var(--cb-padding-y);
}

.markdown-rendered pre::before {
  content: var(--cb-lang, "");
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--cb-header);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-inline: var(--cb-padding-x) 3em;
  background-color: var(--cb-header-background);
  border-bottom: 1px solid var(--cb-border);
  border-radius: calc(var(--cb-radius) - 1px) calc(var(--cb-radius) - 1px) 0 0;
  color: var(--cb-label-color);
  font-family: var(--font-interface);
  font-size: var(--font-ui-smaller);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.markdown-rendered pre[data-cb-label]::before {
  content: attr(data-cb-label);
}

/* The copy button sits in the header and stays visible. */
.markdown-rendered pre > button.copy-code-button,
.markdown-rendered pre:not(:hover) > button.copy-code-button {
  display: flex;
  align-items: center;
  top: calc(var(--cb-header) / 2);
  inset-inline-end: 6px;
  margin: 0;
  padding: 4px 6px;
  transform: translateY(-50%);
  color: var(--cb-label-color);
  opacity: 0.65;
}

.markdown-rendered pre > button.copy-code-button:hover {
  opacity: 1;
}

/* Language names, as Live Preview shows them (CodeMirror's names). Without
 * QOL Engine, other languages get an empty header. */
.markdown-rendered pre:not(:has(> code[class*="language-"])) { --cb-lang: var(--cb-plain-label); }
.markdown-rendered pre:has(> :is(code.language-js, code.language-javascript)) { --cb-lang: "JavaScript"; }
.markdown-rendered pre:has(> :is(code.language-ts, code.language-typescript)) { --cb-lang: "TypeScript"; }
.markdown-rendered pre:has(> code.language-jsx) { --cb-lang: "JSX"; }
.markdown-rendered pre:has(> code.language-tsx) { --cb-lang: "TypeScript-JSX"; }
.markdown-rendered pre:has(> code.language-py) { --cb-lang: "py"; }
.markdown-rendered pre:has(> code.language-python) { --cb-lang: "Python"; }
.markdown-rendered pre:has(> :is(code.language-sh, code.language-bash, code.language-shell, code.language-zsh)) { --cb-lang: "Shell"; }
.markdown-rendered pre:has(> code.language-console) { --cb-lang: "console"; }
.markdown-rendered pre:has(> code.language-json) { --cb-lang: "JSON"; }
.markdown-rendered pre:has(> :is(code.language-yaml, code.language-yml)) { --cb-lang: "YAML"; }
.markdown-rendered pre:has(> code.language-toml) { --cb-lang: "TOML"; }
.markdown-rendered pre:has(> code.language-html) { --cb-lang: "HTML"; }
.markdown-rendered pre:has(> code.language-xml) { --cb-lang: "XML"; }
.markdown-rendered pre:has(> code.language-css) { --cb-lang: "CSS"; }
.markdown-rendered pre:has(> code.language-scss) { --cb-lang: "SCSS"; }
.markdown-rendered pre:has(> code.language-sass) { --cb-lang: "Sass"; }
.markdown-rendered pre:has(> code.language-less) { --cb-lang: "LESS"; }
.markdown-rendered pre:has(> code.language-markdown) { --cb-lang: "Markdown"; }
.markdown-rendered pre:has(> code.language-sql) { --cb-lang: "SQL"; }
.markdown-rendered pre:has(> code.language-go) { --cb-lang: "Go"; }
.markdown-rendered pre:has(> code.language-rust) { --cb-lang: "Rust"; }
.markdown-rendered pre:has(> code.language-java) { --cb-lang: "Java"; }
.markdown-rendered pre:has(> code.language-kotlin) { --cb-lang: "Kotlin"; }
.markdown-rendered pre:has(> code.language-swift) { --cb-lang: "Swift"; }
.markdown-rendered pre:has(> code.language-c) { --cb-lang: "C"; }
.markdown-rendered pre:has(> code.language-cpp) { --cb-lang: "C++"; }
.markdown-rendered pre:has(> :is(code.language-cs, code.language-csharp)) { --cb-lang: "C#"; }
.markdown-rendered pre:has(> code.language-php) { --cb-lang: "PHP"; }
.markdown-rendered pre:has(> :is(code.language-rb, code.language-ruby)) { --cb-lang: "Ruby"; }
.markdown-rendered pre:has(> code.language-lua) { --cb-lang: "Lua"; }
.markdown-rendered pre:has(> code.language-r) { --cb-lang: "R"; }
.markdown-rendered pre:has(> code.language-diff) { --cb-lang: "diff"; }
.markdown-rendered pre:has(> code.language-dockerfile) { --cb-lang: "Dockerfile"; }
.markdown-rendered pre:has(> code.language-powershell) { --cb-lang: "PowerShell"; }
.markdown-rendered pre:has(> code.language-dart) { --cb-lang: "Dart"; }
.markdown-rendered pre:has(> code.language-scala) { --cb-lang: "Scala"; }
.markdown-rendered pre:has(> code.language-haskell) { --cb-lang: "Haskell"; }
.markdown-rendered pre:has(> code.language-perl) { --cb-lang: "Perl"; }
.markdown-rendered pre:has(> code.language-nginx) { --cb-lang: "Nginx"; }

/* --- Live Preview -------------------------------------------------------- */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock:not(.HyperMD-list-line) {
  padding-inline-start: var(--cb-padding-x);
  padding-inline-end: var(--cb-padding-x);
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-begin {
  padding-block: calc((var(--cb-header) - 1lh) / 2);
  background-color: var(--cb-header-background);
  box-shadow: inset 0 -1px 0 var(--cb-border);
}

/* Padding, not margins: CodeMirror measures lines and dislikes margins. */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-begin + .cm-line.HyperMD-codeblock {
  padding-top: calc(var(--cb-padding-y) - 0.3em);
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-end {
  padding-top: 0.2em;
}

/* The opening fence, while editing, reads like the label. */
.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin .cm-formatting-code-block,
.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin .cm-hmd-codeblock {
  color: var(--cb-label-color);
}

/* With a language: the label on the left, a copy icon on the right. The
 * whole header copies the code, as the label already does. */
.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin .code-block-flair:not(:has(svg)) {
  position: static;
  padding: 0;
  margin-inline-start: 0;
  background: none;
  color: var(--cb-label-color);
  font-weight: 500;
  vertical-align: middle;
}

.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin .code-block-flair:not(:has(svg))::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  width: 28px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: var(--radius-s);
  background-color: currentColor;
  opacity: 0.65;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin .code-block-flair:not(:has(svg)):hover::after {
  opacity: 1;
}

/* Without a language, Obsidian shows only a copy icon: centre it in the
 * header, where the other blocks have theirs, and give the block the same
 * label as in reading mode. */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-begin:has(> .code-block-flair svg)::before {
  content: var(--cb-plain-label);
  color: var(--cb-label-color);
  font-family: var(--font-interface);
  font-size: var(--font-ui-smaller);
  font-weight: 500;
}

.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin .code-block-flair:has(svg) {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  color: var(--cb-label-color);
}


/* --- snippet: md-headings --- */
/*
 * Headings — Obsidian 1.13.
 *
 * A clearer hierarchy, in the spirit of Notion and Claude's Markdown:
 * - sizes step down evenly, so h3, h4 and h5 no longer look alike;
 * - large headings tighten their letter spacing, small ones stay neutral;
 * - h5 and h6 become labels: muted, and h6 in small capitals;
 * - a heading sits closer to the text it introduces than to the text above
 *   it (reading mode and Live Preview).
 *
 * Only Obsidian's own heading variables are set, so every place that already
 * uses them follows: reading mode, Live Preview, the inline title, embeds,
 * hover previews and headings inside lists or callouts.
 */

body {
  /* Space above a heading, and below it, in reading mode. Above is relative
   * to the body text (rem), below to the heading itself (em). */
  --hd-space-above: 2rem;
  --hd-space-below: 0.35em;
  /* Live Preview has no margins between lines: a heading gets padding above
   * instead, as a share of its own size. */
  --hd-lp-space-above: 0.9em;
  /* Obsidian's own gap above a heading that follows a paragraph, list,
   * table or code block. */
  --heading-spacing: var(--hd-space-above);

  --inline-title-size: 2.25em;
  --inline-title-weight: 700;
  --inline-title-line-height: 1.2;
  --inline-title-margin-bottom: 0.6em;

  --h1-size: 1.75em;
  --h2-size: 1.4em;
  --h3-size: 1.2em;
  --h4-size: 1.05em;
  --h5-size: 1em;
  --h6-size: 0.8em;

  --h1-weight: 700;
  --h2-weight: 650;
  --h3-weight: 620;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;

  --h1-line-height: 1.25;
  --h2-line-height: 1.3;
  --h3-line-height: 1.35;
  --h4-line-height: 1.4;
  --h5-line-height: 1.5;
  --h6-line-height: 1.5;

  --h1-letter-spacing: -0.022em;
  --h2-letter-spacing: -0.017em;
  --h3-letter-spacing: -0.012em;
  --h4-letter-spacing: -0.006em;
  --h5-letter-spacing: 0em;
  --h6-letter-spacing: 0.06em;

  --h5-color: var(--text-muted);
  --h6-color: var(--text-muted);
  --h6-variant: all-small-caps;
}

.inline-title:not([data-level]) {
  letter-spacing: -0.025em;
}

/* --- Reading mode -------------------------------------------------------
 * Obsidian wraps each block in its own div (`.el-h2 > h2`); margins collapse
 * through those wrappers. A heading gets a wide gap above and a narrow one
 * below, and the block after it gives up its own top margin. The second
 * selector of each pair covers rendered Markdown without wrappers (callouts,
 * embeds). */
.markdown-rendered :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--hd-space-above);
  margin-block-end: var(--hd-space-below);
}

.markdown-rendered div:is(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6) + div > :first-child,
.markdown-rendered :is(h1, h2, h3, h4, h5, h6) + * {
  margin-block-start: 0;
}

/* Two headings in a row belong together. */
.markdown-rendered div:is(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6) + div > :is(h1, h2, h3, h4, h5, h6),
.markdown-rendered :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0.6rem;
}

/* A heading that opens a note, a callout or a list item needs no gap. */
.markdown-rendered .mod-header + div > :is(h1, h2, h3, h4, h5, h6),
.markdown-rendered .mod-frontmatter + div > :is(h1, h2, h3, h4, h5, h6),
.markdown-rendered :is(.callout-content, li, blockquote) > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

/* --- Live Preview -------------------------------------------------------
 * A heading line gets padding above, in proportion to its size. The empty
 * line that usually follows it is shortened, so the heading stays closer to its
 * text than to the text above. That line regains its full height as soon as
 * something is typed on it. Source mode keeps its plain spacing. */
.markdown-source-view.mod-cm6.is-live-preview .cm-line.HyperMD-header {
  padding-top: var(--hd-lp-space-above);
}

.markdown-source-view.mod-cm6.is-live-preview .cm-line.HyperMD-header + .cm-line:has(> br:only-child) {
  line-height: 0.75;
}

/* The `#` markers stay visible when editing, but lighter. */
.markdown-source-view.mod-cm6 .HyperMD-header .cm-formatting-header {
  color: var(--text-faint);
  font-weight: 400;
  opacity: 0.7;
}


/* --- snippet: md-inline --- */
/*
 * Inline marks — Obsidian 1.14.
 *
 * What sits inside a line: inline code, links, highlights, keys,
 * strikethrough and footnote references. Quieter underlines, a soft framed
 * inline code in the text colour, highlights tinted like callouts.
 * Reading mode and Live Preview alike.
 *
 * Code blocks: md-code-blocks.css. Tags are left to Obsidian (and to the
 * plugins that colour them).
 */

body {
  /* Plain inline code keeps Obsidian's code colour; only highlighted code is
   * tinted (see Highlights below). */
  --im-code-color: var(--code-normal, var(--text-normal));
  --im-code-background: color-mix(in oklch, var(--text-normal) 5.5%, transparent);
  --im-code-border: color-mix(in oklch, var(--text-normal) 10%, transparent);
  --im-code-size: 0.875em;
  --im-code-radius: var(--radius-s);

  --im-underline: color-mix(in oklch, currentColor 35%, transparent);
  --im-underline-offset: 0.2em;

  --im-hl-tint: 7%;
  --im-hl-border: 16%;
  --text-highlight-bg: color-mix(in oklch, var(--color-yellow) var(--im-hl-tint), transparent);

  /* Text colour of highlighted inline code: the shade of a callout title
   * (md-callouts.css), the highlight colour mixed into the text. */
  --im-hl-shade: 72%;
  --im-highlight-color: var(--color-yellow);
}

.theme-dark {
  --im-code-background: color-mix(in oklch, var(--text-normal) 8%, transparent);
  --im-hl-tint: 11%;
  --im-hl-border: 20%;
  --im-hl-shade: 80%;
}

/* --- Inline code ---------------------------------------------------------
 * Live Preview splits inline code into the backticks and the content, and
 * reads its radius and border from Obsidian's variables on each piece: those
 * variables are set on the pieces, so code blocks keep their own. */
.markdown-rendered :not(pre) > code {
  color: var(--im-code-color);
  background-color: var(--im-code-background);
  border: 1px solid var(--im-code-border);
  border-radius: var(--im-code-radius);
  font-size: var(--im-code-size);
  padding: 0.12em 0.35em;
}

.markdown-source-view.mod-cm6 .cm-line:not(.HyperMD-codeblock) span.cm-inline-code {
  --code-radius: var(--im-code-radius);
  --code-border-width: 1px;
  --code-border-color: var(--im-code-border);
  --code-background: var(--im-code-background);
  color: var(--im-code-color);
  font-size: var(--im-code-size);
}

/* In a heading or a link, inline code follows the text colour. In Live
 * Preview the selector repeats `.cm-line` so that it outweighs the rule
 * above: with one class less, headings kept the code colour while reading
 * mode took the heading's. */
.markdown-rendered :is(h1, h2, h3, h4, h5, h6, a) > code,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header span.cm-inline-code {
  color: inherit;
}

/* Live Preview: Obsidian forces every span of a heading line to the line's
 * size (`.HyperMD-header .cm-header-N { font-size: inherit !important }`,
 * app.css 1.14.4), which left inline code at full size in a heading while
 * reading mode shrinks it. The same `!important`, with a stronger selector,
 * gives it back the reading size. */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header span.cm-inline-code {
  font-size: var(--im-code-size) !important;
}

/* --- Links ---------------------------------------------------------------
 * A light underline that comes to full strength on hover. Unresolved links
 * keep Obsidian's own style, which tells them apart. */
.markdown-rendered :is(.internal-link:not(.is-unresolved), .external-link),
.markdown-source-view.mod-cm6 :is(.cm-hmd-internal-link, .cm-link, .cm-url) .cm-underline {
  text-decoration-line: underline;
  text-decoration-color: var(--im-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--im-underline-offset);
  transition: text-decoration-color var(--anim-duration-fast, 140ms) ease-out;
}

.markdown-rendered :is(.internal-link:not(.is-unresolved), .external-link):hover,
.markdown-source-view.mod-cm6 :is(.cm-hmd-internal-link, .cm-link, .cm-url) .cm-underline:hover {
  text-decoration-color: currentColor;
}

/* --- Highlights ----------------------------------------------------------
 * The tint of a callout (md-callouts.css): the highlight colour at
 * `--im-hl-tint`, with a hairline of the same hue in reading mode. Live
 * Preview splits a highlight into pieces (marks, formatting, colour widget),
 * which a border would cut apart: it keeps the tint only.
 *
 * Obsidian 1.14 lets a highlight pick a colour (an emoji after `==`): it
 * marks the mark (`data-highlight`) in reading mode and the highlighted
 * pieces (`cm-highlight-<colour>`) in Live Preview. A highlight without a
 * colour is yellow. */
.markdown-rendered mark[data-highlight="red"],
.markdown-source-view.mod-cm6 :is(span.cm-highlight-red, .cm-highlight-color-widget[data-highlight="red"]) { --im-highlight-color: var(--color-red); }
.markdown-rendered mark[data-highlight="orange"],
.markdown-source-view.mod-cm6 :is(span.cm-highlight-orange, .cm-highlight-color-widget[data-highlight="orange"]) { --im-highlight-color: var(--color-orange); }
.markdown-rendered mark[data-highlight="yellow"],
.markdown-source-view.mod-cm6 :is(span.cm-highlight-yellow, .cm-highlight-color-widget[data-highlight="yellow"]) { --im-highlight-color: var(--color-yellow); }
.markdown-rendered mark[data-highlight="green"],
.markdown-source-view.mod-cm6 :is(span.cm-highlight-green, .cm-highlight-color-widget[data-highlight="green"]) { --im-highlight-color: var(--color-green); }
.markdown-rendered mark[data-highlight="blue"],
.markdown-source-view.mod-cm6 :is(span.cm-highlight-blue, .cm-highlight-color-widget[data-highlight="blue"]) { --im-highlight-color: var(--color-blue); }
.markdown-rendered mark[data-highlight="purple"],
.markdown-source-view.mod-cm6 :is(span.cm-highlight-purple, .cm-highlight-color-widget[data-highlight="purple"]) { --im-highlight-color: var(--color-purple); }

.markdown-rendered mark {
  background-color: color-mix(in oklch, var(--im-highlight-color) var(--im-hl-tint), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--im-highlight-color) var(--im-hl-border), transparent);
  border-radius: var(--radius-s);
  padding: 0.05em 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.markdown-source-view.mod-cm6 :is(span.cm-highlight, span.cm-formatting-highlight, .cm-highlight-color-widget):not(.obsidian-search-match-highlight) {
  background-color: color-mix(in oklch, var(--im-highlight-color) var(--im-hl-tint), transparent);
}

.markdown-source-view.mod-cm6 span.cm-highlight:not(.obsidian-search-match-highlight) {
  border-radius: var(--radius-s);
}

/* Highlighted inline code keeps its own background and takes the highlight
 * colour as text colour, shaded like a callout title (`--im-hl-shade`). In
 * reading mode the code sits inside the mark, which then drops its own
 * background: CSS cannot see text nodes, so a mark holding code and plain
 * text loses its background too. */
.markdown-rendered mark code,
.markdown-source-view.mod-cm6 .cm-line:not(.HyperMD-codeblock) span.cm-inline-code:is(.cm-highlight, .cm-highlight *) {
  color: color-mix(in oklch, var(--im-highlight-color) var(--im-hl-shade), var(--text-normal));
}

.markdown-rendered mark:has(> code) {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

.markdown-source-view.mod-cm6 .cm-line:not(.HyperMD-codeblock) span.cm-inline-code:is(.cm-highlight, .cm-highlight *) {
  background-color: var(--code-background);
}

/* --- Strikethrough ------------------------------------------------------- */
.markdown-rendered del,
.markdown-source-view.mod-cm6 .cm-strikethrough {
  color: var(--text-muted);
  text-decoration-color: color-mix(in oklch, var(--text-muted) 70%, transparent);
}

/* --- Keys ----------------------------------------------------------------
 * `<kbd>` looks like a key cap. */
.markdown-rendered kbd,
.markdown-source-view.mod-cm6 kbd {
  font-family: var(--font-interface);
  font-size: 0.8em;
  color: var(--text-muted);
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-s);
  padding: 0.1em 0.45em;
  vertical-align: 0.08em;
}

/* --- Footnote references ------------------------------------------------- */
.markdown-rendered sup.footnote-ref,
.markdown-rendered sup[data-footnote-id] {
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
}


/* --- snippet: md-text --- */
/*
 * Text rhythm — Obsidian 1.13.
 *
 * The blocks between headings: paragraphs, lists, tasks, quotes, rules and
 * images. Airier lines, lists that breathe, quieter quotes and separators,
 * in the spirit of Notion and Claude's Markdown. Reading mode and Live
 * Preview alike.
 *
 * Fonts are left to Settings → Appearance: this snippet only sets spacing
 * and marks.
 */

/* Obsidian reads these on the views themselves, so setting them here leaves
 * the rest of the interface alone. */
.markdown-preview-view,
.markdown-source-view,
.markdown-rendered {
  --line-height-normal: 1.6;
  --p-spacing: 0.9rem;

  /* Lists */
  --list-spacing: 0.15em;
  --list-marker-color: var(--text-muted);
  --list-bullet-size: 0.32em;

  /* Quotes: a neutral rule instead of the accent colour. */
  --blockquote-border-thickness: 3px;
  --blockquote-border-color: color-mix(in oklch, var(--text-normal) 18%, transparent);
  --blockquote-color: var(--text-muted);

  /* Horizontal rules */
  --hr-thickness: 1px;
  --hr-color: var(--background-modifier-border);

  --tx-hr-space: 2em;
  --tx-image-radius: var(--radius-m);
}

/* --- Lists ---------------------------------------------------------------
 * Nested bullets change shape, as in Notion: disc, circle, square, then
 * again. Reading mode counts `ul` levels; Live Preview numbers its lines. */
.markdown-rendered ul ul > li > .list-bullet::after,
.markdown-source-view.mod-cm6 :is(.HyperMD-list-line-2, .HyperMD-list-line-5) .list-bullet::after {
  background-color: transparent;
  border: 1px solid var(--list-marker-color);
  box-sizing: border-box;
  width: calc(var(--list-bullet-size) + 0.06em);
  height: calc(var(--list-bullet-size) + 0.06em);
}

.markdown-rendered ul ul ul > li > .list-bullet::after,
.markdown-source-view.mod-cm6 :is(.HyperMD-list-line-3, .HyperMD-list-line-6) .list-bullet::after {
  background-color: var(--list-marker-color);
  border: none;
  border-radius: 1px;
  width: var(--list-bullet-size);
  height: var(--list-bullet-size);
}

.markdown-rendered ul ul ul ul > li > .list-bullet::after {
  border-radius: 50%;
}

.markdown-rendered ul ul ul ul ul > li > .list-bullet::after {
  background-color: transparent;
  border: 1px solid var(--list-marker-color);
}

/* Numbers line up and stay discreet. */
.markdown-rendered ol > li::marker {
  color: var(--list-marker-color);
  font-variant-numeric: tabular-nums;
}

.markdown-source-view.mod-cm6 .cm-formatting-list-ol {
  color: var(--list-marker-color);
  font-variant-numeric: tabular-nums;
}

/* A done task fades rather than shouting with a strike. */
.markdown-preview-view,
.markdown-source-view {
  --checklist-done-color: var(--text-faint);
  --checklist-done-decoration: line-through;
}

.markdown-rendered li.task-list-item:is([data-task="x"], [data-task="X"]),
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] {
  text-decoration-color: color-mix(in oklch, var(--text-faint) 60%, transparent);
}

/* --- Quotes -------------------------------------------------------------- */
.markdown-rendered blockquote {
  padding-inline-start: 1em;
}

/* --- Horizontal rules --------------------------------------------------- */
.markdown-rendered hr {
  margin-block: var(--tx-hr-space);
}

/* --- Images -------------------------------------------------------------
 * Rounded corners for embedded pictures only: small inline icons (emoji,
 * plugin icons) keep their shape. */
/* `.emoji`: image emoji (Emoji Engine) are not photos. */
.markdown-rendered .image-embed > img,
.markdown-rendered p > img:only-child:not(.emoji),
.markdown-source-view.mod-cm6 .image-embed > img,
.markdown-source-view.mod-cm6 .cm-line > img:only-child:not(.emoji) {
  border-radius: var(--tx-image-radius);
}

/* --- Captions -----------------------------------------------------------
 * A line written right under an embedded video is its caption. Obsidian
 * makes that embed a block (`.internal-embed:not(.image-embed)`, app.css
 * 1.15.0), so the line break after it opens an empty line, and the video,
 * inline inside it, leaves a strip below: about two lines of gap in reading
 * mode and on the site, none in Live Preview. */
.markdown-rendered .internal-embed:not(.image-embed) > video {
  display: block;
}

.markdown-rendered .internal-embed:not(.image-embed) + br {
  display: none;
}

.markdown-rendered .internal-embed:not(.image-embed):has(+ br) {
  margin-block-end: 0.4em;
}


/* --- snippet: status-bar --- */
/*
 * Status bar as square blocks — Obsidian 1.15.
 *
 * The status bar (bottom right) takes the look of QOL Engine's flat tabs in
 * the sidebars: each item is a block as tall as the tab bars and, for an
 * icon, as wide (a square), side by side with no gap; the bar itself loses
 * its rounded corner and keeps a plain border on its top and left edges.
 * Hover and an open menu tint the block like a sidebar tab.
 *
 * Height: the tab bar height, `--header-height` (QOL Engine's "Tab bar
 * height" sets it; 40 px in Obsidian). Items that show text (word count,
 * backlinks) keep their width and get side padding. Colors and sizes can be
 * adjusted through the `--sb-*` variables below.
 *
 * Obsidian's own rules (app.css 1.15.0): `.status-bar` (border, radius and
 * background through `--status-bar-*`), `.status-bar-item` (3px padding,
 * rounded hover), `.status-bar-item .svg-icon` (`--icon-s`).
 */

body {
  --sb-height: var(--header-height, 40px);
  --sb-icon-size: var(--icon-m);
  --sb-bg-hover: var(--background-modifier-hover);
  --sb-bg-active: var(--background-modifier-active-hover);
  --sb-separator: transparent;   /* var(--divider-color) for separators */
  --status-bar-radius: 0;
}

body:not(.is-mobile) .status-bar {
  height: var(--sb-height);
  padding: 0;
  gap: 0;
  align-items: stretch;
  border-radius: 0;
}

body:not(.is-mobile) .status-bar > .status-bar-item {
  height: 100%;
  min-width: calc(var(--sb-height) - var(--border-width));
  padding: 0 var(--size-4-3);
  justify-content: center;
  border-radius: 0;
  corner-shape: unset;
}

body:not(.is-mobile) .status-bar > .status-bar-item + .status-bar-item {
  border-left: var(--border-width) solid var(--sb-separator);
}

/* An icon alone: a square. */
body:not(.is-mobile) .status-bar > .status-bar-item:has(> .status-bar-item-icon:only-child),
body:not(.is-mobile) .status-bar > .status-bar-item:has(> .status-bar-item-segment:only-child > .status-bar-item-icon:only-child) {
  width: calc(var(--sb-height) - var(--border-width));   /* the bar's top border takes a pixel of its height */
  padding: 0;
}

body:not(.is-mobile) .status-bar > .status-bar-item .svg-icon {
  --icon-size: var(--sb-icon-size);
}

/* Segments (Sync, word count) lose the margin that spaced them inside a
   rounded item. */
body:not(.is-mobile) .status-bar > .status-bar-item > .status-bar-item-segment:last-child {
  margin-inline-end: 0;
}

body:not(.is-mobile) .status-bar > .status-bar-item.mod-clickable:hover {
  background-color: var(--sb-bg-hover);
}

body:not(.is-mobile) .status-bar > .status-bar-item.mod-clickable.has-active-menu,
body:not(.is-mobile) .status-bar > .status-bar-item.mod-clickable:active {
  background-color: var(--sb-bg-active);
}

body:not(.is-mobile) .status-bar > .status-bar-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--background-modifier-border-focus);
}


/*
 * Le site : barre latérale, page, sommaire, fil, panneau latéral, recherche.
 * Classes `site-*`, `page-*`, `feed-*` : propres au site, hors du DOM
 * d'Obsidian.
 */

:root {
  --sidebar-width: 300px;
  --outline-width: 240px;
  --page-width: var(--file-line-width);
  --page-gutter: clamp(16px, 4vw, 48px);
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--background-primary); padding: 8px 12px; border-radius: var(--radius-s); }
.skip-link:focus { left: 8px; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--background-modifier-border-focus); border-radius: var(--radius-s); }

.site {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--outline-width);
  min-height: 100vh;
}
body:not(.is-page) .site { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }

/* --- Barre latérale ------------------------------------------------------- */
.site-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background-secondary);
  border-inline-end: var(--border-width) solid var(--background-modifier-border);
  font-family: var(--font-interface);
  font-size: var(--font-ui-small);
  overflow: hidden;
}
.site-header { padding: var(--size-4-5) var(--size-4-4) var(--size-4-3); border-bottom: var(--border-width) solid var(--background-modifier-border); }
.site-logo { display: flex; align-items: center; gap: 10px; color: var(--text-normal); text-decoration: none; font-size: 1.45rem; font-weight: var(--font-semibold); letter-spacing: -0.01em; }
.site-logo img { width: 28px; height: 28px; border-radius: 6px; }
.site-bio { margin: var(--size-4-3) 0 0; font-size: var(--font-ui-small); line-height: 1.5; color: var(--text-normal); }
.site-bio img.emoji { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.site-socials { display: flex; gap: var(--size-4-1); margin-top: var(--size-4-2); margin-inline-start: -6px; }
.site-socials a { display: inline-flex; padding: 6px; border-radius: var(--radius-s); color: var(--text-muted); }
.site-socials :is(img, .svg-icon) { width: 16px; height: 16px; margin: 0; }
.site-socials a:hover { background: var(--background-modifier-hover); color: var(--text-normal); }

.site-pages { padding: var(--size-4-2) var(--size-4-2) 0; }
.site-search-button {
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
  margin: var(--size-4-3) var(--size-4-4) var(--size-4-2);
  padding: 6px 10px;
  border: var(--border-width) solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-primary);
  color: var(--text-faint);
  font: inherit;
  cursor: text;
  text-align: start;
}
.site-search-button span { flex: 1; }
.site-search-button kbd { font: inherit; font-size: var(--font-ui-smaller); padding: 0 5px; border-radius: var(--radius-s); background: var(--background-modifier-hover); color: var(--text-muted); }
.site-search-button:hover { border-color: var(--background-modifier-border-hover); }

.nav-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 var(--size-4-4) var(--size-4-3); border-bottom: var(--border-width) solid var(--background-modifier-border); }
.nav-filter,
.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 1px 5px;
  border: none;
  border-radius: 2em;
  background: color-mix(in oklch, var(--color-accent) 11%, transparent);
  color: color-mix(in oklch, var(--color-accent) 80%, var(--text-normal));
  font: inherit;
  font-size: var(--font-ui-smaller);
  line-height: 1.7;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  --icon-size: 12px;
}
.nav-filter:hover, a.type-tag:hover { background: color-mix(in oklch, var(--color-accent) 18%, transparent); }
.nav-filter.is-archived { background: var(--background-modifier-hover); color: var(--text-muted); }
.nav-filter[aria-pressed="true"] { background: var(--color-accent); color: var(--text-on-accent); }
.nav-filter.is-archived[aria-pressed="true"] { background: var(--text-muted); color: var(--background-primary); }
.type-tag.is-static { cursor: default; }

.site-nav { flex: 1; overflow-y: auto; padding: var(--size-4-2); scrollbar-width: thin; }
.site-sidebar ul { list-style: none; margin: 0; padding: 0; }
.nav-item a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border-radius: var(--radius-s);
  color: var(--text-normal);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--anim-duration-fast) ease;
}
.nav-item a:hover { background: var(--background-modifier-hover); transform: translateX(2px); }
.nav-item.is-active a { color: var(--text-faint); background: none; transform: none; }
.nav-item.is-active .nav-icon { opacity: 0.5; }
.nav-title { overflow: hidden; text-overflow: ellipsis; }
.nav-item .title-subtitle { color: var(--text-faint); }
.nav-icon { --icon-size: 14px; width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
img.nav-icon { border-radius: 3px; object-fit: cover; }
.nav-icon .svg-icon { width: 14px; height: 14px; }
.nav-item[hidden] { display: none; }

.site-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-2);
  padding: var(--size-4-2) var(--size-4-4);
  border-top: var(--border-width) solid var(--background-modifier-border);
  color: var(--text-muted);
}
.control { display: inline-flex; align-items: center; gap: 4px; }
.control select { appearance: none; border: none; background: none; color: inherit; font: inherit; font-size: var(--font-ui-smaller); padding: 4px; border-radius: var(--radius-s); cursor: pointer; }
.control select:hover { background: var(--background-modifier-hover); }
.accent-swatches { display: flex; gap: 6px; }
.accent-swatch {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--swatch-light);
  cursor: pointer;
}
.theme-dark .accent-swatch { background: var(--swatch-dark); }
.accent-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--background-secondary), 0 0 0 3.5px var(--text-muted); }

.site-menu-button { display: none; }

/* --- Page ----------------------------------------------------------------- */
.site-main { min-width: 0; padding: var(--size-4-8) var(--page-gutter) 6rem; }
.page, .feed { max-width: var(--page-width); margin-inline: auto; }
.page-header { margin-bottom: var(--size-4-6); }
.page-title { font-size: 2.2em; line-height: 1.15; letter-spacing: -0.015em; margin: 0.15em 0 0; font-weight: 700; }
.title-subtitle { color: var(--text-faint); font-weight: inherit; }
.page-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: var(--size-4-3); font-size: var(--font-ui-medium); }

.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-interface); font-size: var(--font-ui-smaller); color: var(--text-muted); }
.meta-line .note-icon, .meta-line .lucide-icon .svg-icon { width: 16px; height: 16px; }
img.meta-icon { border-radius: 3px; object-fit: cover; }
.meta-tag, .meta-language {
  padding: 1px 7px;
  border-radius: 2em;
  background: var(--background-modifier-hover);
  line-height: 1.7;
}

.related { max-width: var(--page-width); margin: 4rem auto 0; padding-top: var(--size-4-4); border-top: var(--border-width) solid var(--background-modifier-border); font-size: var(--font-ui-medium); }
.related + .related { margin-top: var(--size-4-6); }
.related-title { font-size: var(--font-ui-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 var(--size-4-2); }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { display: flex; justify-content: space-between; gap: 1em; padding: 4px 0; }
.related a { color: var(--text-normal); text-decoration: none; }
.related a:hover { color: var(--text-accent); }
.related time { color: var(--text-faint); font-size: var(--font-ui-small); white-space: nowrap; }

/* --- Sommaire ------------------------------------------------------------- */
.site-outline {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: var(--size-4-8) var(--size-4-4) var(--size-4-8) 0;
  font-family: var(--font-interface);
  font-size: var(--font-ui-small);
  scrollbar-width: thin;
}
.outline-title { font-size: var(--font-ui-smaller); font-weight: var(--font-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--size-4-2); }
.site-outline ul { list-style: none; margin: 0; padding: 0; }
.site-outline li { padding-inline-start: calc(var(--depth) * 12px); }
.site-outline a { display: block; padding: 3px 0; color: var(--text-muted); text-decoration: none; line-height: 1.35; }
.site-outline a:hover { color: var(--text-normal); }
.site-outline a.is-active { color: var(--text-accent); }

/* --- Fil ------------------------------------------------------------------ */
.feed-intro { margin-bottom: var(--size-4-8); }
.feed-post { padding-block: var(--size-4-6); border-bottom: var(--border-width) solid var(--background-modifier-border); }
.feed-post:first-of-type { padding-top: 0; }
.feed-post[hidden] { display: none; }
.feed-title { font-size: 1.5em; line-height: 1.2; margin: 0.35em 0 0.6em; letter-spacing: -0.01em; }
.feed-post[data-type="Update"] .feed-title { margin-top: 0; }
.feed-link { color: var(--text-normal); text-decoration: none; }
.feed-link:hover { color: var(--text-accent); }
.feed-preview { position: relative; max-height: var(--preview-height); overflow: hidden; cursor: pointer; }
.feed-preview.is-clipped { mask-image: linear-gradient(to bottom, #000 55%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.feed-preview.is-cut { max-height: none; }
.feed-preview > [data-cut] { display: none; }
.feed-post.is-open { opacity: 0.45; pointer-events: none; }
.feed-empty { color: var(--text-muted); }

/* --- Mentions de liens (QOL Engine, styles.css) --------------------------- */
.hp-mention { text-decoration: none !important; color: var(--text-normal) !important; }
.hp-mention .hp-link-site { color: var(--text-muted); margin-inline-end: 0.3em; }
.hp-mention .hp-link-title {
  font-weight: var(--font-medium);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
  text-underline-offset: 0.2em;
}
.hp-mention:hover .hp-link-title { text-decoration-color: currentColor; }
.hp-link-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-inline-end: 0.3em;
  vertical-align: -0.18em;
  border-radius: var(--radius-s);
  object-fit: contain;
}
.hp-link-icon-fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); }
.hp-link-icon-fallback svg { width: 0.95em; height: 0.95em; }

/* --- Panneau latéral (posts du fil) --------------------------------------- */
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: min(760px, calc(100vw - var(--sidebar-width) - 120px));
  display: flex;
  flex-direction: column;
  background: var(--background-primary);
  border-inline-start: var(--border-width) solid var(--background-modifier-border);
  box-shadow: var(--shadow-l);
  animation: panel-in var(--anim-duration-moderate) cubic-bezier(.2, .7, .2, 1);
}
.side-panel[hidden] { display: none; }
@keyframes panel-in { from { transform: translateX(40px); opacity: 0; } }
.side-panel-bar { display: flex; justify-content: flex-end; align-items: center; gap: var(--size-4-2); padding: var(--size-4-2) var(--size-4-3); font-size: var(--font-ui-small); }
.side-panel-bar a, .side-panel-bar button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: none; border-radius: var(--radius-s); background: none; color: var(--text-muted); font: inherit; text-decoration: none; cursor: pointer; }
.side-panel-bar :is(a, button):hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.side-panel-body { flex: 1; overflow-y: auto; padding: var(--size-4-2) var(--size-4-12) 5rem; }

/* --- Recherche ------------------------------------------------------------ */
.search-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  margin-top: 12vh;
  padding: 0;
  border: var(--border-width) solid var(--background-modifier-border);
  border-radius: var(--radius-l);
  background: var(--background-primary);
  color: var(--text-normal);
  box-shadow: var(--shadow-l);
  font-family: var(--font-interface);
}
.search-dialog::backdrop { background: rgba(0, 0, 0, 0.3); }
.search-dialog[open] { display: flex; flex-direction: column; }
.search-input-row { display: flex; align-items: center; gap: var(--size-4-2); padding: var(--size-4-3) var(--size-4-4); border-bottom: var(--border-width) solid var(--background-modifier-border); color: var(--text-muted); }
.search-input { flex: 1; border: none; outline: none; background: none; color: var(--text-normal); font: inherit; font-size: 1.05rem; }
.search-input:focus-visible { box-shadow: none; }
.search-results { list-style: none; margin: 0; padding: var(--size-4-2); overflow-y: auto; }
.search-result a { display: block; padding: 8px 10px; border-radius: var(--radius-m); color: var(--text-normal); text-decoration: none; }
.search-result.is-selected a { background: var(--background-modifier-active-hover); }
.search-result-title { font-weight: var(--font-medium); }
.search-result-heading { color: var(--text-muted); }
.search-result-meta { font-size: var(--font-ui-smaller); color: var(--text-faint); margin-inline-start: 6px; }
.search-result-snippet { display: block; font-size: var(--font-ui-small); color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result mark { background: var(--text-highlight-bg); color: inherit; border-radius: 2px; }
.search-empty { padding: var(--size-4-4); color: var(--text-muted); }
.search-hints { display: flex; gap: var(--size-4-4); padding: var(--size-4-2) var(--size-4-4); border-top: var(--border-width) solid var(--background-modifier-border); font-size: var(--font-ui-smaller); color: var(--text-faint); }

/* --- Visionneuse d'images ------------------------------------------------- */
.markdown-rendered .image-embed img { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 56px 72px;
  background: rgba(10, 10, 12, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
  animation: fade-in var(--anim-duration-fast);
}
.lightbox-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; min-height: 0; max-height: 100%; cursor: default; }
/* L'image tient toujours dans l'écran, entière : jamais rognée. */
.lightbox-figure img { display: block; width: auto; height: auto; max-width: calc(100vw - 144px); max-height: calc(100vh - 150px); object-fit: contain; border-radius: var(--radius-m); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.lightbox-caption { max-width: 60ch; color: rgba(255, 255, 255, 0.78); font-family: var(--font-interface); font-size: var(--font-ui-small); text-align: center; }
.lightbox-nav, .lightbox-close {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}
.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-nav .svg-icon, .lightbox-close .svg-icon { width: 20px; height: 20px; }
.lightbox-nav.is-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox-nav.is-next { right: 16px; top: 50%; translate: 0 -50%; }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-count { position: absolute; top: 24px; left: 50%; translate: -50% 0; color: rgba(255, 255, 255, 0.6); font-family: var(--font-interface); font-size: var(--font-ui-smaller); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .lightbox { padding: 56px 8px; }
  .lightbox-figure img { max-width: calc(100vw - 16px); }
  .lightbox-nav { top: auto; bottom: 14px; translate: none; }
}
@keyframes fade-in { from { opacity: 0; } }

/* Bouton « copier » des blocs de code. */
.copy-code-button {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 8px;
  border: none;
  border-radius: var(--radius-s);
  background: var(--background-primary);
  color: var(--text-muted);
  font: inherit;
  font-family: var(--font-interface);
  font-size: var(--font-ui-smaller);
  opacity: 0;
  cursor: pointer;
}
pre:hover > .copy-code-button, .copy-code-button:focus-visible { opacity: 1; }

/* --- 404 ------------------------------------------------------------------ */
.not-found { text-align: center; padding-top: 18vh; }
.not-found-code { font-size: 4rem; font-weight: 300; color: var(--text-faint); }
.not-found h1 { margin: 0.2em 0; }
.not-found p { color: var(--text-muted); }

/* --- Écrans étroits ------------------------------------------------------- */
@media (max-width: 1200px) {
  body.is-page .site { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .site-outline { display: none; }
}
@media (max-width: 860px) {
  .site, body.is-page .site { grid-template-columns: minmax(0, 1fr); }
  .site-sidebar {
    position: fixed;
    z-index: 25;
    inset: 0 auto 0 0;
    width: min(320px, 88vw);
    transform: translateX(-100%);
    transition: transform var(--anim-duration-moderate) ease;
    box-shadow: var(--shadow-l);
  }
  .site-sidebar.is-open { transform: none; }
  .site-menu-button {
    display: inline-flex;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 26;
    padding: 8px;
    border: var(--border-width) solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    background: var(--background-primary);
    color: var(--text-normal);
    box-shadow: var(--shadow-xs);
  }
  .site-main { padding-top: 64px; }
  .page-title { font-size: 1.8em; }
}


/* Titres : Space Grotesk, la police de titre du modèle par défaut de CV
 * Machine (préréglage « Grotesk »), embarquée depuis @fontsource (OFL). */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/space-grotesk/space-grotesk-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/space-grotesk/space-grotesk-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/space-grotesk/space-grotesk-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/space-grotesk/space-grotesk-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/*
 * Coque `direct` : pas de barre latérale ; une barre du haut, et sur la page
 * d'accueil une recherche à pastilles au-dessus d'un fil en grille
 * asymétrique (12 colonnes), une présentation par nature de post.
 * Tout est sous `body.shell-direct`.
 */

body.shell-direct {
  --wide-width: 1240px;
  --grid-gap: 28px;
  --font-title: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-title);
}
.shell-direct .site { display: block; }
.shell-direct .site-main { padding: 0 var(--page-gutter) 8rem; }

/* --- Barre du haut ---------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--size-4-6);
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: var(--size-4-4) var(--page-gutter);
  font-family: var(--font-interface);
  font-size: var(--font-ui-small);
}
.topbar-home { display: inline-flex; align-items: center; gap: 8px; color: var(--text-normal); text-decoration: none; font-weight: var(--font-semibold); }
.topbar-home img { border-radius: 5px; }
.topbar-nav { display: flex; gap: var(--size-4-4); }
.topbar-spacer { flex: 1; }
.topbar-home img { display: block; }
.topbar-nav a { color: var(--text-muted); text-decoration: none; }
.topbar-nav a:hover, .topbar-nav a[aria-current] { color: var(--text-normal); }
.topbar-actions { display: flex; align-items: center; gap: 2px; }
.topbar-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-s);
  background: none;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}
.topbar-button:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.topbar-button kbd { font: inherit; font-size: var(--font-ui-smaller); color: var(--text-faint); }
.topbar-button.control select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* --- Page d'une note --------------------------------------------------------- */
.shell-direct.is-page .site-main { padding-top: var(--size-4-8); }
.shell-direct .site-outline { position: fixed; top: 96px; right: var(--size-4-6); width: 220px; max-height: calc(100vh - 120px); padding: 0; }
@media (max-width: 1100px) { .shell-direct .site-outline { display: none; } }
.shell-direct .side-panel { width: min(760px, calc(100vw - 96px)); }

/* --- Accueil : en-tête ---------------------------------------------------------- */
.shell-direct .feed-direct { max-width: var(--wide-width); }
.hero { padding: clamp(0.5rem, 3vh, 2rem) 0 var(--size-4-6); }
.hero-bio {
  max-width: 18em;
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}
.hero-bio img.emoji, .hero-bio .inline-icon { width: 0.9em; height: 0.9em; vertical-align: -0.08em; }
.hero-socials { display: flex; gap: 2px; margin: var(--size-4-4) 0 0 -6px; }
.hero-socials a { display: inline-flex; padding: 6px; border-radius: var(--radius-s); color: var(--text-muted); }
.hero-socials :is(img, .svg-icon) { width: 18px; height: 18px; }
.hero-socials a:hover { background: var(--background-modifier-hover); color: var(--text-normal); }

/* --- Recherche à pastilles --------------------------------------------------------- */
.finder {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 calc(-1 * var(--page-gutter)) var(--size-4-12);
  padding: var(--size-4-3) var(--page-gutter);
  background: color-mix(in oklch, var(--background-primary) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-interface);
}
.finder-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 48px;
  padding: 6px 12px;
  border: var(--border-width) solid var(--background-modifier-border);
  border-radius: 14px;
  background: var(--background-primary);
  cursor: text;
  transition: border-color var(--anim-duration-fast), box-shadow var(--anim-duration-fast);
}
.finder-field:hover { border-color: var(--background-modifier-border-hover); }
.finder-field:focus-within { border-color: var(--background-modifier-border-focus); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 14%, transparent); }
.finder-icon { width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; }
.finder-tokens { display: contents; }
.finder-input {
  flex: 1;
  min-width: 10ch;
  border: none;
  outline: none;
  background: none;
  color: var(--text-normal);
  font: inherit;
  font-size: 1.05rem;
}
.finder-input:focus-visible { box-shadow: none; }
.finder-input::-webkit-search-cancel-button { display: none; }
.finder-count { color: var(--text-faint); font-size: var(--font-ui-small); white-space: nowrap; }
/* La touche du raccourci : un fond plein, sans contour, le caractère
 * centré dans sa case (hauteur fixe, interligne 1). */
.finder-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: none;
  border-radius: var(--radius-s);
  background: var(--background-modifier-hover);
  color: var(--text-muted);
  font: inherit;
  font-family: var(--font-interface);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  line-height: 1;
}
.finder-field:focus-within .finder-kbd { display: none; }

/* Pastille dans le champ (type ou tag en filtre) : la croix des pastilles natives. */
.finder-token {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px 0 10px;
  border: none;
  border-radius: 2em;
  background: var(--background-modifier-hover);
  color: var(--text-normal);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: default;
  --icon-size: 13px;
}
.finder-token .svg-icon { width: 13px; height: 13px; }
/* Un bloc reconnu dans la saisie : neutre, comme un destinataire de mail. */
.finder-token-sigil { color: var(--text-faint); margin-inline-end: 1px; }
/* Le texte se centre sur sa hauteur de capitale (de la ligne de base au
 * haut des majuscules), pas sur sa boîte de ligne, qui le fait paraître bas. */
.finder-token-label { display: block; white-space: nowrap; text-box: trim-both cap alphabetic; }
.finder-token > .svg-icon { width: 14px; height: 14px; margin-inline-end: 5px; color: var(--text-muted); }

/* Les types vont à la ligne dans leur groupe ; l'interrupteur « Archived »
 * reste sur la première rangée, à droite (il ne passe jamais seul à la ligne). */
.finder-chips { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; }
.finder-types { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.finder-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: var(--border-width) solid var(--background-modifier-border);
  border-radius: 2em;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--font-ui-small);
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--anim-duration-fast);
  --icon-size: 13px;
}
.finder-chip .svg-icon { width: 13px; height: 13px; }
.finder-chip:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.finder-chip[aria-pressed="true"] { border-color: transparent; background: color-mix(in oklch, var(--color-accent) 14%, transparent); color: color-mix(in oklch, var(--color-accent) 85%, var(--text-normal)); }
.finder-chip-count { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.finder-chip-count:empty { display: none; }
.finder-chip.is-none { opacity: 0.4; }

/* « Archived » n'est pas un type mais un interrupteur : à l'écart des
 * pastilles, sans contour, avec un petit interrupteur qui dit son état. */
.finder-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: auto;
  padding: 3px 5px 3px 10px;
  border: var(--border-width) solid var(--background-modifier-border);
  border-radius: 2em;
  background: none;
  color: var(--text-muted);
  transition: background var(--anim-duration-fast), color var(--anim-duration-fast), border-color var(--anim-duration-fast);
  --icon-size: 13px;
  font: inherit;
  font-size: var(--font-ui-small);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
.finder-toggle > .svg-icon { width: 13px; height: 13px; }
.finder-toggle .finder-switch { margin-inline-start: 3px; }
.finder-toggle:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.finder-switch {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: var(--background-modifier-border-hover);
  transition: background var(--anim-duration-fast);
}
.finder-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--background-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--anim-duration-fast) cubic-bezier(.3, 1.4, .5, 1);
}
/* Actif : le fond et le texte des pastilles choisies. */
.finder-toggle[aria-checked="true"] { border-color: transparent; background: color-mix(in oklch, var(--color-accent) 14%, transparent); color: color-mix(in oklch, var(--color-accent) 85%, var(--text-normal)); }
.finder-toggle[aria-checked="true"] .finder-switch { background: var(--color-accent); }
.finder-toggle[aria-checked="true"] .finder-switch::after { transform: translateX(11px); }
.finder-toggle.is-none { opacity: 0.4; }
.finder-toggle:focus-visible { box-shadow: 0 0 0 3px var(--background-modifier-border-focus); }

::highlight(finder) { background-color: var(--text-highlight-bg); color: inherit; }

/* --- Grille ------------------------------------------------------------------------ */
.feed-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(3rem, 8vh, 5.5rem);
  align-items: start;
}
.card { grid-column: 1 / -1; min-width: 0; position: relative; }
/* L'ancien style des posts du fil (filet, marges) ne s'applique pas à la grille. */
.shell-direct .feed-post { padding: 0; border-bottom: none; }
/* Un post filtré disparaît, quelle que soit la règle d'affichage de sa
 * forme (update en grille, note en bloc…). */
.feed-list [hidden] { display: none !important; }
.card .feed-link { color: inherit; text-decoration: none; }
/* Une carte se pointe d'un bloc : un seul survol (titre, image… ensemble),
 * le curseur de lien partout, pas de sélection de texte (cliquer ouvre le
 * post). Ce qui a sa propre action (type, tags, liens d'une update) a un
 * survol de plus. */
.feed-list .card { cursor: pointer; -webkit-user-select: none; user-select: none; }
.card:is(:hover:not(.scroll-hover *), .is-hovered) :is(.card-title, .card-margin > .feed-link) { color: var(--text-accent); }
.card { transition: opacity 180ms ease; }
.shell-direct .card.is-open { opacity: 0; pointer-events: none; }
.card-media { display: block; overflow: hidden; border-radius: var(--radius-m); background: var(--background-secondary); }
.card-media img { display: block; width: 100%; height: auto; transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.card:is(:hover:not(.scroll-hover *), .is-hovered) .card-media img { transform: scale(1.025); }

.card-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-interface); font-size: var(--font-ui-smaller); color: var(--text-muted); }
.card-type { display: inline-flex; align-items: center; gap: 4px; --icon-size: 13px; }
.card-type .svg-icon { width: 13px; height: 13px; }
.card-dot { color: var(--text-faint); }
.card-lang { padding: 0 5px; border: var(--border-width) solid var(--background-modifier-border); border-radius: var(--radius-s); font-size: 10px; letter-spacing: 0.04em; }
.card-tags { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: var(--size-4-2); }
.card-tag { padding: 0; border: none; border-radius: 3px; background: none; color: var(--text-faint); font: inherit; font-family: var(--font-interface); font-size: var(--font-ui-smaller); cursor: pointer; transition: background-color var(--anim-duration-fast), box-shadow var(--anim-duration-fast), color var(--anim-duration-fast); }
/* Survol d'un tag ou du type : le texte à l'accent, rien de plus. */
.card .card-tag:hover { color: var(--text-accent); }
.card-tag:focus-visible { box-shadow: 0 0 0 3px var(--background-modifier-border-focus); }
.card-tags .card-type { color: var(--text-muted); }
.card-summary { margin: var(--size-4-2) 0 0; color: var(--text-muted); line-height: 1.5; text-wrap: pretty; }

/* Épinglé : image et texte côte à côte, toute la largeur. */
.card-featured { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
.card-featured .card-media { grid-column: 1 / span 7; }
.card-featured .card-body { grid-column: 8 / -1; padding-bottom: var(--size-4-2); }
.card-flag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: var(--size-4-3); font-family: var(--font-interface); font-size: var(--font-ui-smaller); color: var(--text-accent); --icon-size: 13px; }
.card-flag .svg-icon { width: 13px; height: 13px; }
.card-featured .card-title { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 650; }
.card-featured .card-title .title-subtitle { display: block; margin-top: 0.15em; font-size: 0.55em; letter-spacing: -0.01em; font-weight: 500; }
.card-featured .card-summary { font-size: 1.05em; margin: var(--size-4-4) 0 var(--size-4-4); }

/* Vitrine : l'image à sa proportion, une légende courte. */
.card-caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--size-4-3); margin-top: 10px; font-family: var(--font-interface); }
.card-showcase .card-title { margin: 0; font-size: var(--font-ui-medium); font-weight: var(--font-semibold); line-height: 1.3; }
.card-showcase .title-subtitle { font-weight: 400; }
.card-caption-meta { flex-shrink: 0; font-size: var(--font-ui-smaller); color: var(--text-faint); }

/* Article : le texte d'abord. */
.card-article .card-title {
  margin: var(--size-4-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.card-stamp { display: inline-block; width: 1.5em; height: 1em; margin-left: 0.25em; border-radius: 0.14em; object-fit: cover; vertical-align: -0.06em; transform: rotate(-3deg); box-shadow: var(--shadow-s); }
.card-subtitle { margin: 0.3em 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.15em; color: var(--text-muted); }
.card-article .card-summary { max-width: 34em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Note : le texte lui-même, méta dans la marge. */
.card-note { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.card-margin {
  grid-column: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-top: 0.35em;
  text-align: right;
  font-family: var(--font-interface);
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
}
.card-margin a { color: var(--text-muted); font-style: italic; }
.card-margin .card-tags { justify-content: flex-end; margin-top: 2px; }
.card-note-text { grid-column: 4 / span 7; max-height: 12.5em; overflow: hidden; font-size: 1.18em; line-height: 1.55; mask-image: linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.card-note-text.is-short { max-height: none; mask-image: none; -webkit-mask-image: none; }
.card-note-text > :first-child { margin-top: 0; }
.card-note-text > :last-child { margin-bottom: 0; }

/* Update : un petit journal à côté d'un autre post ; seule, une bande « Now ». */
.card-update {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
  padding: var(--size-4-3) 0 0;
  border-top: 2px solid var(--text-normal);
  font-family: var(--font-interface);
  font-size: var(--font-ui-small);
}
.card-now { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-weight: var(--font-semibold); }
/* Le point d'une update : atténué ; vif (et son halo) sur la dernière. */
.card-now-dot { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklch, var(--color-accent) 40%, var(--background-modifier-border)); }
.card-now-dot.is-latest { background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 18%, transparent); }
.card-update-items { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--text-normal); line-height: 1.35; }
.card-update-items.is-empty { color: var(--text-faint); }
.card-update-tag { color: var(--text-faint); font-size: var(--font-ui-smaller); white-space: nowrap; }
.card-update-items a { color: var(--text-normal); text-decoration: none; }
.card-update-items a:hover { color: var(--text-accent); }
.card-update-items :is(.note-icon, img.emoji) { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.card-update-strip { display: flex; padding-left: 10px; }
.card-update-strip img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-s); border: 2px solid var(--background-primary); margin-left: -10px; }
.card-update.is-wide { flex-direction: row; align-items: center; gap: var(--size-4-5); padding: var(--size-4-3) 0; border-top-width: var(--border-width); border-top-color: var(--background-modifier-border); border-bottom: var(--border-width) solid var(--background-modifier-border); }
.card-update.is-wide .card-update-items { flex-direction: row; flex-wrap: wrap; gap: 4px 22px; flex: 1; }

/* Lignes : expériences et archives, en liste. */
.card-list { grid-column: 3 / span 8; display: flex; flex-direction: column; font-family: var(--font-interface); }
.card-row {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--size-4-4);
  padding: 10px 0;
  border-top: var(--border-width) solid var(--background-modifier-border);
}
.card-row:last-child { border-bottom: var(--border-width) solid var(--background-modifier-border); }
.card-row-year { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: var(--font-ui-small); }
.card-row-title { font-weight: var(--font-medium); }
.card-row:is(:hover:not(.scroll-hover *), .is-hovered) .card-row-title { color: var(--text-accent); }
.card-row-meta { display: flex; gap: 8px; align-items: baseline; color: var(--text-faint); font-size: var(--font-ui-smaller); }
.card-badge { color: var(--text-muted); font-style: italic; }
/* L'image d'une ligne apparaît au survol, à côté du pointeur de la liste. */
.card-row-peek {
  position: absolute;
  right: calc(100% + var(--grid-gap));
  top: 50%;
  width: 160px;
  height: auto;
  border-radius: var(--radius-s);
  opacity: 0;
  transform: translateY(-50%) rotate(-2deg) scale(0.96);
  transition: opacity var(--anim-duration-fast), transform var(--anim-duration-moderate) cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
  box-shadow: var(--shadow-l);
}
.card-row:is(:hover:not(.scroll-hover *), .is-hovered) .card-row-peek { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1); }

/* --- Rien ne correspond -------------------------------------------------------------- */
.shell-direct .feed-empty { position: relative; display: grid; place-items: center; min-height: 420px; margin-top: var(--size-4-4); color: var(--text-muted); }
.shell-direct .feed-empty[hidden] { display: none; }
/* Le fil fantôme : des cartes en pointillés, qui flottent doucement. */
.empty-ghosts { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; opacity: 0.55; pointer-events: none; mask-image: radial-gradient(ellipse at center, transparent 22%, #000 70%); -webkit-mask-image: radial-gradient(ellipse at center, transparent 22%, #000 70%); }
.empty-ghosts span { border: 1.5px dashed var(--background-modifier-border-hover); border-radius: 18px; animation: ghost-float 6s ease-in-out infinite; }
.empty-ghosts span:nth-child(1) { height: 220px; }
.empty-ghosts span:nth-child(2) { height: 150px; margin-top: 40px; animation-delay: -1.5s; }
.empty-ghosts span:nth-child(3) { height: 260px; animation-delay: -3s; border-radius: 30px 4px; }
.empty-ghosts span:nth-child(4) { height: 180px; margin-top: 20px; animation-delay: -4.5s; border-radius: 999px 999px 14px 14px; }
.empty-ghosts span:nth-child(5) { height: 140px; grid-column: 2 / span 2; animation-delay: -2s; }
.empty-ghosts span:nth-child(6) { height: 120px; animation-delay: -5s; }
@keyframes ghost-float { 50% { transform: translateY(-8px); } }
.empty-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 30rem; padding: var(--size-4-8) 0; text-align: center; }
.empty-logo { width: 56px; height: auto; filter: grayscale(1); opacity: 0.6; transform: rotate(-12deg); animation: empty-look 3.2s ease-in-out infinite; }
@keyframes empty-look { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(10deg) translateY(-3px); } }
.empty-title { margin: 6px 0 0; font-family: var(--font-title); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-normal); text-wrap: balance; }
.empty-query { color: var(--text-accent); quotes: "“" "”"; }
.empty-query[hidden] { display: none; }
.empty-hint { margin: 0; font-size: var(--font-ui-medium); }
.empty-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.empty-tag, .empty-action {
  padding: 3px 11px;
  border: var(--border-width) solid var(--background-modifier-border);
  border-radius: 2em;
  background: var(--background-primary);
  color: var(--text-muted);
  font: inherit;
  font-family: var(--font-interface);
  font-size: var(--font-ui-small);
  cursor: pointer;
}
.empty-tag:hover, .empty-action:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.empty-action[hidden] { display: none; }
.empty-action.is-main { border-color: transparent; background: color-mix(in oklch, var(--color-accent) 14%, transparent); color: color-mix(in oklch, var(--color-accent) 85%, var(--text-normal)); }
@media (prefers-reduced-motion: reduce) { .empty-ghosts span, .empty-logo { animation: none; } }
@media (max-width: 760px) { .empty-ghosts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .empty-ghosts span:nth-child(n + 4) { display: none; } }

/* La croix du champ : vider la recherche (à la place de « / »). */
.finder-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: var(--background-modifier-hover); color: var(--text-muted); cursor: pointer; }
.finder-clear[hidden] { display: none; }
.finder-clear .svg-icon { width: 14px; height: 14px; }
.finder-clear:hover { background: var(--background-modifier-active-hover); color: var(--text-normal); }
.finder.has-query .finder-kbd { display: none; }

/* --- Écrans moyens : 6 colonnes, les emplacements se simplifient ------------------ */
@media (max-width: 900px) {
  .feed-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card-featured, .card-note { grid-template-columns: minmax(0, 1fr); row-gap: var(--size-4-3); }
  .card-featured .card-media, .card-featured .card-body, .card-margin, .card-note-text { grid-column: 1; }
  .card-margin { flex-direction: row; align-items: baseline; gap: 10px; text-align: left; }
  .card-list { grid-column: 1 / -1; }
  .card-update { flex-wrap: wrap; }
  .card-row-peek { display: none; }
}
@media (max-width: 560px) {
  .topbar { gap: var(--size-4-4); }
  .finder-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); }
  .finder-types { flex: none; flex-wrap: nowrap; }
  .finder-chips::-webkit-scrollbar { display: none; }
  .card-update-strip { display: none; }
}


/* --- Sélecteur de mise en page (essai) --------------------------------------------- */

/* --- La bio porte la marque ------------------------------------------------------ */
.hero-logo { display: inline-block; vertical-align: -0.12em; }
.hero-logo img {
  display: block;
  width: auto;
  height: 0.98em;
  transform: rotate(-8deg);
  transition: transform var(--anim-duration-moderate) cubic-bezier(.3, 1.6, .5, 1);
  filter: drop-shadow(0 0.05em 0.08em rgba(0, 0, 0, 0.18));
}
.hero-logo:hover img { transform: rotate(4deg) scale(1.06); }
.hero-handle { color: var(--text-accent); }

/* --- Update : tête, TL;DR, ce qui a été publié (les deux mises en page) ---------- */
.card-update-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--size-4-3); min-width: 0; }
.card-update-count { color: var(--text-faint); font-size: var(--font-ui-smaller); }
.card-update-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-update-lead { margin: 0; color: var(--text-normal); font-size: var(--font-ui-medium); line-height: 1.45; text-wrap: pretty; }
.card-update-items li { min-width: 0; }
.card-update-target { font-weight: var(--font-medium); }
.card-update-text { display: -webkit-box; margin-top: 2px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--text-muted); font-size: var(--font-ui-smaller); line-height: 1.45; }
.card-update.is-wide .card-update-body { flex: 1; }
.card-showcase-summary { display: none; }

/* =====================================================================================
 * Maçonnerie (`data-layout="masonry"`) : colonnes égales, une grille qu'on
 * reconnaît ; ce qui varie, c'est ce qui s'y pose.
 *   ton    `plain` sans fond · `tint` fond léger (une carte) · `bold` aplat
 *   coins  `soft` · `round` · `sharp` · `leaf` · `arch` (images seulement)
 * Couleur d'un post : `data-hue` (palette d'Obsidian).
 * ===================================================================================== */
.card[data-hue="red"] { --hue: var(--color-red); --on-hue: #fff; }
.card[data-hue="orange"] { --hue: var(--color-orange); --on-hue: #1d1408; }
.card[data-hue="yellow"] { --hue: var(--color-yellow); --on-hue: #1f1903; }
.card[data-hue="green"] { --hue: var(--color-green); --on-hue: #04210f; }
.card[data-hue="cyan"] { --hue: var(--color-cyan); --on-hue: #032322; }
.card[data-hue="blue"] { --hue: var(--color-blue); --on-hue: #fff; }
.card[data-hue="purple"] { --hue: var(--color-purple); --on-hue: #fff; }
.card[data-hue="pink"] { --hue: var(--color-pink); --on-hue: #fff; }
/* Coins : quatre valeurs (haut gauche, haut droit, bas droit, bas gauche).
 * Une image posée dans une carte (8 px du bord) reprend les coins du haut,
 * diminués de ce retrait, pour suivre la carte. */
/* Le rayon (`--rad`, 30 px par défaut, réglable par type) fixe la forme
 * choisie : chaque forme en prend une part. */
.card { --rad: 30px; --r-tl: calc(var(--rad) * 0.53); --r-tr: calc(var(--rad) * 0.53); --r-br: calc(var(--rad) * 0.53); --r-bl: calc(var(--rad) * 0.53); }
.card[data-corner="round"] { --r-tl: var(--rad); --r-tr: var(--rad); --r-br: var(--rad); --r-bl: var(--rad); }
.card[data-corner="sharp"] { --r-tl: min(3px, var(--rad)); --r-tr: min(3px, var(--rad)); --r-br: min(3px, var(--rad)); --r-bl: min(3px, var(--rad)); }
.card[data-corner="leaf"] { --r-tl: var(--rad); --r-tr: min(4px, var(--rad)); --r-br: var(--rad); --r-bl: min(4px, var(--rad)); }
.card[data-corner="arch"] { --r-tl: 999px; --r-tr: 999px; --r-br: calc(var(--rad) * 0.47); --r-bl: calc(var(--rad) * 0.47); }
.card[data-corner="note"] { --r-tl: min(4px, var(--rad)); --r-tr: min(4px, var(--rad)); --r-br: calc(var(--rad) * 0.6); --r-bl: min(4px, var(--rad)); }
.card {
  --r: var(--r-tl) var(--r-tr) var(--r-br) var(--r-bl);
  --r-in: max(3px, calc(var(--r-tl) - 8px)) max(3px, calc(var(--r-tr) - 8px)) 6px 6px;
}

.card-cover, .card-illus-box { display: none; }

:root:is([data-layout="masonry"], [data-layout="masonry-all"]) {
  & .feed-list { --m-cols: 4; grid-template-columns: repeat(var(--m-cols), minmax(0, 1fr)); grid-auto-rows: 4px; row-gap: 0; column-gap: 28px; }
  & .feed-list > * { margin-top: 0; align-self: start; }
  & .card { --pad: 22px; }
  & .card .card-title { text-wrap: balance; }
  & .card-summary { font-size: 0.94em; line-height: 1.5; }
  & .card-kicker { margin-bottom: 2px; }

  /* Tons. */
  & .card[data-tone="tint"] {
    padding: var(--pad);
    border-radius: var(--r, 16px);
    background: color-mix(in oklch, var(--hue) 8%, var(--background-primary));
    box-shadow: inset 0 0 0 var(--border-width) color-mix(in oklch, var(--hue) 16%, var(--background-primary));
  }
  & .card[data-tone="tint"] .card-kicker { color: color-mix(in oklch, var(--hue) 65%, var(--text-muted)); }
  & .card[data-tone="bold"]:not(.card-update) {
    padding: var(--pad);
    border-radius: var(--r, 16px);
    background: var(--hue);
    color: var(--on-hue);
    rotate: -0.8deg;
    transition: rotate var(--anim-duration-moderate) cubic-bezier(.3, 1.6, .5, 1);
  }
  & .card[data-tone="bold"]:not(.card-update):is(:hover:not(.scroll-hover *), .is-hovered) { rotate: 0deg; }
  & .card[data-tone="bold"] :is(.card-kicker, .card-summary, .card-tag, .card-dot, .card-subtitle, .card-lang, .title-subtitle) { color: color-mix(in srgb, var(--on-hue) 78%, transparent); border-color: currentColor; }
  /* Sur un fond plein, le survol de la carte souligne le titre (l'accent ne se lirait pas). */
  & :is(.card[data-tone="bold"], .card-featured):is(:hover:not(.scroll-hover *), .is-hovered) :is(.card-title, .card-title a) { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

  /* Images : les coins du post. */
  & .card-media { border-radius: var(--r, 16px); }
  & .card-cover { display: block; margin-bottom: 14px; overflow: hidden; border-radius: var(--r, 16px); }
  & .card[data-tone="tint"] .card-cover { margin: calc(var(--pad) * -1 + 8px) calc(var(--pad) * -1 + 8px) 16px; border-radius: var(--r-in); }
  & .card-showcase[data-tone="tint"] .card-media { margin: calc(var(--pad) * -1 + 8px) calc(var(--pad) * -1 + 8px) 0; border-radius: var(--r-in); }
  & .card-cover img, & .card-cover svg { display: block; width: 100%; height: auto; transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
  & .card-cover svg { aspect-ratio: 5 / 3; }
  & .card:is(:hover:not(.scroll-hover *), .is-hovered) .card-cover :is(img, svg) { transform: scale(1.03); }
  & .card-stamp { display: none; }

  /* Projet : l'image, puis une légende qui dit de quoi il s'agit. */
  & .card-showcase .card-caption { margin-top: 12px; }
  & .card-showcase .card-title { font-size: 1.05rem; letter-spacing: -0.01em; }
  & .card-showcase-summary { display: -webkit-box; margin: 4px 0 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--text-muted); font-family: var(--font-interface); font-size: var(--font-ui-small); }

  /* Article : titre à empattements, TL;DR sur trois lignes. */
  & .card-article .card-title { font-size: clamp(1.3rem, 1.5vw, 1.55rem); margin-top: 6px; }
  & .card-article .card-summary { -webkit-line-clamp: 3; }
  & .card-article[data-tone="bold"] .card-title { font-size: clamp(1.5rem, 1.9vw, 1.95rem); }
  & .card-article[data-tone="bold"] .card-summary { -webkit-line-clamp: 4; }
  & .card-illus-box { display: block; margin: -2px 0 16px; }
  & .card-illus-box .card-illus { display: block; width: 56px; height: 56px; object-fit: contain; transition: transform var(--anim-duration-moderate) cubic-bezier(.3, 1.6, .5, 1); }
  & .card-illus-box.is-type .card-illus { width: 48px; height: 48px; stroke-width: 1.25; opacity: 0.9; }
  & .card:is(:hover:not(.scroll-hover *), .is-hovered) .card-illus { transform: rotate(-6deg) scale(1.08); }

  /* Note (Entry) : un post-it, teinté, légèrement de travers. */
  & .card-note { display: block; rotate: -0.6deg; transition: rotate var(--anim-duration-moderate); }
  & .card-note:is(:hover:not(.scroll-hover *), .is-hovered) { rotate: 0deg; }
  & .card-note[data-tone="tint"] { background: color-mix(in oklch, var(--hue) 14%, var(--background-primary)); box-shadow: none; }
  & .card-margin { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 0 0 10px; text-align: left; color: color-mix(in oklch, var(--hue) 55%, var(--text-normal)); }
  & .card-margin a { color: inherit; font-style: normal; font-weight: var(--font-semibold); }
  & .card-margin .card-tags { display: none; }
  & .card-note-text { font-size: 1em; max-height: 13em; }

  /* Épinglé : l'accent en fond. */
  & .card-featured { display: block; padding: 12px 12px var(--pad); border-radius: var(--r, 18px); background: var(--color-accent); color: var(--text-on-accent); }
  & .card-featured .card-media { border-radius: var(--r-in); }
  & .card-featured .card-body { padding: var(--pad) 10px 0; }
  & .card-featured :is(.card-flag, .card-kicker, .card-summary, .card-tag, .title-subtitle) { color: color-mix(in srgb, var(--text-on-accent) 80%, transparent); }

  /* Update : une coupure. Un filet épais, la date en grand, le TL;DR, puis
   * ce qui a été publié avec le début de son texte. La plus récente en négatif. */
  & .card-update {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: var(--pad);
    border: none;
  }
  & .card-now { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
  & .card-update-items { display: flex; flex-direction: column; gap: 10px; }
  & .card-update-strip { padding-left: 10px; }
  & .card-update-strip img { width: 52px; height: 52px; border-color: var(--background-primary); }
  & .card-update-items a:hover { color: var(--text-accent) !important; }

  /* Liste (expériences, archives) : une fiche grise. */
  & .card-list { --pad: 22px; padding: 8px var(--pad); border-radius: 16px; background: var(--background-secondary); }
  /* Une ligne de liste n'est pas une carte : ni fond, ni coins, ni retrait. */
  & .card-row { padding: 10px 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; rotate: none !important; }
  & .card-row { grid-template-columns: 3.2em minmax(0, 1fr) auto; }
  & .card-row:first-child { border-top: none; }
  & .card-row:last-child { border-bottom: none; }
  & .card-row-peek { display: none; }
}
@media (max-width: 1100px) {
  :root:is([data-layout="masonry"], [data-layout="masonry-all"]) .feed-list { --m-cols: 3; }
}
@media (max-width: 760px) { :root:is([data-layout="masonry"], [data-layout="masonry-all"]) .feed-list { --m-cols: 2; column-gap: 18px; } }
@media (max-width: 480px) { :root:is([data-layout="masonry"], [data-layout="masonry-all"]) .feed-list { --m-cols: 1; } }


/* --- Titres partout en Space Grotesk ---------------------------------------------- */
.shell-direct :is(.hero-bio, .card-title, .page-title, .card-now, .card-subtitle, .related-title, .not-found h1),
.shell-direct .markdown-rendered :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-title); }
.shell-direct .card-article .card-title { font-weight: 600; letter-spacing: -0.02em; }
.shell-direct .card-subtitle { font-style: normal; }
.shell-direct .hero-bio { font-weight: 700; letter-spacing: -0.035em; }

/* --- Accueil : réglages à droite de la bio ------------------------------------------ */
.hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--size-4-6); }
.hero-row .hero-bio { flex: 1; min-width: 0; }
.site-controls-row { display: flex; align-items: center; gap: 2px; flex-shrink: 0; font-family: var(--font-interface); font-size: var(--font-ui-small); }
.site-controls-row .topbar-nav { margin-inline-end: var(--size-4-3); }
.hero-row .site-controls-row { padding-top: 0.6em; align-items: flex-start; }

.shell-direct.is-home .hero { padding-top: clamp(1.25rem, 5vh, 3rem); }
@media (max-width: 640px) {
  .hero-row { flex-direction: column-reverse; gap: var(--size-4-2); }
  .hero-row .site-controls-row { padding-top: 0; margin-inline-start: -8px; }
}


/* --- Maçonnerie : carte neutre, updates flottantes, excroissances ------------------- */
.card-tail { display: none; }
:root:is([data-layout="masonry"], [data-layout="masonry-all"]) {
  & .card[data-tone="soft"], & .card-tail {
    --soft-bg: color-mix(in oklch, var(--text-normal) 4.5%, var(--background-primary));
  }
  & .card[data-tone="soft"] { border-radius: var(--r, 24px); background: var(--soft-bg); }
  & .card-update { gap: 12px; }
  & .card-update .card-update-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; }
  & .card-update:has(+ .card-tail) .card-update-strip { display: none; }
  & .card-update.tail-full { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  & .card-update.tail-left { border-bottom-left-radius: 0; }
  & .card-update.tail-right { border-bottom-right-radius: 0; }
  & .card-note { rotate: -0.6deg; }

  /* L'excroissance : la galerie de l'update, collée sous l'une de ses
   * colonnes, avec un congé concave à la jonction. */
  & .card-tail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: start;
    padding: 0 12px 12px;
    border-radius: 0 0 24px 24px;
    background: var(--soft-bg);
  }
  /* Vignettes de taille réglée : l'excroissance reste une excroissance,
   * même sous une colonne large. */
  & .card-tail { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  & .card-tail img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
  & .card-tail::before {
    content: "";
    position: absolute;
    top: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
  }
  & .card-tail.tail-left::before { left: 100%; background: radial-gradient(circle at 100% 100%, transparent 23.5px, var(--soft-bg) 24px); }
  & .card-tail.tail-right::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent 23.5px, var(--soft-bg) 24px); }
  & .card-tail:hover img { opacity: 0.92; }
}


/* --- Masonry + archives : les archives en cartes, en retrait ------------------------ */
.card.is-archive-card { opacity: 0.5; filter: grayscale(0.7); transition: opacity var(--anim-duration-moderate), filter var(--anim-duration-moderate); }
.card.is-archive-card:is(:hover:not(.scroll-hover *), .is-hovered), .card.is-archive-card:focus-within { opacity: 1; filter: none; }
/* Une archive est déjà estompée : l'icône d'archive suffit, sans libellé. */
.card.is-archive-card :is(.card-kicker, .card-caption-meta, .card-margin time)::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-start: 6px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* --- Lecteur : la page par-dessus le fil -------------------------------------------- */
html.has-reader { overflow: hidden; overflow-anchor: none; }
.shell-direct .side-panel {
  inset: var(--reader-top, 18px) var(--reader-right, 18px) 0 var(--reader-left, 18px);
  width: auto;
  border: none;
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-l);
  animation: reader-in 340ms cubic-bezier(.2, .8, .2, 1);
}
/* La barre reste au-dessus du voile, pleine, avec un bouton retour à la
 * place de la loupe. */
/* La loupe et le bouton retour partagent une seule place (celle de la
 * loupe : le texte du champ ne bouge pas) ; l'un se change en l'autre
 * quand la barre entre dans le calque d'un post (`.is-reading`) ou en sort.
 * Le bouton, plus grand, déborde de la place, centré sur elle. */
.finder-lead { position: relative; display: block; width: 18px; height: 18px; flex-shrink: 0; }
.finder-lead > * { transition: opacity 220ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 320ms; }
.finder-lead .finder-icon { display: block; }
.finder-back {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--background-modifier-hover);
  color: var(--text-normal);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5) rotate(-90deg);
}
.finder-back .svg-icon { width: 16px; height: 16px; }
.finder-back:hover { background: var(--background-modifier-active-hover); }
.finder.is-reading .finder-back { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Le bouton déborde de 5 px de chaque côté : le texte s'écarte d'autant
 * pour garder l'écart du champ. */
.finder-lead { transition: margin 320ms cubic-bezier(.2, .8, .2, 1); }
.finder.is-reading .finder-lead { margin-inline: 5px; }
.finder.is-reading .finder-icon { opacity: 0; transform: scale(0.5) rotate(90deg); }
@keyframes reader-in { from { transform: translateY(48px); opacity: 0; } }
.shell-direct .side-panel-bar {
  position: absolute;
  inset: 12px 14px auto;
  z-index: 2;
  justify-content: space-between;
  pointer-events: none;
}
.shell-direct .side-panel-bar > * { pointer-events: auto; background: color-mix(in oklch, var(--background-primary) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.shell-direct .side-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(var(--page-width), 100%) minmax(0, 1fr);
  column-gap: var(--size-4-8);
  align-items: start;
  padding: 64px var(--page-gutter) 6rem;
}
.shell-direct .side-panel-body > .page { grid-column: 2; }

@media (max-width: 760px) {
  .shell-direct .side-panel { inset: var(--reader-top, 10px) var(--reader-right, 0px) 0 var(--reader-left, 0px); border-radius: 18px 18px 0 0; }
  .shell-direct .side-panel-body { padding-top: 60px; }
}


/* --- Bandeau du bas : réseaux à gauche, thème à droite ------------------------------ */
.site-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-4);
  margin-top: 5rem;
  padding: var(--size-4-4) 0;
  border-top: var(--border-width) solid var(--background-modifier-border);
  font-family: var(--font-interface);
  font-size: var(--font-ui-small);
}
.site-band-socials { display: flex; flex-wrap: wrap; gap: 4px; margin-inline-start: -6px; }
.site-band-socials a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-s); }
.site-band-socials :is(img, .svg-icon) { width: 20px; height: 20px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter var(--anim-duration-fast), opacity var(--anim-duration-fast); }
.site-band-socials a:hover { background: var(--background-modifier-hover); }
.site-band-socials a:hover :is(img, .svg-icon) { filter: none; opacity: 1; }
.site-band .theme-control { margin-inline-end: -8px; color: var(--text-muted); }
.site-band .theme-name { color: var(--text-normal); }


/* --- Calque du lecteur : la barre et le post dans une même colonne ------------------ */
/* Voile par-dessus le fil, colonne flex à la largeur du fil : la barre de
 * recherche (le même élément que dans le fil) puis la feuille du post. */
.reader-layer {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px max(var(--page-gutter), calc((100vw - var(--wide-width)) / 2)) 0;
  background: rgba(0, 0, 0, 0.28);
}
.reader-layer[hidden] { display: none; }
.reader-layer .side-panel {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  animation: none;
  box-shadow: var(--shadow-l);
}
.reader-layer .side-panel-body { padding-top: 40px; }
/* Sans la barre (post ouvert directement, fil pas encore là) : le retour de la feuille. */
.reader-layer:has(.finder) .side-panel-bar { display: none; }
/* La barre dans le calque : une carte, comme la feuille. */
.reader-layer .finder {
  position: relative;
  top: auto;
  z-index: auto;
  flex: none;
  margin: 0;
  padding: 8px;
  border-radius: 22px;
  background: var(--background-primary);
  box-shadow: var(--shadow-l);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  overflow: clip;
}
.reader-layer .finder .finder-chips { margin-inline: 0; padding-inline: 0; }

/* --- Barre repliée au-dessus d'un post ------------------------------------------------ */
/* Deux rangées en grille : la seconde (pastilles, archives) rentre à 0
 * quand la barre est repliée ; le champ perd son contour, la carte de la
 * barre en tient lieu. Les anneaux de focus des pastilles gardent leur
 * place (marge intérieure de la rangée). */
.reader-layer .finder {
  display: grid;
  grid-template-rows: auto 1fr;
  transition: grid-template-rows 320ms cubic-bezier(.2, .8, .2, 1), padding 320ms cubic-bezier(.2, .8, .2, 1);
}
.reader-layer .finder .finder-chips {
  min-height: 0;
  overflow-y: hidden;
  margin: 7px -3px -3px;
  padding: 3px;
  transition: margin 320ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease, visibility 0s;
}
.reader-layer .finder .finder-field { transition: border-color 260ms ease, box-shadow var(--anim-duration-fast), min-height 320ms cubic-bezier(.2, .8, .2, 1), padding 320ms cubic-bezier(.2, .8, .2, 1); }
/* Repliée : une ligne de 46 px, le contenu centré, à 9 px de chaque bord
 * (8 de marge et le contour, devenu transparent) ; les boutons ronds de
 * 28 px (retour, croix) sont ainsi concentriques à l'arrondi de 22 px de la
 * carte, le même que celui de la feuille. La rangée repliée ne compte plus. */
.reader-layer .finder.is-compact { grid-template-rows: auto 0fr; padding: 8px; }
.reader-layer .finder.is-compact .finder-chips { margin-block: 0; padding-block: 0; opacity: 0; visibility: hidden; transition: margin 320ms cubic-bezier(.2, .8, .2, 1), padding 320ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease, visibility 0s linear 320ms; }
.reader-layer .finder.is-compact .finder-field { min-height: 28px; padding: 0; border-color: transparent; }
.reader-layer .finder .finder-clear { transition: width 320ms cubic-bezier(.2, .8, .2, 1), height 320ms cubic-bezier(.2, .8, .2, 1); }
.reader-layer .finder.is-compact .finder-clear { width: 28px; height: 28px; }
.reader-layer .finder .finder-chips { transition: margin 320ms cubic-bezier(.2, .8, .2, 1), padding 320ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease, visibility 0s; }
/* Le type du post, dans le texte d'aide : seulement barre repliée (dépliée,
 * sa pastille le montre). */
.finder-meta-type { display: inline-flex; align-items: center; gap: 5px; max-width: 14em; overflow: hidden; transition: max-width 320ms cubic-bezier(.2, .8, .2, 1), opacity 200ms ease, margin 320ms cubic-bezier(.2, .8, .2, 1); }
.finder-meta-type .svg-icon { width: 15px; height: 15px; flex-shrink: 0; }
.finder:not(.is-compact) .finder-meta-type { max-width: 0; opacity: 0; margin-inline-end: -0.9em; }
/* Mesure de l'arrivée : sans transitions. */
.finder.no-transition, .finder.no-transition * { transition: none !important; }
/* Le type du post ouvert : un point sur sa pastille (la pastille du type
 * remplace l'étiquette de type de l'en-tête du post). */
/* Le point est toujours là, de largeur nulle (l'écart de la pastille est
 * compensé) ; il pousse et grandit quand le type devient celui du post, et
 * la pastille prend un contour à l'accent et un texte plein : plus marqué
 * qu'un point seul, sans fond (qui reste le survol). */
.finder-chip[data-type] { transition: border-color 260ms ease, color 260ms ease, opacity var(--anim-duration-fast); }
.finder-chip[data-type]::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 6px;
  margin-inline-start: -5px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-accent) 45%, var(--background-primary));
  transform: scale(0);
  transition: width 260ms cubic-bezier(.2, .8, .2, 1), margin 260ms cubic-bezier(.2, .8, .2, 1), transform 320ms cubic-bezier(.3, 1.5, .5, 1);
}
.finder-chip.is-current { border-color: color-mix(in oklch, var(--color-accent) 60%, var(--background-modifier-border)); color: var(--text-normal); }
.finder-chip.is-current::after { width: 6px; margin-inline-start: 1px; transform: scale(1); }
.reader-layer:has(.finder) .page-header .type-tag { display: none; }
@media (max-width: 760px) {
  .reader-layer { padding: 8px 8px 0; }
  .reader-layer .finder { border-radius: 18px; }
}


/* La feuille d'un post prend le focus (clavier) sans anneau. */
.side-panel-body:focus { outline: none; box-shadow: none; }


/* --- Bandeau du bas, fixe -------------------------------------------------------------- */
.site-band {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  margin: 0;
  padding: 6px max(var(--page-gutter), calc((100vw - var(--wide-width)) / 2));
  border-top: var(--border-width) solid var(--background-modifier-border);
  background: color-mix(in oklch, var(--background-primary) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-band-socials a { width: 30px; height: 30px; }
.shell-direct.is-home .site-main { padding-bottom: 6rem; }
/* Un post ouvert : le bandeau glisse hors de l'écran, et revient dès que le
 * post commence à se refermer (`reader-ui`). */
.site-band { transition: transform 380ms cubic-bezier(.2, .8, .2, 1), opacity 260ms ease; }
html.reader-ui .site-band { transform: translateY(100%); opacity: 0; pointer-events: none; transition-timing-function: cubic-bezier(.4, 0, .2, 1), ease; }
@media (prefers-reduced-motion: reduce) { .site-band { transition: none; } }


/* --- Sommaire et fin d'article (comme le site Publish) ------------------------------- */
/* Une seule allure : lignes estompées, la ligne en cours en texte normal,
 * sans accent ni gras ; nombres et badge estompés, calés en fin de ligne. */
.shell-direct .site-outline { font-family: var(--font-interface); font-size: var(--font-ui-small); }
.shell-direct .site-outline ul { list-style: none; margin: 0; padding: 0; }
.shell-direct .site-outline li { padding-inline-start: calc(var(--depth, 0) * 12px); }
.shell-direct .site-outline a { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; color: var(--text-faint); text-decoration: none; line-height: 1.35; transition: color var(--anim-duration-fast); }
.shell-direct .site-outline a:hover { color: var(--text-muted); }
.shell-direct .site-outline a.is-active { color: var(--text-normal); }
.shell-direct .site-outline .outline-label { flex: 1; min-width: 0; }
.shell-direct .site-outline .outline-meta { display: inline-flex; align-items: baseline; gap: 6px; flex-shrink: 0; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.shell-direct .site-outline .outline-count { min-width: 1.5em; text-align: end; }
.shell-direct .site-outline .outline-badge { padding: 0 5px; border-radius: var(--radius-s); background: var(--background-modifier-hover); font-family: var(--font-monospace); font-size: var(--font-ui-smaller); }
/* Fin d'article : Releases et Related, intitulé à la taille d'un titre de
 * niveau 1 suivi d'un filet jusqu'au bord. */
.page-end { margin-top: 4rem; }
.page-end-title { display: flex; align-items: center; gap: var(--size-4-4); margin: 0 0 var(--size-4-4); font-family: var(--font-title); font-size: 2em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.page-end-title::after { content: ""; flex: 1; height: var(--border-width); background: var(--background-modifier-border); }
.page-releases > .callout { margin-block: 0 var(--size-4-3); }
.page-related { list-style: none; margin: 0; padding: 0; font-size: var(--font-ui-medium); }
.page-related li { display: flex; align-items: baseline; gap: var(--size-4-3); padding: 8px 0; border-top: var(--border-width) solid var(--background-modifier-border); }
.page-related li:last-child { border-bottom: var(--border-width) solid var(--background-modifier-border); }
.page-related a { flex: 1; min-width: 0; color: var(--text-normal); text-decoration: none; }
.page-related a:hover { color: var(--text-accent); }
.page-related .link-icon { width: 16px; height: 16px; margin-inline-end: 8px; vertical-align: -3px; }
/* Le type d'une entrée liée, avec l'icône de sa pastille (sans date). */
.page-related-type { display: inline-flex; align-items: center; gap: 5px; align-self: center; color: var(--text-faint); font-family: var(--font-interface); font-size: var(--font-ui-smaller); white-space: nowrap; }
.page-related-type .svg-icon { width: 13px; height: 13px; }


/* --- Date et tags du post en guise de texte d'aide de la recherche ----------------- */
.finder-input-wrap { position: relative; display: flex; flex: 1; min-width: 10ch; }
.finder-input-wrap .finder-input { flex: 1; min-width: 0; width: 100%; }
/* La copie invisible de la saisie, pour mesurer sa largeur. */
.finder-measure { position: absolute; visibility: hidden; white-space: pre; font-size: 1.05rem; pointer-events: none; }
/* Même allure que le texte d'aide du champ : même taille, même couleur. */
.finder-meta {
  position: absolute;
  inset: 0 0 0 var(--meta-x, 0px);
  display: flex;
  align-items: center;
  gap: 0.9em;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 300ms cubic-bezier(.2, .8, .2, 1), left 160ms cubic-bezier(.2, .8, .2, 1);
  font-size: 1.05rem;
  color: var(--text-faint);
}
/* Après une saisie, un écart avant le texte d'aide. */
.finder-meta.is-pushed { padding-inline-start: 0.6em; }
/* Post ouvert : la date et les tags tiennent lieu de texte d'aide. */
.finder.is-reading.has-meta .finder-meta { opacity: 1; transform: none; }
.finder.is-reading.has-meta:is(.is-compact, .has-meta-text) .finder-input::placeholder { color: transparent; }
@media (prefers-reduced-motion: reduce) { .finder-meta { transition: none; } }
/* Ils quittent l'en-tête du post (la barre les montre). */
.reader-layer:has(.finder.has-meta) .page-header .meta-line { display: none; }
/* L'icône de la note, à gauche du titre. */
.page-title-icon { display: inline-flex; vertical-align: -0.08em; margin-inline-end: 0.3em; }
.page-title-icon .title-icon, .page-title-icon .svg-icon { width: 0.85em; height: 0.85em; }
.page-title-icon img.title-icon { border-radius: 0.15em; object-fit: cover; }

/* La fin grisée d'une expression en cours (`/art` → `icle`). */
.finder-ghost { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; white-space: pre; font-size: 1.05rem; color: var(--text-faint); pointer-events: none; }
.finder-ghost:empty { display: none; }
/* Barre repliée : les morceaux du texte d'aide gardent leur largeur (la
 * fin se coupe au bord), et le nombre de posts laisse la place. */
.finder-meta > * { flex-shrink: 0; }
.reader-layer .finder.is-compact .finder-count { display: none; }

/* --- Barre de défilement de la feuille ------------------------------------------- */
/* Fine, en retrait du bord, et qui ne monte ni ne descend jusqu'aux coins :
 * elle commence sous l'arrondi du haut et s'arrête avant le bas de l'écran.
 * Le pouce n'apparaît qu'au survol de la feuille ou pendant un défilement
 * (`is-scrolling`), comme la barre flottante de macOS. Firefox garde la
 * sienne, fine (pas de pseudo-éléments). */
.reader-layer :is(.side-panel-body, .side-panel > .site-outline)::-webkit-scrollbar { width: 12px; background: transparent; }
.reader-layer :is(.side-panel-body, .side-panel > .site-outline)::-webkit-scrollbar-track { background: transparent; margin-block: 30px 14px; }
.reader-layer :is(.side-panel-body, .side-panel > .site-outline)::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 12px; background: transparent; background-clip: padding-box; }
.reader-layer :is(.side-panel-body, .side-panel > .site-outline):is(:hover, .is-scrolling)::-webkit-scrollbar-thumb { background-color: var(--background-modifier-border-hover); }
.reader-layer :is(.side-panel-body, .side-panel > .site-outline)::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); }
.reader-layer :is(.side-panel-body, .side-panel > .site-outline)::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { .reader-layer :is(.side-panel-body, .side-panel > .site-outline) { scrollbar-width: thin; } }

/* --- Le sommaire : une colonne de la feuille ----------------------------------------- */
/* Toute la hauteur à droite de la feuille, séparée de l'article par un
 * filet, et qui défile à part (la molette au-dessus de la colonne la fait
 * défiler). La barre de l'article tombe ainsi contre le filet ; celle du
 * sommaire, au bord de la feuille, sous son arrondi. */
.shell-direct .side-panel > .site-outline { display: none; }
@media (min-width: 1101px) {
  .shell-direct .side-panel:has(> .site-outline) { flex-direction: row; }
  .shell-direct .side-panel:has(> .site-outline) > .side-panel-body { flex: 1 1 auto; min-width: 0; }
  .shell-direct .side-panel > .site-outline {
    display: block;
    position: static;
    flex: none;
    width: 300px;
    max-height: none;
    overflow-y: auto;
    padding: 40px 20px 32px 28px;
    border-inline-start: var(--border-width) solid var(--background-modifier-border);
    overscroll-behavior: contain;
  }
  /* Contre le filet, rien à éviter : la barre de l'article descend presque en haut. */
  .reader-layer .side-panel:has(> .site-outline) > .side-panel-body::-webkit-scrollbar-track { margin-block: 14px; }
}


/* --- Liens sous le titre : des boutons ----------------------------------------------- */
/* La logique du callout `[!button]` du vault (snippet md-callouts.css) : un
 * lien externe est un bouton avec l'icône du site (son nom s'efface, l'icône
 * le dit) et une flèche ↗ ; un fichier (PDF…), le même bouton avec une
 * icône de téléchargement ; une note du site, un bouton teinté à l'accent. */
.shell-direct .page-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--size-4-4); font-family: var(--font-interface); font-size: var(--font-ui-small); }
.shell-direct .page-links > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 12px;
  border: var(--border-width) solid var(--background-modifier-border-hover);
  border-radius: var(--radius-m);
  background: var(--background-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--text-normal);
  font-weight: var(--font-medium);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--anim-duration-fast), border-color var(--anim-duration-fast);
}
.shell-direct .page-links > a * { text-decoration: none; }
.shell-direct .page-links > a:hover { background: var(--background-modifier-hover); }
.shell-direct .page-links > a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--background-modifier-border-focus); }
.shell-direct .page-links .hp-link-site { display: none; }
.shell-direct .page-links .hp-link-title { color: inherit; font-weight: inherit; }
.shell-direct .page-links :is(.hp-link-icon, .page-link-fallback) { flex-shrink: 0; width: 16px; height: 16px; margin: 0; border-radius: 3px; object-fit: contain; }
.shell-direct .page-links .page-link-fallback { color: var(--text-muted); }
.shell-direct .page-links > a.external-link::after,
.shell-direct .page-links > a:is([href$=".pdf" i], [href$=".zip" i], [href$=".docx" i], [href$=".pptx" i], [href$=".key" i], [href$=".epub" i])::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--page-link-glyph) center / contain no-repeat;
  mask: var(--page-link-glyph) center / contain no-repeat;
}
.shell-direct .page-links > a.external-link { --page-link-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); background-image: none; padding-inline-end: 10px; }
.shell-direct .page-links > a.external-link::after { color: var(--text-faint); margin-inline-start: -2px; }
.shell-direct .page-links > a:is([href$=".pdf" i], [href$=".zip" i], [href$=".docx" i], [href$=".pptx" i], [href$=".key" i], [href$=".epub" i]) { --page-link-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
.shell-direct .page-links > a:is([href$=".pdf" i], [href$=".zip" i], [href$=".docx" i], [href$=".pptx" i], [href$=".key" i], [href$=".epub" i])::before { color: var(--text-muted); }
/* Une note du site : le même bouton, teinté à l'accent. */
.shell-direct .page-links > a.internal-link:not([href$=".pdf" i], [href$=".zip" i], [href$=".docx" i], [href$=".pptx" i], [href$=".key" i], [href$=".epub" i]) {
  border-color: color-mix(in oklch, var(--color-accent) 32%, transparent);
  background: color-mix(in oklch, var(--color-accent) 9%, var(--background-primary));
  color: color-mix(in oklch, var(--color-accent) 78%, var(--text-normal));
}
.shell-direct .page-links > a.internal-link:not([href$=".pdf" i], [href$=".zip" i], [href$=".docx" i], [href$=".pptx" i], [href$=".key" i], [href$=".epub" i]):hover { background: color-mix(in oklch, var(--color-accent) 16%, var(--background-primary)); }


/* --- Allure par type : ce qui est montré, visuel sans image, titre --------------------- */
.card[data-hide~="date"] :is(.card-kicker time, .card-kicker time + .card-dot, .card-margin time, .card-caption-meta) { display: none; }
.card[data-hide~="minutes"] :is(.card-min, .card-dot:has(+ .card-min)) { display: none; }
.card[data-hide~="tags"] .card-tags { display: none; }
.card[data-hide~="summary"] :is(.card-summary, .card-subtitle) { display: none; }
.card[data-hide~="visual"] :is(.card-cover, .card-illus-box, .card-media, .card-stamp) { display: none !important; }
.card:not([data-art]) .card-cover.is-generated { display: none !important; }
.card:is([data-art], [data-tone="plain"]) .card-illus-box { display: none !important; }
.card :is(.card-title > a, .card-margin > .feed-link, .card-now) { font-size: calc(100% * var(--ts, 1)); }

/* --- Bandeau : lien vers le playground -------------------------------------------------- */
.site-band-end { display: flex; align-items: center; gap: var(--size-4-4); }
.site-band-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-s); color: var(--text-muted); text-decoration: none; }
.site-band-link .svg-icon { width: 14px; height: 14px; }
.site-band-link:hover { background: var(--background-modifier-hover); color: var(--text-normal); }

/* --- Playground ---------------------------------------------------------------------- */
.shell-direct.is-playground .site-main { padding-bottom: 6rem; }
.pg-top { display: flex; align-items: center; justify-content: space-between; gap: var(--size-4-4); padding: var(--size-4-6) 0 var(--size-4-4); }
.pg-top h1 { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.02em; }
.pg-copy, .pg-reset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: var(--border-width) solid var(--background-modifier-border-hover); border-radius: var(--radius-m); background: var(--background-primary); color: var(--text-normal); font: inherit; font-family: var(--font-interface); font-size: var(--font-ui-small); cursor: pointer; }
.pg-copy .svg-icon { width: 14px; height: 14px; }
.pg-copy:hover, .pg-reset:hover { background: var(--background-modifier-hover); }
.pg-reset[hidden] { display: none; }
.pg-reset { margin-inline-start: auto; padding: 3px 10px; border-color: transparent; color: var(--text-muted); }
.pg-type { padding: var(--size-4-8) 0; border-top: var(--border-width) solid var(--background-modifier-border); }
.pg-head { display: flex; align-items: baseline; gap: var(--size-4-3); margin-bottom: var(--size-4-5); font-family: var(--font-interface); }
.pg-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1.25rem; }
.pg-head h2 .svg-icon { width: 18px; height: 18px; }
.pg-count { color: var(--text-faint); font-size: var(--font-ui-small); }
.pg-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--size-4-8); align-items: start; }
.pg-controls { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; background: var(--background-secondary); font-family: var(--font-interface); font-size: var(--font-ui-small); }
.pg-row { display: flex; flex-direction: column; gap: 6px; }
.pg-label, .pg-range > span { color: var(--text-muted); }
.pg-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.pg-seg button { padding: 3px 10px; border: var(--border-width) solid var(--background-modifier-border); border-radius: 2em; background: none; color: var(--text-muted); font: inherit; cursor: pointer; }
.pg-seg button:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.pg-seg button[aria-checked="true"] { border-color: transparent; background: color-mix(in oklch, var(--color-accent) 14%, transparent); color: color-mix(in oklch, var(--color-accent) 85%, var(--text-normal)); }
.pg-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-swatch { width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: var(--sw); cursor: pointer; }
.pg-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--background-secondary), 0 0 0 4px var(--sw); }
.pg-seg button:focus-visible, .pg-swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--background-modifier-border-focus); }
.pg-range { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.pg-range > span { grid-column: 1 / -1; }
.pg-range input { width: 100%; accent-color: var(--color-accent); }
.pg-range output { min-width: 3.5em; text-align: end; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pg-fields > div { display: flex; flex-direction: column; gap: 4px; }
.pg-check { display: flex; align-items: center; gap: 8px; color: var(--text-normal); cursor: pointer; }
.pg-check input { accent-color: var(--color-accent); }
.pg-cards { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.pg-sample { width: 290px; margin: 0; }
.pg-sample.is-wide { width: 608px; max-width: 100%; }
.pg-sample figcaption { margin-bottom: 8px; color: var(--text-faint); font-family: var(--font-interface); font-size: var(--font-ui-smaller); text-transform: uppercase; letter-spacing: 0.06em; }
.pg-sample .card-tail { display: block; margin-top: 8px; }
@media (max-width: 900px) { .pg-body { grid-template-columns: 1fr; } .pg-controls { position: static; } }


/*
 * Banc d'essai : rendus des items d'update (`?variant=…`), sur le même
 * Markdown. Sans variante, le rendu actuel (tag dans le titre). Les notes
 * de version sont les callouts `[!info]` dont le titre porte une version
 * surlignée.
 */
.update-tag { display: none; }
.update-item { position: relative; }

:root[data-variant] .update-item h5 > code:first-child { display: none; }
:root[data-variant] .update-item h5 {
  margin: 0 0 0.3em;
  padding: 0;
  font-size: 1.12em;
  font-weight: 650;
  line-height: 1.3;
}
:root[data-variant] .update-item h5 a.internal-link { color: var(--text-normal); text-decoration: none; }
:root[data-variant] .update-item h5 a.internal-link:hover { color: var(--text-accent); }
:root[data-variant] .update-item > p { margin: 0 0 0.6em; }

/* Bouton → lien discret, avec la flèche des liens sortants. */
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="button"] { display: inline-block; margin: 0.15em 1.2em 0.35em 0; }
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="button"] .callout-title-inner a {
  padding: 0 !important; border: none; box-shadow: none; background: none;
  color: var(--text-muted); font-size: 0.92em;
}
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="button"] .callout-title-inner a::after { content: " ↗"; color: var(--text-faint); }
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="button"] .callout-title-inner a:hover { color: var(--text-normal); }

/* Notes de version → une ligne par version, sans encadré. */
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="info"]:has(> .callout-title mark) {
  margin: 0.45em 0; padding: 0 0 0 12px; border: none; border-inline-start: 2px solid var(--background-modifier-border); border-radius: 0; background: none;
  --co-indent: 0px;
}
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="info"]:has(> .callout-title mark) .callout-icon { display: none; }
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="info"]:has(> .callout-title mark) .callout-title-inner { color: var(--text-muted); font-weight: 500; font-size: 0.85em; }
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="info"]:has(> .callout-title mark) .callout-content { font-size: 0.95em; color: var(--text-muted); }
:root[data-variant]:not([data-variant="card"]) .update-item .callout[data-callout="info"]:has(> .callout-title mark) .callout-content > :first-child { margin-top: 0.1em; }

/* --- 2 · Quiet : le tag en sur-titre ------------------------------------- */
:root[data-variant="quiet"] .update-item { margin: 2.4em 0 0; }
:root[data-variant="quiet"] .update-item:first-of-type { margin-top: 0.4em; }
:root[data-variant="quiet"] .update-tag {
  display: block; margin-bottom: 0.45em;
  font: 600 11px/1.2 var(--font-interface); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint);
}

/* --- 3 · Changelog : le tag dans une marge ------------------------------- */
:root[data-variant="changelog"] .update-item {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 20px; align-items: start;
  padding: 1.25em 0; border-top: var(--border-width) solid var(--background-modifier-border);
}
:root[data-variant="changelog"] .update-item:first-of-type { border-top: none; padding-top: 0.2em; }
:root[data-variant="changelog"] .update-item > * { grid-column: 2; }
:root[data-variant="changelog"] .update-tag {
  display: block; grid-column: 1; grid-row: 1 / span 30; padding-top: 0.3em;
  font: 12px/1.35 var(--font-interface); color: var(--text-muted);
}
:root[data-variant="changelog"] .update-action { display: block; font-weight: 600; color: var(--text-normal); }
@media (max-width: 640px) {
  :root[data-variant="changelog"] .update-item { grid-template-columns: minmax(0, 1fr); }
  :root[data-variant="changelog"] .update-tag { grid-column: 1; grid-row: auto; padding: 0 0 0.3em; }
  :root[data-variant="changelog"] .update-action { display: inline; }
}

/* --- 4 · Card : un cadre par item, versions en pastilles ----------------- */
:root[data-variant="card"] .update-item {
  margin: 0 0 14px; padding: 16px 18px 12px;
  border: var(--border-width) solid var(--background-modifier-border); border-radius: var(--radius-l);
}
:root[data-variant="card"] .update-item h5 { padding-inline-end: 11em; }
:root[data-variant="card"] .update-tag {
  display: block; position: absolute; top: 17px; right: 16px;
  padding: 1px 9px; border-radius: 2em; background: var(--background-modifier-hover);
  font: 500 11.5px/1.6 var(--font-interface); color: var(--text-muted);
}
:root[data-variant="card"] .update-item .callout[data-callout="button"] { display: inline-block; margin: 0.2em 0.4em 0.2em 0; }
:root[data-variant="card"] .update-item .callout[data-callout="button"] .callout-title-inner a { font-size: 0.85em; padding: 0.2em 0.6em !important; }
:root[data-variant="card"] .update-item .callout[data-callout="info"]:has(> .callout-title mark) {
  display: inline-block; margin: 0.2em 0.3em 0.2em 0; padding: 0.15em 0.55em; border: none; border-radius: var(--radius-s);
  vertical-align: middle;
}
:root[data-variant="card"] .update-item .callout[data-callout="info"]:has(> .callout-title mark) :is(.callout-icon, .callout-content) { display: none; }
:root[data-variant="card"] .update-item .callout[data-callout="info"]:has(> .callout-title mark) .callout-title-inner { font-size: 0; }
:root[data-variant="card"] .update-item .callout[data-callout="info"]:has(> .callout-title mark) .callout-title-inner :is(mark, a) { font-size: 12.5px; }
:root[data-variant="card"] .update-item .callout[data-callout="info"]:has(> .callout-title mark) .callout-title-inner a { margin-left: 0.4em; }
:root[data-variant="card"] .update-item .callout[data-callout="info"]:has(> .callout-title mark) .callout-title-inner mark { background: none; padding: 0; }