/* Les textes d'un slide (court.md, long.md), rendus par engine/textes.js.
   Couleurs par jetons --tx-* : la plateforme et le lecteur les règlent selon leur fond. */
.tx {
  --tx-ink: var(--ink, #1E293B);
  --tx-ink-2: var(--ink-2, #475569);
  --tx-ink-3: var(--ink-3, #7B879B);
  --tx-line: var(--line, #E1E6EF);
  --tx-current: var(--brand-soft, rgba(43, 135, 255, .09));
  --tx-accent: var(--brand, #2B87FF);
  color: var(--tx-ink-2);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.tx > .tx-seg + .tx-seg { margin-top: 6px; }
.tx-seg { position: relative; }
.tx p, .tx ul, .tx ol, .tx blockquote, .tx pre, .tx .tx-table, .tx hr { margin: 0 0 .7em; }
.tx-seg > :last-child { margin-bottom: 0; }
.tx h2, .tx h3, .tx h4, .tx h5 { margin: 1.1em 0 .45em; color: var(--tx-ink); font-family: var(--font-display, inherit); line-height: 1.25; letter-spacing: -0.01em; }
.tx h2 { font-size: 1.32em; }
.tx h3 { font-size: 1.14em; }
.tx h4, .tx h5 { font-size: 1em; }
.tx > .tx-seg:first-child > h2:first-child, .tx > .tx-seg:first-child > h3:first-child, .tx-seg--step > .tx-badge + h2, .tx-seg--step > .tx-badge + h3 { margin-top: 0; }
.tx strong { color: var(--tx-ink); font-weight: 700; }
.tx mark { padding: 0 .15em; border-radius: 3px; background: #FDF6B5; color: #1E293B; }
.tx a { color: var(--tx-accent); text-underline-offset: 2px; }
.tx code { padding: .1em .35em; border-radius: 5px; background: color-mix(in srgb, var(--tx-ink-3) 16%, transparent); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em; }
.tx pre { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--tx-ink-3) 12%, transparent); overflow: auto; }
.tx pre code { padding: 0; background: none; }
.tx ul, .tx ol { padding-left: 1.3em; }
.tx li + li { margin-top: .25em; }
.tx li::marker { color: var(--tx-ink-3); }
.tx blockquote { padding: 2px 0 2px 14px; border-left: 3px solid var(--tx-line); color: var(--tx-ink-3); font-style: italic; }
.tx hr { border: 0; border-top: 1px solid var(--tx-line); }
.tx img { display: block; max-width: 100%; height: auto; margin: .4em 0; border-radius: 8px; }
.tx-table { overflow-x: auto; }
.tx table { border-collapse: collapse; width: 100%; font-size: .94em; }
.tx th, .tx td { padding: 6px 10px; border-bottom: 1px solid var(--tx-line); text-align: left; vertical-align: top; }
.tx th { color: var(--tx-ink); font-weight: 700; }
.tx .tx-key { color: var(--tx-ink); font-weight: 700; }
.tx .tx-todo { color: var(--tx-ink-3); font-style: italic; }
.tx .tx-tip { color: var(--tx-ink-3); font-size: .9em; font-style: italic; }

/* Un passage lié à une étape : une pastille, mis en avant quand l'étape est à l'écran. */
.tx-seg--step {
  margin-left: -10px;
  padding: 6px 10px 6px 34px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .25s ease, opacity .25s ease;
}
.tx-seg--step:hover { background: color-mix(in srgb, var(--tx-ink-3) 8%, transparent); }
.tx-badge {
  position: absolute;
  left: 6px;
  top: 7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tx-ink-3) 18%, transparent);
  color: var(--tx-ink-3);
  font-size: 11px;
  font-weight: 750;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: var(--font, inherit);
  font-style: normal;
}
/* La version courte estompe les autres étapes ; la version longue, qui se lit, non. */
.tx--court.has-current .tx-seg--step:not(.is-current) { opacity: .62; }
.tx-seg--step.is-current { background: var(--tx-current); opacity: 1; }
.tx-seg--step.is-current .tx-badge { background: var(--tx-accent); color: #FFFFFF; }

@media print {
  .tx-seg--step { cursor: auto; }
  .tx.has-current .tx-seg--step { opacity: 1 !important; background: none; }
  .tx-seg--step.is-current .tx-badge { background: color-mix(in srgb, var(--tx-ink-3) 18%, transparent); color: var(--tx-ink-3); }
}