/* ─────────────────────────────────────────────
   Algorithmes décisionnels (/algorithmes, /algorithmes/{slug})
   Chargé uniquement sur ces pages. S'appuie sur les composants communs
   (calc-hero, params-panel, monitor, faq) et les variables de tokens.css.
───────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────── */
.algo-lede {
  margin-top: 1rem;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.algo-lede a { color: var(--teal-text); }
/* Le lede introduit désormais le schéma (premier paragraphe de la section). */
.algo-section-intro.algo-lede { margin: 0 0 0.75rem; color: var(--ink); }

/* Actions du bandeau : l'outil est un clic plus bas, même sur petit écran. */
.algo-hero-cta { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }
.algo-hero-cta a { min-height: 2.75rem; justify-content: center; }
.algo-hero-cta__primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem; border-radius: 0.5rem;
  background: var(--teal-text); color: #fff;   /* blanc sur #0F766E : contraste AA */
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: background 0.15s;
}
@media (hover: hover) { .algo-hero-cta__primary:hover { background: var(--ink); color: #fff; } }
.algo-hero-cta__primary:focus-visible, .algo-hero-cta .btn-outline:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 479px) { .algo-hero-cta a { flex: 1 1 100%; } }

/* En-tête du panneau : titre + lien schéma (le lien n'est plus dans le H2). */
.algo-panel__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.75rem; }
.algo-panel__heading h2 { margin: 0; }

/* Cibles tactiles : Retour / Recommencer et lien schéma ≥ 44 px de haut sur mobile. */
@media (max-width: 767px) {
  .algo-panel .params-reset { min-height: 2.75rem; padding-inline: 0.25rem; }
  .algo-panel__schema-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* Titre H2 de la section « calculateurs liés » (facultatif, partagé). */
.related-section__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 1.25rem; }
.algo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  line-height: 1.6;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.algo-meta li + li::before { content: "·"; margin-right: 1rem; }
.algo-meta a { color: var(--teal-text); }
.algo-howto {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: howto;
  display: grid;
  gap: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.algo-howto li { counter-increment: howto; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; }
.algo-howto li::before {
  content: counter(howto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--teal);
  color: var(--teal-text);
  font: 600 0.6875rem 'IBM Plex Mono', monospace;
}
.algo-howto strong { color: var(--ink); font-weight: 600; }

/* ── Mises en garde ───────────────────────── */
.algo-warnings { padding: 0 0 1.5rem; }
.algo-warnings__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 768px) { .algo-warnings__list { grid-template-columns: repeat(2, 1fr); } }
.algo-warning {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  background: var(--warn-bg);
  border-left: 3px solid var(--warn-border);
  color: var(--warn-text);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.algo-warning svg { flex-shrink: 0; margin-top: 0.15rem; }

/* ── Panneau de parcours ──────────────────── */
#parcours, .algo-monitor { scroll-margin-top: calc(var(--stack-h, 3.5rem) + 1rem); }
.algo-cases { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--rule); }
.algo-cases__list { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .algo-cases__list { grid-template-columns: repeat(2, 1fr); } }
/* Libellés longs : casse normale et police de texte. La capitalisation de .seg changerait
   « µg/L » en « ΜG/L », lu « mg/L » : une erreur d'unité d'un facteur 1 000. */
.algo-case.seg {
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  line-height: 1.4;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  height: auto;
  min-height: 2.5rem;
}

.algo-trail {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--teal);
}
.algo-trail__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0 0.5rem 0.875rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--rule-soft);
}
.algo-trail__item:last-child { border-bottom: 0; }
.algo-trail__num {
  font-size: 0.6875rem;
  color: var(--ink-faint);
}
.algo-trail__q { color: var(--ink-soft); min-width: 0; }
.algo-trail__a {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.algo-trail__edit {
  font: 0.6875rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-text);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
}
.algo-trail__edit:hover { text-decoration: underline; }
@media (max-width: 479px) {
  .algo-trail__item { grid-template-columns: auto 1fr auto; }
  .algo-trail__a { grid-column: 2; text-align: left; }
  .algo-trail__edit { grid-column: 3; grid-row: 1 / span 2; }
}

.algo-question__step { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; }
.algo-question__num,
.algo-tree__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  background: var(--solid-bg);
  color: var(--solid-fg);
  font-size: 0.6875rem;
  font-weight: 600;
}
.algo-question__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.algo-question__title:focus { outline: none; }
.algo-question__title:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.algo-question__text {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.algo-criteria {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
}
.algo-criteria__title { color: var(--ink-soft); margin-bottom: 0.5rem; }
.algo-criteria ul { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.375rem; }
.algo-criteria li { font-size: 0.8125rem; line-height: 1.5; color: var(--ink); }
.algo-question__help { margin-top: 0.75rem; font-size: 0.8125rem; }

.algo-options { display: grid; gap: 0.625rem; margin-top: 1.25rem; }
.algo-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 1rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.algo-option:hover { border-color: var(--teal); background: var(--teal-bg); }
.algo-option:active { transform: scale(0.995); }
.algo-option:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.algo-option__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 0.375rem;
  background: var(--surface-alt);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.algo-option:hover .algo-option__key { border-color: var(--teal); color: var(--teal-text); }
.algo-option__copy { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.algo-option__label { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.algo-option__detail { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.4; }
.algo-option__arrow {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--teal-text);
  transition: transform 0.15s;
}
.algo-option:hover .algo-option__arrow { transform: translateX(3px); }

.algo-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
}
.algo-tools .smallcaps { margin-right: 0.25rem; }
.algo-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  font: 500 0.75rem 'IBM Plex Mono', monospace;
  color: var(--teal-text);
  text-decoration: none;
}
.algo-tool:hover { border-color: var(--teal); background: var(--teal-bg); }

.algo-done p {
  padding: 0.875rem 1rem;
  background: var(--teal-bg);
  border-left: 3px solid var(--teal);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.55;
}
.algo-panel .params-reset:disabled { opacity: 0.4; cursor: default; text-decoration: none; }
.algo-panel .params-reset { display: inline-flex; align-items: center; gap: 0.375rem; }
.algo-panel kbd {
  padding: 0 0.3rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  font: 0.6875rem/1.5 'IBM Plex Mono', monospace;
}

/* ── Moniteur ─────────────────────────────── */
.algo-monitor__next {
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--mint);
}
.algo-monitor__remaining { margin-top: 0.5rem; font-size: 0.75rem; color: var(--monitor-faint); }
.algo-progress { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.25rem; }
.algo-progress__dot { width: 10px; height: 10px; background: rgba(226, 232, 240, 0.12); }
.algo-progress__dot.is-done { background: var(--mint); }
.algo-progress__dot.is-now { background: transparent; box-shadow: inset 0 0 0 2px var(--mint); animation: pulse 2s ease-in-out infinite; }

.algo-conclusion { border-left: 3px solid var(--tone, var(--mint)); padding-left: 1rem; }
.algo-conclusion__verdict {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--tone, var(--mint));
  color: var(--tone, var(--mint));
  font: 600 0.6875rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.algo-conclusion__title {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #F8FAFC;
}
.algo-conclusion__title:focus { outline: none; }
.algo-conclusion__text { font-size: 0.875rem; line-height: 1.6; color: var(--monitor-text); }
.algo-conclusion .monitor__interp { margin-top: 1.25rem; }
.algo-conclusion__actions {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: action;
  display: grid;
  gap: 0.5rem;
}
.algo-conclusion__actions li {
  counter-increment: action;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--monitor-text);
}
.algo-conclusion__actions li::before {
  content: counter(action);
  font: 600 0.75rem/1.6 'IBM Plex Mono', monospace;
  color: var(--mint);
}
.algo-conclusion__tools { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; }
.algo-conclusion__tools a {
  font: 500 0.75rem 'IBM Plex Mono', monospace;
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(52, 211, 153, 0.35);
}
.algo-conclusion__tools a:hover { border-bottom-color: var(--mint); }

/* ── Plan complet de l'arbre ──────────────── */
.algo-tree-section { padding: 4rem 0; border-top: 1px solid var(--rule); }
.algo-section-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0.5rem 0 0.75rem;
}
.algo-section-intro { max-width: 70ch; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 2rem; }

.algo-tree,
.algo-tree__children { list-style: none; margin: 0; padding: 0; }
.algo-tree__children {
  margin-left: 0.375rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--rule);
}
@media (min-width: 768px) { .algo-tree__children { margin-left: 1.25rem; padding-left: 2rem; } }
.algo-tree__item { position: relative; }
.algo-tree__children > .algo-tree__item { padding-top: 0.25rem; }

.algo-tree__edge { position: relative; margin: 0.75rem 0 0.5rem; }
.algo-tree__edge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.875rem;
  width: 0.75rem;
  height: 2px;
  background: var(--rule);
}
@media (min-width: 768px) {
  .algo-tree__edge::before { left: -2rem; width: 1.75rem; }
  .algo-tree__node { padding: 1rem 1.25rem; }
}
.algo-tree__edge-label {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  font: 500 0.75rem/1.4 'IBM Plex Mono', monospace;
  color: var(--ink-soft);
}
.algo-tree__edge.is-path::before { background: var(--teal); }
.algo-tree__edge.is-path .algo-tree__edge-label { background: var(--teal); border-color: var(--teal); color: #fff; }

.algo-tree__node {
  max-width: 46rem;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  scroll-margin-top: calc(var(--stack-h, 3.5rem) + 1rem);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.algo-tree__node--conclusion { border-left: 4px solid var(--tone); }
.algo-tree__node.is-path { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.algo-tree__node--conclusion.is-path { border-left-color: var(--tone); }
.algo-tree__node.is-current { background: var(--teal-bg); }
.algo-tree__node.is-current .algo-tree__head::after {
  content: "Vous êtes ici";
  margin-left: auto;
  font: 600 0.625rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-text);
}
.algo-tree__node.is-current .algo-tree__jump { display: none; }
.algo-tree__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.625rem; margin-bottom: 0.5rem; }
.algo-tree__jump {
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  font: 0.6875rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-text);
  cursor: pointer;
}
.algo-tree__jump:hover { text-decoration: underline; }
.algo-tree__verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.15rem 0.5rem;
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
  font: 600 0.6875rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.algo-tree__verdict::before { content: ""; width: 7px; height: 7px; background: var(--tone); }
.algo-tree__title { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.algo-tree__text { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); }
.algo-tree__help { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ink-faint); }
.algo-tree__criteria { margin-top: 0.75rem; font-size: 0.8125rem; }
.algo-tree__criteria summary {
  cursor: pointer;
  color: var(--teal-text);
  font: 500 0.75rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
}
.algo-tree__criteria ul { margin: 0.5rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; color: var(--ink); line-height: 1.5; }
.algo-tree__criteria p { margin-top: 0.5rem; color: var(--ink-faint); line-height: 1.5; }
.algo-tree__actions { margin: 0.625rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink); }
.algo-tree__calcs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.algo-tree__calcs a {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  font: 500 0.6875rem 'IBM Plex Mono', monospace;
  color: var(--teal-text);
  text-decoration: none;
}
.algo-tree__calcs a:hover { border-color: var(--teal); }
.algo-tree__ref {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--rule);
  font: 0.75rem 'IBM Plex Mono', monospace;
  color: var(--ink);
  text-decoration: none;
}
.algo-tree__ref span { color: var(--ink-faint); }
.algo-tree__ref:hover, .algo-tree__ref.is-path { border-color: var(--teal); color: var(--teal-text); }

/* ── Schéma (organigramme SVG) ────────────── */
.algo-schema-section { padding: 4rem 0 2.5rem; border-top: 1px solid var(--rule); }
.algo-schema-section__canvas { max-width: 1840px; margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 1024px) { .algo-schema-section__canvas { padding-inline: 2rem; } }
.algo-schema-image {
  display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 0.75rem;
  max-width: 34rem; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); text-decoration: none;
}
.algo-schema-image:hover { border-color: var(--teal); }
.algo-schema-image img { flex: none; width: 7.5rem; height: auto; border: 1px solid var(--rule-soft); }
.algo-schema-image__text { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.875rem; }
.algo-schema-image__text span { color: var(--ink-soft); }
.algo-panel__schema-link {
  font: 500 0.6875rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--teal-text);
}

.algo-diagram { position: relative; margin: 0; border: 1px solid var(--rule); background: var(--surface); }
.algo-diagram__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-alt);
}
.algo-diagram__zoom { display: inline-flex; border: 1px solid var(--rule); background: var(--surface); }
.algo-diagram__btn {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font: 500 0.8125rem 'IBM Plex Mono', monospace;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.algo-diagram__zoom .algo-diagram__btn { border: 0; border-right: 1px solid var(--rule); }
.algo-diagram__zoom .algo-diagram__btn:last-child { border-right: 0; }
.algo-diagram__btn:hover:not(:disabled) { color: var(--teal-text); background: var(--teal-bg); }
.algo-diagram__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.algo-diagram__btn:disabled { opacity: 0.4; cursor: default; }
.algo-diagram__btn--text { font-size: 0.75rem; letter-spacing: 0.02em; }
.algo-diagram__pct { min-width: 4rem; }

.algo-diagram__viewport {
  position: relative;
  overflow: auto;
  max-height: min(78vh, 920px);
  overscroll-behavior: contain;
  background-color: var(--bg);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-faint) 35%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  cursor: grab;
}
.algo-diagram__viewport:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.algo-diagram__viewport.is-panning { cursor: grabbing; user-select: none; }
.algo-diagram__svg { display: block; margin: 0 auto; max-width: none; }

/* Flèches et étiquettes */
.algo-edge { fill: none; stroke: color-mix(in srgb, var(--ink-faint) 75%, transparent); stroke-width: 1.5; transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s; }
.algo-edge.is-path { stroke: var(--teal); stroke-width: 3; }
.algo-arrow { fill: color-mix(in srgb, var(--ink-faint) 75%, transparent); }
.algo-arrow--on { fill: var(--teal); }
.algo-elabel { transition: opacity 0.2s; }
.algo-elabel rect { fill: var(--surface); stroke: var(--rule); }
.algo-elabel text { font: 500 12px 'IBM Plex Sans', sans-serif; fill: var(--ink-soft); }
.algo-elabel.is-path rect { fill: var(--teal); stroke: var(--teal); }
.algo-elabel.is-path text { fill: #fff; font-weight: 600; }

/* Boîtes */
.algo-dnode { cursor: pointer; transition: opacity 0.2s; }
.algo-dnode:focus { outline: none; }
.algo-dnode__box { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; transition: stroke 0.15s, stroke-width 0.15s; }
.algo-dnode:hover .algo-dnode__box { stroke: var(--teal); }
.algo-dnode:focus-visible .algo-dnode__box { stroke: var(--teal); stroke-width: 3; }
.algo-dnode__num-bg { fill: var(--solid-bg); }
.algo-dnode__num { font: 600 10.5px 'IBM Plex Mono', monospace; fill: var(--solid-fg); }
.algo-dnode__text { font: 600 13.5px 'IBM Plex Sans', sans-serif; fill: var(--ink); }
.algo-dnode--conclusion .algo-dnode__box {
  fill: color-mix(in srgb, var(--tone) 9%, var(--surface));
  stroke: color-mix(in srgb, var(--tone) 45%, var(--rule));
}
.algo-dnode__bar, .algo-dnode__dot { fill: var(--tone); }
.algo-dnode__verdict { font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: 0.08em; fill: var(--ink-soft); }
.algo-dnode--start .algo-dnode__box { fill: var(--solid-bg); stroke: none; }
.algo-dnode--start .algo-dnode__start { font: 600 13px 'IBM Plex Sans', sans-serif; fill: var(--solid-fg); }
.algo-dnode--question.is-path .algo-dnode__box { stroke: var(--teal); stroke-width: 2.5; }
.algo-dnode--conclusion.is-path .algo-dnode__box { stroke: var(--tone); stroke-width: 2.5; }
.algo-dnode.is-current .algo-dnode__box { stroke-width: 3.5; animation: algo-glow 2s ease-in-out infinite; }
@keyframes algo-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(13, 148, 136, 0)); }
  50%      { filter: drop-shadow(0 0 8px rgba(13, 148, 136, 0.55)); }
}
/* Focus sur le parcours : le reste s'estompe, et revient au survol. */
/* Étiquettes : fond toujours opaque (une flèche ne doit pas transparaître), seul le texte s'estompe. */
.algo-diagram__svg.has-path .algo-dnode:not(.is-path),
.algo-diagram__svg.has-path .algo-edge:not(.is-path),
.algo-diagram__svg.has-path .algo-elabel:not(.is-path) text { opacity: 0.42; }
.algo-diagram__svg.has-path .algo-elabel:not(.is-path) rect { stroke: var(--rule-soft); }
.algo-diagram__svg.has-path .algo-dnode:not(.is-path):hover,
.algo-diagram__svg.has-path .algo-dnode:not(.is-path):focus-visible { opacity: 1; }

/* Carte de l'étape en cours */
.algo-diagram__card {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
@media (min-width: 1024px) {
  .algo-diagram__card {
    position: absolute;
    z-index: 2;
    top: 4rem;
    left: 0.75rem;
    width: 19rem;
    border: 1px solid var(--rule);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  }
}
.algo-diagram__card-toggle {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: 500 0.875rem 'IBM Plex Mono', monospace;
  cursor: pointer;
}
.algo-diagram__card-toggle:hover { border-color: var(--rule); color: var(--teal-text); }
.algo-diagram__card-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.algo-diagram__card.is-collapsed { width: auto; padding: 0; }
.algo-diagram__card.is-collapsed .algo-diagram__card-toggle {
  position: static;
  height: 2.25rem;
  padding: 0 0.875rem;
  font-size: 0.75rem;
  color: var(--ink);
}
.algo-diagram__card-step { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.algo-diagram__card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.algo-diagram__card-title:focus { outline: none; }
.algo-diagram__card-options { display: grid; gap: 0.375rem; margin-top: 0.75rem; }
.algo-diagram__card-option {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  text-align: left;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0.375rem;
  cursor: pointer;
}
.algo-diagram__card-option > span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem;
  border: 1px solid var(--rule); border-radius: 0.25rem;
  font-size: 0.6875rem; color: var(--ink-soft); background: var(--surface-alt);
}
.algo-diagram__card-option:hover { border-color: var(--teal); background: var(--teal-bg); }
.algo-diagram__card-option:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.algo-diagram__card-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  padding: 0.15rem 0.5rem;
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
  font: 600 0.6875rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.algo-diagram__card-verdict::before { content: ""; width: 7px; height: 7px; background: var(--tone); }
.algo-diagram__card-cta {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: var(--solid-bg);
  color: var(--solid-fg);
  font: 500 0.75rem 'IBM Plex Mono', monospace;
  cursor: pointer;
}
.algo-diagram__card-foot {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px dashed var(--rule);
}
.algo-diagram__card-foot button {
  padding: 0;
  border: 0;
  background: none;
  font: 0.6875rem 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-text);
  cursor: pointer;
}
.algo-diagram__card-foot button:disabled { opacity: 0.4; cursor: default; }

/* Légende */
.algo-diagram__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.algo-legend { display: inline-flex; align-items: center; gap: 0.375rem; }
.algo-legend i { display: inline-block; flex-shrink: 0; }
.algo-legend__q { width: 14px; height: 10px; border: 1.5px solid var(--rule); background: var(--surface); }
.algo-legend__c { width: 14px; height: 10px; border-left: 3px solid var(--tone); background: color-mix(in srgb, var(--tone) 18%, var(--surface)); }
.algo-legend__path { width: 18px; height: 3px; background: var(--teal); }
.algo-diagram__hint { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; color: var(--ink-faint); }

/* Plein écran */
.algo-diagram.is-fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: var(--bg); }
.algo-diagram.is-fullscreen .algo-diagram__viewport { flex: 1; max-height: none; }

/* Écran étroit : le schéma d'abord ; outils sur une ligne ; carte de l'étape sous le schéma. */
@media (max-width: 1023px) {
  .algo-diagram { display: flex; flex-direction: column; }
  /* Retour à la ligne plutôt que défilement : « Plein écran » restait caché hors champ. */
  .algo-diagram__toolbar { order: 1; flex-wrap: wrap; gap: 0.375rem; padding: 0.375rem 0.5rem; }
  .algo-diagram__viewport { order: 2; max-height: 72vh; }
  .algo-diagram__card { order: 3; position: relative; border-bottom: 0; border-top: 1px solid var(--rule); }
  .algo-diagram__legend { order: 4; }
  .algo-diagram__btn { height: 2.5rem; min-width: 2.5rem; flex-shrink: 0; white-space: nowrap; }
  .algo-diagram__btn--text { font-size: 0.6875rem; padding: 0 0.5rem; }
  .algo-diagram__pct { min-width: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .algo-dnode.is-current .algo-dnode__box { animation: none; filter: drop-shadow(0 0 6px rgba(13, 148, 136, 0.5)); }
}

/* ── Sources ──────────────────────────────── */
@media (min-width: 1024px) {
  #sources .formula-section__inner { grid-template-columns: 2fr 3fr; }
}
.algo-refs { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.algo-ref {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.algo-ref__citation { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 0.875rem; line-height: 1.5; color: var(--ink); }
.algo-ref__links { display: flex; gap: 1rem; font: 500 0.75rem 'IBM Plex Mono', monospace; }
.algo-ref__links a { color: var(--teal-text); }

/* ── Hub ──────────────────────────────────── */
.algo-hub__note { margin-top: 2.5rem; font-size: 0.8125rem; color: var(--ink-faint); max-width: 70ch; }

/* ── Impression : l'arbre et la conclusion, sans les commandes ── */
@media print {
  .algo-cases, .algo-trail__edit, .algo-tree__jump, .algo-tools, .params-panel__footer { display: none !important; }
  .algo-diagram__toolbar, .algo-diagram__card, .algo-diagram__hint { display: none !important; }
  .algo-diagram__viewport { max-height: none; overflow: visible; background: none; }
  .algo-diagram__svg { width: 100% !important; height: auto !important; }
  .algo-diagram__svg.has-path .algo-dnode, .algo-diagram__svg.has-path .algo-edge, .algo-diagram__svg.has-path .algo-elabel text { opacity: 1 !important; }
  .algo-tree__criteria[open] summary, .algo-tree__criteria summary { color: #000; }
  .algo-tree__node { break-inside: avoid; }
}