/*
 * Blocs de code des articles publics (29/10/2026) : onglets, bouton « Copier », coloration, ancres des titres.
 * Chargé par templates/help-public/themes/{default,docs,clair}/article.php ; comportement : help-code-blocks.js.
 * Thèmes default et docs : blocs sombres en clair comme en sombre (inchangé), donc une seule palette.
 * Thème clair (.mt-prose) : blocs clairs, sombres avec html.dark ; palette suivant le mode.
 */

/* ── Couleurs de la coloration ─────────────────────────────────────────────── */
.article-content pre,
html.dark .mt-prose pre {
    --ibc-comment: #8b8b94;
    --ibc-keyword: #fdba74;
    --ibc-string: #a3d9a5;
    --ibc-number: #93c5fd;
    --ibc-title: #f4f4f5;
    --ibc-attr: #d4d4d8;
    --ibc-meta: #a1a1aa;
}
.mt-prose pre {
    --ibc-comment: #6b6b6b;
    --ibc-keyword: #c2410c;
    --ibc-string: #15803d;
    --ibc-number: #1d4ed8;
    --ibc-title: #171717;
    --ibc-attr: #3f3f46;
    --ibc-meta: #6b6b6b;
}
:is(.article-content, .mt-prose) pre .hljs-comment,
:is(.article-content, .mt-prose) pre .hljs-quote { color: var(--ibc-comment); font-style: italic; }
:is(.article-content, .mt-prose) pre .hljs-keyword,
:is(.article-content, .mt-prose) pre .hljs-selector-tag,
:is(.article-content, .mt-prose) pre .hljs-built_in,
:is(.article-content, .mt-prose) pre .hljs-type,
:is(.article-content, .mt-prose) pre .hljs-name,
:is(.article-content, .mt-prose) pre .hljs-section,
:is(.article-content, .mt-prose) pre .hljs-deletion { color: var(--ibc-keyword); }
:is(.article-content, .mt-prose) pre .hljs-string,
:is(.article-content, .mt-prose) pre .hljs-regexp,
:is(.article-content, .mt-prose) pre .hljs-addition,
:is(.article-content, .mt-prose) pre .hljs-template-tag { color: var(--ibc-string); }
:is(.article-content, .mt-prose) pre .hljs-number,
:is(.article-content, .mt-prose) pre .hljs-literal,
:is(.article-content, .mt-prose) pre .hljs-symbol,
:is(.article-content, .mt-prose) pre .hljs-bullet,
:is(.article-content, .mt-prose) pre .hljs-variable.language_ { color: var(--ibc-number); }
:is(.article-content, .mt-prose) pre .hljs-title,
:is(.article-content, .mt-prose) pre .hljs-title.function_,
:is(.article-content, .mt-prose) pre .hljs-title.class_ { color: var(--ibc-title); font-weight: 500; }
:is(.article-content, .mt-prose) pre .hljs-attr,
:is(.article-content, .mt-prose) pre .hljs-attribute,
:is(.article-content, .mt-prose) pre .hljs-property,
:is(.article-content, .mt-prose) pre .hljs-selector-class,
:is(.article-content, .mt-prose) pre .hljs-selector-id,
:is(.article-content, .mt-prose) pre .hljs-params { color: var(--ibc-attr); }
:is(.article-content, .mt-prose) pre .hljs-meta,
:is(.article-content, .mt-prose) pre .hljs-doctag,
:is(.article-content, .mt-prose) pre .hljs-subst,
:is(.article-content, .mt-prose) pre .hljs-punctuation { color: var(--ibc-meta); }
:is(.article-content, .mt-prose) pre .hljs-emphasis { font-style: italic; }
:is(.article-content, .mt-prose) pre .hljs-strong { font-weight: 600; }

/* ── Groupe sans script : blocs l'un sous l'autre, libellé au-dessus du code ─ */
.code-group > pre::before {
    display: block;
    margin-bottom: .5rem;
    font-family: inherit;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--ibc-meta);
}
.code-group > pre[data-label]::before { content: attr(data-label); }
.code-group > pre:not([data-label]):has(> code.language-bash)::before { content: "Bash"; }
.code-group > pre:not([data-label]):has(> code.language-json)::before { content: "JSON"; }
.code-group > pre:not([data-label]):has(> code.language-javascript)::before { content: "JavaScript"; }
.code-group > pre:not([data-label]):has(> code.language-typescript)::before { content: "TypeScript"; }
.code-group > pre:not([data-label]):has(> code.language-php)::before { content: "PHP"; }
.code-group > pre:not([data-label]):has(> code.language-python)::before { content: "Python"; }
.code-group > pre:not([data-label]):has(> code.language-ruby)::before { content: "Ruby"; }
.code-group > pre:not([data-label]):has(> code.language-go)::before { content: "Go"; }
.code-group > pre:not([data-label]):has(> code.language-java)::before { content: "Java"; }
.code-group > pre:not([data-label]):has(> code.language-html)::before { content: "HTML"; }
.code-group > pre:not([data-label]):has(> code.language-css)::before { content: "CSS"; }
.code-group > pre:not([data-label]):has(> code.language-sql)::before { content: "SQL"; }
.code-group > pre:not([data-label]):has(> code.language-yaml)::before { content: "YAML"; }

/* ── Groupe à onglets (script actif) ───────────────────────────────────────── */
.code-group.is-tabbed > pre::before { content: none; display: none; }
.code-group.is-tabbed > pre:not(.is-active) { display: none; }
.article-content .code-group.is-tabbed {
    margin: 1.5rem 0;
    border-radius: 1rem;
    background: #18181b;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.dark .article-content .code-group.is-tabbed { outline: 1px solid rgba(255,255,255,0.1); }
.article-content .code-group.is-tabbed > pre { margin: 0; border-radius: 0; box-shadow: none; outline: 0; }
.mt-prose .code-group.is-tabbed {
    margin: 1.25rem 0;
    border: 1px solid var(--mt-line-strong);
    border-radius: 1rem;
    background: var(--mt-bg);
    overflow: hidden;
}
.mt-prose .code-group.is-tabbed > pre { margin: 0; border: 0; border-radius: 0; }

.ibc-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: 0 .5rem 0 .75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mt-prose .ibc-bar { border-bottom-color: var(--mt-line); }
.ibc-tabs {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.ibc-tabs::-webkit-scrollbar { display: none; }
.ibc-tab {
    appearance: none;
    margin: 0 0 -1px;
    padding: .625rem .5rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: .8125rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    color: #a1a1aa;
    cursor: pointer;
    transition: color .14s;
}
.ibc-tab:hover { color: #e4e4e7; }
.ibc-tab[aria-selected="true"] { color: #fafafa; border-bottom-color: var(--help-primary, #ea580c); }
.ibc-tab:focus-visible { outline: 2px solid var(--help-primary, #ea580c); outline-offset: -2px; border-radius: 6px; }
.mt-prose .ibc-tab { color: var(--mt-g500); }
.mt-prose .ibc-tab:hover { color: var(--mt-g800); }
.mt-prose .ibc-tab[aria-selected="true"] { color: var(--mt-g950); border-bottom-color: var(--mt-primary, #ea580c); }
.mt-prose .ibc-tab:focus-visible { outline-color: var(--mt-primary, #ea580c); }

/* ── Bouton « Copier » (thèmes default et docs ; le thème clair a le sien) ─── */
.ibc-copy {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: .25rem .625rem;
    background: rgba(255,255,255,0.08);
    font: inherit;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    color: #d4d4d8;
    cursor: pointer;
    transition: background-color .14s, color .14s, opacity .14s;
}
.ibc-copy:hover { background: rgba(255,255,255,0.14); color: #fafafa; }
.ibc-copy:focus-visible { outline: 2px solid var(--help-primary, #ea580c); outline-offset: 2px; }
.ibc-copy.is-done { color: #fafafa; }
.ibc-single { position: relative; }
.ibc-single > .ibc-copy { position: absolute; top: .625rem; right: .625rem; opacity: 0; }
.ibc-single:hover > .ibc-copy,
.ibc-single > .ibc-copy:focus-visible,
.ibc-single > .ibc-copy.is-done { opacity: 1; }
@media (hover: none) { .ibc-single > .ibc-copy { opacity: 1; } }

/* ── Ancres des titres : « # » au survol ───────────────────────────────────── */
.article-content :is(h2, h3)[id] { scroll-margin-top: 5rem; }
:is(.article-content, .mt-prose) a.ibc-anchor {
    margin-left: .375rem;
    font-weight: 400;
    color: #a3a3a3;
    text-decoration: none;
    opacity: 0;
    transition: opacity .14s, color .14s;
}
:is(.article-content, .mt-prose) a.ibc-anchor::before { content: "#"; }
:is(.article-content, .mt-prose) a.ibc-anchor:hover { color: var(--help-primary, var(--mt-primary, #ea580c)); }
.ibc-has-anchor:hover > a.ibc-anchor,
a.ibc-anchor:focus-visible { opacity: 1; }