.blog-page { --blog-ink:#16313e; --blog-accent:#08776f; width:100%; max-width:1120px; box-sizing:border-box; margin:0 auto; padding:32px 24px 64px; color:var(--blog-ink); }
/* Le layout historique fixe la largeur des articles et ajoute du padding au footer. */
body:has(.blog-page) > footer { width:100%; box-sizing:border-box; }
.blog-page a { color:var(--blog-accent); text-underline-offset:3px; }
.blog-page a:focus-visible { outline:3px solid #20b5a5; outline-offset:4px; border-radius:3px; }
.blog-hero { padding:24px 0 28px; max-width:800px; }
.blog-eyebrow { color:var(--blog-accent); font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.blog-page h1 { color:var(--blog-ink); font-size:clamp(1.85rem,5vw,2.85rem); line-height:1.2; margin:12px 0 18px; text-wrap:balance; }
.blog-lead { color:#435966; font-size:1.1rem; line-height:1.65; }
.blog-filters { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 28px; }
.blog-filters a { padding:7px 13px; border:1px solid #b7d1ce; border-radius:24px; text-decoration:none; font-size:.88rem; }
.blog-filters a[aria-current="page"] { background:var(--blog-accent); color:white; border-color:var(--blog-accent); }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:24px; }
.blog-card { width:auto; min-width:0; margin:0; padding:0; background:#fff; border:1px solid #dfe8e7; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 18px #16313e08; }
.blog-card__image { display:block; aspect-ratio:1672/941; overflow:hidden; }
.blog-card__image img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-card__body { padding:22px; display:flex; flex-direction:column; flex:1; }
.blog-card__category { font-size:.8rem; color:var(--blog-accent); font-weight:600; }
.blog-card h2 { font-size:1.24rem; line-height:1.4; margin:10px 0; }
.blog-card h2 a { text-decoration:none; color:var(--blog-ink); }
.blog-card__excerpt { font-size:.96rem; line-height:1.65; color:#435966; margin:0 0 18px; }
.blog-card__date { font-size:.83rem; color:#596d78; margin:auto 0 12px; }
.blog-card__read { font-weight:600; }
.blog-breadcrumbs { font-size:.88rem; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.blog-article { width:100%; max-width:800px; box-sizing:border-box; margin:0 auto; padding:0; }
.blog-byline { display:flex; flex-wrap:wrap; gap:8px 20px; color:#526873; font-size:.9rem; margin:18px 0 28px; }
.blog-cover { margin:0 0 32px; }
.blog-cover img,.blog-body img { width:100%; height:auto; display:block; border-radius:14px; }
.blog-cover figcaption { color:#667781; font-size:.8rem; margin-top:8px; }
.blog-body { font-size:1.06rem; line-height:1.8; overflow-wrap:anywhere; }
.blog-body p { margin:0 0 22px; }
.blog-body h2 { font-size:1.6rem; line-height:1.35; margin:36px 0 16px; color:var(--blog-ink); }
.blog-body h3 { font-size:1.24rem; line-height:1.45; margin:28px 0 12px; }
.blog-body h4,.blog-body h5,.blog-body h6 { font-size:1.12rem; margin:24px 0 12px; }
.blog-body ul,.blog-body ol { padding-left:25px; margin:16px 0 26px; }
.blog-body li { margin:8px 0; }
.blog-body blockquote { border-left:4px solid #20b5a5; margin:24px 0; padding:12px 22px; background:#eef7f5; }
.blog-body pre { overflow-x:auto; white-space:pre-wrap; background:#eef3f3; padding:16px; border-radius:10px; }
.blog-body figure { margin:28px 0; }
.blog-source-link { font-size:.96rem; }
.blog-calendar,.blog-body .cta_appel { display:block; padding:24px; border:1px solid #c9dedb; background:#edf7f5; border-radius:14px; margin:30px 0; }
.blog-body .cta_appel h2 { margin-top:0; }
.blog-body .cta_appel img { width:24px; height:24px; display:inline; vertical-align:middle; }
.blog-related { max-width:800px; margin:48px auto 0; padding-top:24px; border-top:1px solid #c9dedb; }
.blog-related h2 { font-size:1.4rem; }
.blog-related ul { padding-left:22px; }
.blog-related li { margin:12px 0; }
.blog-empty { padding:30px 0; }
@media (max-width:799px) {
    body:has(.blog-page) .main_block_container { margin-top:44px; }
    body:has(.blog-page) .phone_number_container,body:has(.blog-page) .phone_number { display:none; }
}
@media (max-width:600px) { .blog-page { padding:24px 16px 44px; } .blog-card__body { padding:20px; } .blog-byline { display:block; } .blog-byline span { display:block; margin:6px 0; } .blog-body { font-size:1.02rem; } .blog-body h2 { font-size:1.4rem; } .blog-calendar,.blog-body .cta_appel { padding:18px; } }