/* =====================================================================================================================
   Portail de documentation — la feuille du portail PUBLIC d'une marque (chantier Documentation, lot L1 ; dessin « Verre »,
   docs/chantier-documentation.md §13.19, maquette docs/mockups/documentation-portail.html?d=c). Préfixe doc- = « documentation ».

   Servie SANS site.css ni DevExtreme, sous la CSP à nonce de _DocumentationLayout : elle porte sa police (Roboto locale, les
   fichiers de site.css et de web-page.css, dossier de conformité RGPD-I4) et les défauts du décor. Les quatre couleurs du décor
   (--docage-color1..4) sont celles de Docage par DÉFAUT seulement, posées sur :where(:root), de spécificité nulle : la marque qui
   sert le portail (BrandContext.CssVariables) les remplace. Toute couleur se DÉRIVE d'elles, sauf les couleurs de SENS (verbes
   HTTP, statuts d'une réponse).

   Dessin « Verre » : la coquille de l'application — un fond tiré des couleurs de la marque, des surfaces de verre dépoli (le
   « voile de la coquille »), des îlots qui flottent (l'en-tête, le sommaire, la page), les états en pilules blanches, les icônes
   des chapitres dans des pastilles de couleur. Jamais l'orange (4) contre le corail (2). Chargée APRÈS la feuille de l'assistant
   et celle du lecteur des capsules : elle les habille.
   ===================================================================================================================== */

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url('devextreme/fonts/Roboto-300.woff2') format('woff2'), url('devextreme/fonts/Roboto-300.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('devextreme/fonts/Roboto-400.woff2') format('woff2'), url('devextreme/fonts/Roboto-400.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('devextreme/fonts/Roboto-500.woff2') format('woff2'), url('devextreme/fonts/Roboto-500.woff') format('woff'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('devextreme/fonts/Roboto-700.woff2') format('woff2'), url('devextreme/fonts/Roboto-700.woff') format('woff'); }

:where(:root) {
    /* Le décor : Docage par défaut, la marque le remplace. */
    --docage-color1: #1D4755;
    --docage-color2: #FC5950;
    --docage-color3: #00A08F;
    --docage-color4: #FF9D54;

    /* Les verbes HTTP : des couleurs de SENS, celles de la référence de l'API — QUERY (RFC 10008) a la sienne. */
    --m-get: #2C6FDB;
    --m-post: #11875D;
    --m-put: #C2650F;
    --m-delete: #D33A3A;
    --m-query: #7651D6;

    /* Les statuts d'une réponse : succès, refus, conflit. */
    --s-ok: #13855C;
    --s-warn: #B4650A;
    --s-err: #C93636;

    /* Le verre : un voile blanc, flou et saturé, un filet de lumière, une ombre douce. */
    --glass: color-mix(in srgb, white 66%, transparent);
    --glass-strong: color-mix(in srgb, white 84%, transparent);
    --glass-line: color-mix(in srgb, white 70%, transparent);
    --glass-shadow: 0 22px 50px -30px color-mix(in srgb, var(--docage-color1) 60%, transparent), 0 2px 10px -4px color-mix(in srgb, var(--docage-color1) 18%, transparent);

    /* Les rôles du portail. */
    --doc-surface: #FFFFFF;
    --doc-surface-sunken: color-mix(in srgb, var(--docage-color1) 5%, #F4F5F3);
    --doc-line: color-mix(in srgb, var(--docage-color1) 11%, #E6E8E5);
    --doc-line-strong: color-mix(in srgb, var(--docage-color1) 22%, #D4D7D3);
    --doc-ink: color-mix(in srgb, var(--docage-color1) 60%, #0A0F11);
    --doc-ink-soft: color-mix(in srgb, var(--docage-color1) 42%, #7D8382);
    --doc-ink-faint: color-mix(in srgb, var(--docage-color1) 24%, #A2A6A4);
    --doc-accent: var(--docage-color1);
    --doc-highlight: var(--docage-color2);
    --doc-on-accent: #FFFFFF;
    --doc-tint: color-mix(in srgb, var(--docage-color1) 7%, white);
    --doc-shadow: color-mix(in srgb, var(--docage-color1) 16%, transparent);
    --doc-code-surface: color-mix(in srgb, var(--docage-color1) 8%, white);
    --doc-radius: 20px;
    --doc-header-height: 60px;
    /* Le haut d'un îlot collé sous l'en-tête flottant. */
    --doc-top: 88px;
    /* La largeur du sommaire : celle d'origine ; le lecteur l'élargit (documentation.js pose la sienne). */
    --doc-nav-width: 292px;
    --doc-font: 'Roboto', 'Segoe UI', Arial, sans-serif;
    --doc-mono: 'Cascadia Code', Consolas, 'SFMono-Regular', Menlo, monospace;

    /* Le code : pétrole profond, onglets en pilules blanches. */
    --doc-code-radius: 16px;
    --doc-code-bg: color-mix(in srgb, var(--docage-color1) 72%, #040A0C);
    --doc-code-bar: color-mix(in srgb, var(--docage-color1) 80%, #040A0C);
    --doc-code-line: rgba(255, 255, 255, 0.09);
    --doc-code-ink: #E3ECEE;
    --doc-code-ink-soft: rgba(227, 236, 238, 0.62);
    --doc-code-hover: rgba(255, 255, 255, 0.08);
    --tk-k: #FFFFFF;
    --tk-p: color-mix(in srgb, var(--docage-color3) 30%, #BFE6FF);
    --tk-s: color-mix(in srgb, var(--docage-color3) 50%, white);
    --tk-n: color-mix(in srgb, var(--docage-color2) 50%, white);
    --tk-c: rgba(227, 236, 238, 0.5);
    --tk-h: color-mix(in srgb, var(--docage-color3) 30%, #BFE6FF);
    --tk-u: #FFFFFF;
    --tk-f: color-mix(in srgb, var(--docage-color3) 45%, white);
    --tk-t: #D3C8FA;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--doc-top) + 12px); }

/* Le fond : quatre halos tirés de la marque, fixés à la fenêtre. */
body.doc-body {
    margin: 0;
    font-family: var(--doc-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--doc-ink);
    background:
        radial-gradient(1000px 680px at 6% -8%, color-mix(in srgb, var(--docage-color3) 30%, transparent), transparent 62%),
        radial-gradient(900px 640px at 100% 4%, color-mix(in srgb, var(--docage-color1) 26%, transparent), transparent 62%),
        radial-gradient(860px 620px at 78% 108%, color-mix(in srgb, var(--docage-color2) 17%, transparent), transparent 60%),
        radial-gradient(700px 520px at 0% 100%, color-mix(in srgb, var(--docage-color1) 14%, transparent), transparent 60%),
        color-mix(in srgb, var(--docage-color1) 5%, #F2F3F1);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Spécificité nulle (:where) : la moindre classe d'un composant l'emporte sur ces remises à zéro. */
:where(.doc-body) a { color: inherit; }
:where(.doc-body) button { font: inherit; color: inherit; }
.doc-body :focus-visible { outline: 2px solid color-mix(in srgb, var(--doc-accent) 55%, transparent); outline-offset: 2px; }

/* Le sprite des icônes : présent dans la page, jamais affiché. */
.doc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Une icône « Light » : un trait, la couleur du texte — la règle d'iconographie de l'APP (1f). */
.ic {
    flex: none;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.14em;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid var(--doc-line);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--doc-surface);
    font: 500 11px/1 var(--doc-font);
    color: var(--doc-ink-soft);
}

.doc-skip { position: absolute; left: -9999px; top: 12px; z-index: 200; padding: 8px 14px; border-radius: 999px; background: var(--doc-accent); color: var(--doc-on-accent); }
.doc-skip:focus { left: 16px; }
.doc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Les tons du décor (chapitres, fiches liées) : l'une des quatre couleurs de la marque. */
.doc-tone-1 { --tone: var(--docage-color1); }
.doc-tone-2 { --tone: var(--docage-color2); }
.doc-tone-3 { --tone: var(--docage-color3); }
.doc-tone-4 { --tone: var(--docage-color4); }

/* Le verre des îlots. */
.doc-header, .doc-nav, .doc-article, .doc-toc, .tile, .home-chapter-link, .doc-palette-box, .home-eyebrow, .home-search {
    background: var(--glass-strong);
    border: 1px solid var(--glass-line);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}

/* ─── L'en-tête : un îlot flottant ─── */
.doc-header {
    position: sticky;
    top: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--doc-header-height);
    margin: 12px 16px 0;
    padding: 0 14px 0 18px;
    border-radius: 18px;
}
.doc-brand { display: flex; flex: none; align-items: center; gap: 12px; text-decoration: none; }
.doc-brand-logo { display: block; width: auto; height: 30px; }
.doc-brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--doc-accent); white-space: nowrap; }
.doc-brand-kicker {
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--docage-color1) 7%, transparent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--doc-ink-soft);
}
.doc-sections { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--docage-color1) 7%, transparent); }
.doc-section {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--doc-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.doc-section .ic { font-size: 16px; color: var(--doc-accent); }
.doc-section:hover { color: var(--doc-ink); }
.doc-section.is-current { background: #FFFFFF; color: var(--doc-ink); box-shadow: 0 3px 8px -3px var(--doc-shadow); }
.doc-section.is-current .ic { color: var(--docage-color2); }

.doc-search-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(400px, 32vw);
    height: 40px;
    margin-left: auto;
    padding: 0 8px 0 16px;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    background: color-mix(in srgb, white 70%, transparent);
    font-size: 14px;
    color: var(--doc-ink-soft);
    text-align: left;
    cursor: pointer;
}
.doc-search-trigger:hover { background: #FFFFFF; }
.doc-search-trigger > .ic { font-size: 17px; color: var(--doc-accent); }
.doc-search-trigger-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.doc-keys { display: inline-flex; flex: none; gap: 3px; }
.doc-search-trigger kbd { border-radius: 999px; }

/* Le bouton de l'assistant (documentation-assistant.css le dessine sur la référence de l'API ; ici, en dégradé de la marque). */
.doc-header .doc-assistant-launcher {
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--docage-color1), var(--docage-color3));
    font: 500 14px/1 var(--doc-font);
    color: #FFFFFF;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--docage-color3) 80%, transparent);
}
.doc-header .doc-assistant-launcher:hover,
.doc-header .doc-assistant-launcher[aria-expanded="true"] { background: linear-gradient(120deg, var(--docage-color1), var(--docage-color3)); color: #FFFFFF; filter: brightness(1.06); }

.doc-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--doc-line);
    border-radius: 12px;
    background: var(--doc-surface);
    font-size: 18px;
    color: var(--doc-ink);
    cursor: pointer;
}

/* ─── Le corps : trois îlots — le sommaire, la page, « Sur cette page » ─── */
.doc-shell {
    display: grid;
    grid-template-columns: var(--doc-nav-width) minmax(0, 1fr);
    gap: 18px;
    max-width: 1640px;
    margin: 0 auto;
    padding: 18px 16px 28px;
}
.doc-side { position: sticky; top: var(--doc-top); align-self: start; height: calc(100vh - var(--doc-top) - 16px); }
.doc-nav { height: 100%; overflow: auto; padding: 18px 12px 24px; border-radius: 24px; scrollbar-width: thin; }

/* La poignée du sommaire : dans l'espace entre le sommaire et la page ; le curseur la révèle. */
.doc-nav-resizer {
    position: absolute;
    top: 24px;
    right: -14px;
    bottom: 24px;
    width: 10px;
    border-radius: 999px;
    cursor: col-resize;
    touch-action: none;
}
.doc-nav-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 4px;
    height: 56px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--docage-color1) 22%, transparent);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease, height 0.2s ease, background 0.2s ease;
}
.doc-side:hover .doc-nav-resizer::after { opacity: 1; }
.doc-nav-resizer:hover::after,
.doc-nav-resizer:focus-visible::after,
.doc-nav-resizer.is-dragging::after { opacity: 1; height: 96px; background: var(--docage-color1); }
body.doc-resizing { cursor: col-resize; user-select: none; }

.doc-nav-part {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--doc-ink-faint);
    text-decoration: none;
}
.doc-nav-part .ic { font-size: 14px; color: var(--doc-accent); }
.doc-nav-part:hover, .doc-nav-part[aria-current="page"] { color: var(--doc-ink); }
.doc-nav-list { margin: 0; padding: 0; list-style: none; }
.doc-nav-item + .doc-nav-item { margin-top: 1px; }
.doc-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--doc-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.doc-nav-link:hover { background: color-mix(in srgb, white 80%, transparent); }
summary.doc-nav-link { list-style: none; }
summary.doc-nav-link::-webkit-details-marker { display: none; }
.doc-nav-text { flex: 1; min-width: 0; }
.doc-nav-chapter { font-weight: 500; }
.doc-nav-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--tone);
    color: #FFFFFF;
    font-size: 15px;
    box-shadow: 0 6px 12px -8px var(--tone);
}
.doc-nav-count {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--docage-color1) 7%, transparent);
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    color: var(--doc-ink-soft);
}
.doc-nav-chevron, .doc-nav-ext { flex: none; font-size: 14px; color: var(--doc-ink-faint); transition: transform 0.2s ease; }
.doc-nav-group:not([open]) > summary .doc-nav-chevron { transform: rotate(-90deg); }
.doc-nav-row { display: flex; align-items: center; gap: 2px; }
.doc-nav-row > .doc-nav-link { flex: 1; }
.doc-nav-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    font-size: 14px;
    color: var(--doc-ink-faint);
    cursor: pointer;
}
.doc-nav-toggle:hover { background: color-mix(in srgb, white 80%, transparent); color: var(--doc-ink); }
.doc-nav-toggle .ic { transition: transform 0.2s ease; }
.doc-nav-toggle[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.doc-nav-depth-1 { margin: 2px 0 8px 26px; }
.doc-nav-depth-2, .doc-nav-depth-3, .doc-nav-depth-4 { margin: 2px 0 6px 12px; }
.doc-nav-depth-1 .doc-nav-link, .doc-nav-depth-2 .doc-nav-link, .doc-nav-depth-3 .doc-nav-link, .doc-nav-depth-4 .doc-nav-link { font-size: 13.5px; color: var(--doc-ink-soft); }
.doc-nav-item.is-current > .doc-nav-link,
.doc-nav-item.is-current > .doc-nav-row > .doc-nav-link { background: #FFFFFF; color: var(--doc-ink); font-weight: 500; box-shadow: 0 4px 12px -6px var(--doc-shadow); }
.doc-nav-item.is-current > .doc-nav-link::after,
.doc-nav-item.is-current > .doc-nav-row > .doc-nav-link::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--docage-color2); }
/* Une partie de la page lue (« Migration V1 > V2 ») : allumée par documentation.js quand on la lit, plus discrète que la page elle-même. */
.doc-nav-link.doc-nav-section.is-active { background: color-mix(in srgb, white 70%, transparent); color: var(--doc-ink); font-weight: 500; }

.doc-main { min-width: 0; }
.doc-main:focus { outline: none; }
.doc-main-solo { padding: 0 16px 56px; }

.doc-page { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 18px; align-items: start; }
.doc-page.is-single { grid-template-columns: minmax(0, 1fr); }
.doc-article { min-width: 0; padding: 40px 52px 48px; border-radius: 28px; }
.doc-page.is-single .doc-article { max-width: 1080px; }

.doc-breadcrumb { margin: 0 0 16px; font-size: 13px; color: var(--doc-ink-soft); }
.doc-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.doc-breadcrumb li + li::before { content: "\203A"; margin: 0 2px 0 0; opacity: 0.6; }
.doc-breadcrumb a { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--docage-color1) 6%, transparent); text-decoration: none; }
.doc-breadcrumb a:hover { color: var(--doc-accent); background: #FFFFFF; }

.doc-title { margin: 0; font-size: 40px; font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; color: var(--doc-ink); }
.doc-lead { margin: 12px 0 0; font-size: 18px; line-height: 1.55; color: var(--doc-ink-soft); }

/* La ligne sous le titre : temps de lecture, date, « Copier en Markdown », l'assistant. */
.doc-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 20px 0 32px; font-size: 13px; color: var(--doc-ink-soft); }
.doc-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.doc-meta-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.doc-meta-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--doc-line);
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--doc-ink);
    white-space: nowrap;
    cursor: pointer;
}
.doc-meta-button:hover { border-color: var(--doc-line-strong); }
.doc-meta-button .ic { color: var(--doc-accent); }
.doc-meta-button.is-copied, .doc-meta-button.is-copied .ic { color: var(--s-ok); }

/* ─── Le contenu rendu par Markdig ─── */
.doc-content { font-size: 16px; line-height: 1.75; }
.doc-content > :first-child { margin-top: 0; }
.doc-content h2 { margin: 48px 0 14px; font-size: 25px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: var(--doc-ink); }
.doc-content h3 { margin: 30px 0 8px; font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--doc-ink); }
.doc-content h4 { margin: 24px 0 6px; font-size: 16px; font-weight: 500; color: var(--doc-ink); }
.doc-content h2, .doc-content h3 { scroll-margin-top: calc(var(--doc-top) + 12px); }
.doc-content p, .doc-content ul, .doc-content ol { margin: 0 0 16px; }
.doc-content li + li { margin-top: 6px; }
.doc-content a { color: var(--doc-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--doc-accent) 30%, transparent); text-underline-offset: 3px; }
.doc-content a:hover { text-decoration-color: currentColor; }
.doc-content strong { font-weight: 500; color: var(--doc-ink); }
.doc-content code { font-family: var(--doc-mono); font-size: 0.86em; }
.doc-content :not(pre) > code { padding: 2px 7px; border-radius: 7px; background: var(--doc-code-surface); color: var(--doc-ink); }
.doc-table-wrap { margin: 0 0 22px; overflow-x: auto; }
.doc-content table { width: 100%; overflow: hidden; border-collapse: separate; border-spacing: 0; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--doc-line); font-size: 14.5px; }
.doc-content th { padding: 12px 16px; background: color-mix(in srgb, var(--docage-color1) 6%, white); font-size: 13px; font-weight: 500; text-align: left; vertical-align: top; color: var(--doc-ink-soft); }
.doc-content td { padding: 12px 16px; border-top: 1px solid var(--doc-line); vertical-align: top; }
.doc-content td:first-child { font-weight: 500; color: var(--doc-ink); }
.doc-content blockquote { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--doc-accent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, white 70%, transparent); }
.doc-content blockquote p:last-child { margin-bottom: 0; }
.doc-content hr { margin: 32px 0; border: 0; border-top: 1px solid var(--doc-line); }

/* Les encadrés « ::: note », « ::: tip », « ::: warning » : le rendu leur donne une icône et un titre. */
.doc-content .note, .doc-content .tip, .doc-content .warning {
    --c: var(--docage-color1);
    display: flex;
    gap: 12px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--c) 8%, white);
}
.doc-content .tip { --c: var(--docage-color3); }
.doc-content .warning { --c: var(--docage-color4); }
.doc-callout-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--c);
    color: #FFFFFF;
    font-size: 16px;
}
.doc-callout-body { min-width: 0; }
.doc-content .doc-callout-title { margin: 3px 0 2px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: color-mix(in srgb, var(--c) 82%, black); }
.doc-callout-body > :last-child { margin-bottom: 0; }

/* ─── Les blocs de code ─── */
.doc-code {
    margin: 0 0 18px;
    overflow: hidden;
    border: 1px solid var(--doc-code-line);
    border-radius: var(--doc-code-radius);
    background: var(--doc-code-bg);
    color: var(--doc-code-ink);
    box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--docage-color1) 80%, transparent);
    /* Sur le fond sombre, les couleurs de sens s'éclaircissent. */
    --s-ok: #6EE0AE;
    --s-warn: #F7BE6E;
    --s-err: #FF8F8F;
}
.doc-code-bar { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--doc-code-line); background: var(--doc-code-bar); }
.doc-code-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.doc-code-tab {
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--doc-code-ink-soft);
    white-space: nowrap;
    cursor: pointer;
}
.doc-code-tab:hover { color: var(--doc-code-ink); }
.doc-code-tab.is-active { background: #FFFFFF; color: var(--docage-color1); }
.doc-code-lang { padding-left: 2px; font-size: 12px; font-weight: 500; color: var(--doc-code-ink-soft); }
.doc-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 12px;
    color: var(--doc-code-ink-soft);
    white-space: nowrap;
    cursor: pointer;
}
.doc-code-copy:hover { background: var(--doc-code-hover); color: var(--doc-code-ink); }
.doc-code-copy.is-copied { color: var(--s-ok); }
.doc-content .doc-code-pre, .doc-code-pre { margin: 0; padding: 14px 16px; overflow: auto; font: 13px/1.65 var(--doc-mono); white-space: pre; tab-size: 2; }
.doc-code-pre code { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.doc-content .doc-code-pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.tk-k { color: var(--tk-k); font-weight: 700; }
.tk-s { color: var(--tk-s); }
.tk-p { color: var(--tk-p); }
.tk-n { color: var(--tk-n); }
.tk-c { color: var(--tk-c); font-style: italic; }
.tk-h { color: var(--tk-h); }
.tk-u { color: var(--tk-u); }
.tk-f { color: var(--tk-f); }
.tk-t { color: var(--tk-t); }

/* Les verbes : une pastille de leur couleur de sens. */
.doc-method { --m: var(--m-get); display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 50px; height: 22px; padding: 0 7px; border-radius: 999px; font: 700 11px/1 var(--doc-mono); letter-spacing: 0.02em; color: var(--m); background: color-mix(in srgb, var(--m) 13%, transparent); }
.doc-method.m-get { --m: var(--m-get); }
.doc-method.m-post { --m: var(--m-post); }
.doc-method.m-put { --m: var(--m-put); }
.doc-method.m-delete { --m: var(--m-delete); }
.doc-method.m-query { --m: var(--m-query); }

/* ─── Un guide pas à pas : chaque étape dans sa carte, son numéro en pastille ─── */
.doc-step { margin: 0 0 18px; padding: 24px 26px 8px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--doc-line), 0 16px 32px -28px var(--doc-shadow); }
.doc-content .doc-step > h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 22px; }
.doc-step-num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--docage-color1), var(--docage-color3));
    font-size: 15px;
    font-weight: 500;
    color: #FFFFFF;
}

/* ─── Le lecteur d'une capsule (capsule-player.css le dessine ; ici, sa tuile arrondie) ─── */
.doc-capsule-frame {
    border-radius: 24px;
    box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--docage-color1) 75%, transparent), 0 0 0 1px var(--glass-line);
}
.doc-capsule figcaption { color: var(--doc-ink-soft); }

/* ─── Les liens croisés, les sous-pages d'un chapitre, la page précédente et la suivante ─── */
.doc-related { margin: 36px 0 0; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--docage-color2) 10%, white), #FFFFFF); box-shadow: 0 0 0 1px var(--doc-line); }
.doc-related-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doc-ink-soft); }
.doc-related-title .ic { font-size: 15px; color: var(--docage-color2); }
.doc-related-list { margin: 0; padding: 0; list-style: none; }
.doc-related-item + .doc-related-item { margin-top: 10px; }
.doc-related-link { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; color: var(--doc-ink); text-decoration: none; }
.doc-related-link .ic { color: var(--docage-color2); }
.doc-related-link:hover { color: var(--doc-accent); }
.doc-related-summary { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--doc-ink-soft); }

.doc-children { margin-top: 40px; }
.doc-children-title { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doc-ink-soft); }
.doc-children-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.doc-child {
    position: relative;
    padding: 16px 18px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px var(--doc-line);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.doc-child:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--doc-line-strong), 0 14px 28px -20px var(--doc-shadow); }
.doc-child-link { font-weight: 500; color: var(--doc-ink); text-decoration: none; }
.doc-child-link::after { content: ""; position: absolute; inset: 0; }
.doc-child-summary { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--doc-ink-soft); }

.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 32px 0 0; }
.doc-pager-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px var(--doc-line);
    color: var(--doc-ink);
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.doc-pager-link:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--doc-line-strong), 0 14px 28px -20px var(--doc-shadow); }
.doc-pager-link > span { display: flex; flex-direction: column; min-width: 0; }
.doc-pager-link .ic { font-size: 18px; color: var(--docage-color2); }
.doc-pager-link.is-next { justify-content: flex-end; text-align: right; }
.doc-pager-kicker { font-size: 12px; color: var(--doc-ink-faint); }
.doc-pager-title { font-weight: 500; }

/* ─── « Sur cette page » et sa jauge de lecture (posée par le script, en CSSOM) ─── */
.doc-toc {
    position: sticky;
    top: var(--doc-top);
    align-self: start;
    max-height: calc(100vh - var(--doc-top) - 16px);
    overflow: auto;
    padding: 18px 16px;
    border-radius: 22px;
    scrollbar-width: thin;
}
.doc-toc-title { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--doc-ink-faint); }
.doc-toc-progress { position: relative; height: 4px; margin: 0 0 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--docage-color1) 8%, transparent); }
.doc-toc-progress-bar { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, var(--docage-color1), var(--docage-color3)); transform: scaleX(var(--doc-read, 0)); transform-origin: left; transition: transform 0.15s linear; }
.doc-toc-list { margin: 0; padding: 0; list-style: none; }
.doc-toc-item a { display: block; padding: 6px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: var(--doc-ink-soft); text-decoration: none; }
.doc-toc-level-3 a { padding-left: 22px; font-size: 13px; }
.doc-toc-item a:hover { background: #FFFFFF; color: var(--doc-ink); }
.doc-toc-item a.is-active { background: #FFFFFF; color: var(--doc-ink); font-weight: 500; box-shadow: 0 3px 10px -6px var(--doc-shadow); }

/* ─── Une définition d'objet : sa tête, sa Constellation, ses propriétés, énumérations et liaisons ─── */
.doc-object-head { display: flex; align-items: center; gap: 16px; }
.doc-object-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 17px; background: var(--tone); color: #FFFFFF; font-size: 26px; box-shadow: 0 12px 24px -14px var(--tone); }
.doc-object-heading { min-width: 0; }
.doc-object-kicker { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--doc-ink-faint); }
.doc-object-type { margin-left: auto; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--docage-color1) 8%, white); font: 13.5px var(--doc-mono); color: var(--doc-ink); }
.doc-object-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; font-size: 14px; color: var(--doc-ink-soft); }
.doc-object-stats span { padding: 6px 14px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--doc-line); }

.doc-constellation { margin: 0 0 36px; padding: 10px 16px 14px; border-radius: 26px; background: color-mix(in srgb, white 60%, transparent); box-shadow: inset 0 0 0 1px var(--glass-line); }
.cst { display: block; width: 100%; height: auto; }
.doc-content .cst a { text-decoration: none; }
.cst-orbit { fill: none; stroke: color-mix(in srgb, var(--docage-color1) 24%, transparent); stroke-dasharray: 2 6; }
.cst-edge { stroke: color-mix(in srgb, var(--docage-color1) 15%, transparent); stroke-width: 1; }
.cst-node { cursor: pointer; }
.cst-dot { fill: #FFFFFF; stroke: var(--tone); stroke-width: 1.5; transition: fill 0.2s ease; }
.cst-icon, .cst-center use { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cst-icon { color: var(--tone); }
.cst-label { font: 500 12px var(--doc-font); fill: var(--doc-ink-soft); }
.cst-label.is-small { font-size: 11px; }
.cst-node:hover .cst-dot { fill: var(--tone); }
.cst-node:hover .cst-icon { color: #FFFFFF; }
.cst-node:hover .cst-label { fill: var(--doc-ink); }
.cst-center circle { fill: var(--docage-color1); stroke: color-mix(in srgb, var(--docage-color3) 60%, white); stroke-width: 3; }
.cst-center use { color: #FFFFFF; }
.cst-center-label { font: 500 14px var(--doc-font); fill: var(--doc-ink); }
.doc-constellation-caption { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--doc-ink-soft); }
.doc-constellation-caption .ic { color: var(--docage-color2); }
.doc-constellation-caption strong { font-weight: 500; color: var(--doc-ink); }

.doc-props-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; }
.doc-props-filter { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 220px; height: 40px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--doc-line); color: var(--doc-ink-faint); }
.doc-props-filter:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--doc-accent) 45%, transparent); }
.doc-props-filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--doc-ink); }
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--docage-color1) 7%, transparent);
    font-size: 13px;
    color: var(--doc-ink-soft);
    white-space: nowrap;
    cursor: pointer;
}
.doc-chip span { font-size: 11.5px; opacity: 0.75; }
.doc-chip.is-active { background: #FFFFFF; color: var(--doc-ink); font-weight: 500; box-shadow: 0 4px 12px -6px var(--doc-shadow); }
.doc-content .doc-props { margin: 0 0 8px; padding: 0; overflow: hidden; border-radius: 20px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--doc-line); list-style: none; }
.doc-prop { padding: 14px 18px; }
.doc-content .doc-props > li + li { margin-top: 0; border-top: 1px solid var(--doc-line); }
.doc-prop:hover { background: color-mix(in srgb, var(--docage-color1) 3%, white); }
.doc-prop.is-common { background: color-mix(in srgb, var(--docage-color1) 3%, white); }
.doc-prop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.doc-content code.doc-prop-name { padding: 0; background: none; font: 500 14px var(--doc-mono); color: var(--doc-ink); }
.doc-prop-type { font-size: 13px; color: var(--doc-ink-soft); }
.doc-prop-type a { font-weight: 500; text-decoration: none; }
.doc-content .doc-prop-type code { padding: 1px 6px; font-size: 12.5px; }
.doc-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.doc-badge.is-required { color: color-mix(in srgb, var(--docage-color2) 85%, black); background: color-mix(in srgb, var(--docage-color2) 12%, transparent); }
.doc-badge.is-readonly { color: var(--doc-ink-soft); background: color-mix(in srgb, var(--doc-ink-soft) 12%, transparent); }
.doc-badge.is-server { color: color-mix(in srgb, var(--docage-color3) 70%, black); background: color-mix(in srgb, var(--docage-color3) 12%, transparent); }
.doc-content .doc-prop-desc { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--doc-ink-soft); }
.doc-content .doc-props-empty { color: var(--doc-ink-soft); font-size: 14px; }

.doc-enums { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 16px; }
.doc-enum { min-width: 0; padding: 16px 18px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--doc-line); }
.doc-content .doc-enum-name { margin: 0 0 8px; font-size: 14px; }
.doc-content .doc-enum-name code { padding: 0; background: none; font: 500 14px var(--doc-mono); color: var(--doc-ink); }
.doc-content .doc-enum-values { margin: 0; padding: 0; list-style: none; }
.doc-content .doc-enum-values li { display: flex; align-items: center; gap: 10px; margin: 0; }
.doc-content .doc-enum-values li + li { margin-top: 4px; }
.doc-enum-value { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 8px; background: var(--docage-color1); font: 700 12px/1 var(--doc-mono); color: #FFFFFF; }
.doc-enum-label { font-size: 14px; }

.doc-content .doc-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.doc-content .doc-links li + li { margin-top: 0; }
.doc-content .doc-link > a { display: block; height: 100%; color: inherit; text-decoration: none; }
.doc-link-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; height: 100%; padding: 12px 14px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--doc-line); color: var(--doc-ink); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.doc-link > a:hover .doc-link-card { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--doc-line-strong), 0 14px 28px -22px var(--doc-shadow); }
.doc-link-icon { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: var(--tone); color: #FFFFFF; font-size: 17px; }
.doc-link-title { font-weight: 500; }
.doc-link-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.doc-link-role { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--docage-color1) 6%, white); font-size: 12px; color: var(--doc-ink-soft); }

/* ─── L'interrupteur (oui/non = un interrupteur, à gauche de son libellé) ─── */
.doc-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; user-select: none; }
.doc-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.doc-switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--doc-line-strong); transition: background 0.2s ease; }
.doc-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.doc-switch input:checked + .doc-switch-track { background: var(--doc-accent); }
.doc-switch input:checked + .doc-switch-track::after { transform: translateX(16px); }
.doc-switch input:focus-visible + .doc-switch-track { outline: 2px solid color-mix(in srgb, var(--doc-accent) 45%, transparent); outline-offset: 2px; }

/* ─── Les tutoriels vidéos : la galerie de la section, une vignette par vidéo (lot L5, DocumentationTutorials) ───
   Rangée par chapitre du guide ; l'affiche est celle du rendu de la marque (servie par le relais d'APP, img-src 'self'), la carte entière
   mène à la page de la vidéo. Le bouton de lecture vit dans la pastille de la durée, en coin : l'affiche porte le titre de la vidéo, à
   gauche, qu'un bouton centré cachait. Sans affiche, le fond creusé et la pastille seuls. */
.doc-tutorials { margin-top: 36px; }
.doc-tutorials-group + .doc-tutorials-group { margin-top: 32px; }
.doc-content .doc-tutorials-title, .doc-tutorials-title { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doc-ink-soft); }
.doc-tutorial-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.doc-tutorial {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px var(--doc-line);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.doc-tutorial:hover,
.doc-tutorial:focus-within { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--doc-line-strong), 0 16px 30px -20px var(--doc-shadow); }
.doc-tutorial-poster { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--doc-surface-sunken); }
.doc-tutorial-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-tutorial-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, white 74%, transparent);
    color: var(--doc-ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px var(--doc-shadow);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.doc-tutorial-play { flex: none; width: 12px; height: 12px; fill: currentColor; }
.doc-tutorial:hover .doc-tutorial-duration,
.doc-tutorial:focus-within .doc-tutorial-duration { background: var(--doc-accent); color: var(--doc-on-accent); transform: scale(1.06); }
.doc-tutorial-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.doc-tutorial-link { font-weight: 500; color: var(--doc-ink); text-decoration: none; }
.doc-tutorial-link::after { content: ""; position: absolute; inset: 0; }
.doc-tutorial-link:focus-visible { outline: none; }
.doc-tutorial:has(.doc-tutorial-link:focus-visible) { outline: 2px solid var(--doc-accent); outline-offset: 2px; }
.doc-tutorial-source { font-size: 13px; line-height: 1.45; color: var(--doc-ink-soft); }

.doc-updated { margin: 48px 0 0; font-size: 13px; color: var(--doc-ink-soft); }

.doc-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--docage-color1), var(--docage-color3));
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
}
.doc-not-found { max-width: 760px; margin: 48px auto 0; }

/* ─── L'accueil : une mosaïque de tuiles de verre ─── */
.home-hero { padding: 56px 24px 36px; text-align: center; }
.home-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--doc-ink-soft); }
.home-eyebrow .ic { color: var(--docage-color3); }
.home-title { margin: 0; font-size: 58px; font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: var(--doc-ink); }
.home-lead { margin: 16px 0 30px; font-size: 20px; color: var(--doc-ink-soft); }
.home-search {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(620px, 100%);
    height: 60px;
    margin: 0 auto;
    padding: 0 12px 0 22px;
    border-radius: 999px;
    font-size: 16.5px;
    color: var(--doc-ink-soft);
    text-align: left;
    cursor: pointer;
}
.home-search > .ic { font-size: 22px; color: var(--doc-accent); }
.home-search:hover { background: #FFFFFF; }
.home-search-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13.5px; }
.home-suggest-label { margin-right: 4px; color: var(--doc-ink-faint); }
.home-chip { padding: 5px 13px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--doc-ink); text-decoration: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.home-chip:hover { background: #FFFFFF; }

/* La mosaïque : le guide sur deux colonnes et deux rangs, l'API sur deux colonnes, l'assistant sur deux rangs ; une tuile absente
   (assistant non offert, marque sans référence) laisse les suivantes prendre sa place. */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; max-width: 1260px; margin: 12px auto 0; }
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 22px 22px 20px;
    border-radius: 26px;
    color: var(--doc-ink);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.tile:hover { transform: translateY(-3px); background: color-mix(in srgb, white 92%, transparent); box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--docage-color1) 70%, transparent), 0 2px 10px -4px var(--doc-shadow); }
.tile-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doc-ink-soft); }
.tile-kicker .ic { font-size: 15px; color: var(--docage-color2); }
.tile-title { display: inline-flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 500; letter-spacing: -0.015em; color: var(--doc-ink); }
.tile-ext { font-size: 15px; color: var(--doc-ink-faint); }
.tile-desc { font-size: 14.5px; line-height: 1.5; color: var(--doc-ink-soft); }
.tile-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 500; color: var(--doc-accent); }
.tile-app { grid-column: span 2; grid-row: span 2; padding: 28px; }
.tile-app .tile-title { font-size: 28px; }
.tile-app-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 18px; }
.tile-app-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, white 70%, transparent); box-shadow: 0 0 0 1px var(--glass-line); }
.tile-app-icon, .tile-icon, .home-chapter-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; background: var(--tone); color: #FFFFFF; }
.tile-app-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 15px; }
.tile-app-label { overflow: hidden; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tile-api { grid-column: span 2; }
.tile-api-code { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--doc-code-bg); --m-get: #8CB9FF; --m-post: #66D8A8; --m-put: #F7AE66; --m-delete: #FF9090; --m-query: #BCA7FF; }
.tile-api-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tile-api-line code { overflow: hidden; font: 13px var(--doc-mono); color: #FFFFFF; white-space: nowrap; text-overflow: ellipsis; }
.tile-quick .tile-kicker .ic, .tile-ask .tile-kicker .ic { color: var(--docage-color3); }
.tile-quick .tile-title { font-size: 17px; }
.tile-steps { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: step; font-size: 13.5px; color: var(--doc-ink-soft); }
.tile-steps li { display: flex; align-items: center; gap: 10px; counter-increment: step; }
.tile-steps li + li { margin-top: 6px; }
.tile-steps li::before { content: counter(step); display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 7px; background: var(--docage-color1); font-size: 11px; font-weight: 500; color: #FFFFFF; }
.tile-ask { grid-row: span 2; font: inherit; }
.tile-bubble { align-self: flex-end; max-width: 92%; margin-top: 10px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--docage-color1); font-size: 13.5px; line-height: 1.45; color: #FFFFFF; }
.tile-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 11px 12px 11px 16px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--doc-line); font-size: 13.5px; color: var(--doc-ink-faint); }
.tile-field .ic { font-size: 17px; color: var(--docage-color3); }
.tile-icon { width: 46px; height: 46px; margin-bottom: 6px; border-radius: 15px; font-size: 22px; box-shadow: 0 10px 20px -12px var(--tone); }
.tile-routes .tile-title, .tile-objects .tile-title { font-size: 17px; }
.tile-recent { cursor: default; }
.tile-recent:hover { transform: none; }
.home-recent { margin: 4px 0 0; padding: 0; list-style: none; }
.home-recent-item a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; padding: 6px 0; text-decoration: none; }
.home-recent-date { grid-row: span 2; align-self: start; padding: 2px 8px; border-radius: 8px; background: color-mix(in srgb, var(--docage-color1) 7%, transparent); font-size: 11.5px; font-weight: 500; color: var(--doc-ink-soft); white-space: nowrap; }
.home-recent-title { overflow: hidden; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: var(--doc-ink); }
.home-recent-item a:hover .home-recent-title { color: var(--doc-accent); }
.home-recent-where { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--doc-ink-faint); }

.home-section { max-width: 1260px; margin: 40px auto 0; }
.home-h2 { margin: 0 0 16px 6px; font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--doc-ink); }
.home-chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.home-chapter-link { display: flex; flex-direction: column; height: 100%; padding: 18px; border-radius: 22px; color: var(--doc-ink); text-decoration: none; transition: transform 0.25s ease, background 0.25s ease; }
.home-chapter-link:hover { transform: translateY(-3px); background: color-mix(in srgb, white 92%, transparent); }
.home-chapter-icon { width: 42px; height: 42px; margin-bottom: 14px; border-radius: 14px; font-size: 20px; box-shadow: 0 10px 20px -12px var(--tone); }
.home-chapter-title { font-size: 16.5px; font-weight: 500; }
.home-chapter-desc { display: -webkit-box; flex: 1; margin-top: 6px; overflow: hidden; font-size: 13.5px; line-height: 1.5; color: var(--doc-ink-soft); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.home-chapter-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 500; color: var(--doc-accent); }
.home-about { max-width: 1260px; margin: 40px auto 0; padding: 32px 40px 24px; }
.home-about .home-h2 { margin: 0 0 14px; }

/* ─── Le pied ─── */
.doc-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; max-width: 1640px; margin: 0 auto; padding: 18px 32px 28px; font-size: 13px; color: var(--doc-ink-soft); }
.doc-footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.doc-footer-name { font-weight: 500; color: var(--doc-ink); }
.doc-footer-note { color: var(--doc-ink-faint); }
.doc-footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }
.doc-footer-links a { text-decoration: none; }
.doc-footer-links a:hover { color: var(--doc-accent); text-decoration: underline; }

/* ─── La palette de recherche (Ctrl+K, « / ») ───
   Une fenêtre au-dessus de tout, le panneau de l'assistant compris (9001, documentation-assistant.css). */
.doc-palette { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.doc-palette-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--docage-color1) 18%, rgba(240, 242, 240, 0.35)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.doc-palette-box { position: relative; display: flex; flex-direction: column; width: min(660px, 100%); max-height: 72vh; overflow: hidden; border-radius: 26px; background: color-mix(in srgb, white 88%, transparent); box-shadow: 0 32px 80px -20px rgba(8, 20, 26, 0.5); animation: doc-pop 0.16s ease-out; }
.doc-palette-field { display: flex; flex: none; align-items: center; gap: 12px; height: 58px; padding: 0 16px; border-bottom: 1px solid var(--glass-line); font-size: 19px; color: var(--doc-accent); }
.doc-palette-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 16px var(--doc-font); color: var(--doc-ink); }
.doc-palette-input::-webkit-search-cancel-button { display: none; }
.doc-palette-results { overflow: auto; padding: 8px; }
.doc-palette-group { margin: 6px 10px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doc-ink-soft); }
.doc-palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 14px; background: none; color: var(--doc-ink); text-align: left; text-decoration: none; cursor: pointer; }
.doc-palette-item.is-active { background: #FFFFFF; box-shadow: 0 4px 12px -6px var(--doc-shadow); }
.doc-palette-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 11px; background: var(--docage-color1); color: #FFFFFF; font-size: 17px; }
.doc-palette-item.is-ask .doc-palette-icon { background: linear-gradient(135deg, var(--docage-color1), var(--docage-color3)); }
.doc-palette-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.doc-palette-part { overflow: hidden; font-size: 11.5px; color: var(--doc-ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.doc-palette-title { overflow: hidden; font-size: 14.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.doc-palette-summary { overflow: hidden; font-size: 12.5px; color: var(--doc-ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.doc-palette-enter { flex: none; color: var(--doc-ink-soft); opacity: 0; }
.doc-palette-item.is-active .doc-palette-enter { opacity: 1; }
.doc-palette-empty { margin: 0; padding: 16px; font-size: 14px; color: var(--doc-ink-soft); }
.doc-palette-foot { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--glass-line); background: color-mix(in srgb, white 50%, transparent); font-size: 12px; color: var(--doc-ink-soft); }
.doc-palette-foot kbd { margin-right: 3px; }
.doc-palette-ask { display: inline-flex; align-items: center; gap: 6px; max-width: 55%; margin-left: auto; padding: 6px 12px; border: 1px solid var(--doc-line); border-radius: 999px; background: #FFFFFF; font-size: 12.5px; font-weight: 500; color: var(--doc-accent); cursor: pointer; }
.doc-palette-ask-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.doc-palette-open { overflow: hidden; }

/* ─── L'assistant de la documentation : son panneau en verre (documentation-assistant.css le compose) ─── */
.doc-body .doc-assistant-panel {
    border: 1px solid var(--glass-line);
    border-radius: 26px;
    background: color-mix(in srgb, white 88%, transparent);
    box-shadow: 0 32px 80px -24px rgba(8, 20, 26, 0.45);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}
.doc-body .doc-assistant-form { border-radius: 999px; background: #FFFFFF; }
.doc-body .doc-assistant-send { border-radius: 999px; background: linear-gradient(120deg, var(--docage-color1), var(--docage-color3)); color: #FFFFFF; }

/* ─── Lue dans l'application : l'onglet « Aide » de la coquille (lot L8, D13) ───
   La coquille porte déjà la marque et ses mentions : la page garde ses parties, sa recherche, son sommaire et son corps. */
.doc-embedded .doc-brand,
.doc-embedded .doc-footer { display: none; }
.doc-embedded .doc-header { margin: 8px 10px 0; top: 8px; padding-left: 12px; }
.doc-embedded { --doc-top: 80px; }
.doc-embedded .doc-shell { padding: 12px 10px 20px; gap: 12px; }

@keyframes doc-pop { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ─── Écrans moyens : « Sur cette page » disparaît ─── */
@media (max-width: 1280px) {
    .doc-page { grid-template-columns: minmax(0, 1fr); }
    .doc-toc { display: none; }
    .home-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Petits écrans : le sommaire devient un tiroir, la mosaïque passe sur deux colonnes ─── */
@media (max-width: 960px) {
    .doc-header { gap: 12px; }
    .doc-brand-kicker, .doc-sections, .doc-search-trigger-text, .doc-search-trigger .doc-keys, .doc-assistant-launcher-text { display: none; }
    .doc-search-trigger { width: auto; margin-left: auto; padding: 0 12px; }
    .doc-menu-toggle { display: inline-flex; }
    .doc-shell { grid-template-columns: minmax(0, 1fr); }
    .doc-side { display: none; }
    .doc-nav-resizer { display: none; }
    /* ⚠️ align-self revient à « stretch » : Chrome aligne aussi une boîte en position fixe, et « start » la réduisait à la hauteur de
       son contenu — le tiroir s'arrêtait sous sa dernière entrée, la page visible dessous. */
    body.doc-nav-open .doc-side { position: fixed; inset: calc(var(--doc-header-height) + 24px) 16px 16px; z-index: 25; display: block; align-self: stretch; height: auto; }
    .doc-article { padding: 26px 20px; border-radius: 22px; }
    .doc-title { font-size: 30px; }
    .doc-meta-actions { margin-left: 0; }
    .bento { grid-template-columns: 1fr 1fr; }
    .tile-app { grid-row: auto; }
    .tile-ask { grid-row: auto; }
    .home-chapters { grid-template-columns: 1fr 1fr; }
    .home-title { font-size: 40px; }
    .home-about { padding: 24px 20px; }
    .doc-pager { grid-template-columns: 1fr; }
    .doc-object-type { display: none; }
}

/* ─── Téléphones ─── */
@media (max-width: 560px) {
    .doc-brand-logo { height: 26px; }
    .bento, .home-chapters { grid-template-columns: minmax(0, 1fr); }
    .tile-app, .tile-api { grid-column: auto; }
    .tile-app-menu { grid-template-columns: minmax(0, 1fr); }
    .home-hero { padding: 36px 8px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}