/* ==========================================================================
   Module Projections — voix présidentielle et législatives 2027 par sondages
   (contrat DESIGN.md §5). Deux graphiques « points + fourchettes » (d3, pas
   de siège), un sélecteur de scénario d'offre, le récit du portail.
   ========================================================================== */

.section-intro {
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  max-width: var(--measure);
}

.section-note {
  color: var(--color-text-muted);
  font-size: .92rem;
  margin-top: 1rem;
}

.source-note { color: var(--color-text-muted); font-size: .8rem; margin-top: 1.5rem; }
.source-note code { font-size: .95em; overflow-wrap: anywhere; }

/* ---------- Sélecteur de scénario d'offre ---------- */
.scenario-selector {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0 .6rem;
}

.scenario-selector__btn {
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-bg-raised);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.scenario-selector__btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-raised)); }

.scenario-selector__btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-bg-raised));
}

.scenario-caption {
  font-size: .88rem;
  color: var(--color-text-muted);
  margin-bottom: 1.2rem;
}

/* ---------- Graphique « points + fourchettes » (forest plot) ---------- */
.forest-block {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.5rem;
  margin-top: 1rem;
}

.forest-block svg { width: 100%; height: auto; }

.forest-axe { font-size: .72rem; fill: var(--color-text-muted); }
.forest-nom { font-size: .82rem; fill: var(--color-text); font-weight: 600; }
.forest-valeur { font-size: .78rem; fill: var(--color-text-muted); }

.forest-grille { stroke: var(--color-border); stroke-width: 1; }

.forest-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--color-text-muted);
}

.forest-legend-item { display: inline-flex; align-items: center; gap: .5rem; }

.forest-legend-swatch { display: inline-block; width: 1.6rem; height: .3rem; border-radius: 999px; background: var(--color-accent); }
.forest-legend-swatch--fine { height: .12rem; opacity: .45; }
.forest-legend-swatch--point { width: .55rem; height: .55rem; border-radius: 999px; }

.forest-note {
  font-size: .88rem;
  color: var(--color-text-muted);
  margin-top: 1rem;
}

/* ---------- Badge de vagues (fraîcheur des données 2027) ---------- */
.vagues-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* ---------- Le récit du portail ---------- */
.recit-portail p + p { margin-top: 1rem; }

/* ---------- État d'erreur (dégradation propre) ---------- */
.module-erreur {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
}