/* =============================================================================
   Onagre — documentation (UIUX-02, docs/design/WEBSITE-DOCUMENTATION-REDESIGN-2026.md)

   Prolonge le design system de l'App (Ordalie.Onagre.UI : tokens.css, base.css, components.css). La documentation
   privilégie la lecture : colonne de texte limitée (~70 caractères), interlignage confortable, navigation latérale
   dense, sommaire de page. Aucune couleur littérale hors de la coloration syntaxique (dérivée des états).
   ============================================================================= */
@layer d-docs {

:root {
    --d-header-h: 3.5rem;
    --d-sidebar-w: 17rem;
    --d-toc-w: 13.5rem;
    --d-measure: 46rem;

    /* Coloration syntaxique (thème clair) — teintes reprises des états et des séries de graphiques */
    --d-tok-comment: var(--o-text-3);
    --d-tok-string: oklch(0.47 0.12 152);
    --d-tok-keyword: oklch(0.48 0.16 300);
    --d-tok-command: oklch(0.47 0.16 263);
    --d-tok-variable: oklch(0.5 0.14 50);
    --d-tok-number: oklch(0.52 0.13 70);
    --d-tok-key: oklch(0.47 0.16 263);
    --d-tok-section: oklch(0.5 0.17 25);
    --d-code-bg: var(--o-surface);
}
[data-theme="dark"] {
    --d-tok-string: oklch(0.8 0.12 152);
    --d-tok-keyword: oklch(0.8 0.11 300);
    --d-tok-command: oklch(0.8 0.1 250);
    --d-tok-variable: oklch(0.82 0.11 60);
    --d-tok-number: oklch(0.85 0.11 80);
    --d-tok-key: oklch(0.8 0.1 250);
    --d-tok-section: oklch(0.8 0.11 30);
    --d-code-bg: var(--o-surface-2);
}

html { scroll-padding-top: calc(var(--d-header-h) + 1.5rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.d-site { font-size: 1rem; background: var(--o-bg); color: var(--o-text); }

/* ------------------------------------------------------------------ En-tête */
.d-header {
    position: sticky; top: 0; z-index: var(--o-z-sticky);
    height: var(--d-header-h);
    background: color-mix(in oklch, var(--o-bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--o-border-subtle);
}
.d-header__inner { height: 100%; display: flex; align-items: center; gap: var(--o-space-4); padding: 0 var(--o-space-5); }
.d-header__start { display: flex; align-items: center; gap: var(--o-space-2); width: calc(var(--d-sidebar-w) - var(--o-space-5)); flex-shrink: 0; }
.d-brand { display: inline-flex; align-items: center; gap: var(--o-space-2-5); color: var(--o-text); }
.d-brand:hover { color: var(--o-text); }
.d-brand__tag { padding: 0.1rem 0.45rem; border-radius: var(--o-radius-sm); border: 1px solid var(--o-border); font-size: var(--o-text-xs); font-weight: var(--o-weight-semibold); color: var(--o-text-2); }
.d-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--o-space-3); }
.d-header__link { font-size: var(--o-text-sm); font-weight: var(--o-weight-medium); color: var(--o-text-2); text-decoration: none; }
.d-header__link:hover { color: var(--o-text); }
.d-menu-btn, .d-search-link { display: none !important; }

/* Recherche : champ de l'en-tête (formulaire GET, fonctionne sans script) + résultats en direct (docs.js) */
.d-search { position: relative; flex: 1; max-width: 30rem; }
.d-search__icon { position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%; color: var(--o-text-3); pointer-events: none; }
.d-search__input {
    width: 100%; height: 2.25rem; padding: 0 2.5rem 0 2.25rem;
    border-radius: var(--o-radius-md); border: 1px solid var(--o-border);
    background: var(--o-surface); color: var(--o-text); font-size: var(--o-text-sm);
    box-shadow: var(--o-shadow-xs);
    transition: border-color var(--o-duration-fast), box-shadow var(--o-duration-fast);
}
.d-search__input::placeholder { color: var(--o-text-3); }
.d-search__input:hover { border-color: var(--o-border-strong); }
.d-search__input:focus { outline: none; border-color: var(--o-border-strong); box-shadow: 0 0 0 3px color-mix(in oklch, var(--o-focus) 35%, transparent); }
.d-search__input::-webkit-search-cancel-button { display: none; }
.d-search__kbd { position: absolute; right: 0.6rem; top: 50%; translate: 0 -50%; pointer-events: none; }
.d-search:focus-within .d-search__kbd { display: none; }
.d-search__panel {
    position: absolute; top: calc(100% + 0.5rem); left: 0; width: min(36rem, calc(100vw - 2rem));
    max-height: min(32rem, 70vh); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--o-space-2); border-radius: var(--o-radius-xl);
    background: var(--o-surface-raised); border: 1px solid var(--o-border); box-shadow: var(--o-shadow-lg);
    z-index: var(--o-z-dropdown);
}
.d-search__option { display: flex; flex-direction: column; gap: 2px; padding: var(--o-space-2-5) var(--o-space-3); border-radius: var(--o-radius-md); color: var(--o-text); text-decoration: none; }
.d-search__option[aria-selected="true"], .d-search__option:hover { background: var(--o-surface-hover); color: var(--o-text); }
.d-search__path { font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--o-text-3); }
.d-search__name { font-size: var(--o-text-sm); font-weight: var(--o-weight-semibold); }
.d-search__snippet { font-size: var(--o-text-xs); color: var(--o-text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-search__snippet mark, .d-result__snippet mark { background: color-mix(in oklch, var(--o-brand-primrose) 40%, transparent); color: inherit; border-radius: 2px; }
.d-search__empty, .d-search__all { display: block; padding: var(--o-space-3); font-size: var(--o-text-sm); color: var(--o-text-3); }
.d-search__all { border-top: 1px solid var(--o-border-subtle); margin-top: var(--o-space-1); color: var(--o-text-2); }

/* ------------------------------------------------------------------ Coquille : navigation + contenu */
.d-shell { display: grid; grid-template-columns: var(--d-sidebar-w) minmax(0, 1fr); min-height: calc(100dvh - var(--d-header-h)); }
.d-sidebar {
    position: sticky; top: var(--d-header-h);
    height: calc(100dvh - var(--d-header-h));
    display: flex; flex-direction: column;
    background: var(--o-bg-sidebar);
    border-right: 1px solid var(--o-border-subtle);
}
.d-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--o-space-4) var(--o-space-3) var(--o-space-6); scrollbar-width: thin; }
.d-nav__section + .d-nav__section { margin-top: var(--o-space-1); }
.d-nav__title {
    list-style: none; display: flex; align-items: center; gap: var(--o-space-2);
    padding: var(--o-space-2); border-radius: var(--o-radius-md);
    font-size: var(--o-text-sm); font-weight: var(--o-weight-semibold); color: var(--o-text);
    cursor: pointer; user-select: none;
}
.d-nav__title::-webkit-details-marker { display: none; }
.d-nav__title:hover { background: var(--o-surface-hover); }
.d-nav__title > .o-icon:first-child { color: var(--o-text-3); }
.d-nav__chevron { margin-left: auto; color: var(--o-text-3); transition: transform var(--o-duration-base) var(--o-ease-out); transform: rotate(-90deg); }
.d-nav__section[open] .d-nav__chevron { transform: none; }
.d-nav__list { list-style: none; padding: 0 0 var(--o-space-2) 0; margin-left: calc(var(--o-space-2) + 0.5rem); border-left: 1px solid var(--o-border-subtle); }
.d-nav__group { padding: var(--o-space-2) var(--o-space-3) var(--o-space-1); font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--o-text-3); }
.d-nav__link {
    position: relative; display: block; margin-left: -1px;
    padding: 0.3rem var(--o-space-3);
    border-left: 1px solid transparent;
    font-size: var(--o-text-sm); color: var(--o-text-2); text-decoration: none; line-height: 1.4;
}
.d-nav__link--nested { padding-left: var(--o-space-5); }
.d-nav__link:hover { color: var(--o-text); border-left-color: var(--o-border-strong); }
.d-nav__link[aria-current="page"] { color: var(--o-text); font-weight: var(--o-weight-semibold); border-left-color: var(--o-accent); background: linear-gradient(90deg, var(--o-surface-active), transparent); }
.d-sidebar__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-3); padding: var(--o-space-3) var(--o-space-4); border-top: 1px solid var(--o-border-subtle); }
.d-lang { display: inline-flex; gap: 2px; font-size: var(--o-text-xs); font-weight: var(--o-weight-semibold); }
.d-lang a { padding: 0.25rem 0.4rem; border-radius: var(--o-radius-sm); color: var(--o-text-3); text-decoration: none; letter-spacing: 0.04em; }
.d-lang a:hover { color: var(--o-text); }
.d-lang a[aria-current="true"] { color: var(--o-text); background: var(--o-surface-hover); }
.d-scrim { display: none; }

.d-main { min-width: 0; display: flex; flex-direction: column; }
.d-main:focus { outline: none; }

/* ------------------------------------------------------------------ Page : article + sommaire */
.d-page {
    flex: 1;
    display: grid; grid-template-columns: minmax(0, var(--d-measure)) var(--d-toc-w);
    justify-content: center; gap: clamp(2rem, 4vw, 4.5rem);
    padding: var(--o-space-10) clamp(1rem, 4vw, 3rem) var(--o-space-16);
}
.d-page--home { padding-top: var(--o-space-6); }
.d-page:not(:has(.d-toc)) { grid-template-columns: minmax(0, var(--d-measure)); }
.d-article { min-width: 0; }

.d-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-1-5); margin-bottom: var(--o-space-3); font-size: var(--o-text-sm); color: var(--o-text-3); }
.d-crumbs a { color: var(--o-text-3); text-decoration: none; }
.d-crumbs a:hover { color: var(--o-text); }
.d-crumbs .o-icon { color: var(--o-text-disabled); }
.d-title { font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem); font-weight: var(--o-weight-bold); letter-spacing: -0.03em; line-height: 1.12; margin-bottom: var(--o-space-6); }
.d-title--section { font-size: 1.75rem; padding-top: var(--o-space-8); border-top: 1px solid var(--o-border-subtle); }

/* Sommaire (« On this page ») : collant, section active surlignée par docs.js */
.d-toc { position: sticky; top: calc(var(--d-header-h) + var(--o-space-10)); align-self: start; max-height: calc(100dvh - var(--d-header-h) - 5rem); overflow-y: auto; }
.d-toc__title { font-size: var(--o-text-xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--o-text-3); margin-bottom: var(--o-space-3); }
.d-toc__list { list-style: none; padding: 0; border-left: 1px solid var(--o-border-subtle); }
.d-toc__item a { display: block; margin-left: -1px; padding: 0.3rem 0 0.3rem var(--o-space-3); border-left: 1px solid transparent; font-size: var(--o-text-sm); line-height: 1.35; color: var(--o-text-3); text-decoration: none; }
.d-toc__item--3 a { padding-left: var(--o-space-6); font-size: var(--o-text-xs); }
.d-toc__item a:hover { color: var(--o-text); }
.d-toc__item a[aria-current="true"] { color: var(--o-text); border-left-color: var(--o-accent); font-weight: var(--o-weight-medium); }
.d-toc-mobile { display: none; margin-bottom: var(--o-space-6); border: 1px solid var(--o-border-subtle); border-radius: var(--o-radius-lg); background: var(--o-surface); }
.d-toc-mobile > summary { list-style: none; display: flex; align-items: center; gap: var(--o-space-2); padding: var(--o-space-3) var(--o-space-4); font-size: var(--o-text-sm); font-weight: var(--o-weight-medium); cursor: pointer; }
.d-toc-mobile > summary::-webkit-details-marker { display: none; }
.d-toc-mobile > summary .o-icon:last-child { margin-left: auto; color: var(--o-text-3); transition: transform var(--o-duration-base); }
.d-toc-mobile[open] > summary .o-icon:last-child { transform: rotate(180deg); }
.d-toc-mobile .d-toc__list { margin: 0 var(--o-space-4) var(--o-space-3); }

/* ------------------------------------------------------------------ Typographie de lecture */
.d-prose { font-size: 1rem; line-height: 1.75; color: var(--o-text-2); overflow-wrap: break-word; }
.d-prose > * + * { margin-top: 1.1em; }
.d-prose h2, .d-prose h3, .d-prose h4 { color: var(--o-text); position: relative; scroll-margin-top: calc(var(--d-header-h) + 1.5rem); }
.d-prose h2 { margin-top: 2.6em; font-size: 1.5rem; letter-spacing: -0.022em; line-height: 1.25; }
.d-prose h3 { margin-top: 2.1em; font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1.3; }
.d-prose h4 { margin-top: 1.8em; font-size: 1.0625rem; }
.d-prose h2 + *, .d-prose h3 + *, .d-prose h4 + * { margin-top: 0.7em; }
.d-prose > :first-child { margin-top: 0; }
.doc-anchor { margin-left: 0.4em; color: var(--o-text-disabled); text-decoration: none !important; opacity: 0; transition: opacity var(--o-duration-fast); font-weight: var(--o-weight-regular); }
.d-prose :is(h2, h3, h4):hover .doc-anchor, .doc-anchor:focus-visible { opacity: 1; }
.doc-anchor:hover { color: var(--o-text-2); }
.d-prose strong { color: var(--o-text); }
.d-prose a:not([class]) { color: var(--o-text); }
.d-prose ul, .d-prose ol { padding-left: 1.35em; }
.d-prose li + li { margin-top: 0.4em; }
.d-prose li > ul, .d-prose li > ol { margin-top: 0.4em; }
.d-prose li::marker { color: var(--o-text-3); }
.d-prose hr { margin-block: 2.5em; }
.d-prose blockquote { padding: 0.25em 0 0.25em 1.1em; border-left: 3px solid var(--o-border-strong); color: var(--o-text-2); }
.d-prose code { font-size: 0.85em; padding: 0.12em 0.35em; overflow-wrap: anywhere; }
.d-prose img { max-width: 100%; height: auto; border-radius: var(--o-radius-lg); border: 1px solid var(--o-border-subtle); background: oklch(1 0 0); }
.d-prose a > img { border: 0; background: none; border-radius: 0; }
.d-prose input[type="checkbox"] { margin-right: 0.4em; }

/* Tableaux : défilement horizontal propre, en-têtes contrastés, lisibles en sombre */
.doc-table { overflow-x: auto; border: 1px solid var(--o-border-subtle); border-radius: var(--o-radius-lg); background: var(--o-surface); }
.doc-table:focus-visible { outline-offset: 2px; }
.doc-table table { width: 100%; font-size: var(--o-text-sm); line-height: 1.5; }
.doc-table th, .doc-table td { padding: 0.6rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--o-border-subtle); }
.doc-table th { background: var(--o-surface-2); color: var(--o-text); font-weight: var(--o-weight-semibold); white-space: nowrap; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { color: var(--o-text); min-width: 9rem; }

/* Encadrés (note, astuce, avertissement, danger) : teinte d'état discrète, jamais une boîte criarde */
.doc-callout {
    --c-fg: var(--o-info-fg); --c-line: var(--o-info-line); --c-soft: var(--o-info-soft);
    padding: 0.9rem 1.1rem; border-radius: var(--o-radius-lg);
    border: 1px solid color-mix(in oklch, var(--c-line) 70%, var(--o-border-subtle));
    background: color-mix(in oklch, var(--c-soft) 55%, var(--o-surface));
    font-size: 0.9375rem; line-height: 1.65;
}
.doc-callout--ok { --c-fg: var(--o-ok-fg); --c-line: var(--o-ok-line); --c-soft: var(--o-ok-soft); }
.doc-callout--warn { --c-fg: var(--o-warn-fg); --c-line: var(--o-warn-line); --c-soft: var(--o-warn-soft); }
.doc-callout--danger { --c-fg: var(--o-danger-fg); --c-line: var(--o-danger-line); --c-soft: var(--o-danger-soft); }
.doc-callout--neutral { --c-fg: var(--o-text-2); --c-line: var(--o-border); --c-soft: var(--o-surface-2); }
.doc-callout > * + * { margin-top: 0.6em; }
.doc-callout__title { display: flex; align-items: center; gap: var(--o-space-2); font-weight: var(--o-weight-semibold); color: var(--c-fg); }
.doc-callout__title .o-icon { flex-shrink: 0; }

/* Blocs de code : barre (langage, Copier), coloration serveur, défilement horizontal, jamais de retour à la ligne */
.doc-code { border: 1px solid var(--o-border); border-radius: var(--o-radius-lg); background: var(--d-code-bg); overflow: hidden; box-shadow: var(--o-shadow-xs); }
.doc-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-2); height: 2.25rem; padding: 0 var(--o-space-2) 0 var(--o-space-3); background: var(--o-surface-2); border-bottom: 1px solid var(--o-border-subtle); }
.doc-code__lang { display: inline-flex; align-items: center; gap: var(--o-space-1-5); font-size: var(--o-text-xs); font-weight: var(--o-weight-medium); color: var(--o-text-3); }
.doc-code__copy {
    display: inline-flex; align-items: center; gap: var(--o-space-1-5);
    height: 1.625rem; padding: 0 var(--o-space-2); border-radius: var(--o-radius-sm);
    font-size: var(--o-text-xs); font-weight: var(--o-weight-medium); color: var(--o-text-3);
    transition: color var(--o-duration-fast), background-color var(--o-duration-fast);
}
.doc-code__copy:hover { color: var(--o-text); background: var(--o-surface-hover); }
.doc-code__copy[data-state="copied"] { color: var(--o-ok-fg); }
.doc-code pre { margin: 0; padding: 0.95rem 1.1rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.7; tab-size: 4; color: var(--o-text); }
.doc-code pre:focus-visible { outline-offset: -2px; }
.doc-code pre code { padding: 0; border: 0; background: none; font-size: inherit; white-space: pre; overflow-wrap: normal; color: inherit; }
.tok-comment { color: var(--d-tok-comment); font-style: italic; }
.tok-string { color: var(--d-tok-string); }
.tok-keyword { color: var(--d-tok-keyword); }
.tok-command { color: var(--d-tok-command); font-weight: var(--o-weight-medium); }
.tok-variable { color: var(--d-tok-variable); }
.tok-number { color: var(--d-tok-number); }
.tok-key { color: var(--d-tok-key); }
.tok-option { color: var(--o-text-2); }
.tok-section, .tok-tag { color: var(--d-tok-section); }

/* Onglets (Linux x64 / ARM64…) : liste d'onglets construite par docs.js ; sans script, panneaux titrés empilés */
.doc-tabs { border: 1px solid var(--o-border-subtle); border-radius: var(--o-radius-lg); padding: var(--o-space-3); background: var(--o-surface); }
.doc-tabs > .doc-tab + .doc-tab { margin-top: var(--o-space-4); }
.doc-tab::before { content: attr(data-tab-title); display: block; margin-bottom: var(--o-space-2); font-size: var(--o-text-xs); font-weight: var(--o-weight-semibold); color: var(--o-text-2); }
.doc-tab > * + * { margin-top: 0.9em; }
.doc-tabs[data-ready] { padding: 0; }
.doc-tabs[data-ready] > .doc-tab { margin: 0; padding: var(--o-space-3); }
.doc-tabs[data-ready] > .doc-tab::before { content: none; }
.doc-tabs__list { display: flex; gap: var(--o-space-1); padding: 0 var(--o-space-2); border-bottom: 1px solid var(--o-border-subtle); overflow-x: auto; }
.doc-tabs__tab { position: relative; padding: 0.6rem 0.75rem; font-size: var(--o-text-sm); font-weight: var(--o-weight-medium); color: var(--o-text-3); white-space: nowrap; }
.doc-tabs__tab:hover { color: var(--o-text); }
.doc-tabs__tab[aria-selected="true"] { color: var(--o-text); }
.doc-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--o-accent); }

/* Pages précédente / suivante */
.d-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--o-space-4); margin-top: var(--o-space-16); padding-top: var(--o-space-8); border-top: 1px solid var(--o-border-subtle); }
.d-pager__link { display: flex; flex-direction: column; gap: var(--o-space-1); padding: var(--o-space-4); border-radius: var(--o-radius-lg); border: 1px solid var(--o-border-subtle); background: var(--o-surface); text-decoration: none; color: var(--o-text); transition: border-color var(--o-duration-fast); }
.d-pager__link:hover { border-color: var(--o-border-strong); color: var(--o-text); }
.d-pager__link--next { text-align: right; align-items: flex-end; grid-column: 2; }
.d-pager__dir { display: inline-flex; align-items: center; gap: var(--o-space-1); font-size: var(--o-text-xs); color: var(--o-text-3); }
.d-pager__title { font-weight: var(--o-weight-semibold); }

/* ------------------------------------------------------------------ Accueil */
.d-home { grid-column: 1 / -1; padding-top: var(--o-space-6); }
.d-home__hero { display: flex; flex-direction: column; gap: var(--o-space-4); max-width: 44rem; }
.d-home__eyebrow { font-size: var(--o-text-xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--o-text-3); }
.d-home__title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: var(--o-weight-bold); letter-spacing: -0.035em; line-height: 1.06; }
.d-home__lead { font-size: 1.125rem; color: var(--o-text-2); line-height: 1.55; }
.d-home__search { display: flex; align-items: center; gap: var(--o-space-2); padding: 0.375rem 0.375rem 0.375rem 0.9rem; margin-top: var(--o-space-2); border-radius: var(--o-radius-lg); border: 1px solid var(--o-border); background: var(--o-surface); box-shadow: var(--o-shadow-sm); }
.d-home__search:focus-within { border-color: var(--o-border-strong); box-shadow: 0 0 0 3px color-mix(in oklch, var(--o-focus) 35%, transparent); }
.d-home__search > .o-icon { color: var(--o-text-3); }
.d-home__search input { flex: 1; min-width: 0; height: 2.25rem; border: 0; background: none; font-size: 1rem; color: var(--o-text); }
.d-home__search input:focus { outline: none; }
.d-home__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-space-3); margin-top: var(--o-space-10); }
.d-home__card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; gap: var(--o-space-1) var(--o-space-3); padding: var(--o-space-4); border-radius: var(--o-radius-lg); border: 1px solid var(--o-border-subtle); background: var(--o-surface); color: var(--o-text); text-decoration: none; transition: border-color var(--o-duration-fast), box-shadow var(--o-duration-fast); }
.d-home__card:hover { border-color: var(--o-border-strong); box-shadow: var(--o-shadow-sm); color: var(--o-text); }
.d-home__icon { grid-row: span 3; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--o-radius-md); background: var(--o-surface-2); border: 1px solid var(--o-border-subtle); color: var(--o-text-2); }
.d-home__name { font-weight: var(--o-weight-semibold); }
.d-home__desc { font-size: var(--o-text-sm); color: var(--o-text-3); line-height: 1.45; }
.d-home__count { font-size: var(--o-text-xs); color: var(--o-text-3); align-self: end; }

/* Résultats (page de recherche) et page introuvable */
.d-search-page__form { margin-bottom: var(--o-space-6); }
.d-search-page__count { font-size: var(--o-text-sm); color: var(--o-text-3); margin-bottom: var(--o-space-3); }
.d-results { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--o-border-subtle); }
.d-result { display: flex; flex-direction: column; gap: 2px; padding: var(--o-space-4) 0; border-bottom: 1px solid var(--o-border-subtle); text-decoration: none; color: var(--o-text); }
.d-result:hover .d-result__title { text-decoration: underline; text-underline-offset: 3px; }
.d-result__path { font-size: var(--o-text-xs); color: var(--o-text-3); }
.d-result__title { font-weight: var(--o-weight-semibold); font-size: 1.0625rem; }
.d-result__snippet { font-size: var(--o-text-sm); color: var(--o-text-2); }
.d-lost { display: flex; flex-direction: column; gap: var(--o-space-4); padding-top: var(--o-space-10); }
.d-lost .d-title { margin-bottom: 0; }
.d-lost__code { font-family: var(--o-font-mono); font-size: var(--o-text-sm); color: var(--o-text-3); }
.d-lost__text { color: var(--o-text-2); font-size: 1.0625rem; }

/* Pied de page */
.d-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-space-3); margin-top: auto; padding: var(--o-space-6) clamp(1rem, 4vw, 3rem); border-top: 1px solid var(--o-border-subtle); font-size: var(--o-text-sm); color: var(--o-text-3); }
.d-footer__links { display: flex; flex-wrap: wrap; gap: var(--o-space-4); }
.d-footer__links a { color: var(--o-text-3); text-decoration: none; }
.d-footer__links a:hover { color: var(--o-text); }

/* ------------------------------------------------------------------ Illustrations (DOC-MEDIA-01)
   Captures de la vraie App en démonstration, en thème clair (celui de la documentation par défaut et de la Demo) : un
   cadre fin et une ombre légère les posent comme un écran. En thème sombre, elles sont légèrement atténuées pour ne pas
   éblouir ; l'agrandissement les montre telles quelles. Dimensions intrinsèques fournies : aucun décalage. */
.d-prose .doc-figure { margin: 1.6em 0 1.8em; }
.doc-figure__frame {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--o-radius-lg); border: 1px solid var(--o-border); background: oklch(0.982 0.004 80);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 8px 24px -14px oklch(0 0 0 / 0.18);
}
:root[data-theme="dark"] .doc-figure__frame { box-shadow: none; }
:root[data-theme="dark"] .d-prose .doc-figure img, :root[data-theme="dark"] .doc-figure video { filter: brightness(0.88) contrast(1.02); }
.d-prose .doc-figure img, .doc-figure video { display: block; width: 100%; height: auto; border: 0; border-radius: 0; background: none; }
a.doc-figure__frame { cursor: zoom-in; }
a.doc-figure__frame:focus-visible { outline: 2px solid var(--o-focus); outline-offset: 3px; }
.doc-figure__zoom, .doc-video__toggle {
    position: absolute; right: 0.6rem; bottom: 0.6rem; display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid oklch(1 0 0 / 0.16);
    background: oklch(0.2 0.01 70 / 0.82); color: oklch(0.96 0.005 85); backdrop-filter: blur(6px);
}
.doc-figure__zoom { opacity: 0; transition: opacity var(--o-duration-fast); pointer-events: none; }
a.doc-figure__frame:hover .doc-figure__zoom, a.doc-figure__frame:focus-visible .doc-figure__zoom { opacity: 1; }
.doc-video__toggle { cursor: pointer; }
.doc-video__toggle:focus-visible { outline: 2px solid var(--o-focus); outline-offset: 2px; }
.doc-video__icon--pause { display: none; }
.doc-figure[data-playing] .doc-video__icon--pause { display: inline-grid; }
.doc-figure[data-playing] .doc-video__icon--play { display: none; }
.doc-figure figcaption { margin-top: 0.65em; font-size: var(--o-text-sm); line-height: 1.55; color: var(--o-text-3); }

/* Schémas conceptuels (DOC-CONTENT-VNEXT) : SVG insérés dans la page, colorés par les tokens du thème actif — aucun
   fond opaque, lisibles en clair comme en sombre. Classes : dg-zone (périmètre), dg-box (élément), dg-ok/warn/danger/info
   (états), dg-flow (flèche), dg-title / dg-label / dg-note (textes). */
.doc-diagram { padding: var(--o-space-5) var(--o-space-4); border: 1px solid var(--o-border-subtle); border-radius: var(--o-radius-lg); background: var(--o-surface); }
.doc-diagram svg { display: block; width: 100%; height: auto; max-width: 46rem; margin: 0 auto; font-family: var(--o-font-sans, Inter, system-ui, sans-serif); }
.doc-diagram .dg-zone { fill: var(--o-surface-2); stroke: var(--o-border-strong); stroke-width: 1.25; stroke-dasharray: 5 4; }
.doc-diagram .dg-box { fill: var(--o-surface); stroke: var(--o-border-strong); stroke-width: 1.25; }
.doc-diagram .dg-accent { fill: var(--o-accent-soft); stroke: var(--o-accent); stroke-width: 1.5; }
.doc-diagram .dg-ok { fill: var(--o-ok-soft); stroke: var(--o-ok-line); stroke-width: 1.5; }
.doc-diagram .dg-warn { fill: var(--o-warn-soft); stroke: var(--o-warn); stroke-width: 1.5; }
.doc-diagram .dg-warn-dashed { fill: var(--o-warn-soft); stroke: var(--o-warn); stroke-width: 1.5; stroke-dasharray: 5 3; }
.doc-diagram .dg-danger { fill: var(--o-danger-soft); stroke: var(--o-danger); stroke-width: 2; }
.doc-diagram .dg-info { fill: var(--o-info-soft, var(--o-surface-2)); stroke: var(--o-info); stroke-width: 1.5; }
.doc-diagram .dg-flow { fill: none; stroke: var(--o-text-3); stroke-width: 1.5; }
.doc-diagram .dg-flow-warn { fill: none; stroke: var(--o-warn); stroke-width: 2; }
.doc-diagram .dg-flow-dashed { fill: none; stroke: var(--o-text-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.doc-diagram .dg-head { fill: var(--o-text-3); }
.doc-diagram .dg-head-warn { fill: var(--o-warn); }
.doc-diagram .dg-title { fill: var(--o-text); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.doc-diagram .dg-label { fill: var(--o-text-2); font-size: 13px; }
.doc-diagram .dg-note { fill: var(--o-text-3); font-size: 12px; }
.doc-diagram .dg-zone-title { fill: var(--o-text-3); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.doc-diagram .dg-ok-text { fill: var(--o-ok-fg); }
.doc-diagram .dg-warn-text { fill: var(--o-warn-fg); }
.doc-diagram .dg-danger-text { fill: var(--o-danger-fg); }
.doc-diagram .dg-dot-ok { fill: var(--o-ok); }
.doc-diagram .dg-dot-warn { fill: var(--o-warn); }
.doc-diagram .dg-dot-danger { fill: var(--o-danger); }
.doc-diagram .dg-dot-info { fill: var(--o-info); }

/* Agrandissement : <dialog> natif (focus piégé, Échap, retour du focus), l'image à sa plus grande taille utile. */
.doc-lightbox {
    width: min(96vw, 112rem); max-width: none; max-height: 94dvh; padding: 0; border: 0; background: transparent;
    color: oklch(0.96 0.005 85); overflow: visible;
}
.doc-lightbox::backdrop { background: oklch(0.12 0.01 60 / 0.86); backdrop-filter: blur(3px); }
.doc-lightbox__body { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.doc-lightbox img {
    display: block; width: auto; height: auto; max-width: 100%; max-height: calc(94dvh - 3.5rem); margin: 0 auto;
    border-radius: var(--o-radius-lg); border: 1px solid oklch(1 0 0 / 0.14); background: oklch(0.982 0.004 80);
}
.doc-lightbox__bar { display: flex; align-items: center; gap: var(--o-space-3); margin-top: var(--o-space-2); }
.doc-lightbox__caption { flex: 1; font-size: var(--o-text-sm); color: oklch(0.84 0.015 80); }
.doc-lightbox__close {
    display: inline-flex; align-items: center; gap: var(--o-space-1-5); padding: 0.4rem 0.75rem; border-radius: 999px;
    border: 1px solid oklch(1 0 0 / 0.18); background: oklch(0.22 0.01 70); color: inherit; font: inherit; font-size: var(--o-text-sm); cursor: pointer;
}
.doc-lightbox__close:focus-visible { outline: 2px solid var(--o-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ Adaptatif */
@media (max-width: 80rem) {
    .d-page { grid-template-columns: minmax(0, var(--d-measure)); }
    .d-toc { display: none; }
    .d-toc-mobile { display: block; }
}
@media (max-width: 64rem) {
    .d-shell { grid-template-columns: minmax(0, 1fr); }
    .d-header__start { width: auto; }
    .d-menu-btn { display: inline-flex !important; }
    .d-sidebar {
        position: fixed; top: var(--d-header-h); left: 0; bottom: 0; height: auto; z-index: var(--o-z-overlay);
        width: min(20rem, 86vw);
        transform: translateX(-100%); visibility: hidden;
        transition: transform var(--o-duration-slow) var(--o-ease-out), visibility 0s linear var(--o-duration-slow);
        box-shadow: var(--o-shadow-lg);
    }
    :root[data-sidebar-open] .d-sidebar { transform: none; visibility: visible; transition-delay: 0s; }
    :root[data-sidebar-open] .d-scrim { display: block; position: fixed; inset: var(--d-header-h) 0 0 0; z-index: calc(var(--o-z-overlay) - 1); background: var(--o-scrim); }
    :root[data-sidebar-open] { overflow: hidden; }
    .d-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
    .d-header__inner { padding: 0 var(--o-space-3); gap: var(--o-space-2); }
    .d-header__link, .d-header__app { display: none; }
    .d-page { padding-top: var(--o-space-6); }
    .d-home__grid { grid-template-columns: minmax(0, 1fr); }
    .d-pager { grid-template-columns: minmax(0, 1fr); }
    .d-pager__link--next { grid-column: auto; }
    .d-prose { font-size: 0.96875rem; }
}
@media (max-width: 40rem) {
    .d-search { display: none; }
    .d-search-link { display: inline-flex !important; margin-left: auto; }
    .d-header__end { margin-left: auto; }
}

} /* @layer d-docs */