/* === Guide article === */
.guide-page {
  min-height: 100vh;
  background: var(--paper);
}

.guide-hero {
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.guide-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 36px;
}
.guide-back:hover { color: var(--ink); }
.guide-hero-meta {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.guide-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.guide-hero-meta .dot {
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}
.guide-hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.5vw, 76px);
  letter-spacing: -0.025em;
  line-height: 0.98;
  font-weight: 400;
  max-width: 12ch;
  text-wrap: balance;
}
.guide-hero h1 em { font-style: italic; color: var(--accent); }
.guide-hero-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 620px;
  margin-top: 28px;
}
.guide-authors {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.guide-authors .avatars {
  display: flex;
}
.guide-authors .avatars .avatar {
  margin-left: -8px;
  border: 2px solid var(--paper);
}
.guide-authors .avatars .avatar:first-child { margin-left: 0; }
.guide-authors .author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guide-authors .names { font-weight: 500; }
.guide-authors .roles { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.guide-authors .pubdate {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.guide-layout {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 56px;
  padding: 72px 0;
  align-items: start;
}
/* Layout sans TOC (glossaire, pages courtes) — article large + aside */
.guide-layout.no-toc { grid-template-columns: 1fr 280px; gap: 48px; }
/* Layout pleine largeur (article seul) */
.guide-layout.full { grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; }
.guide-toc {
  position: sticky;
  top: 96px;
  font-size: 13px;
}
.guide-toc .toc-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.guide-toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: toc;
}
.guide-toc li {
  counter-increment: toc;
}
.guide-toc ol a {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  color: var(--ink-3);
  position: relative;
  line-height: 1.4;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -14px;
  transition: all 0.15s;
}
.guide-toc ol a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  flex-shrink: 0;
  padding-top: 2px;
}
.guide-toc ol a:hover { color: var(--ink); }
.guide-toc ol a.active {
  color: var(--ink);
  border-left-color: var(--accent);
  font-weight: 500;
}
.guide-toc .toc-cta {
  display: block;
  margin-top: 24px;
  text-align: center;
}

.guide-article {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.guide-layout.no-toc .guide-article { max-width: none; }
.guide-article h2 {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 64px 0 24px;
  scroll-margin-top: 88px;
}
.guide-article h2:first-child { margin-top: 0; }
.guide-article h2 em { font-style: italic; color: var(--accent); }
.guide-article h2 .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 8px;
  font-weight: 400;
}
.guide-article h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin: 40px 0 14px;
}
.guide-article p {
  margin-bottom: 22px;
}
.guide-article p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 76px;
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--ink);
}
.guide-article a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-3);
  transition: border-color 0.15s;
}
.guide-article a:hover { border-bottom-color: var(--accent); }

/* Les liens stylés en boutons ne doivent pas hériter du style de lien d'article
   ni du style de lien d'encadré (couleur ink + soulignement) — sinon un
   .btn-primary devient noir sur noir. On bat la spécificité de `.tip-box .tip-content a`. */
.guide-article a.btn,
.tip-box .tip-content a.btn { border-bottom: 0; }
.guide-article a.btn-primary,
.tip-box .tip-content a.btn-primary { color: var(--paper); }
.guide-article a.btn-accent,
.tip-box .tip-content a.btn-accent { color: var(--accent-ink); }

/* La lettrine est réservée au 1er paragraphe de l'article : pas dans les
   encadrés, cartes ou colonnes latérales (sinon chaque callout l'affiche). */
.tip-content p:first-of-type::first-letter,
.feat p:first-of-type::first-letter,
.aside-block p:first-of-type::first-letter,
.simu-fiscal p:first-of-type::first-letter,
.callout p:first-of-type::first-letter {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  float: none;
  padding: 0;
  color: inherit;
}

.guide-article strong { color: var(--ink); font-weight: 600; }
.guide-article ul, .guide-article ol {
  margin: 16px 0 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-article ul li { position: relative; list-style: none; padding-left: 22px; }
.guide-article ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
}
.guide-article code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Pull quote */
.pull-quote {
  margin: 48px -40px;
  padding: 36px 40px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pull-quote .attr {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Number callouts */
.callout-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 36px 0;
}
.callout {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 22px 20px;
  border-radius: var(--r-md);
}
.callout .num {
  font-family: var(--serif);
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.callout .num em { font-style: italic; color: var(--accent); }
.callout .lbl {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-top: 10px;
}
.callout .desc {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 8px;
  line-height: 1.45;
}

/* À retenir — bandeau compact dans le guide-hero (ex-tip-box) */
.guide-hero-points {
  margin-top: 28px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 920px;
}
.guide-hero-points .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.guide-hero-points strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 2px;
}
.guide-hero-points ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 32px;
  margin: 8px 0 0;
  padding: 0;
}
.guide-hero-points ul li {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  position: relative;
  padding-left: 16px;
}
.guide-hero-points ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-4);
  font-family: var(--mono);
}
@media (max-width: 720px) {
  .guide-hero-points ul { grid-template-columns: 1fr; }
}

/* Step-by-step calculation list (replaces stacked tip-box per step) */
.calc-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.calc-step:last-child {
  border-bottom: 1px solid var(--line);
}
.calc-step-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding-top: 4px;
  border-right: 1px solid var(--line);
}
.calc-step-body { min-width: 0; }
.calc-step-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}
.calc-step-desc {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.calc-step-formula,
.calc-step-example {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.calc-step-formula .lbl,
.calc-step-example .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
.calc-step-formula code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: 4px;
  word-break: break-word;
}
.calc-step-example .ex { color: var(--ink-2); }
.calc-step-example .res {
  color: var(--accent);
  font-weight: 500;
  margin-left: 4px;
}
@media (max-width: 640px) {
  .calc-step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .calc-step-num {
    border-right: 0;
    padding-top: 0;
  }
}

/* Tip box */
.tip-box {
  margin: 24px 0;
  padding: 16px 18px 16px 20px;
  background: transparent;
  border-radius: 0;
  border: 0;
  border-left: 2px solid var(--line);
  display: block;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}
.tip-box.tip-accent {
  border-left-color: var(--accent);
}
.tip-box .tip-mark {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-3);
  padding: 0;
  margin-bottom: 8px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.tip-box.tip-accent .tip-mark {
  color: var(--accent);
}
.tip-box .tip-content code,
.tip-box .tip-content p code {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tip-box .tip-content { font-size: 15px; line-height: 1.6; }
.tip-box .tip-content > strong:first-child {
  display: block;
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 600;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: -0.005em;
}
.tip-box .tip-content ul,
.tip-box .tip-content ol { margin: 8px 0 4px 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tip-box .tip-content ul li { list-style: none; position: relative; padding-left: 18px; line-height: 1.55; }
.tip-box .tip-content ol li { list-style: decimal; margin-left: 18px; line-height: 1.55; }
.tip-box .tip-content ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
}
.tip-box .tip-content p { margin: 8px 0; }
.tip-box .tip-content a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.tip-box .tip-content a:hover { color: var(--accent); }

/* Comparison table */
.guide-table {
  margin: 32px 0;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.guide-table thead {
  background: var(--ink);
  color: var(--paper);
}
.guide-table th {
  text-align: left;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.guide-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.guide-table tr:last-child td { border-bottom: 0; }
.guide-table tbody tr:hover { background: var(--paper-2); }
.guide-table td.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.guide-table td:first-child { font-weight: 500; color: var(--ink); }

/* Aside */
.guide-aside {
  position: sticky;
  top: 96px;
  font-size: 13px;
}
.aside-block {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 22px 22px 24px;
  border-radius: var(--r-md);
  margin-bottom: 20px;
}
.aside-block .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.aside-block h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  line-height: 1.1;
}
.aside-block p {
  color: var(--ink-2);
  margin-bottom: 16px;
  font-size: 13px;
}
.aside-block .btn { width: 100%; justify-content: center; }

.aside-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aside-meta .row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.aside-meta .row:last-child { border-bottom: 0; }
.aside-meta .val { color: var(--ink); }

/* Footnote */
.footnote {
  margin: 36px 0;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--mono);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.footnote .marker {
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 500;
}

/* Related */
.guide-related {
  border-top: 1px solid var(--line);
  padding: 64px 0;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.related-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 28px 24px 24px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition: border-color 0.15s, transform 0.2s;
}
.related-card:hover {
  border-color: var(--ink-3);
  transform: translateY(-2px);
}
.related-card .cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: auto;
}
.related-card h5 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 16px 0 14px;
}
.related-card .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .guide-layout,
  .guide-layout.no-toc,
  .guide-layout.full { grid-template-columns: 1fr; gap: 32px; }
  /* Autoriser la colonne unique à rétrécir sous la largeur intrinsèque de son contenu
     (sinon un tableau large force un débordement horizontal de la page). */
  .guide-layout > * { min-width: 0; }
  .guide-toc, .guide-aside { position: static; }
  .guide-toc { order: 2; }
  .guide-aside { order: 3; }
  .guide-article { order: 1; max-width: 100%; }
  .pull-quote { margin: 36px 0; }
  .callout-row, .related-grid { grid-template-columns: 1fr; }
  /* Les tableaux larges scrollent horizontalement dans leur propre conteneur. */
  .guide-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Simulateurs fiscaux embarqués dans les guides (cluster /reduire-ses-impots-belgique).
   Mutualisé ici plutôt que dupliqué dans chaque îlot : les composants ne portent que leur logique. */
.simu-fiscal {
  max-width: 820px;
  margin: 28px auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: clip;
}
.simu-fiscal-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.simu-fiscal-form { padding: 28px; }
.simu-fiscal-note { margin-top: 18px; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.simu-fiscal-resultat {
  background: var(--ink);
  color: var(--paper);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.simu-fiscal-chiffre { font-family: var(--serif); font-size: 44px; line-height: 1; margin: 10px 0 2px; }
.simu-fiscal-unite { font-size: 12px; color: rgba(232, 235, 239, 0.65); font-family: var(--mono); }
.simu-fiscal-detail {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 235, 239, 0.15);
  font-size: 13px;
  display: grid;
  gap: 6px;
}
.simu-fiscal-ligne { display: flex; justify-content: space-between; gap: 12px; }
.simu-fiscal-ligne span:first-child { color: rgba(232, 235, 239, 0.7); }
.simu-fiscal-ligne.is-fort span { color: var(--paper); font-weight: 500; }
.simu-fiscal-avertissement {
  margin-top: 16px;
  font-size: 11px;
  color: rgba(232, 235, 239, 0.5);
  line-height: 1.5;
}
.simu-fiscal-alerte {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm, 6px);
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(232, 235, 239, 0.85);
}

@media (max-width: 720px) {
  .simu-fiscal-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Le simulateur vit dans la colonne d'article (~600 px), pas dans la fenêtre : une media query
   sur le viewport ne se déclenche jamais et laisse deux colonnes de 320 px et 280 px, où le
   panneau de résultat devient illisible. La requête de conteneur, elle, réagit à la largeur
   réellement offerte au composant. */
.simu-fiscal { container-type: inline-size; }

@container (max-width: 720px) {
  .simu-fiscal-grid { grid-template-columns: minmax(0, 1fr); }
  .simu-fiscal-resultat { border-top: 1px solid rgba(232, 235, 239, 0.15); }
}

/* La grille .features du site est en 3 colonnes, calibrée pour une section pleine largeur.
   Dans la colonne d'article d'un guide (~600 px), elle produit des cartes de 190 px : une carte
   qui contient un paragraphe y devient une colonne de mots. On repasse sur un auto-fit calé sur
   la largeur réellement disponible, ce qui donne 2 colonnes lisibles.
   Les variantes explicites (cols-1, cols-2, cols-auto) restent prioritaires : elles sont posées
   à dessein par la page. */
.guide-article .features:not([class*="cols-"]) {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* `hidden` n'est qu'un display:none de la feuille du navigateur : .tip-box pose un display et
   l'emporte. Sans ce !important, les blocs « merci » et « erreur » s'affichent d'emblée, tous
   les deux, sous le formulaire. Même piège que dans le bloc de capture email. */
.demande-acc [hidden] { display: none !important; }

/* Demande de mise en relation avec un partenaire, posée sous un simulateur. Volontairement plus
   sobre que le bloc de capture email : c'est un engagement plus fort, pas une newsletter. */
.demande-acc { margin: 28px auto; max-width: 820px; scroll-margin-top: 90px; }
.demande-acc-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 28px 26px;
}
.demande-acc-head { margin-bottom: 20px; }
.demande-acc-head h3 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 12px 0 8px;
}
.demande-acc-head p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.demande-acc-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.demande-acc textarea.field-input {
  min-height: 76px;
  resize: vertical;
  font-family: inherit;
}
.demande-acc-contexte {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}
/* Même neutralisation de lettrine que pour les simulateurs : sans elle, le premier paragraphe
   du bloc reçoit la capitale géante réservée à l'ouverture de l'article. */
.demande-acc p:first-of-type::first-letter {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  float: none;
  padding: 0;
  color: inherit;
}

/* Les liens héritent de `.guide-article a { color: var(--ink) }` : sombre sur sombre, donc
   invisibles dans le panneau de résultat et dans ses encadrés. On les repasse en clair, avec un
   soulignement qui les distingue sans casser la sobriété du bloc. */
.simu-fiscal-resultat a,
.simu-fiscal-alerte a {
  color: var(--paper);
  border-bottom-color: rgba(232, 235, 239, 0.45);
  text-decoration: none;
}
.simu-fiscal-resultat a:hover,
.simu-fiscal-alerte a:hover {
  color: #fff;
  border-bottom-color: #fff;
}