/* --- Calcul & fonctions (2de) : étapes de résolution, pastilles de facteurs, repère des fonctions affines --- */
:root {
  --cf-alt: #7c3aed;
  --cf-line: #dc2626;
}

[data-bs-theme="dark"] {
  --cf-alt: #a78bfa;
  --cf-line: #f87171;
}

/* Corrigé en étapes : formule à gauche, opération à droite */
.cf-steps {
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid var(--mm-teal);
  border-radius: var(--school-radius-md);
  background: var(--mm-teal-soft);
}

.cf-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.2rem 0;
}

.cf-step + .cf-step { border-top: 1px dashed var(--school-border); }

.cf-step-note {
  color: var(--school-text-muted);
  font-size: 0.85em;
  font-style: italic;
}

.cf-check {
  margin-top: 0.4rem;
  color: var(--mm-teal);
  font-size: 0.9em;
  font-weight: 600;
}

/* Décomposition en facteurs premiers et développement des puissances */
.cf-decomp {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.cf-decomp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.cf-decomp-row.is-result {
  padding-top: 0.4rem;
  border-top: 1px solid var(--school-border);
}

.cf-decomp-n {
  min-width: 4.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cf-chip {
  padding: 0.1rem 0.6rem;
  border: 2px solid var(--school-border);
  border-radius: 999px;
  background: var(--school-surface);
  color: var(--school-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cf-chip.is-common {
  border-color: var(--mm-teal);
  background: var(--mm-teal-soft);
  color: var(--mm-teal);
}

.cf-chip.is-alt {
  border-color: var(--cf-alt);
  background: color-mix(in srgb, var(--cf-alt) 10%, var(--school-surface));
  color: var(--cf-alt);
}

.cf-times {
  color: var(--school-text-muted);
  font-weight: 700;
}

/* Repère quadrillé des fonctions affines */
.ag-figure svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ag-grid {
  stroke: var(--school-border);
  stroke-width: 1;
}

.ag-axis {
  stroke: var(--school-text);
  stroke-width: 1.6;
}

.ag-arrow { fill: var(--school-text); }

.ag-tick {
  fill: var(--school-text-muted);
  font-size: 10px;
}

.ag-name {
  fill: var(--school-text);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
}

.ag-line {
  stroke: var(--cf-line);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ag-point {
  fill: var(--mm-teal);
  stroke: var(--school-surface);
  stroke-width: 1.5;
}

.ag-point-name {
  fill: var(--mm-teal);
  font-size: 11px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--school-surface);
  stroke-width: 3px;
}

.ag-proj {
  fill: none;
  stroke: var(--mm-teal);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.ag-slope {
  fill: none;
  stroke: var(--cf-alt);
  stroke-width: 2;
}

.ag-slope-text {
  fill: var(--cf-alt);
  font-size: 11px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--school-surface);
  stroke-width: 3px;
}