/* KnowSpace — Documentation Theme */

/* Valeurs par défaut, AUX NOMS des jetons de ContentUtils/design/tokens.json : ce bloc est remplacé
   par eux au rendu (renderer._copy_static) ; une variable absente des jetons casserait la feuille. */
:root {
    --ks-bg: #ffffff;
    --ks-bg-secondary: #f5f6fa;
    --ks-text: #2c3e50;
    --ks-text-light: #586878;
    --ks-accent: #2977ab;
    --ks-accent-hover: #226a9a;
    --ks-border: #e1e4e8;
    --ks-header-bg: #2c3e50;
    --ks-header-text: #ffffff;
    --ks-note-tip: #27ae60;
    --ks-note-warning: #e67e22;
    --ks-note-note: #3498db;
    --ks-note-important: #e74c3c;
    --ks-code-bg: #f8f9fa;
    --ks-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ks-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --ks-line-height: 1.6;
    --ks-radius: 6px;
    --ks-max-width: 800px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* La page prend au moins la hauteur de la fenêtre : le pied reste en bas */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--ks-font-family);
    color: var(--ks-text);
    line-height: 1.6;
    background: var(--ks-bg);
}

/* La colonne et la page (la grille : toc.css), dans la largeur de l'en-tête, 74rem, avec 16 px de
   marge sur les côtés */
.ks-layout {
    flex: 1 0 auto;
    width: 100%;
    max-width: calc(74rem + 32px);
    margin-inline: auto;
    padding: clamp(16px, 2.5vw, 32px) 16px clamp(48px, 6vw, 72px);
}

/* L'accueil n'a pas de colonne : il prend toute la largeur */
@media (min-width: 960px) {
    .ks-layout:has(> .ks-content--home) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Header — pas collé : c'est la barre de la recherche et du sommaire qui reste en haut (toc.css).
   Son contenu dans la largeur de la page (74rem), son fond sur toute la fenêtre. */
.ks-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px max(16px, calc((100% - 74rem) / 2));
    background: var(--ks-header-bg);
    color: var(--ks-header-text);
    font-size: 0.9em;
}

.ks-header-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ks-home {
    display: flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
}

.ks-home:hover {
    opacity: 0.85;
}

.ks-logo {
    display: block;
    height: 28px;
    width: auto;
    max-height: 28px;
}

.ks-logo-text {
    font-weight: 600;
    font-size: 0.95em;
    white-space: nowrap;
}

.ks-nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: background 0.15s;
}

.ks-nav-link:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Content — la page, comme un article du guide de TimeAcappella : où elle est, son titre, ses blocs
   à une largeur de lecture, la page suivante à sa fin (la colonne et la barre : toc.css) */
.ks-content {
    max-width: 44rem;
    font-size: 1.125rem;
}

.ks-content > :first-child {
    margin-top: 0;
}

/* Où est la page, en tête de son texte : un seul fil d'Ariane, l'accueil de la doc en vrai lien
   (2026-10-22 : sous le menu, il passait pour une partie de celui-ci) */
.ks-crumbs {
    margin: 0 0 18px;
    color: var(--ks-text-light);
    font-size: 0.95rem;
    font-weight: 600;
}

.ks-crumbs a {
    color: inherit;
    text-underline-offset: 4px;
}

/* Le titre de la page (et sur l'accueil, sa phrase) */
.ks-content h1,
.ks-head h1 {
    max-width: 30ch;
    margin: 0 0 28px;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.ks-head {
    margin: 0 0 28px;
}

.ks-head h1 {
    margin: 0;
}

.ks-head p {
    max-width: 40em;
    margin: 10px 0 0;
    color: var(--ks-text-light);
    font-size: 1.15rem;
    line-height: 1.5;
}

/* La phrase sous le titre d'une page qui a sa description (2026-11-01), comme celle de l'accueil */
.ks-content h1:has(+ .ks-lede) {
    margin-bottom: 0;
}

.ks-content p.ks-lede {
    max-width: 40em;
    margin: 10px 0 28px;
    color: var(--ks-text-light);
    font-size: 1.15rem;
    line-height: 1.5;
}

/* Les liens du texte, aux couleurs de la doc (le bleu du navigateur jusqu'au 2026-11-01) */
.ks-content a {
    color: var(--ks-accent);
    text-underline-offset: 3px;
}

.ks-content a:hover {
    color: var(--ks-accent-hover);
}

.ks-content p,
.ks-content > ul,
.ks-content > ol {
    max-width: 36em;
    margin: 0 0 16px;
}

.ks-content > ul,
.ks-content > ol {
    padding-left: 1.3em;
}

.ks-content li + li {
    margin-top: 8px;
}

.ks-content h2 {
    margin: 44px 0 12px;
    color: var(--ks-header-bg);
    font-size: clamp(1.45rem, 2.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
    scroll-margin-top: 24px;
}

.ks-content h3 {
    margin: 32px 0 10px;
    color: var(--ks-header-bg);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    scroll-margin-top: 24px;
}

/* La page suivante, à la fin : la doc se lit d'une page à l'autre */
.ks-next {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid color-mix(in oklab, var(--ks-text) 14%, transparent);
}

.ks-next span {
    color: var(--ks-text-light);
    font-weight: 600;
}

.ks-next a {
    color: var(--ks-accent);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.ks-next a span {
    color: inherit;
}

/* Images */
.ks-figure {
    margin: 26px 0 30px;
}

.ks-figure img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius);
}

/* Captures de l'app (bloc « gallery », 2026-11-01, d'après le guide de TimeAcappella) : à la taille d'un
   téléphone, les coins de son écran, côte à côte quand il y en a plusieurs ; un écran de tablette plus grand */
.ks-gallery {
    --ks-shot: 17.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 26px 0 30px;
}

.ks-gallery--2 {
    --ks-shot: 15rem;
}

.ks-gallery--3 {
    --ks-shot: 12.5rem;
}

.ks-gallery__item {
    width: min(100%, var(--ks-shot));
    margin: 0;
}

.ks-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ks-border);
    /* Le coin de l'écran d'un téléphone, environ un huitième de sa largeur */
    border-radius: calc(min(100vw - 32px, var(--ks-shot)) * 0.13);
}

.ks-gallery__item--wide {
    width: min(100%, 34rem);
}

.ks-gallery__item--wide img {
    border-radius: 18px;
}

.ks-gallery__item figcaption {
    margin-top: 10px;
    color: var(--ks-text-light);
    font-size: 0.95em;
    text-align: center;
}

/* Deux ou trois sur un téléphone : chacune sa part de la largeur, la troisième centrée dessous */
@media (max-width: 640px) {
    .ks-gallery {
        justify-content: center;
    }

    .ks-gallery--2 .ks-gallery__item,
    .ks-gallery--3 .ks-gallery__item {
        width: calc((100% - 22px) / 2);
    }

    .ks-gallery--2 .ks-gallery__item img,
    .ks-gallery--3 .ks-gallery__item img {
        border-radius: calc((100vw - 54px) / 2 * 0.13);
    }
}

/* Notes — leur genre en gras devant le texte, dans la langue de la page */
.ks-note {
    max-width: 36em;
    margin: 0 0 16px;
    padding: 14px 18px;
    border-radius: var(--ks-radius);
    border-left: 4px solid;
}

.ks-note--tip {
    background: #eafaf1;
    border-color: var(--ks-note-tip);
}

.ks-note--warning {
    background: #fef5e7;
    border-color: var(--ks-note-warning);
}

.ks-note--note {
    background: #eaf2f8;
    border-color: var(--ks-note-note);
}

.ks-note--important {
    background: #fdedec;
    border-color: var(--ks-note-important);
}

/* Steps — un numéro dans un rond de la couleur d'accent devant chacune */
.ks-content .ks-steps {
    padding: 0;
    list-style: none;
    counter-reset: ks-step;
}

.ks-steps li {
    position: relative;
    padding-left: 46px;
    counter-increment: ks-step;
}

.ks-steps li + li {
    margin-top: 12px;
}

.ks-steps li::before {
    content: counter(ks-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ks-accent);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
}

/* Tables — défilant seules quand elles sont plus larges que la page, jamais la page entière */
.ks-table-wrap {
    margin: 0 0 16px;
    overflow-x: auto;
}

.ks-table {
    width: 100%;
    border-collapse: collapse;
}

.ks-table th,
.ks-table td {
    padding: 10px 14px;
    text-align: left;
    border: 1px solid var(--ks-border);
}

.ks-table th {
    background: var(--ks-bg-secondary);
    font-weight: 600;
}

.ks-table tr:hover {
    background: #f8f9fa;
}

/* Code — la police mono du système sur chaque élément : celle du navigateur (`monospace` sur
   <code>, Courier sur Mac) passait avant celle héritée du bloc */
code,
kbd,
samp,
pre {
    font-family: var(--ks-font-mono);
}

.ks-code {
    background: var(--ks-code-bg);
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius);
    padding: 16px;
    margin: 16px 0;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
}

/* Links */
.ks-link {
    margin: 12px 0;
}

.ks-link a {
    color: var(--ks-accent);
    text-decoration: none;
}

.ks-link a:hover {
    text-decoration: underline;
}

/* Index page — comme l'accueil du guide de TimeAcappella : son titre, la recherche, puis chaque
   rubrique en carte avec ses pages, en colonnes qui prennent chacune leur hauteur */
.ks-content--home {
    max-width: none;
    font-size: 1rem;
}

.ks-home-parts {
    columns: 21rem;
    column-gap: 18px;
}

.ks-home-part {
    break-inside: avoid;
    margin: 0 0 18px;
    padding: 24px 24px 18px;
    border: 1px solid color-mix(in oklab, var(--ks-text) 16%, transparent);
    border-radius: 14px;
    background: color-mix(in oklab, var(--ks-bg-secondary) 50%, var(--ks-bg));
}

.ks-content .ks-home-part h2 {
    margin: 0 0 12px;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Une sous-rubrique, dans la carte de sa rubrique */
.ks-content .ks-home-part h3 {
    margin: 22px 0 12px;
    font-size: 1.15rem;
}

.ks-content .ks-home-part ul {
    display: grid;
    gap: 14px;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ks-content .ks-home-part li + li {
    margin-top: 0;
}

.ks-home-part a {
    color: var(--ks-accent);
    font-weight: 700;
    text-decoration: none;
}

.ks-home-part a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ks-home-part span {
    display: block;
    margin-top: 2px;
    color: var(--ks-text-light);
    line-height: 1.45;
}

/* Menu buttons */
.ks-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

/* Hamburger icon (3 bars → X) */
.ks-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 20px;
    height: 20px;
}

.ks-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
    transform-origin: center;
}

.ks-menu-btn.ks-active .ks-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ks-menu-btn.ks-active .ks-hamburger span:nth-child(2) {
    opacity: 0;
}

.ks-menu-btn.ks-active .ks-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Language button icon */
.ks-lang-icon {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 1.5;
}

/* Offcanvas overlay */
.ks-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.3s;
}

.ks-overlay.ks-visible {
    display: block;
}

.ks-overlay.ks-shown {
    opacity: 1;
}

/* Offcanvas panel */
.ks-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--ks-bg);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ks-offcanvas--left {
    left: 0;
}

.ks-offcanvas--right {
    right: 0;
    transform: translateX(100%);
}

.ks-offcanvas.ks-open {
    transform: translateX(0);
}

/* Offcanvas header */
.ks-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--ks-header-bg);
    color: var(--ks-header-text);
    flex-shrink: 0;
}

.ks-offcanvas-title {
    font-weight: 600;
    font-size: 0.95em;
}

.ks-offcanvas-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.4em;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.ks-offcanvas-close:hover {
    opacity: 0.7;
}

/* Offcanvas body */
.ks-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Les liens du site, dans leur panneau (bouton ≡ de l'en-tête, _site.html) */
.ks-offcanvas-links a {
    display: block;
    padding: 10px 12px;
    color: var(--ks-text);
    text-decoration: none;
    border-radius: var(--ks-radius);
    font-size: 0.95em;
    font-weight: 600;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.ks-offcanvas-links a:hover,
.ks-offcanvas-links a[aria-current="page"] {
    background: var(--ks-bg-secondary);
    border-left-color: var(--ks-accent);
}

/* Language list in offcanvas */
.ks-lang-list {
    list-style: none;
    padding: 0;
}

.ks-lang-list li {
    margin: 2px 0;
}

.ks-lang-list a,
.ks-lang-list .ks-lang-list-current {
    display: block;
    padding: 12px 16px;
    border-radius: var(--ks-radius);
    text-decoration: none;
    font-size: 0.95em;
    transition: background 0.15s;
}

.ks-lang-list a {
    color: var(--ks-text);
}

.ks-lang-list a:hover {
    background: var(--ks-bg-secondary);
}

.ks-lang-list .ks-lang-list-current {
    background: var(--ks-header-bg);
    color: #ffffff;
    font-weight: 600;
}

/* Footer */
.ks-footer {
    padding: 16px 24px;
    text-align: center;
    font-size: 0.8em;
    color: var(--ks-text-light);
    border-top: 1px solid var(--ks-border);
}

.ks-footer a {
    color: var(--ks-accent);
    text-decoration: none;
}

.ks-footer a:hover {
    text-decoration: underline;
}

/* Sans kit : les pills du header, et leur menu ≡ quand elles ne tiennent plus */
@media (min-width: 769px) {
    body:not(.ks-has-site) #ks-site-btn {
        display: none;
    }
}

@media (max-width: 768px) {
    .ks-nav-link {
        display: none;
    }
}

/* ── Habillage par le SITE du produit (config « site_kit », kit exporté par WebsiteMgr) ──────────
   La documentation reprend la marque, le menu et le pied de page du site ; ses
   couleurs et polices viennent de kit/kit.css (chargée après cette feuille). Sans kit : rien ici. */
.ks-site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ks-header-text);
    text-decoration: none;
    flex-shrink: 0;
}

.ks-site-brand img {
    display: block;
    height: 30px;
    width: auto;
}

/* Logo qui porte le nom (kit « logoWordmark ») : à 30 px, ses lettres ne se lisent plus. */
.ks-site-brand--wordmark img {
    height: 38px;
}

.ks-site-name {
    font-weight: 700;
    font-size: 1.15em;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ks-site-menu {
    display: none;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
}

.ks-site-menu a {
    color: var(--ks-header-text);
    opacity: 0.78;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}

.ks-site-menu a:hover {
    opacity: 1;
}

.ks-site-menu a[aria-current="page"] {
    opacity: 1;
    border-bottom-color: var(--ks-accent-hover);
}

.ks-has-site .ks-header {
    padding-block: 10px;
}

.ks-site-footer {
    background: var(--ks-header-bg);
    color: var(--ks-header-text);
    padding: 40px 24px 24px;
    font-size: 0.9em;
}

.ks-site-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 64px;
    max-width: 1100px;
    margin: 0 auto 28px;
}

.ks-site-footer h2 {
    font-size: 0.8em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ks-site-footer ul {
    list-style: none;
}

.ks-site-footer li {
    margin: 6px 0;
}

/* Colonne sans titre : une rangée de liens qui passe à la ligne. */
.ks-site-footer-row {
    flex: 1 1 100%;
}

.ks-site-footer-row ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
}

.ks-site-footer-row li {
    margin: 0;
}

.ks-site-footer a {
    color: var(--ks-header-text);
    opacity: 0.8;
    text-decoration: none;
}

.ks-site-footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

.ks-site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0.85;
}

/* Le menu du site dans l'en-tête ; sous 1024 px, dans son panneau, ouvert par ≡ */
@media (min-width: 1024px) {
    .ks-site-menu {
        display: flex;
    }

    .ks-has-site #ks-site-btn {
        display: none;
    }
}

@media (max-width: 600px) {
    .ks-site-name {
        display: none;
    }
}