/* ============================================================
   Identite visuelle des pages de documentation (#171)
   S'appuie sur les variables de Material pour rester coherent
   avec les deux schemas (default / slate) : ne JAMAIS ecrire une
   couleur en dur, sinon elle ne tient que dans un des deux modes.
   ============================================================ */

[data-md-color-scheme="default"] {
  --yk-rule: #d8dee4;
  --yk-surface: #f4f6f8;
  --yk-muted: #5c6873;
  /* Couleurs porteuses de sens dans les schemas : ce qui expire, ce qui tient. */
  --yk-expire: #a8412b;
  --yk-expire-bg: #f6e4df;
  --yk-safe: #2c6e52;
  --yk-safe-bg: #dfede6;
}

[data-md-color-scheme="slate"] {
  --yk-rule: #3a4551;
  --yk-surface: #222c38;
  --yk-muted: #a3b0bb;
  --yk-expire: #e08a72;
  --yk-expire-bg: #3a211a;
  --yk-safe: #79c4a0;
  --yk-safe-bg: #173024;
}

/* ------------------------------------------------------------
   Titres — un serif pour le titre de page et les sections, qui
   tranche avec le corps sans-serif. Le filet colore au-dessus des
   h2 donne un rythme visible au defilement d'une page longue.
   ------------------------------------------------------------ */

.md-typeset h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.md-typeset h2 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
  padding-top: 1.2rem;
  border-top: 1px solid var(--yk-rule);
  margin-top: 2.6rem;
}

.md-typeset h3 {
  font-weight: 650;
  margin-top: 1.9rem;
}

/* ------------------------------------------------------------
   Sommaire en tete de page (marqueur [TOC])
   Pour les pages longues : entrer dans la page sans la parcourir.
   La table des matieres laterale de Material reste en place ;
   celle-ci sert surtout sur ecran etroit, ou la laterale passe
   sous le contenu.
   ------------------------------------------------------------ */

.md-typeset div.toc {
  background: var(--yk-surface);
  border: 1px solid var(--yk-rule);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: 3px;
  padding: 0.9rem 1.2rem 1rem;
  margin: 1.4rem 0 2.2rem;
  font-size: 0.75rem;
}

.md-typeset div.toc::before {
  content: "Sur cette page";
  display: block;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yk-muted);
  margin-bottom: 0.5rem;
}

.md-typeset div.toc > ul {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: 2rem;
}

.md-typeset div.toc > ul > li {
  margin-bottom: 0.25rem;
  break-inside: avoid;
}

/* Un sommaire a deux niveaux devient illisible en colonnes. */
.md-typeset div.toc ul ul {
  display: none;
}

@media screen and (max-width: 44.9em) {
  .md-typeset div.toc > ul {
    columns: 1;
  }
}

/* ------------------------------------------------------------
   Figures — schemas SVG dessines a la main (md_in_html)
   ------------------------------------------------------------ */

.md-typeset figure {
  background: var(--md-default-bg-color);
  border: 1px solid var(--yk-rule);
  border-radius: 4px;
  padding: 1.2rem 1.1rem 0.8rem;
  margin: 1.8rem 0;
  overflow-x: auto;
}

.md-typeset figure svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 520px;
}

.md-typeset figure figcaption {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--yk-rule);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--yk-muted);
  text-align: left;
  min-width: 520px;
  max-width: none;
}

/* Classes utilisees par les SVG des pages. Les couleurs viennent
   des variables Material : un schema reste lisible en clair ET en
   sombre sans etre redessine. */
.yk-svg-box { fill: var(--yk-surface); stroke: var(--yk-rule); }
.yk-svg-line { stroke: var(--yk-muted); fill: none; }
.yk-svg-t { fill: var(--md-default-fg-color); font-size: 13px; }
.yk-svg-t-sm { fill: var(--yk-muted); font-size: 11.5px; }
.yk-svg-m { fill: var(--yk-muted); font-family: var(--md-code-font-family, monospace); font-size: 11px; }
.yk-svg-head { fill: var(--yk-muted); font-family: var(--md-code-font-family, monospace); font-size: 10.5px; letter-spacing: 0.1em; }

/* ------------------------------------------------------------
   Tableaux — les colonnes de chiffres doivent s'aligner
   ------------------------------------------------------------ */

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  font-variant-numeric: tabular-nums;
}