/* Le blog Soleir (Kevin 01/10 : « on commence le SEO ») : les articles et les listes générés par outils/articles.py.
   Chargé seulement sur les pages du blog, après la feuille du site, et limité aux classes du blog : aucune autre page
   ne change. Il corrige ce que la feuille du modèle laissait (paragraphes sans marge, liens de la même couleur que le
   texte, listes, tableaux) et habille les blocs propres aux articles : chiffres clés, calculateur, appel à la démo,
   sources, articles liés. Couleurs et tailles = jetons du site. */

/* ── l'en-tête de l'article ── */
.blog-entete { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.blog-fil { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: .875rem; color: var(--_colors---primary-300); }
.blog-fil a { color: var(--_colors---primary-300); text-decoration: none; }
.blog-fil a:hover { color: var(--_colors---primary-100); }
.blog-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .75rem; font-size: .9375rem; color: var(--_colors---primary-300); }
.blog-meta > * + *::before { content: "·"; margin-right: .75rem; }

/* ── le corps ── */
.blog-article { font-size: 1.125rem; line-height: 1.65; color: var(--_colors---primary-200); }
.blog-article p { margin: 0 0 1.25rem; }
.blog-article .blog-chapo { font-size: 1.25rem; line-height: 1.55; color: var(--_colors---primary-100); }
.blog-article h2 {
  font-size: var(--_typography---heading-font-size--h4); line-height: 1.2; letter-spacing: -.01em;
  margin: 3.25rem 0 1rem; color: var(--_colors---primary-100); scroll-margin-top: 6rem; text-wrap: balance;
}
.blog-article h3 { font-size: var(--_typography---heading-font-size--h6); line-height: 1.3; margin: 2rem 0 .75rem; color: var(--_colors---primary-100); }
.blog-article ul, .blog-article ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.blog-article ul { list-style: disc; }
.blog-article li { margin-top: .5rem; padding-left: .2rem; }
.blog-article li::marker { color: var(--_colors---brand-200); }
.blog-article strong { font-weight: 600; color: var(--_colors---primary-100); }
.blog-article a:not(.blog-ref):not(.blog-cta_bouton):not(.blog-cta_lien) {
  color: var(--_colors---brand-100); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.blog-article a:not(.blog-ref):not(.blog-cta_bouton):not(.blog-cta_lien):hover { text-decoration-thickness: 2px; }
.blog-article .blog-ref { font-size: .72em; line-height: 0; vertical-align: .45em; margin-left: .1em; color: var(--_colors---brand-100); text-decoration: none; }
.blog-article blockquote { margin: 2rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--_colors---brand-200); font-size: 1.1875rem; color: var(--_colors---primary-100); }
.blog-article :target { scroll-margin-top: 6rem; }

/* tableaux : défilent seuls sur téléphone, la page ne déborde jamais */
.blog-table { overflow-x: auto; margin: 1.75rem 0 2rem; border-radius: 1rem; border: 1px solid var(--_colors---secondary-400); }
.blog-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.blog-table th, .blog-table td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--_colors---secondary-400); }
.blog-table thead th { background: var(--_colors---secondary-300); font-weight: 500; color: var(--_colors---primary-100); }
.blog-table tr:last-child td { border-bottom: 0; }
.blog-table td { font-variant-numeric: tabular-nums; }

/* image dans le corps */
.blog-figure { margin: 2.5rem 0; }
.blog-figure img { display: block; width: 100%; height: auto; max-height: none; border-radius: 1rem; }
.blog-figure figcaption { margin-top: .6rem; font-size: .875rem; color: var(--_colors---primary-300); }

/* ── les chiffres clés ── */
.blog-chiffres { margin: 2.5rem 0; padding: 1.75rem; border-radius: 1.25rem; background: var(--_colors---secondary-300); }
.blog-article .blog-chiffres_titre { margin: 0 0 1.25rem; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--_colors---primary-300); }
.blog-article .blog-chiffres_liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
/* 2 ou 4 chiffres : deux colonnes, aucun chiffre seul sur sa ligne */
.blog-article .blog-chiffres_liste[data-n="2"], .blog-article .blog-chiffres_liste[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-article .blog-chiffres_liste li { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.blog-chiffres_valeur { font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; color: var(--_colors---primary-100); font-variant-numeric: tabular-nums; }
.blog-chiffres_texte { font-size: .9375rem; line-height: 1.45; color: var(--_colors---primary-200); }

/* ── le calculateur ── */
.blog-calcul { margin: 2.5rem 0; padding: 1.75rem; border-radius: 1.25rem; border: 1px solid var(--_colors---secondary-400); background: var(--_colors---secondary-100); }
.blog-article .blog-calcul_titre { margin: 0 0 1.25rem; font-size: 1.25rem; color: var(--_colors---primary-100); }
.blog-calcul_champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.blog-calcul label { display: flex; flex-direction: column; gap: .4rem; font-size: .9375rem; color: var(--_colors---primary-200); }
.blog-calcul input {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--_colors---secondary-400); border-radius: .75rem;
  font: inherit; font-size: 1.0625rem; color: var(--_colors---primary-100); background: var(--_colors---secondary-200); font-variant-numeric: tabular-nums;
}
.blog-calcul input:focus { outline: 2px solid var(--_colors---brand-100); outline-offset: 1px; background: var(--_colors---secondary-100); }
.blog-calcul_resultat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--_colors---secondary-400); }
.blog-calcul_resultat div { display: flex; flex-direction: column; gap: .25rem; }
.blog-calcul_resultat span { font-size: .875rem; color: var(--_colors---primary-300); }
.blog-calcul_resultat output { font-size: 2.25rem; line-height: 1.1; letter-spacing: -.02em; color: var(--_colors---brand-200); font-variant-numeric: tabular-nums; }
.blog-calcul_resultat .blog-calcul_an output { font-size: 1.5rem; color: var(--_colors---primary-100); }
.blog-article .blog-calcul_note { margin: 1rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--_colors---primary-300); }

/* ── l'appel à la démo ── */
.blog-cta { margin: 3rem 0; padding: 2rem; border-radius: 1.25rem; background: var(--_colors---primary-100); color: var(--_colors---secondary-100); }
.blog-article .blog-cta .blog-cta_titre { margin: 0 0 .5rem; font-size: 1.5rem; line-height: 1.25; color: var(--_colors---secondary-100); }
.blog-article .blog-cta p:not(.blog-cta_titre) { margin: 0 0 1.25rem; color: #c9cdd6; font-size: 1.0625rem; }
.blog-cta_actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.blog-cta_bouton {
  display: inline-flex; align-items: center; padding: .8rem 1.4rem; border-radius: 5rem;
  background: var(--_colors---secondary-100); color: var(--_colors---primary-100); font-size: 1rem; text-decoration: none; transition: transform .15s ease;
}
.blog-cta_bouton:hover { transform: translateY(-1px); }
.blog-cta_lien { color: var(--_colors---secondary-100); font-size: 1rem; text-decoration: underline; text-underline-offset: .2em; }

/* ── les sources ── */
.blog-sources { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--_colors---secondary-400); font-size: .9375rem; line-height: 1.5; }
.blog-article .blog-sources h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.blog-sources ol { padding-left: 1.6rem; }
.blog-sources li { overflow-wrap: anywhere; scroll-margin-top: 6rem; }
.blog-sources li:target { background: var(--_colors---secondary-300); border-radius: .5rem; }
.blog-article .blog-sources_note { margin: 1rem 0 0; font-size: .875rem; color: var(--_colors---primary-300); }

/* ── les cartes (liste et articles liés) ── */
.blog-card_texte { display: flex; flex-direction: column; gap: .5rem; }
.blog-card_extrait { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--_colors---primary-200);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card_date { font-size: .875rem; color: var(--_colors---primary-300); }
.blog-card .blog-card_image { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-card_image { transform: scale(1.03); }
.blog-lies { display: flex; flex-direction: column; gap: 1.5rem; }
.blog-lies_titre { margin: 0; }

@media (max-width: 991px) {
  .blog-lies .blog-card_wrapper { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .blog-article { font-size: 1.0625rem; }
  .blog-article .blog-chapo { font-size: 1.125rem; }
  .blog-calcul_champs { grid-template-columns: minmax(0, 1fr); }
  .blog-chiffres, .blog-calcul, .blog-cta { padding: 1.25rem; }
  .blog-article .blog-chiffres_liste { grid-template-columns: minmax(0, 1fr); }
  .blog-lies .blog-card_wrapper { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card .blog-card_image, .blog-cta_bouton { transition: none; }
}