/* =============================================================================
   Kagron — centre d'aide, habillage éditorial
   Généré par la skill `doc` (~/.claude/skills/doc). Palette : bleu #245281, doré #B9975B.
   -----------------------------------------------------------------------------
   À AJOUTER, jamais à la place du custom.css du produit :

     extra_css:
       - stylesheets/custom.css
       - stylesheets/editorial.css     <- ce fichier, en second

   1. Coller la palette du produit (references/palettes.md) dans les deux blocs
      marqués PALETTE.
   2. Les classes (figures, compare, steps, cost, note-block, howto) portent les
      mêmes noms que dans le gabarit d'artefact : un bloc s'écrit une seule fois.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap");

/* ===== PALETTE — clair (coller le bloc du produit) ===== */
:root {
  --ground: #f4f6f9;  --surface: #ffffff;  --surface-sunk: #ecf0f5;
  --ink: #0f1a26;     --ink-soft: #47576b;  --ink-faint: #7b8899;
  --rule: #d8dfe9;    --accent: #245281;    --accent-bright: #2f6ba6;  --warn: #8a6a2d;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;

  --md-text-font: "IBM Plex Sans";
  --md-code-font: "IBM Plex Mono";
  --md-default-bg-color: var(--ground);
  --md-typeset-color: var(--ink);
  --md-typeset-a-color: var(--accent-bright);
  --md-code-bg-color: var(--surface-sunk);
  --md-code-fg-color: var(--ink);
}

/* ===== PALETTE — sombre (mêmes noms, valeurs sombres) ===== */
[data-md-color-scheme="slate"] {
  --ground: #0b1420;  --surface: #121d2b;  --surface-sunk: #0f1825;
  --ink: #e6edf5;     --ink-soft: #a2b1c2;  --ink-faint: #76859a;
  --rule: #22303f;    --accent: #7fb3e0;    --accent-bright: #6aa7dc;  --warn: #c9a769;

  --md-default-bg-color: var(--ground);
  --md-typeset-color: var(--ink);
  --md-typeset-a-color: var(--accent-bright);
  --md-code-bg-color: var(--surface-sunk);
}

/* ---------- texte ---------- */
.md-typeset { font-size: 16px; line-height: 1.55; }
.md-typeset p, .md-typeset li { max-width: 68ch; }

.md-typeset h1 {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: clamp(28px, 4.5vw, 38px); line-height: 1.1;
  letter-spacing: -.02em; text-wrap: balance; margin-bottom: 20px;
}

/* le chapeau : premier paragraphe après le titre, en sérif */
.md-typeset h1 + p {
  font-family: var(--serif); font-size: 18px; line-height: 1.6;
  color: var(--ink-soft); max-width: 60ch;
}

.md-typeset h2 {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--rule); padding-bottom: 10px;
  margin: 48px 0 18px;
}
.md-typeset h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 28px 0 6px; }
.md-typeset h4 { font-size: 15px; font-weight: 600; color: var(--ink-soft); }

.md-typeset hr { border-bottom-color: var(--rule); }
.md-typeset code { font-size: .92em; border-radius: 3px; }
.md-typeset .prose { font-family: var(--serif); color: var(--ink-soft); }

/* ---------- tableaux ---------- */
.md-typeset table:not([class]) {
  border: none; box-shadow: none; border-radius: 0;
  font-size: 14px; background: transparent;
}
.md-typeset table:not([class]) th {
  background: transparent; font-family: var(--mono); font-size: 11px;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--rule);
  padding: 0 14px 8px 0; white-space: nowrap;
}
.md-typeset table:not([class]) td {
  border-top: none; border-bottom: 1px solid var(--rule);
  padding: 11px 14px 11px 0; vertical-align: top;
}
.md-typeset table:not([class]) tr:last-child td { border-bottom: none; }
.md-typeset table:not([class]) tr:hover { background: transparent; }

/* avant / après */
.compare table:not([class]) td:first-child { width: 22%; font-weight: 600; font-size: 14px; }
.compare table:not([class]) td:nth-child(2) { color: var(--ink-soft); }
.compare table:not([class]) td:nth-child(3) strong { color: var(--accent-bright); font-weight: 600; }

/* ---------- chiffres clés ---------- */
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden; margin: 20px 0;
}
.figure { background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.figure .dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.figure .dd { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.figure .note { font-size: 13px; color: var(--ink-soft); }
.figure.alert .dd { color: var(--warn); }

/* ---------- étiquettes ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 5px; }
.step {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
  background: var(--surface-sunk); color: var(--ink-soft); border: 1px solid var(--rule);
}
.step.on { background: color-mix(in srgb, var(--accent-bright) 16%, transparent); color: var(--accent-bright); border-color: color-mix(in srgb, var(--accent-bright) 38%, transparent); }
.step.flag { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 36%, transparent); }

/* ---------- rangée de repères ---------- */
.cost {
  display: flex; flex-wrap: wrap; border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden; background: var(--rule); margin: 20px 0;
}
.cost > div { background: var(--surface); padding: 14px 18px; flex: 1 1 190px; display: flex; flex-direction: column; gap: 2px; }
.cost .amount { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.cost .label { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- encadrés : des cases, pas des liserés ----------
   Material colore ses encadrés par type avec des sélecteurs plus spécifiques que
   `.md-typeset .admonition` : d'où le `[class]` qui remet nos jetons au niveau. */
.md-typeset .admonition, .md-typeset details {
  border-radius: 4px; box-shadow: none; background: var(--surface);
  padding: 16px 18px; font-size: 14.5px; color: var(--ink-soft);
}
.md-typeset .admonition[class], .md-typeset details[class] {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent-bright);
}
.md-typeset .admonition.warning[class], .md-typeset .admonition.danger[class],
.md-typeset .admonition.failure[class], .md-typeset .admonition.caution[class],
.md-typeset details.warning[class], .md-typeset details.danger[class] {
  border-left-color: var(--warn);
}

.md-typeset .admonition-title, .md-typeset summary {
  background: transparent !important; font-family: var(--sans);
  font-size: 15px; font-weight: 600; color: var(--ink);
  padding: 0 0 6px 0; margin: 0; position: relative;
}
[dir="ltr"] .md-typeset .admonition-title, [dir="ltr"] .md-typeset summary { padding-left: 26px; padding-right: 0; }
[dir="rtl"] .md-typeset .admonition-title, [dir="rtl"] .md-typeset summary { padding-right: 26px; padding-left: 0; }

/* l'icône de Material reste : elle dit le ton d'un coup d'œil, recolorée par nos jetons */
[dir="ltr"] .md-typeset .admonition-title::before, [dir="ltr"] .md-typeset summary::before { left: 0; }
[dir="rtl"] .md-typeset .admonition-title::before, [dir="rtl"] .md-typeset summary::before { right: 0; }
.md-typeset .admonition-title::before, .md-typeset summary::before { top: 2px; width: 18px; height: 18px; }
.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class] > summary::before { background-color: var(--accent-bright); }
.md-typeset .admonition.warning[class] > .admonition-title::before,
.md-typeset .admonition.danger[class] > .admonition-title::before,
.md-typeset .admonition.failure[class] > .admonition-title::before,
.md-typeset .admonition.caution[class] > .admonition-title::before { background-color: var(--warn); }

.md-typeset .admonition > p:last-child, .md-typeset details > p:last-child { margin-bottom: 0; }

/* même case, écrite à la main (artefact et Markdown) */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.note-block {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent-bright);
  border-radius: 4px; background: var(--surface); padding: 16px 18px;
}
.note-block.warn { border-left-color: var(--warn); }
.note-block p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- cartes : à plat, pas de relief ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: none; background: var(--surface); padding: 18px 20px;
}
.md-typeset .grid.cards > ul > li:hover { box-shadow: none; border-color: var(--accent-bright); }
.md-typeset .grid.cards > ul > li > hr { border-bottom-color: var(--rule); margin: 12px 0; }

/* ---------- marche à suivre numérotée ---------- */
/* forme Markdown : des titres ### dans <div class="howto" markdown> */
.md-typeset .howto { counter-reset: step; }
.md-typeset .howto > h3 {
  counter-increment: step; display: flex; align-items: center; gap: 14px;
  margin: 34px 0 12px; font-size: 17px;
}
.md-typeset .howto > h3:first-child { margin-top: 0; }
.md-typeset .howto > h3::before {
  content: counter(step); font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--accent-bright); background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: 999px; flex: 0 0 28px; height: 28px; display: grid; place-items: center;
}
/* forme artefact : une liste ol.howto */
.md-typeset ol.howto { list-style: none; padding: 0; }
.md-typeset ol.howto > li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; margin-bottom: 18px; }
.md-typeset ol.howto > li::before {
  content: counter(step); font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--accent-bright); background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: 999px; width: 28px; height: 28px; display: grid; place-items: center;
}

/* ---------- images ---------- */
.md-typeset img { border: 1px solid var(--rule); border-radius: 4px; }
.md-typeset figcaption { font-size: 13px; color: var(--ink-faint); }

/* ---------- pied de page ---------- */
.md-typeset .footnote, .md-source-file { color: var(--ink-faint); font-size: 13.5px; }