/* ==========================================================================
   Formulas — content inside #modal-formules on pages/products.html,
   opened from every "Formule suggérée" cell in the "Pour qui, pour quoi ?"
   tables (js/formulas-modal.js). Toggles between the Parcours de création
   and Circuit d'expression descriptions via the generic .pair-switch
   (pair-switch.css/js); this file only owns the content itself (intro,
   tier list, outcome list).
   Blocks: .formulas__panel, .formulas__tier, .formulas__outcome
   ========================================================================== */

.formulas__switch-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.formulas__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.formulas__panel.is-active {
  display: flex;
}

.formulas__intro {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text-primary);
}

.formulas__note {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.formulas__note a {
  color: var(--color-red);
  font-weight: 600;
}

.formulas__tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-2);
  border-top: 1px solid var(--glass-border);
}

.formulas__tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
}

/* Applied by js/formulas-modal.js after scrolling a specific tier into
   view and kept until the modal closes, so a visitor arriving from a
   "Formule suggérée" link can spot which of the 5 definitions is theirs. */
.formulas__tier.is-highlighted {
  background: rgba(227, 0, 27, 0.08);
  margin: calc(-1 * var(--space-3));
  padding: var(--space-3);
}

.formulas__tier-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.formulas__tier-tagline {
  font-style: italic;
  font-weight: 600;
  color: var(--color-text-primary);
}

.formulas__tier-text,
.formulas__tier-aside {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.formulas__tier-aside {
  font-style: italic;
}

.formulas__outcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--glass-border);
}

.formulas__outcome-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.formulas__outcome-intro {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.formulas__outcome-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}

.formulas__outcome-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.formulas__outcome-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--color-red);
}

.formulas__outcome-list strong {
  color: var(--color-text-primary);
}

.formulas__pricing-link {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.formulas__pricing-link a {
  color: var(--color-red);
  font-weight: 600;
}