/* Apprécio — styles du blog (en plus de /legal-shared.css). Pages générées par scripts/blog.mjs. */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 8px; font-weight: 650; }
.skip:focus { top: 12px; }
.crumbs { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }

/* Texte des articles : ligne de 68 caractères, titres décollés, exemples bien visibles. */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 44px; line-height: 1.2; scroll-margin-top: 84px; }
.prose h3 { scroll-margin-top: 84px; }
.prose p, .prose li { font-size: 18px; line-height: 1.7; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose blockquote { margin: 14px 0 18px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; }
.prose blockquote p { font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; font-size: 18px; line-height: 1.6; margin: 0 0 8px; color: var(--ink-strong); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-size: .92em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* Encart d'appel à l'action : le même partout (un seul CTA sur le site). */
.blog-cta { margin: 40px 0; padding: 26px 28px; border-radius: 16px; background: #151D36; color: #fff; }
.blog-cta p { color: rgba(255,255,255,.86); margin-bottom: 14px; max-width: none; }
.blog-cta .blog-cta-title { font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; font-size: 24px; font-weight: 650; line-height: 1.2; color: #fff; margin-bottom: 8px; }
.blog-cta-btn { display: inline-block; background: #fff; color: #151D36; font-weight: 700; padding: 13px 22px; border-radius: 10px; text-decoration: none !important; }
.blog-cta-btn:hover { background: #E9EDFB; }
.blog-cta a:focus-visible { box-shadow: 0 0 0 3px #151D36, 0 0 0 6px #fff; }

.related { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.related h2 { font-size: 20px; margin-top: 0; }
.related ul { margin-left: 18px; }

/* Index du blog */
.posts { list-style: none; margin: 0; padding: 0; }
.post { padding: 22px 0; border-bottom: 1px solid var(--border); }
.post:first-child { border-top: 1px solid var(--border); }
.post h2 { margin: 0 0 6px; font-size: 23px; }
.post a { text-decoration: none; }
.post a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.post p { margin-bottom: 6px; max-width: 68ch; }
.post-meta { font-size: 14.5px; color: var(--muted); }