/* Blog « Conseils » : complète site.css, mêmes jetons de couleur. */
.blog-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));margin-top:44px}
.blog-card{display:flex;flex-direction:column;background:var(--surface);border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2);text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.blog-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -24px rgba(11,27,51,.35)}
.blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.blog-card .b{padding:22px 24px 26px;display:grid;gap:10px}
.blog-card h2,.blog-card h3{font-size:21px;line-height:1.25;color:var(--heading)}
.blog-card p{color:var(--muted);font-size:16px}
.blog-meta{font:600 13px/1.4 var(--body);color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px}
.blog-meta .cat{color:var(--red-ink);text-transform:uppercase;letter-spacing:.12em}
.article{max-width:72ch;margin-inline:auto}
.article .fig{margin:0;border-radius:18px;overflow:hidden}
.article .fig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.article blockquote{margin:0;padding:18px 22px;border-left:4px solid var(--red);background:var(--soft);color:var(--soft-ink);border-radius:0 14px 14px 0}
.article ol{margin:0;padding-left:1.3em;display:grid;gap:10px}
.article ol li{color:var(--muted)}
.article ul li{padding-left:22px;position:relative}
.article ul li::before{content:"";position:absolute;left:4px;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.toc{border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.toc summary{cursor:pointer;font-weight:700;color:var(--heading)}
.toc ol{margin-top:12px}
.toc a{font-weight:500}
.sources{font-size:15px}
.sources a{font-weight:500;word-break:break-word}

/* Haut de page des articles : titres longs plus petits, fil d'Ariane sur une ligne. */
.blog-hero h1.h1-long .big{font-size:clamp(28px,4.4vw,68px);line-height:.95}
.blog-hero .crumbs li[aria-current]{display:block;max-width:min(46ch,100%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.blog-hero{min-width:0;max-width:100%}
.blog-hero .crumbs{max-width:100%;overflow:hidden}
.blog-hero .crumbs ol{flex-wrap:nowrap;min-width:0}
.blog-hero .crumbs li{min-width:0}
.blog-hero .crumbs li:not([aria-current]){flex:none}
@media (max-width:600px){
  .blog-hero h1.h1-long .big{font-size:clamp(26px,7.4vw,34px)}
  .panel:has(> .article){padding:22px 16px}
  .article .faq summary{padding-right:52px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .blog-card,.blog-card:hover{transition:none;transform:none}
}