/* PBToolboxAI - documentation client. Palette alignee sur site/assets/style.css :
   la doc doit se lire comme une page du site, pas comme une piece rapportee. */
:root {
    --accent: #0f6cbd;
    --ink: #1b1b1f;
    --muted: #5b5b66;
    --line: #e3e6ea;
    --bg: #ffffff;
    --bg-soft: #f4f7fb;
    --radius: 12px;
    --side: 268px;
    --bar: 56px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ink); background: var(--bg); line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- barre ---- */
.docbar {
    position: sticky; top: 0; z-index: 30; height: var(--bar);
    display: flex; align-items: center; gap: 14px; padding: 0 16px;
    background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.docbar .brand { font-weight: 700; font-size: 18px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.docbar .brand:hover { text-decoration: none; }
.docbar .dot { width: 11px; height: 11px; border-radius: 3px; background: var(--accent); }
.docbar .ver {
    font-size: 12px; font-weight: 700; color: var(--accent);
    border: 1px solid var(--accent); border-radius: 999px; padding: 1px 9px;
}
.docbar .spacer { flex: 1; }
.docbar select.lang {
    font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 10px; cursor: pointer;
}
.docbar .retour { font-size: 13px; color: var(--muted); }
.docbar .burger { display: none; font-size: 20px; background: none; border: 0; cursor: pointer; color: var(--ink); }

/* ---- ossature ---- */
.shell { display: flex; align-items: flex-start; }
nav.side {
    position: sticky; top: var(--bar); flex: 0 0 var(--side); width: var(--side);
    height: calc(100vh - var(--bar)); overflow-y: auto;
    padding: 18px 10px 40px 16px; border-right: 1px solid var(--line); background: var(--bg-soft);
}
nav.side a {
    display: block; padding: 5px 10px; border-radius: 7px;
    color: var(--muted); font-size: 14px;
}
nav.side a:hover { background: #e8eef6; color: var(--ink); text-decoration: none; }
nav.side a.on { background: var(--accent); color: #fff; font-weight: 600; }
nav.side .grp {
    margin: 16px 0 6px; padding: 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #8a8a96;
}
nav.side .grp:first-child { margin-top: 0; }

main.doc { flex: 1 1 auto; min-width: 0; max-width: 900px; padding: 26px 34px 90px; }

/* ---- sommaire de page ---- */
nav.toc {
    display: flex; flex-direction: column; gap: 2px;
    margin: 0 0 26px; padding: 12px 16px;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
nav.toc a { font-size: 13.5px; color: var(--muted); }
nav.toc a.n3 { padding-left: 16px; font-size: 13px; }

/* ---- prose ---- */
main.doc h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 18px; }
main.doc h2 { font-size: 22px; margin: 38px 0 12px; padding-top: 10px; border-top: 1px solid var(--line); }
main.doc h3 { font-size: 17px; margin: 26px 0 8px; }
main.doc h4 { font-size: 15px; margin: 20px 0 6px; color: var(--muted); }
main.doc p, main.doc li { font-size: 15px; }
main.doc ul, main.doc ol { padding-left: 22px; }
main.doc li { margin: 4px 0; }
main.doc hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
main.doc blockquote {
    margin: 18px 0; padding: 12px 16px;
    background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
}
main.doc blockquote p:first-child { margin-top: 0; }
main.doc blockquote p:last-child { margin-bottom: 0; }

/* Cette classe habillait les encadres « A l'ecran », retires le 25/08/2026 :
   ils DECRIVAIENT, sans rien demander, d'ou un ton retenu -- bordure grise, pas
   de fond. Sauf qu'elle ne les visait pas eux, mais toute citation ouvrant sur
   un pictogramme, et il en reste : ⚠️, 💡, ℹ️. Les avertissements se
   trouvaient donc en RETRAIT de la prose, exactement l'inverse de leur role.
   Ils reprennent le fond et l'accent de la citation ordinaire. */

/* « Le voir en vrai » : le seul encadre qui demande un GESTE -- ouvrir la demo.
   Il porte donc l'accent, et un fond qui le detache des deux autres. Sans cette
   distinction, trois encadres identiques se suivent et le lecteur ne voit plus
   lequel lui demande quelque chose. */
main.doc blockquote.agir {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
main.doc blockquote.agir strong { color: var(--accent); }

/* Le lien d'ancre ne se montre qu'au survol du titre : il sert a copier une
   adresse, il n'a pas a peser sur la lecture. */
.ancre { color: var(--line); font-weight: 400; opacity: 0; transition: opacity 0.12s; }
h1:hover .ancre, h2:hover .ancre, h3:hover .ancre, h4:hover .ancre { opacity: 1; }
.ancre:hover { color: var(--accent); text-decoration: none; }

/* ---- code ---- */
code {
    font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.9em;
    background: #f2f4f7; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}
pre.code {
    margin: 16px 0; padding: 14px 16px; overflow-x: auto;
    background: #1e1e23; border-radius: var(--radius);
}
pre.code code {
    background: none; border: 0; padding: 0;
    color: #e6e6ea; font-size: 13.5px; line-height: 1.5; white-space: pre;
}

/* ---- tableaux ---- */
/* Le tableau defile DANS son cadre : une page de doc ne doit jamais defiler
   horizontalement, et ces tableaux d'API sont larges. */
.tablewrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--bg-soft); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
/* Une SIGNATURE se coupe, un IDENTIFIANT jamais. Avec nowrap sur tout le code,
   « of_insert_item (string as_section, string as_id, string as_text, integer
   ai_index) » etait un bloc insecable : il imposait sa largeur a la colonne, et
   la colonne d'en face -- celle qui explique a quoi sert la methode -- se
   retrouvait ecrasee contre le bord.
   Une signature contient des espaces, un identifiant n'en a pas : il suffit donc
   d'autoriser la coupure AUX ESPACES SEULEMENT. « is_super_tooltip_title » reste
   entier, la signature passe a la ligne. */
td code { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
/* Dans la PROSE, un chemin d'appel sans le moindre espace -- « of_tab(id)
   .of_group(id).of_item(id).of_menu_item(id) » -- n'a nulle part ou se couper et
   poussait la PAGE ENTIERE a defiler lateralement sur un ecran etroit. Le
   paragraphe qui le porte ne defile pas, lui, contrairement aux blocs de code.
   « anywhere » ne coupe QUE s'il n'y a pas d'autre solution : un identifiant
   court reste entier. */
main.doc p code, main.doc li code { overflow-wrap: anywhere; }
/* Tableau sans en-tete : la premiere colonne EST l'etiquette (« Userobject »,
   « Classe d'items »...). On lui donne le poids que le <th> absent aurait eu. */
table.nohead td:first-child { background: var(--bg-soft); font-weight: 600; white-space: nowrap; width: 1%; }

/* ---- page de choix de langue ---- */
body.pick { max-width: 520px; margin: 80px auto; padding: 0 20px; }
body.pick ul { list-style: none; padding: 0; }
body.pick li { margin: 8px 0; font-size: 17px; }

/* ---- etroit ---- */
@media (max-width: 900px) {
    .docbar .burger { display: block; }
    .docbar .retour { display: none; }
    nav.side {
        position: fixed; top: var(--bar); left: 0; z-index: 25;
        transform: translateX(-100%); transition: transform 0.18s;
        box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    }
    body.nav-open nav.side { transform: none; }
    main.doc { padding: 20px 18px 70px; }
}

/* ---- mode sombre : suit le systeme, comme les composants ---- */
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8e8ec; --muted: #a0a0ad; --line: #2f2f38;
        --bg: #17171b; --bg-soft: #1f1f26; --accent: #4aa3e8;
    }
    .docbar { background: rgba(23,23,27,0.94); }
    .docbar select.lang { background: #23232b; }
    nav.side a:hover { background: #2a2a33; }
    code { background: #23232b; }
    th { background: #23232b; }
}