/* ============================================================
   DOCS-UX1 — espace Documentation : workspace (sidebar du module + contenu), vue de lecture, typographie PARTAGÉE
   entre lecture et édition (.docs-prose). Uniquement les jetons du thème (crudia-tokens.css) ; aucun style en ligne.
   ============================================================ */

:root {
    --docs-sidebar-width: 272px;
    --docs-reading-width: 760px;
    --docs-wide-width: 1120px;
    --docs-toc-width: 232px;
    --docs-row-height: 30px;
    --docs-hover: rgba(20, 31, 41, 0.05);
    --docs-active: var(--cr-color-selected);
    --docs-prose-size: 16px;
    --docs-prose-line: 1.7;
}

/* ---------- Workspace ---------- */
.cr-shell__content > .docs-ws { flex: 1 1 auto; min-height: 0; }

.docs-ws {
    display: flex;
    min-height: 0;
    min-width: 0;
    height: 100%;
    background: var(--cr-color-surface);
}

.docs-ws__sidebar {
    width: var(--docs-sidebar-width);
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--cr-color-surface-subtle);
    border-right: 1px solid var(--cr-color-border-subtle);
}

.docs-ws__main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--cr-color-surface);
    scroll-padding-top: 64px;
}

.docs-ws__scrim { display: none; }

/* ---------- Sidebar ---------- */
.docs-side__head {
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    padding: var(--cr-space-5) var(--cr-space-4) var(--cr-space-3) var(--cr-space-5);
}

.docs-side__brand {
    display: flex;
    align-items: center;
    gap: var(--cr-space-4);
    min-width: 0;
    flex: 1 1 auto;
    color: var(--cr-color-text-strong);
    font-weight: var(--cr-font-weight-semibold);
    text-decoration: none;
}

.docs-side__brand:hover { color: var(--cr-color-text-strong); text-decoration: none; }

.docs-side__brand-mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--cr-radius-md);
    background: var(--cr-color-primary);
    color: var(--cr-color-text-inverse);
    font-size: 14px;
    flex: none;
}

.docs-side__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--cr-space-3) var(--cr-space-6);
}

.docs-side__foot {
    flex: none;
    border-top: 1px solid var(--cr-color-border-subtle);
    padding: var(--cr-space-3);
}

.docs-side__section { margin-top: var(--cr-space-6); }

.docs-side__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    padding: 0 var(--cr-space-3);
    color: var(--cr-color-text-muted);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.docs-side__list { list-style: none; margin: 0; padding: 0; }

.docs-side__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    min-height: var(--docs-row-height);
    padding: 0 var(--cr-space-3);
    border-radius: var(--cr-radius-md);
    color: var(--cr-color-text);
    font-size: var(--cr-font-size-md);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    width: 100%;
    text-align: start;
}

.docs-side__item:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); text-decoration: none; }
.docs-side__item:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-side__item.is-active,
.docs-side__item[aria-current="page"] { background: var(--docs-active); color: var(--cr-color-text-strong); font-weight: var(--cr-font-weight-medium); }

.docs-side__item > .bi { flex: none; width: 18px; text-align: center; color: var(--cr-color-text-secondary); }

.docs-side__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.docs-side__emoji { flex: none; width: 18px; text-align: center; font-size: 15px; line-height: 1; }

.docs-side__empty { padding: var(--cr-space-2) var(--cr-space-3); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); }

/* Espace : rangée dépliable + actions au survol. */
.docs-space-row { display: flex; align-items: center; border-radius: var(--cr-radius-md); }
.docs-space-row:hover, .docs-space-row:focus-within { background: var(--docs-hover); }
.docs-space-row.is-current > .docs-side__item { font-weight: var(--cr-font-weight-semibold); color: var(--cr-color-text-strong); }
.docs-space-row > .docs-side__item { flex: 1 1 auto; min-width: 0; padding-inline-start: 0; }
.docs-space-row > .docs-side__item:hover { background: none; }

.docs-space-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: var(--cr-radius-sm);
    background: var(--cr-color-primary-subtle);
    color: var(--cr-color-primary);
    font-size: 12px;
}

.docs-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--cr-radius-sm);
    background: none;
    color: var(--cr-color-text-secondary);
    cursor: pointer;
}

.docs-icon-btn:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); }
.docs-icon-btn:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-icon-btn--reveal { opacity: 0; }
.docs-space-row:hover .docs-icon-btn--reveal,
.docs-space-row:focus-within .docs-icon-btn--reveal,
.docs-tree__row:hover .docs-icon-btn--reveal,
.docs-tree__row:focus-within .docs-icon-btn--reveal { opacity: 1; }

@media (hover: none) { .docs-icon-btn--reveal { opacity: 1; } }

/* ---------- Arborescence (sidebar) ---------- */
.docs-tree { padding-inline-start: 0; }
.docs-tree__list { list-style: none; margin: 0; padding: 0; }

.docs-tree__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cr-space-1);
    min-height: var(--docs-row-height);
    padding-inline-start: calc(var(--docs-tree-level, 0) * 14px + 4px);
    padding-inline-end: var(--cr-space-2);
    border-radius: var(--cr-radius-md);
    color: var(--cr-color-text);
}

.docs-tree__row:hover { background: var(--docs-hover); }
.docs-tree__row.is-active { background: var(--docs-active); }
.docs-tree__row.is-active .docs-tree__link { color: var(--cr-color-text-strong); font-weight: var(--cr-font-weight-medium); }

.docs-tree__toggle,
.docs-tree__spacer {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--cr-radius-sm);
    background: none;
    color: var(--cr-color-text-muted);
    font-size: 11px;
}

.docs-tree__toggle { cursor: pointer; }
.docs-tree__toggle:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); }
.docs-tree__toggle:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }

.docs-tree__link {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 26px;
    color: var(--cr-color-text);
    text-decoration: none;
    border-radius: var(--cr-radius-sm);
}

.docs-tree__link:hover { color: var(--cr-color-text-strong); text-decoration: none; }
.docs-tree__link:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-tree__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-tree__icon { flex: none; width: 18px; text-align: center; font-size: 14px; line-height: 1; color: var(--cr-color-text-muted); }
.docs-tree__lock { flex: none; color: var(--cr-color-text-muted); font-size: 11px; }

.docs-tree__more {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    width: 100%;
    min-height: 26px;
    padding-inline-start: calc(var(--docs-tree-level, 0) * 14px + 28px);
    border: 0;
    border-radius: var(--cr-radius-md);
    background: none;
    color: var(--cr-color-text-muted);
    font-size: var(--cr-font-size-sm);
    cursor: pointer;
}

.docs-tree__more:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); }
.docs-tree__empty { padding: var(--cr-space-2) var(--cr-space-3) var(--cr-space-2) 32px; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); }

/* Glisser-déposer : indicateurs de dépôt (avant / dans / après). */
.docs-tree__row[draggable="true"] { cursor: grab; }
.docs-tree__row.is-dragging { opacity: 0.45; }
.docs-tree__row.is-drop-inside { background: var(--cr-color-primary-subtle); box-shadow: inset 0 0 0 1px var(--cr-color-primary-border); }
.docs-tree__row.is-drop-before::before,
.docs-tree__row.is-drop-after::after {
    content: "";
    position: absolute;
    inset-inline: calc(var(--docs-tree-level, 0) * 14px + 24px) 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--cr-color-primary);
    pointer-events: none;
}

.docs-tree__row.is-drop-before::before { top: -1px; }
.docs-tree__row.is-drop-after::after { bottom: -1px; }

/* ---------- Barre supérieure du contenu ---------- */
.docs-bar {
    position: sticky;
    top: 0;
    z-index: var(--cr-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--cr-space-4);
    min-height: 48px;
    padding: var(--cr-space-3) var(--cr-space-6);
    /* Fond opaque, sans backdrop-filter : un filtre ferait de la barre le repère des menus en position fixe (décalés hors écran). */
    background: var(--cr-color-surface);
    border-bottom: 1px solid transparent;
}

.docs-ws__main.is-scrolled .docs-bar { border-bottom-color: var(--cr-color-border-subtle); }

.docs-bar__nav-toggle { display: none; }

.docs-bar__crumbs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--cr-space-1);
    overflow: hidden;
    font-size: var(--cr-font-size-md);
}

.docs-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.docs-crumbs li { display: flex; align-items: center; min-width: 0; }
.docs-crumbs li + li::before { content: "/"; margin: 0 var(--cr-space-2); color: var(--cr-color-text-muted); }

.docs-crumbs li > a,
.docs-crumbs li > span {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-2);
    min-width: 0;
    max-width: 240px;
    padding: 2px var(--cr-space-2);
    border-radius: var(--cr-radius-sm);
    color: var(--cr-color-text-secondary);
    text-decoration: none;
}

.docs-crumbs li:last-child > span { max-width: 420px; }
.docs-crumbs__icon { flex: none; font-size: 14px; line-height: 1; }
.docs-crumbs__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.docs-crumbs a:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); }
.docs-crumbs [aria-current="page"] { color: var(--cr-color-text-strong); }

.docs-bar__meta { flex: none; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); white-space: nowrap; }
.docs-bar__actions { flex: none; display: flex; align-items: center; gap: var(--cr-space-2); }

/* ---------- Article (page) ---------- */
.docs-page-wrap {
    display: flex;
    justify-content: center;
    gap: var(--cr-space-10);
    padding: var(--cr-space-9) var(--cr-space-8) var(--cr-space-10);
    flex: 1 0 auto;
}

.docs-article {
    width: 100%;
    max-width: var(--docs-reading-width);
    min-width: 0;
}

.docs-article--wide { max-width: var(--docs-wide-width); }

.docs-article__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    line-height: 1;
    margin-bottom: var(--cr-space-5);
    border-radius: var(--cr-radius-lg);
}

button.docs-article__icon {
    padding: var(--cr-space-2);
    border: 0;
    background: none;
    cursor: pointer;
}

button.docs-article__icon:hover { background: var(--docs-hover); }
button.docs-article__icon:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }

.docs-article__add-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-2);
    margin-bottom: var(--cr-space-3);
    padding: 2px var(--cr-space-3);
    border: 0;
    border-radius: var(--cr-radius-sm);
    background: none;
    color: var(--cr-color-text-muted);
    font-size: var(--cr-font-size-sm);
    cursor: pointer;
}

.docs-article__add-icon:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); }
.docs-article__add-icon:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }

.docs-article__title {
    margin: 0 0 var(--cr-space-4);
    color: var(--cr-color-text-strong);
    font-size: 36px;
    font-weight: var(--cr-font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.docs-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cr-space-2) var(--cr-space-5);
    margin-bottom: var(--cr-space-8);
    color: var(--cr-color-text-muted);
    font-size: var(--cr-font-size-sm);
}

.docs-byline__item { display: inline-flex; align-items: center; gap: var(--cr-space-2); }
.docs-byline__author { color: var(--cr-color-text-secondary); font-weight: var(--cr-font-weight-medium); }

.docs-article__notices { display: flex; flex-direction: column; gap: var(--cr-space-4); margin-bottom: var(--cr-space-6); }

.docs-article__empty {
    padding: var(--cr-space-9) var(--cr-space-6);
    border: 1px dashed var(--cr-color-border);
    border-radius: var(--cr-radius-lg);
    text-align: center;
    color: var(--cr-color-text-muted);
}

.docs-article__section {
    margin-top: var(--cr-space-10);
    padding-top: var(--cr-space-6);
    border-top: 1px solid var(--cr-color-border-subtle);
}

/* Pièces jointes et commentaires : les panneaux portent leur propre en-tête. */
.docs-article__section--interactive { margin-top: var(--cr-space-8); padding-top: 0; border-top: 0; }

.docs-article__section-title {
    display: flex;
    align-items: center;
    gap: var(--cr-space-3);
    margin: 0 0 var(--cr-space-5);
    color: var(--cr-color-text-strong);
    font-size: var(--cr-font-size-lg);
    font-weight: var(--cr-font-weight-semibold);
}

.docs-article__section-title .cr-badge { font-weight: var(--cr-font-weight-medium); }

/* Sous-pages : grille de cartes. */
.docs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--cr-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-card {
    display: flex;
    align-items: center;
    gap: var(--cr-space-4);
    min-height: 52px;
    padding: var(--cr-space-4) var(--cr-space-5);
    border: 1px solid var(--cr-color-border-subtle);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface);
    color: var(--cr-color-text-strong);
    text-decoration: none;
    transition: border-color var(--cr-duration-fast) var(--cr-easing), box-shadow var(--cr-duration-fast) var(--cr-easing);
}

.docs-card:hover { border-color: var(--cr-color-border-strong); box-shadow: var(--cr-shadow-raised); color: var(--cr-color-text-strong); text-decoration: none; }
.docs-card:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-card__icon { flex: none; width: 24px; text-align: center; font-size: 18px; color: var(--cr-color-text-muted); }
.docs-card__body { min-width: 0; flex: 1 1 auto; }
.docs-card__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--cr-font-weight-medium); }
.docs-card__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); }

/* ---------- Sommaire (sur cette page) ---------- */
.docs-toc {
    position: sticky;
    top: 72px;
    align-self: flex-start;
    width: var(--docs-toc-width);
    flex: none;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    font-size: var(--cr-font-size-sm);
}

.docs-toc__title {
    margin: 0 0 var(--cr-space-3);
    color: var(--cr-color-text-muted);
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.docs-toc__list { margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--cr-color-border-subtle); }

.docs-toc__link {
    display: block;
    margin-inline-start: -1px;
    padding: 3px var(--cr-space-4) 3px calc(var(--cr-space-5) + (var(--docs-toc-level, 1) - 1) * 12px);
    border-inline-start: 2px solid transparent;
    color: var(--cr-color-text-secondary);
    line-height: 1.45;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.docs-toc__link:hover { color: var(--cr-color-text-strong); text-decoration: none; }
.docs-toc__link:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-toc__link.is-active { border-inline-start-color: var(--cr-color-primary); color: var(--cr-color-primary); font-weight: var(--cr-font-weight-medium); }

/* ---------- Accueil / espace : en-têtes et grilles ---------- */
.docs-hero {
    padding: var(--cr-space-10) var(--cr-space-8) var(--cr-space-6);
    max-width: var(--docs-wide-width);
    width: 100%;
    margin: 0 auto;
}

.docs-hero__title {
    display: flex;
    align-items: center;
    gap: var(--cr-space-5);
    margin: 0;
    color: var(--cr-color-text-strong);
    font-size: 30px;
    font-weight: var(--cr-font-weight-bold);
    letter-spacing: -0.01em;
}

.docs-hero__lead { margin: var(--cr-space-3) 0 0; color: var(--cr-color-text-secondary); font-size: var(--cr-font-size-lg); max-width: 70ch; }
.docs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-space-3); margin-top: var(--cr-space-6); }

.docs-hero__space-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-primary-subtle);
    color: var(--cr-color-primary);
    font-size: 26px;
}

.docs-search-hero {
    display: flex;
    align-items: center;
    gap: var(--cr-space-4);
    width: 100%;
    max-width: 640px;
    height: 44px;
    margin-top: var(--cr-space-7);
    padding: 0 var(--cr-space-5);
    border: 1px solid var(--cr-color-border);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface);
    color: var(--cr-color-text);
    box-shadow: var(--cr-shadow-raised);
}

.docs-search-hero:focus-within { border-color: var(--cr-color-primary); box-shadow: var(--cr-focus-ring); }
.docs-search-hero > .bi { color: var(--cr-color-text-muted); }
.docs-search-hero input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: var(--cr-font-size-lg); color: var(--cr-color-text-strong); }

.docs-body {
    padding: 0 var(--cr-space-8) var(--cr-space-10);
    max-width: var(--docs-wide-width);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--cr-space-9);
}

.docs-block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cr-space-4);
    margin: 0 0 var(--cr-space-5);
    color: var(--cr-color-text-strong);
    font-size: var(--cr-font-size-lg);
    font-weight: var(--cr-font-weight-semibold);
}

.docs-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--cr-space-9); align-items: start; }

.docs-aside-card {
    padding: var(--cr-space-6);
    border: 1px solid var(--cr-color-border-subtle);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface-subtle);
}

.docs-aside-card + .docs-aside-card { margin-top: var(--cr-space-5); }
.docs-aside-card__title { margin: 0 0 var(--cr-space-4); color: var(--cr-color-text-strong); font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-semibold); }

.docs-list { margin: 0; padding: 0; list-style: none; }
.docs-list > li + li { border-top: 1px solid var(--cr-color-border-subtle); }

.docs-list__link {
    display: flex;
    align-items: center;
    gap: var(--cr-space-4);
    padding: var(--cr-space-4) var(--cr-space-2);
    color: var(--cr-color-text-strong);
    text-decoration: none;
    border-radius: var(--cr-radius-md);
}

.docs-list__link:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); text-decoration: none; }
.docs-list__link:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-list__icon { flex: none; width: 22px; text-align: center; font-size: 16px; color: var(--cr-color-text-muted); }
.docs-list__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--cr-font-weight-medium); }
.docs-list__meta { flex: none; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); white-space: nowrap; }

.docs-space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--cr-space-5); margin: 0; padding: 0; list-style: none; }

.docs-space-card {
    display: flex;
    flex-direction: column;
    gap: var(--cr-space-4);
    height: 100%;
    padding: var(--cr-space-6);
    border: 1px solid var(--cr-color-border-subtle);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface);
    color: var(--cr-color-text);
    text-decoration: none;
    transition: border-color var(--cr-duration-fast) var(--cr-easing), box-shadow var(--cr-duration-fast) var(--cr-easing);
}

.docs-space-card:hover { border-color: var(--cr-color-border-strong); box-shadow: var(--cr-shadow-raised); color: var(--cr-color-text); text-decoration: none; }
.docs-space-card:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-space-card__head { display: flex; align-items: center; gap: var(--cr-space-4); }
.docs-space-card__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cr-color-text-strong); font-size: var(--cr-font-size-lg); font-weight: var(--cr-font-weight-semibold); }
.docs-space-card__desc { margin: 0; color: var(--cr-color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs-space-card__foot { margin-top: auto; display: flex; align-items: center; gap: var(--cr-space-3); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); }

.docs-space-card .docs-hero__space-icon { width: 36px; height: 36px; font-size: 18px; border-radius: var(--cr-radius-md); }

/* ---------- Sélecteur d'emoji ---------- */
.docs-emoji-picker { width: min(360px, 90vw); }
.docs-emoji-picker__grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; max-height: 260px; overflow-y: auto; margin: var(--cr-space-4) 0; padding: 0; list-style: none; }

.docs-emoji-picker__cell {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--cr-radius-md);
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.docs-emoji-picker__cell:hover,
.docs-emoji-picker__cell[aria-selected="true"] { background: var(--docs-hover); }
.docs-emoji-picker__cell:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-emoji-picker__group { grid-column: 1 / -1; padding: var(--cr-space-3) var(--cr-space-2) var(--cr-space-1); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }

/* ============================================================
   Typographie du contenu (.docs-prose) — PARTAGÉE lecture / édition.
   ============================================================ */
.docs-prose {
    min-width: 0;
    color: var(--cr-color-text);
    font-size: var(--docs-prose-size);
    line-height: var(--docs-prose-line);
    overflow-wrap: anywhere;
}

.docs-prose > :first-child { margin-top: 0; }
.docs-prose > :last-child { margin-bottom: 0; }

.docs-prose h2,
.docs-prose h3,
.docs-prose h4 {
    color: var(--cr-color-text-strong);
    font-weight: var(--cr-font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.005em;
    scroll-margin-top: 72px;
}

.docs-prose h2 { margin: 2em 0 0.5em; font-size: 1.6em; }
.docs-prose h3 { margin: 1.6em 0 0.4em; font-size: 1.3em; }
.docs-prose h4 { margin: 1.4em 0 0.35em; font-size: 1.1em; }

.docs-prose p,
.docs-prose ul,
.docs-prose ol,
.docs-prose blockquote,
.docs-prose pre { margin: 0 0 0.85em; }

.docs-prose ul,
.docs-prose ol { padding-inline-start: 1.6em; }

.docs-prose li { margin: 0.15em 0; }
.docs-prose li > p { margin-bottom: 0.15em; }
.docs-prose li::marker { color: var(--cr-color-text-muted); }

.docs-prose blockquote {
    padding: 0.1em 0 0.1em 1em;
    border-inline-start: 3px solid var(--cr-color-text-strong);
    color: var(--cr-color-text);
}

.docs-prose pre {
    padding: 1em 1.15em;
    border: 1px solid var(--cr-color-border-subtle);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface-subtle);
    overflow-x: auto;
    max-width: 100%;
    white-space: pre;
    overflow-wrap: normal;
    font-size: 0.875em;
    line-height: 1.6;
    tab-size: 4;
}

.docs-prose code { font-family: var(--cr-font-family-mono); font-size: 0.875em; }
.docs-prose pre code { font-size: 1em; background: none; padding: 0; border: 0; color: inherit; }

.docs-prose :not(pre) > code {
    padding: 0.15em 0.4em;
    border-radius: var(--cr-radius-sm);
    background: rgba(20, 31, 41, 0.06);
    color: #b4321f;
}

.docs-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--cr-color-border); opacity: 1; }

.docs-prose a { color: var(--cr-color-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cr-color-link) 40%, transparent); text-underline-offset: 2px; }
.docs-prose a:hover { text-decoration-color: currentColor; }

.docs-prose strong { font-weight: var(--cr-font-weight-semibold); color: var(--cr-color-text-strong); }

.docs-prose .docs-mention {
    padding: 0 0.2em;
    border-radius: var(--cr-radius-sm);
    background: var(--cr-color-primary-subtle);
    color: var(--cr-color-primary);
    font-weight: var(--cr-font-weight-medium);
}

/* Libellés accessibles (encadrés, état des tâches) : lus par les technologies d'assistance, invisibles à l'écran. */
.docs-prose .docs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.docs-prose .docs-image { display: block; max-width: 100%; height: auto; margin: 1.2em 0; border-radius: var(--cr-radius-md); }

/* Tableaux : défilement horizontal CONTENU dans le tableau (jamais la page). */
.docs-prose .docs-table { max-width: 100%; overflow-x: auto; margin: 0 0 1em; }
.docs-prose .docs-table table { width: 100%; border-collapse: collapse; overflow-wrap: normal; font-size: 0.9375em; }

.docs-prose .docs-table th,
.docs-prose .docs-table td {
    min-width: 6rem;
    padding: 0.5em 0.75em;
    border: 1px solid var(--cr-color-border);
    vertical-align: top;
    text-align: start;
    overflow-wrap: anywhere;
}

.docs-prose .docs-table th { background: var(--cr-color-surface-subtle); color: var(--cr-color-text-strong); font-weight: var(--cr-font-weight-semibold); }
.docs-prose .docs-table th > :last-child,
.docs-prose .docs-table td > :last-child { margin-bottom: 0; }

/* Listes de tâches. */
.docs-prose .docs-tasks { list-style: none; padding-inline-start: 0.1em; }
.docs-prose .docs-task { display: flex; align-items: flex-start; gap: 0.6em; }

.docs-prose .docs-task__box {
    flex: none;
    position: relative;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.33em;
    border: 1.5px solid var(--cr-color-border-strong);
    border-radius: var(--cr-radius-sm);
    background: var(--cr-color-surface);
}

.docs-prose .docs-task--done > .docs-task__box { border-color: var(--cr-color-primary); background: var(--cr-color-primary); }

.docs-prose .docs-task--done > .docs-task__box::after {
    content: "";
    position: absolute;
    left: 0.3em;
    top: 0.08em;
    width: 0.3em;
    height: 0.55em;
    border: solid var(--cr-color-text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.docs-prose .docs-task__body { min-width: 0; flex: 1 1 auto; }
.docs-prose .docs-task--done > .docs-task__body > p:first-child { color: var(--cr-color-text-muted); text-decoration: line-through; }

/* Encadrés : icône, fond et bordure selon la variante (jetons du thème, contrastes AA). */
.docs-prose .docs-callout {
    position: relative;
    margin: 0 0 1em;
    padding: 0.85em 1em 0.85em 2.9em;
    border: 1px solid var(--cr-color-info-border);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-info-subtle);
}

.docs-prose .docs-callout::before {
    position: absolute;
    left: 1em;
    top: 0.85em;
    font-family: "bootstrap-icons";
    font-size: 1.05em;
    line-height: var(--docs-prose-line);
    content: "\f430"; /* info-circle-fill */
    color: var(--cr-color-info);
}

.docs-prose .docs-callout > :last-child { margin-bottom: 0; }
.docs-prose .docs-callout--note { border-color: var(--cr-color-border); background: var(--cr-color-surface-subtle); }
.docs-prose .docs-callout--note::before { content: "\f468"; color: var(--cr-color-text-secondary); } /* lightbulb-fill */
.docs-prose .docs-callout--success { border-color: var(--cr-color-success-border); background: var(--cr-color-success-subtle); }
.docs-prose .docs-callout--success::before { content: "\f26a"; color: var(--cr-color-success); } /* check-circle-fill */
.docs-prose .docs-callout--warning { border-color: var(--cr-color-warning-border); background: var(--cr-color-warning-subtle); }
.docs-prose .docs-callout--warning::before { content: "\f33a"; color: var(--cr-color-warning); } /* exclamation-triangle-fill */
.docs-prose .docs-callout--danger { border-color: var(--cr-color-danger-border); background: var(--cr-color-danger-subtle); }
.docs-prose .docs-callout--danger::before { content: "\f626"; color: var(--cr-color-danger); } /* x-octagon-fill */

/* ---------- Responsive ---------- */
@media (max-width: 1279.98px) {
    .docs-toc { display: none; }
}

@media (max-width: 1023.98px) {
    .docs-ws__sidebar {
        position: fixed;
        top: var(--cr-shell-topbar-height);
        bottom: 0;
        left: 0;
        z-index: var(--cr-z-drawer);
        width: min(300px, 86vw);
        transform: translateX(-100%);
        transition: transform var(--cr-duration-base) var(--cr-easing);
        visibility: hidden;
    }

    .docs-ws.is-nav-open .docs-ws__sidebar { transform: none; visibility: visible; box-shadow: var(--cr-shadow-modal); background: var(--cr-color-surface); }

    .docs-ws.is-nav-open .docs-ws__scrim {
        display: block;
        position: fixed;
        inset: var(--cr-shell-topbar-height) 0 0 0;
        z-index: calc(var(--cr-z-drawer) - 1);
        background: rgba(20, 31, 41, 0.32);
    }

    .docs-bar__nav-toggle { display: inline-flex; }
    .docs-two-col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .docs-bar { padding: var(--cr-space-3) var(--cr-space-5); flex-wrap: wrap; }
    .docs-bar__meta { display: none; }
    .docs-page-wrap { padding: var(--cr-space-7) var(--cr-space-6) var(--cr-space-9); }
    .docs-article__title { font-size: 28px; }
    .docs-article__icon { font-size: 44px; }
    .docs-hero { padding: var(--cr-space-8) var(--cr-space-6) var(--cr-space-5); }
    .docs-hero__title { font-size: 24px; }
    .docs-body { padding: 0 var(--cr-space-6) var(--cr-space-9); }
    .docs-prose { --docs-prose-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .docs-ws__sidebar, .docs-card, .docs-space-card { transition: none; }
}

@media print {
    .cr-sidebar, .cr-topbar, .docs-ws__sidebar, .docs-bar, .docs-toc, .docs-article__section--interactive { display: none !important; }
    .docs-ws, .docs-ws__main { display: block; overflow: visible; height: auto; }
    .docs-page-wrap { padding: 0; }
}

/* ---------- Vue d'ensemble d'un espace : « À propos » ---------- */
.docs-about { display: grid; grid-template-columns: auto 1fr; gap: var(--cr-space-2) var(--cr-space-5); font-size: var(--cr-font-size-sm); }
.docs-about dt { color: var(--cr-color-text-muted); font-weight: var(--cr-font-weight-regular); }
.docs-about dd { margin: 0; color: var(--cr-color-text); }
.docs-aside-card details > summary { cursor: pointer; }

/* ---------- Accueil : accès personnels ---------- */
.docs-home-personal { display: flex; flex-direction: column; gap: var(--cr-space-9); }
.docs-home-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--cr-space-9); }

/* ---------- Écrans secondaires (cadre CrPage) dans l'espace Documentation ---------- */
.docs-ws__main > .cr-page { flex: 1 0 auto; height: auto; min-height: 100%; background: var(--cr-color-surface); }
.docs-ws__main > .cr-page > .cr-page-header { border-bottom-color: var(--cr-color-border-subtle); padding-top: var(--cr-space-7); }
.docs-ws__main > .cr-page > .cr-page-body { overflow: visible; max-width: var(--docs-wide-width); width: 100%; }

/* ============================================================
   DOCS-UX2 — éditeur « sur la page » (mêmes dimensions et typographie que la lecture)
   ============================================================ */
.docs-page-wrap--editor { padding-top: var(--cr-space-8); }
.docs-article--editor { max-width: calc(var(--docs-reading-width) + 80px); }

.docs-title-input {
    display: block;
    width: 100%;
    margin: 0 0 var(--cr-space-5);
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--cr-color-text-strong);
    font-size: 36px;
    font-weight: var(--cr-font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.docs-title-input::placeholder { color: var(--cr-color-text-muted); opacity: 0.6; }
.docs-title-input:focus-visible { box-shadow: none; border-radius: var(--cr-radius-sm); outline: 2px solid var(--cr-color-primary-border); outline-offset: 4px; }

.docs-editor__status { display: inline-flex; align-items: center; gap: var(--cr-space-2); }
.docs-editor__status[data-status="Saving"] .bi { animation: docs-spin 1s linear infinite; }
@keyframes docs-spin { to { transform: rotate(360deg); } }

/* Barre d'outils : collante sous la barre de la page, compacte, groupes séparés. */
.docs-toolbar {
    position: sticky;
    top: 48px;
    z-index: calc(var(--cr-z-sticky) - 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--cr-space-1);
    margin: 0 0 var(--cr-space-6);
    padding: var(--cr-space-1) var(--cr-space-2);
    border: 1px solid var(--cr-color-border-subtle);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface); /* opaque, sans backdrop-filter : voir .docs-bar */
    box-shadow: var(--cr-shadow-raised);
}

.docs-toolbar__group { display: flex; align-items: center; gap: 0; padding-inline-end: var(--cr-space-1); border-inline-end: 1px solid var(--cr-color-border-subtle); }
.docs-toolbar__group:last-child { border-inline-end: 0; padding-inline-end: 0; }

.docs-toolbar__btn,
.docs-toolbar__file {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cr-space-2);
    min-width: 28px;
    height: 28px;
    padding: 0 var(--cr-space-2);
    border: 0;
    border-radius: var(--cr-radius-md);
    background: none;
    color: var(--cr-color-text-secondary);
    font-size: var(--cr-font-size-md);
    cursor: pointer;
}

.docs-toolbar__btn:hover:not(:disabled),
.docs-toolbar__file:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); }
.docs-toolbar__btn:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-toolbar__btn[aria-pressed="true"] { background: var(--cr-color-primary-subtle); color: var(--cr-color-primary); }
.docs-toolbar__btn:disabled { color: var(--cr-color-disabled-text); cursor: default; }
.docs-toolbar__btn--insert { color: var(--cr-color-text-strong); font-weight: var(--cr-font-weight-medium); padding: 0 var(--cr-space-3); }
@media (max-width: 1279.98px) { .docs-toolbar__btn--insert > span { display: none; } }
.docs-toolbar__file.is-disabled { opacity: 0.5; pointer-events: none; }
.docs-toolbar__file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.docs-toolbar__menu .cr-btn { height: 30px; }

/* Zone d'écriture : aucune bordure de formulaire, la page EST le canevas. */
.docs-editor { position: relative; }
.docs-editor[hidden] { display: none; }
.docs-editor__host { position: relative; min-height: 55vh; }
.docs-editor__content { min-height: 55vh; padding: 0 0 30vh; outline: none; caret-color: var(--cr-color-primary); }
.docs-editor__content:focus-visible { outline: none; box-shadow: none; }
.docs-editor__content.ProseMirror-focused { outline: none; }
.docs-editor__content .ProseMirror-selectednode { outline: 2px solid var(--cr-color-primary-border); outline-offset: 2px; border-radius: var(--cr-radius-sm); }
.docs-editor__content ::selection { background: rgba(31, 99, 181, 0.18); }
.docs-dropcursor { background: var(--cr-color-primary) !important; }

/* Invite des blocs vides. */
.docs-editor__content .is-empty::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--cr-color-text-muted); /* contraste AA sur fond blanc (aucune opacité réduite) */
    pointer-events: none;
}

/* Tâches dans l'éditeur (vraie case à cocher). */
.docs-editor__content .docs-tasks { list-style: none; padding-inline-start: 0.1em; }
.docs-editor__content .docs-task { display: flex; align-items: flex-start; gap: 0.6em; }
.docs-editor__content .docs-task__check { flex: none; width: 1.05em; height: 1.05em; margin-top: 0.33em; accent-color: var(--cr-color-primary); cursor: pointer; }
.docs-editor__content .docs-task--done > .docs-task__body > p:first-child { color: var(--cr-color-text-muted); text-decoration: line-through; }
.docs-editor__content .docs-task__body { min-width: 0; flex: 1 1 auto; }

/* Tableaux dans l'éditeur. */
.docs-editor__content .docs-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.docs-editor__content td, .docs-editor__content th { border: 1px solid var(--cr-color-border); padding: 0.45em 0.7em; vertical-align: top; position: relative; }
.docs-editor__content th { background: var(--cr-color-surface-subtle); font-weight: var(--cr-font-weight-semibold); }
.docs-editor__content .selectedCell::after { content: ""; position: absolute; inset: 0; background: rgba(31, 99, 181, 0.12); pointer-events: none; }

/* Blocs de code (vue de nœud) : langage et copie au survol, aperçu des diagrammes / formules. */
.docs-code { position: relative; margin: 0 0 0.85em; }
.docs-code > pre { margin: 0; }
.docs-code__bar {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--cr-space-2);
    opacity: 0;
    transition: opacity var(--cr-duration-fast) var(--cr-easing);
}

.docs-code:hover .docs-code__bar,
.docs-code:focus-within .docs-code__bar { opacity: 1; }

.docs-code__lang {
    height: 26px;
    padding: 0 var(--cr-space-3);
    border: 1px solid var(--cr-color-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-color-surface);
    color: var(--cr-color-text-secondary);
    font-family: var(--cr-font-family);
    font-size: var(--cr-font-size-sm);
}

.docs-code__copy {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--cr-color-border);
    border-radius: var(--cr-radius-md);
    background: var(--cr-color-surface);
    color: var(--cr-color-text-secondary);
    cursor: pointer;
}

.docs-code__copy.is-done { color: var(--cr-color-success); border-color: var(--cr-color-success-border); }
.docs-code__lang:focus-visible, .docs-code__copy:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-code__preview { margin-top: var(--cr-space-3); padding: var(--cr-space-5); border: 1px dashed var(--cr-color-border); border-radius: var(--cr-radius-lg); background: var(--cr-color-surface); overflow-x: auto; }
.docs-code__preview[hidden] { display: none; }
.docs-code__preview-label { display: block; margin-bottom: var(--cr-space-3); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.docs-code__preview-error { color: var(--cr-color-danger); font-size: var(--cr-font-size-sm); }

/* Blocs dépliables : éditeur (div + bouton de repli local) et lecture (details natif). */
.docs-toggle { position: relative; margin: 0 0 0.85em; padding-inline-start: 1.6em; }
.docs-toggle__btn {
    position: absolute;
    left: 0;
    top: 0.25em;
    display: inline-grid;
    place-items: center;
    width: 1.3em;
    height: 1.3em;
    padding: 0;
    border: 0;
    border-radius: var(--cr-radius-sm);
    background: none;
    color: var(--cr-color-text-secondary);
    font-size: 0.8em;
    cursor: pointer;
    transition: transform var(--cr-duration-fast) var(--cr-easing);
}

.docs-toggle__btn:hover { background: var(--docs-hover); }
.docs-toggle__btn:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-toggle.is-collapsed > .docs-toggle__btn { transform: rotate(-90deg); }
.docs-toggle.is-collapsed > .docs-toggle__inner > .docs-toggle__body { display: none; }
.docs-toggle__summary { font-weight: var(--cr-font-weight-semibold); color: var(--cr-color-text-strong); }
.docs-toggle__body { margin-top: 0.3em; }

details.docs-toggle { padding-inline-start: 0; }

details.docs-toggle > summary {
    display: list-item;
    list-style: none;
    padding-inline-start: 1.6em;
    position: relative;
    cursor: pointer;
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-color-text-strong);
    border-radius: var(--cr-radius-sm);
}

details.docs-toggle > summary::-webkit-details-marker { display: none; }

details.docs-toggle > summary::before {
    content: "\f231";
    position: absolute;
    left: 0.2em;
    font-family: "bootstrap-icons";
    font-size: 0.8em;
    color: var(--cr-color-text-secondary);
    transition: transform var(--cr-duration-fast) var(--cr-easing);
}

details.docs-toggle[open] > summary::before { transform: rotate(90deg); }
details.docs-toggle > summary:hover { background: var(--docs-hover); }
details.docs-toggle > summary:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
details.docs-toggle > .docs-toggle__body { padding-inline-start: 1.6em; }

/* Formules. */
.docs-math-node { display: inline-block; padding: 0 2px; border-radius: var(--cr-radius-sm); cursor: pointer; }
.docs-math-node:hover { background: var(--docs-hover); }
.docs-math-node.is-selected { background: var(--cr-color-primary-subtle); outline: 1px solid var(--cr-color-primary-border); }
.docs-math-block { margin: 1em 0; overflow-x: auto; text-align: center; }
.docs-math-error { color: var(--cr-color-danger); }
.docs-math-preview { min-height: 48px; margin-top: var(--cr-space-2); padding: var(--cr-space-4); border: 1px solid var(--cr-color-border-subtle); border-radius: var(--cr-radius-md); background: var(--cr-color-surface-subtle); overflow-x: auto; font-size: 1.15em; }

/* Diagrammes (lecture). */
.docs-diagram { margin: 1.2em 0; }
.docs-diagram__canvas { display: flex; justify-content: center; overflow-x: auto; padding: var(--cr-space-6); border: 1px solid var(--cr-color-border-subtle); border-radius: var(--cr-radius-lg); background: var(--cr-color-surface); }
.docs-diagram__canvas svg { max-width: 100%; height: auto; }
.docs-diagram__source { margin-top: var(--cr-space-3); font-size: var(--cr-font-size-sm); }
.docs-diagram__source > summary { color: var(--cr-color-text-muted); cursor: pointer; }
.docs-diagram__source > pre { margin-top: var(--cr-space-3); }

/* Menus flottants (menu « / », menu du bloc). */
.docs-menu {
    position: fixed;
    z-index: var(--cr-z-popover);
    width: 300px;
    max-height: min(360px, 60vh);
    overflow-y: auto;
    padding: var(--cr-space-2);
    border: 1px solid var(--cr-color-border);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface);
    box-shadow: var(--cr-shadow-overlay);
}

.docs-menu[hidden] { display: none; }
.docs-block-menu { width: 220px; }

.docs-menu__item {
    display: flex;
    align-items: center;
    gap: var(--cr-space-4);
    width: 100%;
    min-height: 36px;
    padding: var(--cr-space-2) var(--cr-space-3);
    border: 0;
    border-radius: var(--cr-radius-md);
    background: none;
    color: var(--cr-color-text);
    font-size: var(--cr-font-size-md);
    text-align: start;
    cursor: pointer;
}

.docs-menu__item:hover,
.docs-menu__item.is-active,
.docs-menu__item:focus-visible { background: var(--docs-active); color: var(--cr-color-text-strong); outline: none; }
.docs-menu__item.is-danger { color: var(--cr-color-danger); }

.docs-menu__icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 1px solid var(--cr-color-border-subtle);
    border-radius: var(--cr-radius-md);
    background: var(--cr-color-surface);
    color: var(--cr-color-text-secondary);
}

.docs-menu__label { flex: 1 1 auto; min-width: 0; }
.docs-menu__empty { padding: var(--cr-space-4); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); }

/* Barre flottante sur sélection. */
.docs-bubble {
    position: fixed;
    z-index: var(--cr-z-popover);
    display: flex;
    align-items: center;
    gap: 1px;
    padding: var(--cr-space-1);
    border: 1px solid var(--cr-color-border);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface);
    box-shadow: var(--cr-shadow-overlay);
}

.docs-bubble[hidden] { display: none; }
.docs-bubble__btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--cr-radius-md); background: none; color: var(--cr-color-text-secondary); cursor: pointer; }
.docs-bubble__btn:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); }
.docs-bubble__btn[aria-pressed="true"] { background: var(--cr-color-primary-subtle); color: var(--cr-color-primary); }
.docs-bubble__btn:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-bubble__sep { width: 1px; height: 20px; margin: 0 var(--cr-space-1); background: var(--cr-color-border-subtle); }

/* Poignée de bloc. */
.docs-handle { position: fixed; z-index: calc(var(--cr-z-popover) - 1); display: flex; align-items: center; gap: 1px; }
.docs-handle[hidden] { display: none; }
.docs-handle__btn { display: inline-grid; place-items: center; width: 24px; height: 26px; border: 0; border-radius: var(--cr-radius-sm); background: none; color: var(--cr-color-text-muted); cursor: pointer; }
.docs-handle__btn:hover { background: var(--docs-hover); color: var(--cr-color-text-strong); }
.docs-handle__btn:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.docs-handle__grip { cursor: grab; }
.docs-handle__grip:active { cursor: grabbing; }

/* Mode Markdown source. */
.docs-markdown { display: flex; flex-direction: column; gap: var(--cr-space-4); }
.docs-markdown__hint { display: flex; align-items: center; gap: var(--cr-space-3); margin: 0; padding: var(--cr-space-4) var(--cr-space-5); border-radius: var(--cr-radius-md); background: var(--cr-color-info-subtle); color: var(--cr-color-text); font-size: var(--cr-font-size-sm); }

.docs-markdown__input {
    width: 100%;
    min-height: 60vh;
    padding: var(--cr-space-6);
    border: 1px solid var(--cr-color-border);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface-subtle);
    color: var(--cr-color-text-strong);
    font-family: var(--cr-font-family-mono);
    font-size: 14px;
    line-height: 1.65;
    resize: vertical;
    tab-size: 4;
}

.docs-markdown__input:focus { outline: none; border-color: var(--cr-color-primary); box-shadow: var(--cr-focus-ring); }

/* Aide-mémoire des raccourcis. */
.docs-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--cr-space-8); }
.docs-shortcuts__title { margin: 0 0 var(--cr-space-4); font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-semibold); color: var(--cr-color-text-strong); }
.docs-shortcuts__list { display: grid; grid-template-columns: auto 1fr; gap: var(--cr-space-3) var(--cr-space-5); margin: 0; align-items: center; font-size: var(--cr-font-size-sm); }
.docs-shortcuts__list dt { white-space: nowrap; font-weight: var(--cr-font-weight-regular); }
.docs-shortcuts__list dd { margin: 0; color: var(--cr-color-text-secondary); }

/* Coloration syntaxique (jetons highlight.js) — contrastes AA sur le fond des blocs de code. */
.docs-prose .hljs-comment, .docs-prose .hljs-quote { color: #5b6670; font-style: italic; }
.docs-prose .hljs-keyword, .docs-prose .hljs-selector-tag, .docs-prose .hljs-literal, .docs-prose .hljs-doctag { color: #a3218a; }
.docs-prose .hljs-string, .docs-prose .hljs-regexp, .docs-prose .hljs-addition { color: #1d6b2f; }
.docs-prose .hljs-number, .docs-prose .hljs-symbol, .docs-prose .hljs-bullet { color: #a14800; }
.docs-prose .hljs-title, .docs-prose .hljs-section, .docs-prose .hljs-tag, .docs-prose .hljs-name { color: #1c5bb0; }
.docs-prose .hljs-type, .docs-prose .hljs-built_in { color: #7a4d00; }
.docs-prose .hljs-attr, .docs-prose .hljs-attribute, .docs-prose .hljs-variable, .docs-prose .hljs-template-variable, .docs-prose .hljs-property { color: #0b6a83; }
.docs-prose .hljs-meta, .docs-prose .hljs-selector-id, .docs-prose .hljs-selector-class { color: #6b4fa0; }
.docs-prose .hljs-deletion { color: #b4321f; background: rgba(199, 42, 28, 0.08); }
.docs-prose .hljs-addition { background: rgba(29, 122, 76, 0.08); }
.docs-prose .hljs-emphasis { font-style: italic; }
.docs-prose .hljs-strong { font-weight: var(--cr-font-weight-semibold); }

@media (max-width: 767.98px) {
    .docs-title-input { font-size: 28px; }
    .docs-toolbar { top: 0; position: relative; }
    .docs-handle { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .docs-toggle__btn,
    details.docs-toggle > summary::before,
    .docs-code__bar { transition: none; }
    .docs-editor__status[data-status="Saving"] .bi { animation: none; }
}

/* ---------- DOCS-UX3 — import : zone de dépôt ---------- */
.docs-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cr-space-3);
    padding: var(--cr-space-9) var(--cr-space-6);
    border: 2px dashed var(--cr-color-border);
    border-radius: var(--cr-radius-lg);
    background: var(--cr-color-surface-subtle);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--cr-duration-fast) var(--cr-easing), background-color var(--cr-duration-fast) var(--cr-easing);
}

.docs-dropzone:hover, .docs-dropzone:focus-within { border-color: var(--cr-color-primary); background: var(--cr-color-primary-subtle); }
.docs-dropzone > .bi { font-size: 28px; color: var(--cr-color-primary); }
.docs-dropzone__title { color: var(--cr-color-text-strong); font-weight: var(--cr-font-weight-semibold); }
.docs-dropzone.is-busy { opacity: 0.6; pointer-events: none; }