/* code.css — LA feuille des blocs de code du site (palette + habillage).
 *
 * Fichier PARTAGÉ (assets.nelsonboruchowitch.com/css/code.css) et UNIQUE : les
 * pages de composants/ et les articles du blog l'utilisent, avec la même sortie
 * <span class="hl-…"> produite par le tokeniseur unique js/highlight.js.
 *
 * À charger APRÈS theme.css. Les sélecteurs sont volontairement montés d'un cran
 * (.code-wrapper pre code, .code-wrapper .copy-btn) pour gagner sans dépendre de
 * l'ordre des feuilles locales.
 *
 * Toute la coloration passe par des variables --code-* : le thème clair, le mode
 * « contraste élevé » ou une autre palette ne sont qu'un bloc de valeurs à
 * redéfinir. Ratios vérifiés >= 4.5:1 (WCAG AA) sur le fond du bloc, dans les
 * DEUX thèmes.
 */

:root {
    /* Sombre — palette One Dark sur #21252b */
    --code-bg:        #21252b;
    --code-fg:        #abb2bf;
    --code-bar-bg:    rgba(255, 255, 255, .04);
    --code-bar-fg:    #8b929d;
    --code-bar-line:  rgba(255, 255, 255, .07);
    --code-com:       #8b929d;
    --code-str:       #98c379;
    --code-num:       #d19a66;
    --code-kw:        #c678dd;
    --code-fn:        #61afef;
    --code-prop:      #e5c07b;
    --code-var:       #e06c75;
    --code-op:        #56b6c2;
    --code-punct:     #9aa3af;
    /* Commandes posées sur la barre du bloc (Copier, sélecteur Power Fx) */
    --code-btn-bg:    rgba(255, 255, 255, .12);
    --code-btn-bd:    rgba(255, 255, 255, .2);
    --code-btn-fg:    #ccc;
    --code-btn-hbg:   rgba(255, 255, 255, .25);
    --code-btn-hfg:   #fff;
    --code-btn-onbg:  rgba(112, 189, 149, .3);
    --code-btn-onfg:  #8fd7b2;
    --code-btn-kobg:  rgba(231, 76, 60, .28);
    --code-btn-kofg:  #ffb3ab;
}

[data-theme="light"] {
    /* Clair — palette One Light sur #f8fafc, assombrie là où One Light échouait
       à l'AA (vert 3.1:1, bleu 3.9:1, rouge 3.5:1, cyan 4.0:1 d'origine). */
    --code-bg:        #f8fafc;
    --code-fg:        #383a42;
    --code-bar-bg:    rgba(0, 0, 0, .035);
    --code-bar-fg:    #5b6270;
    --code-bar-line:  rgba(0, 0, 0, .09);
    --code-com:       #6b7280;
    --code-str:       #3d7c3c;
    --code-num:       #986801;
    --code-kw:        #a626a4;
    --code-fn:        #2f63d8;
    --code-prop:      #00706b;
    --code-var:       #c1372b;
    --code-op:        #0a6f9e;
    --code-punct:     #656d7c;
    --code-btn-bg:    rgba(0, 0, 0, .06);
    --code-btn-bd:    rgba(0, 0, 0, .16);
    --code-btn-fg:    #4a5568;
    --code-btn-hbg:   rgba(0, 0, 0, .12);
    --code-btn-hfg:   #1a2332;
    --code-btn-onbg:  rgba(31, 107, 74, .14);
    --code-btn-onfg:  #1f6b4a;
    --code-btn-kobg:  rgba(193, 55, 43, .12);
    --code-btn-kofg:  #a32218;
}

/* Contraste élevé (panneau « Confort de lecture ») : une seule redéfinition. */
html[data-a11y-contrast="more"] {
    --code-com:    #a8b0bc;
    --code-punct:  #c4ccd8;
    --code-bar-fg: #c2ccd8;
    --code-str:    #b3d68f;
    --code-fn:     #82c0f5;
    --code-kw:     #dda0ec;
}
html[data-a11y-contrast="more"][data-theme="light"] {
    --code-com:    #565d6b;
    --code-punct:  #4b5563;
    --code-bar-fg: #3b424f;
    --code-str:    #2f6b2e;
    --code-fn:     #1f4fbf;
    --code-kw:     #8c1d8a;
}

/* --- Bloc : .code-block > .code-wrapper > pre > code ---------------------- */
.code-wrapper {
    position: relative;
    background: var(--code-bg);
    border-radius: 12px;
    overflow: hidden;
}
.code-wrapper pre {
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--code-fg);
}
.code-wrapper pre code {
    color: var(--code-fg);
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
}

/* Badge « langage » : posé au build (blog) ou au runtime (composants) via
   l'attribut data-lang. En ::before, donc jamais copié avec le code. */
.code-wrapper[data-lang]::before {
    content: attr(data-lang);
    /* flex + min-height : hauteur de barre stable quel que soit l'interligne
       imposé par le panneau « Confort de lecture », et commandes centrées. */
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 78px 0 14px;   /* réserve la place des commandes à droite */
    font-family: 'Consolas', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    color: var(--code-bar-fg);
    background: var(--code-bar-bg);
    border-bottom: 1px solid var(--code-bar-line);
}
/* Le sélecteur Power Fx s'ajoute à droite : plus de place à réserver. */
.code-wrapper.has-sep[data-lang]::before { padding-right: 150px; }

/* --- Jetons --------------------------------------------------------------- */
/* Produits par js/highlight.js. Les classes .pf-* sont l'ancien jeu du
   tokeniseur Power Fx de composants/common.js : gardées en alias. */
.hl-com,  .pf-com   { color: var(--code-com); font-style: italic; }
.hl-str,  .pf-str   { color: var(--code-str); }
.hl-tpl             { color: var(--code-str); }
.hl-name            { color: var(--code-str); }
.hl-num,  .pf-num   { color: var(--code-num); }
.hl-cst, .pf-const, .pf-bool { color: var(--code-num); }
.hl-attr            { color: var(--code-num); }
.hl-kw              { color: var(--code-kw); }
.hl-meta            { color: var(--code-kw); }
.hl-fn,   .pf-fn    { color: var(--code-fn); }
.hl-prop            { color: var(--code-prop); }
.hl-var             { color: var(--code-var); }
.hl-tag             { color: var(--code-var); }
.hl-sel             { color: var(--code-var); }
.hl-ent             { color: var(--code-op); }
.hl-op              { color: var(--code-op); }
.hl-punct           { color: var(--code-punct); }

/* --- Commandes du bloc ----------------------------------------------------- */
/* .copy-btn est positionné en absolu par theme.css ; on ne reprend ici que les
   couleurs (indispensable : le style d'origine est blanc sur transparent, donc
   invisible sur le fond clair). */
.code-wrapper .copy-btn {
    background: var(--code-btn-bg);
    border-color: var(--code-btn-bd);
    color: var(--code-btn-fg);
}
.code-wrapper .copy-btn:hover { background: var(--code-btn-hbg); color: var(--code-btn-hfg); }
.code-wrapper .copy-btn.copied {
    background: var(--code-btn-onbg); color: var(--code-btn-onfg); border-color: var(--code-btn-onfg);
}
.code-wrapper .copy-btn.failed {
    background: var(--code-btn-kobg); color: var(--code-btn-kofg); border-color: var(--code-btn-kofg);
}
.code-wrapper[data-lang] .copy-btn { top: 4px; }

/* Conteneur de commandes (blog : sélecteur + Copier côte à côte). */
.code-tools {
    position: absolute; top: 4px; right: 8px; z-index: 10;
    display: flex; align-items: center; gap: 8px;
}
.code-tools .copy-btn { position: static; top: auto; right: auto; }
.code-tools :focus-visible { outline: 3px solid var(--g-text, var(--primary)); outline-offset: 2px; }

/* Sélecteur de séparateur Power Fx : « , » (Power Apps en anglais) ou « ; »
   (Power Apps en français). */
.pfx-sep {
    display: inline-flex; border-radius: 4px; overflow: hidden;
    border: 1px solid var(--code-btn-bd); background: var(--code-btn-bg);
}
.pfx-sep__btn {
    background: none; border: 0; cursor: pointer;
    font-family: 'Consolas', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 12px; font-weight: 700; line-height: 1;
    padding: 4px 9px; color: var(--code-btn-fg);
    transition: background var(--tr, .2s ease), color var(--tr, .2s ease);
}
.pfx-sep__btn + .pfx-sep__btn { border-left: 1px solid var(--code-btn-bd); }
.pfx-sep__btn:hover { background: var(--code-btn-hbg); color: var(--code-btn-hfg); }
.pfx-sep__btn.is-on { background: var(--code-btn-onbg); color: var(--code-btn-onfg); }