/* --- Nombres relatifs : droite graduée, sauts, table des signes, facteurs négatifs --- */
:root {
  --rn-neg: #2563eb;
  --rn-pos: #dc2626;
}

[data-bs-theme="dark"] {
  --rn-neg: #60a5fa;
  --rn-pos: #f87171;
}

/* Signe : bleu pour les négatifs, rouge pour les positifs (texte HTML et tracés SVG) */
.rn-neg { --rn-color: var(--rn-neg); }
.rn-pos { --rn-color: var(--rn-pos); }
.rn-zero { --rn-color: var(--school-text); }
.rn-neg, .rn-pos, .rn-zero { color: var(--rn-color); }

.rn-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}

.rn-line {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}

.rn-axis {
  stroke: var(--rn-color);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.rn-arrow { fill: var(--rn-color); }

.rn-tick {
  stroke: var(--rn-color);
  stroke-width: 1.5;
}

.rn-tick-label {
  fill: var(--rn-color);
  font-size: 13px;
}

.rn-tick-label.is-zero { font-weight: 700; }

.rn-point {
  fill: var(--rn-color);
  stroke: var(--school-surface);
  stroke-width: 2;
}

.rn-point.is-hit {
  stroke: var(--mm-teal);
  stroke-width: 3;
}

.rn-point-name {
  fill: var(--school-text);
  font-size: 13px;
  font-weight: 700;
}

.rn-point-value {
  fill: var(--rn-color);
  font-size: 15px;
  font-weight: 700;
}

.rn-jump {
  fill: none;
  stroke: var(--mm-teal);
  stroke-width: 2;
}

.rn-jump-head { fill: var(--mm-teal); }

.rn-jump-label {
  fill: var(--mm-teal);
  font-size: 13px;
  font-weight: 700;
}

.rn-band { fill: var(--mm-teal-soft); stroke: var(--mm-teal); stroke-dasharray: 4 3; }

/* Table des signes : case de la réponse surlignée */
.rn-signs {
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.rn-signs th,
.rn-signs td {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--school-border);
  border-radius: var(--school-radius-md);
  background: var(--school-surface);
}

.rn-signs th { background: color-mix(in srgb, var(--school-border) 25%, var(--school-surface)); }

.rn-signs thead th:first-child {
  color: var(--school-text-muted);
  border-style: dashed;
}

.rn-signs td.is-hit {
  border-color: var(--mm-teal);
  background: var(--mm-teal-soft);
  box-shadow: 0 0 0 2px var(--mm-teal);
}

/* Produit de plusieurs facteurs : pastilles colorées par signe */
.rn-parity { text-align: center; }

.rn-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.rn-chip {
  padding: 0.15rem 0.7rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, var(--school-surface));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}