/* Blog de pixel-ia.io (30/09/2026) : index /blog/ et pages d'article /blog/<slug>/.
   Chargée après style.css (dont elle reprend les variables) sur les pages du blog, et sur toutes
   les pages dès qu'un article est publié (le menu gagne alors une sixième entrée, « Blog »). */

/* ─── En-tête à six entrées ─────────────────────────────────── */
@media (min-width: 961px) and (max-width: 1240px) { .nav-principale { gap: clamp(12px, 1.3vw, 18px); } }
@media (min-width: 961px) and (max-width: 1100px) { .entete-actions .long { display: none; } .entete-actions .court { display: inline; } }

/* ─── Index ─────────────────────────────────────────────────── */
.blog-tete .t-1 { max-width: 20ch; }
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 22px; }
.carte-article { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 24px; background: #fff; border: 1px solid var(--trait); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(47, 42, 95, .05); transition: border-color .3s, box-shadow .4s var(--ease), transform .4s var(--ease); }
.carte-article:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-1); transform: translateY(-3px); }
.carte-article h2, .carte-article h3 { font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; text-wrap: balance; }
.carte-article h2 a::after, .carte-article h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.carte-article p { color: var(--encre-douce); font-size: 15.5px; }
.carte-meta { font-size: 13px; font-weight: 600; color: var(--encre-muette); letter-spacing: .01em; }
.carte-article .lien-fleche { margin-top: auto; font-size: 14.5px; }
.blog-vide { max-width: 60ch; font-size: 17px; color: var(--encre-douce); }
.blog-vide + .lien-fleche { margin-top: 18px; }
.pagination-blog { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; font-weight: 700; }
.pagination-blog a { color: var(--bleu); padding-block: 8px; }

/* ─── Article ───────────────────────────────────────────────── */
.article-tete .env { max-width: 860px; }
.article-tete .t-1 { max-width: 24ch; font-size: clamp(30px, 3.7vw, 48px); line-height: 1.06; letter-spacing: -.04em; }
.article-tete .fil { max-width: 100%; }
.article-tete .fil li:last-child { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--encre-muette); }
.article-meta span + span::before { content: '·'; margin-right: 14px; color: var(--trait-fort); }
.article-corps { max-width: 860px; padding-bottom: clamp(56px, 7vw, 96px); }
.article-corps > * + * { margin-top: 28px; }
.article [id] { scroll-margin-top: calc(var(--entete) + 16px); }
.encart { padding: 20px 24px; border-radius: var(--r-md); background: var(--bleu-pale); border: 1px solid rgba(43, 91, 230, .16); font-size: 16.5px; }
.encart p { margin: 0; }
.encart strong, .encart-titre { font-weight: 800; color: var(--encre); }
.encart-titre { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px !important; color: var(--bleu); }
.encart ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.encart li { position: relative; padding-left: 22px; }
.encart li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--marque); }
.encart--retenir { background: #fff; border-color: var(--trait); box-shadow: var(--ombre-1); }
.sommaire { padding: 18px 24px; border: 1px solid var(--trait); border-radius: var(--r-md); background: #fff; font-size: 15.5px; }
.sommaire-titre { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-muette); margin-bottom: 8px; }
.sommaire ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: 2px; }
.sommaire a { display: inline-block; padding-block: 4px; color: var(--encre-douce); }
.sommaire a:hover { color: var(--bleu); }
.article-prose { font-size: 17px; line-height: 1.72; }
.article-prose section + section { margin-top: 12px; }
.article-prose h2 { font-size: clamp(24px, 2.4vw, 31px); font-weight: 850; letter-spacing: -.032em; line-height: 1.15; text-wrap: balance; margin-top: 1.9em; }
.article-prose h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.article-prose ol { padding-left: 1.3em; list-style: decimal; }
.article-prose ol li + li { margin-top: .4em; }
.article-prose p + ul, .article-prose p + ol, .article-prose ul + p, .article-prose ol + p, .article-prose .tableau-defile + p { margin-top: 1em; }
.article-prose blockquote { margin: 1.2em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--mauve); color: var(--encre-douce); }
.article-prose strong { font-weight: 700; }
.tableau-defile { margin: 1.4em 0; border: 1px solid var(--trait); border-radius: var(--r-sm); background: #fff; }
.tableau-defile:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.tableau-defile table { margin: 0; min-width: 560px; }
.tableau-defile th { background: var(--sable); }
.tableau-defile tr:last-child td { border-bottom: 0; }
.article-faq h2, .article-sources h2 { font-size: clamp(24px, 2.4vw, 31px); font-weight: 850; letter-spacing: -.032em; line-height: 1.15; margin-bottom: 14px; }
.question { padding: 18px 0; border-top: 1px solid var(--trait); }
.question h3 { font-size: 18px; font-weight: 800; letter-spacing: -.018em; line-height: 1.35; margin-bottom: 6px; }
.question p { color: var(--encre-douce); }
.article-sources ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: 12px; font-size: 15.5px; }
.article-sources a { color: var(--bleu); text-decoration: underline; text-decoration-color: rgba(43, 91, 230, .35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-sources span { display: block; color: var(--encre-muette); font-size: 14.5px; }
.article-appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 26px 28px; border-radius: var(--r-lg); background: var(--encre); color: #fff; margin-top: 44px !important; }
.article-appel p { max-width: 52ch; color: rgba(255, 255, 255, .86); font-size: 16.5px; }
.article-appel .bouton--primaire { background: #fff; color: var(--encre); box-shadow: none; }
.article-appel .bouton--primaire:hover { background: #f1f1ff; }
.article-signature { font-size: 14px; color: var(--encre-muette); }
.a-lire-aussi .t-2 { margin-bottom: 28px; }

/* ─── Aperçu interne (jamais publié) ────────────────────────── */
.controle-apercu { margin: 16px auto 0; max-width: min(860px, calc(100% - 2 * var(--marge))); padding: 18px 22px; border: 2px dashed var(--rose); border-radius: var(--r-md); background: #fff; font-size: 14.5px; }
.controle-apercu h2 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.controle-apercu ul { list-style: disc; padding-left: 1.2em; margin-top: 6px; }
.controle-apercu code { font-size: 13px; background: var(--sable); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .encart, .sommaire { padding: 16px 18px; }
  .article-prose { font-size: 16.5px; }
  .article-appel { padding: 22px 20px; }
  .article-appel .bouton { width: 100%; justify-content: center; }
}