/* Pages d'aide du core : centre d'aide (Documentation/index). Chargé sur toutes les pages (importmap.php du bundle), n'utilise que les jetons du socle (ui-bundle). */
@layer components {
/* Centre d'aide : suggestions de la recherche. */
.autocomplete-suggestions {
    position: absolute;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 0.625rem;
    box-shadow: 0 10px 30px rgb(29 21 49 / .12);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    margin-top: 5px;
    left: 0;
    right: 0;
}
.autocomplete-suggestion {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-line);
}
.autocomplete-suggestion:hover {
    background-color: var(--color-tile);
}
.autocomplete-suggestion:last-child {
    border-bottom: none;
}

/* Modules : tuiles du socle, la tuile active passe en foncé comme les puces .page-chip. */
.doc-modules .page-tile.is-active { background: var(--color-night); color: var(--color-on-night); }
.doc-modules .page-tile.is-active > span > strong { color: var(--color-on-night); }
.doc-modules .page-tile.is-active .page-tile__icon { background: rgb(255 255 255 / .16); color: var(--color-on-night); }
.doc-modules .doc-count { padding: 0 .4375rem; border-radius: .5rem; background: rgb(0 0 0 / .07); font-size: .6875rem; font-weight: 700; }
.doc-modules .page-tile.is-active .doc-count { background: rgb(255 255 255 / .18); }
.doc-search { position: relative; }
.doc-search .page-filterbar__search { max-width: none; }

/* Liste d'articles : une ligne par article, séparées par un filet. */
.doc-list { margin: 0; padding: 0; list-style: none; }
.doc-list > li + li { border-top: 1px solid var(--color-line); }
.doc-row { display: flex; align-items: center; gap: .875rem; min-width: 0; padding: .75rem 1.25rem; color: var(--color-ink); text-decoration: none; transition: background-color .15s; }
.doc-row:hover { background: var(--color-tile); }
.doc-row .page-tile__icon { width: 2.25rem; height: 2.25rem; }
.doc-row__text { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.doc-row__text > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .875rem; font-weight: 700; }
/* Empilée sous la colonne de gauche (mobile) : même espacement que entre les cartes. */
.doc-right { margin-top: var(--space-card-stack, 1.125rem); }
@media (min-width: 1024px) { .doc-right { margin-top: 0; } }
.doc-row__text > small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .75rem; color: var(--color-muted); }
.doc-row__meta { display: grid; flex: none; min-width: 6rem; justify-items: end; gap: .125rem; text-align: right; line-height: 1.3; }
.doc-row__meta > span { font-size: .75rem; font-weight: 600; color: var(--color-ink-2); }
.doc-row__meta > small { font-size: .71875rem; color: var(--color-muted); white-space: nowrap; }
@media (max-width: 767.98px) { .doc-row__meta { display: none; } }
.doc-starred .page-tile > span > strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.doc-row > .fa-chevron-right { flex: none; font-size: .6875rem; color: var(--color-muted-2); }
.doc-row:hover > .fa-chevron-right { color: var(--color-accent); }
}