/* ============================================================
   ARTICLES DE FOND (barème, fiscalité, droits sociaux, TVA, juridique)
   ------------------------------------------------------------
   Chargée UNIQUEMENT par les pages d'article à la racine, après styles.css.

   Pourquoi une feuille à part et pas une section de styles.css : plusieurs
   de ces classes (.encadre, .src, .chiffre, .art) existent déjà dans le
   blog, les cas clients, le guide et la page des niches fiscales, avec leur
   propre mise en forme. Les poser dans styles.css aurait changé l'apparence
   de ces pages déjà en ligne. Mise à part le 28/09/2026.

   RÈGLE : un article n'a pas de bloc <style>. Il utilise ces classes.
   ============================================================ */

.art { max-width: 760px; }
.art h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.08; letter-spacing: -0.035em;
  margin: clamp(48px, 6vw, 72px) 0 16px;
}
.art h3 {
  font-size: clamp(18px, 2vw, 21px); font-weight: 600; letter-spacing: -0.025em;
  margin: 32px 0 10px;
}
.art p { font-size: 17.5px; line-height: 1.62; color: var(--muted); margin-bottom: 18px; }
.art p strong, .art li strong { color: var(--ink); font-weight: 600; }
.art ul, .art ol { margin: 0 0 18px 0; padding-left: 22px; }
.art li { font-size: 17.5px; line-height: 1.6; color: var(--muted); margin-bottom: 9px; }
.art a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.art a:not(.btn):hover { text-decoration-color: var(--accent-2); text-decoration-thickness: 2px; }

.chapo { font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5; color: var(--ink); letter-spacing: -0.02em; }

/* Encadré : une idée qui mérite d'être sortie du fil du texte. */
.encadre {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--ink); border-radius: 0 14px 14px 0;
  padding: 20px 24px; margin: 26px 0;
}
.encadre strong { display: block; font-size: 16.5px; color: var(--ink); margin-bottom: 7px; }
.encadre p { font-size: 16px; margin-bottom: 0; }
.encadre p + p { margin-top: 10px; }
.encadre--jaune { background: var(--accent-tint); border-color: var(--accent-2); border-left-color: var(--ink); }

/* Chiffre commenté : un montant, et ce qu'il veut dire. */
.chiffre { display: flex; gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 520px) { .chiffre { flex-direction: column; gap: 4px; } }
.chiffre__val {
  font-size: 28px; font-weight: 600; letter-spacing: -0.035em; color: var(--ink);
  font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 130px;
}
.chiffre__quoi { font-size: 16px; line-height: 1.5; color: var(--muted); }
.chiffre__quoi b { color: var(--ink); font-weight: 550; }

/* Source : la règle du projet est que tout chiffre affiché soit remontable. */
.src { font-size: 14px; color: var(--muted); margin-top: 10px; }
.src a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.src a:hover { color: var(--ink); }

/* Tableau de chiffres. Le conteneur défile seul : la page ne part jamais de travers. */
.tbl { overflow-x: auto; margin: 24px 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 16px; }
.tbl th, .tbl td {
  padding: 11px 16px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; white-space: normal; }
.tbl thead th {
  font-size: 13px; font-weight: 600; color: var(--muted); background: var(--stage);
  letter-spacing: 0; border-bottom-color: var(--line-2);
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td { color: var(--muted); }
.tbl td:first-child, .tbl td b { color: var(--ink); font-weight: 600; }
.tbl caption { caption-side: bottom; text-align: left; padding: 11px 16px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }

/* Sommaire d'un article long. */
.art__toc { background: var(--stage); border-radius: var(--radius-sm); padding: 20px 24px; margin: 30px 0 8px; }
.art__toc strong { display: block; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.art__toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.art__toc li { font-size: 16.5px; margin: 0; }
.art__toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.art__toc a:hover { border-bottom-color: var(--ink); }

/* Questions fréquentes. Le balisage FAQPage doit reprendre ce texte MOT POUR MOT. */
.faq-art { border-top: 1px solid var(--line); margin-top: 12px; }
.faq-art__q { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-art__q h3 { margin: 0 0 8px; font-size: 18px; }
.faq-art__q p { margin-bottom: 0; font-size: 16.5px; }

/* Appel vers un outil, en fin d'article. */
.cta-outil {
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px); margin: clamp(44px, 5vw, 64px) 0;
}
.cta-outil h2 { color: var(--paper); margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); }
.cta-outil p { color: rgba(255,255,255,0.66); font-size: 17px; margin-bottom: 22px; }

/* Bandeau de fraîcheur. Une page fiscale non datée devient fausse toute seule. */
.maj {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted);
  background: var(--stage); border-radius: 999px; padding: 7px 14px;
}
.maj::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }

/* Renvois entre articles : c'est ce qui garde le lecteur chez nous. */
.lire-aussi { display: flex; flex-direction: column; gap: 10px; margin: 30px 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lire-aussi strong { font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.lire-aussi a { font-size: 17px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }




/* ============================================================
   CALCULATEUR TJM (pages /tjm)
   Le calcul est dans assets/baremes/tjm-net.js, l'affichage dans
   assets/baremes/page-tjm-net.js. Ajouté le 28/09/2026.
   ============================================================ */
.calc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: clamp(18px, 2.4vw, 28px); margin: 22px 0 30px; display: grid; gap: 18px; }
.calc__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .calc__champs { grid-template-columns: 1fr; } }
.calc__champ { display: grid; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.calc__saisie { display: flex; align-items: center; gap: 10px; }
.calc__saisie input {
  width: 100%; max-width: 170px; font: inherit; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--bg); border: 1.5px solid var(--line-2); border-radius: 9px; padding: 9px 12px;
}
.calc__saisie input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-tint); }
.calc__saisie em { font-style: normal; font-size: 14px; color: var(--muted); }
.art .calc__ca { font-size: 15.5px; margin: 0; }
.calc__ca b { color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .calc__res { grid-template-columns: 1fr; } }
.calc__case { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 3px; align-content: start; }
.calc__case span { font-size: 13.5px; color: var(--muted); }
.calc__case b { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.calc__case small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.calc__case--fort { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.art .calc__pos { margin: 0; font-size: 15px; color: var(--ink); }
.art .calc__vide { display: none; margin: 0; font-size: 14.5px; }
.calc--vide .calc__res, .calc--vide .calc__ca, .calc--vide .calc__pos { display: none; }
.calc--vide .calc__vide { display: block; }
.tbl .hors { color: var(--muted); font-size: 13.5px; }
.tbl--sources td:first-child { min-width: 17em; }
.tbl .tbl__note { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--muted); }