/*
 * Blocs de code : barre d'outils (langage + bouton copier) et coloration
 * syntaxique.
 *
 * Le thème de coloration n'est pas celui livré avec Prism : il est écrit ici
 * avec des variables dédiées, pour rester ajustable sans toucher au bundle
 * JavaScript.
 *
 * -- Découplage du thème --
 *
 * Le fond et l'encre du bloc peuvent venir du thème (--code-block-bg,
 * --code-block-ink), avec un repli sombre si personne ne les fournit. Le fond
 * étant sombre dans les deux modes, une seule palette de coloration suffit :
 * elle n'a pas besoin de variante claire.
 *
 * Les sélecteurs sont préfixés par .entry-content, la classe que posent la
 * plupart des thèmes sur le corps d'article. Un thème qui nomme autrement
 * son conteneur peut le signaler via le filtre
 * dahoo_contenu_container_selector, mais devra surcharger ces règles.
 */

:root {
  --code-comment: oklch(0.62 0.02 80);
  --code-punctuation: oklch(0.72 0.01 80);
  --code-keyword: oklch(0.76 0.14 340);
  --code-string: oklch(0.82 0.13 145);
  --code-number: oklch(0.83 0.12 70);
  --code-function: oklch(0.80 0.12 250);
  --code-variable: oklch(0.82 0.11 30);
  --code-tag: oklch(0.78 0.13 20);
  --code-attr: oklch(0.84 0.11 95);
  --code-inserted: oklch(0.80 0.14 145);
  --code-deleted: oklch(0.75 0.15 25);
}

/* --------------------------------------------------------------------------
 * Conteneur et barre d'outils
 *
 * Le <div.code-block> est ajouté par JavaScript autour de chaque <pre> : le
 * bouton est positionné en absolu et a donc besoin d'un parent placé. Le
 * générer côté client plutôt que dans le contenu évite qu'il se retrouve dans
 * le presse-papiers, dans le flux RSS ou enregistré en base.
 * ------------------------------------------------------------------------ */

.entry-content .code-block { position: relative; margin: 28px 0; }
.entry-content .code-block pre { margin: 0; padding-top: 42px; }

.code-block-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 20px;
  pointer-events: none;
}

.code-block-lang {
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--code-comment);
}

.code-block-copy {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid oklch(1 0 0 / 0.15);
  background: oklch(1 0 0 / 0.06);
  color: var(--code-block-ink, #e4e0d9);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.code-block-copy:hover { background: oklch(1 0 0 / 0.12); border-color: oklch(1 0 0 / 0.28); }
.code-block-copy.is-done { color: var(--code-inserted); border-color: currentColor; }
.code-block-copy svg { flex-shrink: 0; }

/*
 * Sur un écran étroit, le libellé disparaît : l'icône suffit et la barre ne
 * mange plus la largeur utile du code.
 */
@media (max-width: 560px) {
  .code-block-copy span { display: none; }
  .code-block-copy { padding: 6px 8px; }
}

/* --------------------------------------------------------------------------
 * Coloration syntaxique (classes produites par Prism)
 * ------------------------------------------------------------------------ */

.entry-content pre[class*="language-"],
.entry-content code[class*="language-"] {
  color: var(--code-block-ink, #e4e0d9);
  /* Prism pose ses propres couleurs de fond et d'ombre de texte : on les
     neutralise pour garder celles du thème. */
  background: none;
  text-shadow: none;
}

.entry-content pre[class*="language-"] { background: var(--code-block-bg, #221f1c); }

.entry-content .token.comment,
.entry-content .token.prolog,
.entry-content .token.doctype,
.entry-content .token.cdata { color: var(--code-comment); font-style: italic; }

.entry-content .token.punctuation { color: var(--code-punctuation); }

.entry-content .token.keyword,
.entry-content .token.atrule,
.entry-content .token.important,
.entry-content .token.rule { color: var(--code-keyword); }

.entry-content .token.string,
.entry-content .token.char,
.entry-content .token.attr-value,
.entry-content .token.url { color: var(--code-string); }

.entry-content .token.number,
.entry-content .token.boolean,
.entry-content .token.constant,
.entry-content .token.symbol { color: var(--code-number); }

.entry-content .token.function,
.entry-content .token.class-name,
.entry-content .token.builtin { color: var(--code-function); }

.entry-content .token.variable,
.entry-content .token.parameter,
.entry-content .token.property { color: var(--code-variable); }

.entry-content .token.tag,
.entry-content .token.selector,
.entry-content .token.operator { color: var(--code-tag); }

.entry-content .token.attr-name,
.entry-content .token.namespace { color: var(--code-attr); }

.entry-content .token.regex { color: var(--code-string); }

.entry-content .token.inserted { color: var(--code-inserted); }
.entry-content .token.deleted { color: var(--code-deleted); }

.entry-content .token.bold { font-weight: 700; }
.entry-content .token.italic { font-style: italic; }
.entry-content .token.entity { cursor: help; }