/**
 * Épargne et impôt — Pages sujet
 * ==============================
 * Ces pages réutilisent le gabarit des articles (blog.css : .bl-art-hero,
 * .bl-corps). Ce fichier n'ajoute que les blocs qui leur sont propres :
 * réponse courte, façon de faire de Julien, appel à l'action, FAQ, sources.
 * Couleurs et espacements viennent de tokens.css — rien de neuf ici.
 */

.sj-maj {
  margin: 1rem 0 0;
  font-size: var(--font-size-sm, .875rem);
  color: #96a19b;
}

/* --- La réponse courte : ce que Google et les AI lisent en premier --- */
.sj-reponse {
  margin: 0 0 2.2rem;
  padding: 1.3rem 1.5rem 1.4rem;
  background: var(--color-neutral-50, #fbf9f4);
  border: 1px solid var(--color-neutral-200, #d8d2c6);
  border-left: 4px solid var(--tone, var(--color-primary-500, #2f6f74));
  border-radius: 4px;
}
.sj-reponse p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--color-neutral-900, #1b1f1e); }
.sj-reponse .sj-reponse-titre {
  margin: 0 0 .5rem;
  font-family: var(--font-mono, monospace);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-500, #2f6f74);
}

/* --- Renvois de source --- */
.sj-ref { font-size: .7em; line-height: 0; margin-left: .1em; }
.sj-corps .sj-ref a:not(.btn) { text-decoration: none; font-weight: var(--font-weight-semibold, 600); padding: 0 .1em; }

/* --- Tableaux comparatifs : lisibles aussi sur cellulaire --- */
.sj-corps table th[scope], .sj-corps tbody th { background: none; width: 26%; vertical-align: top; }
.sj-corps td { vertical-align: top; }
@media (max-width: 640px) {
  .sj-corps table, .sj-corps thead, .sj-corps tbody, .sj-corps tr, .sj-corps th, .sj-corps td { display: block; width: auto; }
  .sj-corps thead { display: none; }
  .sj-corps tbody tr { padding: .9rem 0; border-bottom: 1px solid var(--color-neutral-200, #d8d2c6); }
  .sj-corps tbody th, .sj-corps tbody td { border: 0; padding: .15rem 0; }
  .sj-corps tbody th { font-weight: var(--font-weight-bold, 700); color: var(--color-primary-900, #0f2a2e); }
  .sj-corps tbody td[data-t]::before { content: attr(data-t) " : "; font-weight: var(--font-weight-semibold, 600); }
}

/* --- « Comment je l'aborde » : la façon de faire de Julien, séparée des faits --- */
.sj-approche {
  margin: 2.6rem 0;
  padding: 1.6rem 1.6rem 1.3rem;
  background: var(--color-primary-900, #0f2a2e);
  color: #e9efec;
  border-radius: 6px;
}
.sj-approche p { margin: 0 0 1em; color: inherit; }
.sj-approche h3 { color: #fff; margin: 0 0 .5rem; font-size: 1.05rem; }
.sj-approche .sj-approche-titre {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.6rem;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 1.1rem;
}
.sj-approche .sj-approche-titre span { font-family: var(--font-sans, sans-serif); font-size: .95rem; color: #b9c6c1; white-space: nowrap; }
.sj-approche .sj-approche-note { font-size: .85rem; color: #b9c6c1; margin: 1rem 0 0; }
.sj-approche .sj-cta { margin: 1.2rem 0 0; }
.sj-corps .sj-approche .sj-cta-note { color: #b9c6c1; }

/* Choix du profil : les deux réponses sont dans la page (les moteurs lisent
   les deux) ; le clic n'en montre qu'une. Sans CSS, les deux s'affichent. */
.sj-profils { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.sj-profils > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sj-profils > label {
  cursor: pointer;
  padding: .55rem 1rem;
  border: 1px solid #5d7a7c;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: var(--font-weight-semibold, 600);
  color: #e9efec;
}
.sj-profils > input:checked + label { background: #fff; color: var(--color-primary-900, #0f2a2e); border-color: #fff; }
.sj-profils > input:focus-visible + label { outline: 2px solid var(--color-accent-500, #a8853f); outline-offset: 2px; }
.sj-profils > .sj-profil { display: none; flex: 1 0 100%; margin-top: .7rem; }
.sj-profils > .sj-profil h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sj-profils > .sj-r1:checked ~ .sj-p1,
.sj-profils > .sj-r2:checked ~ .sj-p2,
.sj-profils > .sj-r3:checked ~ .sj-p3 { display: block; }

/* --- Appel à l'action --- */
.sj-cta { margin: 2.4rem 0; }
.sj-cta-boutons { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 .6rem; }
.sj-corps .sj-cta-note { margin: 0; font-size: .92rem; color: var(--color-neutral-500, #58615e); }

/* --- FAQ, pages reliées, auteur, sources --- */
.sj-faq h3 { margin-top: 1.6rem; }
.sj-lies ul { list-style: none; padding: 0; }
.sj-lies li { margin: 0; border-bottom: 1px solid var(--color-neutral-200, #d8d2c6); }
.sj-lies li a { display: block; padding: .75rem 0; }
.sj-auteur {
  margin: 2.6rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--color-neutral-200, #d8d2c6);
  font-size: .95rem;
}
.sj-auteur p { margin: 0; }
.sj-sources { margin-top: 2rem; font-size: .9rem; color: var(--color-neutral-700, #474e4c); }
.sj-corps .sj-sources h2 { font-size: 1.15rem; margin: 0 0 .7rem; }
.sj-corps .sj-sources h2::before { display: none; }
.sj-sources ol { padding-left: 1.3em; }
.sj-sources li { margin-bottom: .45em; }
.sj-sources li:target { background: var(--color-accent-100, #e6d8b6); }
.sj-sources-note { margin: .8rem 0 0; }
.sj-utilise { font-size: .9em; color: var(--color-neutral-500, #58615e); }

/* --- Page « Toutes les questions » --- */
.sj-recherche { margin: 0 0 2rem; }
.sj-recherche label { display: block; font-weight: var(--font-weight-semibold, 600); margin-bottom: .4rem; }
.sj-recherche input {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: 1.05rem;
  border: 1px solid var(--color-border-input, #77827e); border-radius: 4px; background: #fff;
}
.sj-recherche-vide { margin: 1rem 0 0; }
.sj-liste { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.sj-liste li { margin: 0; border-bottom: 1px solid var(--color-neutral-200, #d8d2c6); }
.sj-liste li a { display: block; padding: .7rem 0; }

@media (max-width: 768px) {
  .sj-approche { padding: 1.3rem 1.1rem 1.1rem; }
  .sj-cta-boutons .btn { width: 100%; justify-content: center; text-align: center; }
}
@media print {
  .sj-cta, .sj-profils > label { display: none; }
  .sj-profils > .sj-profil { display: block; }
  .sj-profils > .sj-profil h3 { position: static; width: auto; height: auto; clip: auto; }
  .sj-approche { background: none; color: #000; border: 1px solid #000; }
}


/* --- Version courte : FAQ et sources repliées (une page ne doit pas faire 15 écrans) --- */
.sj-q { border-bottom: 1px solid var(--color-neutral-200, #d8d2c6); }
.sj-q:first-of-type { border-top: 1px solid var(--color-neutral-200, #d8d2c6); }
.sj-q summary { cursor: pointer; padding: .85rem 1.6rem .85rem 0; font-weight: var(--font-weight-semibold, 600); position: relative; list-style: none; }
.sj-q summary::-webkit-details-marker { display: none; }
.sj-q summary::after { content: "+"; position: absolute; right: .2rem; top: .75rem; font-size: 1.25rem; line-height: 1; color: var(--tone, #2f6f74); }
.sj-q[open] summary::after { content: "–"; }
.sj-q p { margin: 0 0 1rem; }
details.sj-sources > summary { cursor: pointer; font-weight: var(--font-weight-semibold, 600); padding: .4rem 0; }
details.sj-sources[open] > summary { margin-bottom: .6rem; }