/* Forgefont — blog : colonne de lecture étroite, mêmes couleurs et mêmes boutons que le site. */

.blog { max-width: 1080px; margin: 0 auto; padding: 40px var(--marge) 80px; }
.tete-blog { max-width: 70ch; margin-bottom: 40px; }
.tete-blog h1 { font-size: var(--titre); margin-bottom: 12px; }
.tete-blog p { color: var(--encre-douce); }
.silo { margin-top: 40px; }
.silo h2 { font-size: var(--moyen); margin-bottom: 14px; }
.cartes-blog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cartes-blog a { display: grid; gap: 8px; align-content: start; height: 100%; padding: 22px; border-radius: 12px; background: var(--surface); color: var(--encre); text-decoration: none; transition: background-color .2s; }
.cartes-blog a:hover { background: var(--surface-2); }
.cartes-blog strong { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.cartes-blog span { font-size: 15px; color: var(--encre-douce); }

.ariane ol { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--encre-douce); }
.ariane li + li::before { content: "/"; margin-right: 6px; }
.ariane a { color: inherit; }
.article { max-width: 720px; }
.article .surtitre { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--accent); }
.article h1 { font-size: var(--titre); line-height: 1.1; margin-bottom: 14px; }
.article .meta { margin: 0 0 32px; font-size: 14px; color: var(--encre-douce); }
.article h2 { font-size: var(--moyen); margin: 36px 0 10px; }
.article h3 { font-size: 18px; margin: 24px 0 6px; }
.article p, .article li { line-height: 1.65; }
.article ul, .article ol { padding-left: 22px; }
.article li + li { margin-top: 6px; }
.article a:not(.bouton) { color: var(--accent); }
.article table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.article th, .article td { padding: 10px 12px; text-align: left; vertical-align: top; background: var(--surface); border-bottom: 2px solid var(--fond); }
.defile-tableau { overflow-x: auto; }
.appel { margin-top: 44px; padding: 28px; border-radius: 12px; background: var(--surface); }
.appel h2 { margin-top: 0; }
@media (max-width: 860px) { .cartes-blog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cartes-blog { grid-template-columns: 1fr; } .blog { padding-top: 24px; } .page-blog .liens .connexion { display: none; } .page-blog .liens .bouton { white-space: nowrap; } }