/* =================================================================
   Histoire de l'impôt sur le revenu — page-specific additions
   Reuses the main design system (styles.css); only what's new here.
   ================================================================= */

/* -----------------------------------------------------------------
   Colored rhythm — the article alternates plain paper sections
   (chart-forward, need max legibility) with tinted and, at the two
   big narrative turns, full immersive photographic sections (reusing
   .section--immersive / .glass-card from styles.css).
   ----------------------------------------------------------------- */
:root {
  /* One warm accent, used only on this page's "flaw" sections — ties
     back to the site's own "beside a bonfire" identity, which the
     all-blue palette never actually uses. */
  --color-ember: #b8622f;
}

.section--tint {
  background: linear-gradient(160deg, #eef6fb 0%, #f8fbfc 55%, #fefffc 100%);
}

.section--tint-warm {
  background: linear-gradient(160deg, #fbf1e7 0%, #fdf7f1 55%, #fefffc 100%);
}

.section--tint-bright {
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(65, 161, 207, 0.16), transparent 60%),
    linear-gradient(160deg, #eaf5fb 0%, #f6fbfd 55%, #fefffc 100%);
}

/* Figures/eyebrows read fine on the light tints without changes; only the
   ember-tinted section gets a matching eyebrow/rule accent. */
.section--tint-warm .eyebrow {
  color: var(--color-ember);
}

/* -----------------------------------------------------------------
   Immersive duo — a glass-card (text) beside a diagram-card (chart),
   both floating on a full-bleed photographic section. Deliberately not
   reusing .split here: .split__text and .glass-card both style <p>,
   and mixing them fights over text color (dark vs white).
   ----------------------------------------------------------------- */
.immersive__inner {
  padding-block: clamp(var(--spacing-64), 10vh, 120px);
}
.duo {
  display: grid;
  /* figure always gets the larger track, same convention as .split — text
     2fr, diagram-card 3fr, regardless of which side it lands on */
  grid-template-columns: 2fr 3fr;
  gap: var(--spacing-48);
  align-items: center;
  width: 100%;
}
.duo--reverse {
  grid-template-columns: 3fr 2fr;
}
.duo--reverse .glass-card {
  order: 2;
}
.duo .diagram-card {
  width: 100%;
}

@media (max-width: 768px) {
  .duo {
    grid-template-columns: 1fr;
    gap: var(--spacing-32);
  }
  .duo--reverse .glass-card {
    order: 0;
  }
}

.split--reverse {
  grid-template-columns: 3fr 2fr;
}
.split--reverse .split__text {
  order: 2;
}

@media (max-width: 768px) {
  /* styles.css only collapses the default .split to one column inside this
     same media query; because this stylesheet loads after styles.css, the
     unconditional .split--reverse column rule above wins the cascade at any
     width unless it's reset here too — otherwise reverse sections keep a
     cramped 2-column layout on mobile with an unreadably small figure. */
  .split--reverse {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__text {
    order: 0;
  }
}