/* QLII Blog — CSS public, isolé du reste de QLII */
.blog-page { --blog-ink:#172334; --blog-muted:#667181; --blog-accent:#dd7135; --blog-gold:#d9a04c; --blog-cream:#fffaf2; color:var(--blog-ink); background:#fff; min-height:80vh; font-family:inherit; }
.blog-page * { box-sizing:border-box; }
.blog-container { width:min(1160px, calc(100% - 44px)); margin-inline:auto; }
.blog-hero { position:relative; overflow:hidden; background:radial-gradient(circle at 86% 7%,#fff2cd 0,transparent 38%),linear-gradient(135deg,#fffaf1 0%,#f5f8fa 100%); border-bottom:1px solid #eee9e1; padding:94px 0 84px; }
.blog-hero::after { content:'↗'; position:absolute; right:4vw; bottom:-112px; font-size:390px; font-weight:800; line-height:1; color:#dfc39c; opacity:.23; transform:rotate(-12deg); pointer-events:none; }
.blog-eyebrow { text-transform:uppercase; font-size:.77rem; font-weight:850; letter-spacing:.17em; color:#ac5c30; margin:0 0 18px; }
.blog-eyebrow span { color:var(--blog-muted); margin-inline:8px; }
.blog-hero h1 { font-size:clamp(2.65rem,6.4vw,5.6rem); line-height:1.04; max-width:850px; letter-spacing:-.05em; font-weight:850; margin:0 0 25px; }
.blog-lead { max-width:720px; font-size:clamp(1.06rem,1.7vw,1.27rem); line-height:1.75; color:#596573; margin:0; }
.blog-preview-flag { display:inline-block; margin-top:22px; padding:11px 16px; border:1px dashed #e8b74b; background:#fff6db; border-radius:9px; font-size:.85rem; color:#75540f; font-weight:650; }
.blog-archive { padding-block:64px 84px; }
.blog-section-heading { display:flex; align-items:center; gap:25px; margin-bottom:28px; }
.blog-section-heading h2 { margin:0; font-size:clamp(1.5rem,2.7vw,2rem); letter-spacing:-.035em; }
.blog-section-line { height:1px; background:#e8e8e8; flex:1; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.blog-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid #e9e9eb; background:#fff; border-radius:17px; transition:transform .2s,border-color .2s,box-shadow .2s; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 22px 48px rgba(27,42,66,.08); border-color:#e3d8cb; }
.blog-card-media { position:relative; aspect-ratio:1.55; display:block; background:linear-gradient(145deg,#eec883,#e98453 51%,#3d7c83); overflow:hidden; }
.blog-card-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.blog-card-media-symbol { position:absolute; bottom:13px; right:15px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fffefc; font-size:21px; }
.blog-card-body { display:flex; flex:1; flex-direction:column; padding:24px 25px 26px; }
.blog-card-meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; text-transform:uppercase; font-weight:750; letter-spacing:.075em; font-size:.67rem; color:#a36138; margin-bottom:11px; }
.blog-card-meta time { color:#89919b; }
.blog-draft-tag { padding:3px 7px; border-radius:5px; color:#866416; background:#fff2c4; }
.blog-card h3 { font-size:1.3rem; line-height:1.26; letter-spacing:-.025em; font-weight:780; margin:0 0 12px; }
.blog-card h3 a { color:inherit; text-decoration:none; }
.blog-card p { margin:0 0 20px; line-height:1.6; color:var(--blog-muted); font-size:.94rem; }
.blog-card-read { margin-top:auto; font-size:.83rem; font-weight:800; color:#bb602c; text-decoration:none; }
.blog-card-read span { margin-left:6px; }
.blog-empty { padding:45px; background:#fbf8f5; border:1px solid #f1ece5; border-radius:14px; color:#667181; }
.blog-pagination { display:flex; justify-content:center; align-items:center; gap:20px; margin-top:48px; }
.blog-pagination a { padding:10px 15px; border:1px solid #e6e6e6; border-radius:8px; color:var(--blog-ink); text-decoration:none; }
.blog-pagination span { color:#777; font-weight:700; }
.blog-cta-strip { background:#172536; color:white; padding:58px 0; }
.blog-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:35px; }
.blog-cta-overline { font-size:.7rem; letter-spacing:.3em; font-weight:800; color:#ffb778; margin:0 0 8px; }
.blog-cta-inner h2 { font-size:clamp(1.45rem,3vw,2.25rem); letter-spacing:-.04em; line-height:1.2; margin:0 0 8px; }
.blog-cta-inner p { color:#bac5cf; margin:0; }
.blog-cta-button { display:inline-flex; gap:18px; justify-content:space-between; align-items:center; background:#f0a044; color:#1a1f2a; border-radius:10px; padding:17px 22px; font-weight:850; text-decoration:none; white-space:nowrap; }
.blog-breadcrumbs { display:flex; align-items:center; gap:12px; font-size:.85rem; color:#8a929b; margin:35px 0 50px; }
.blog-breadcrumbs a { color:#9b5b36; text-decoration:none; }
.blog-article-header { max-width:880px; margin:0 auto 42px; text-align:center; }
.blog-article-header h1 { margin:0 0 21px; line-height:1.08; font-size:clamp(2.3rem,5.2vw,4.5rem); letter-spacing:-.047em; font-weight:850; }
.blog-article-deck { font-size:clamp(1.07rem,2vw,1.32rem); color:#667381; line-height:1.65; margin:0 auto 18px; max-width:720px; }
.blog-article-meta { display:flex; align-items:center; justify-content:center; gap:12px; color:#9198a0; font-size:.85rem; }
.blog-cover-hero { height:clamp(250px,47vw,540px); border-radius:17px; overflow:hidden; position:relative; background:linear-gradient(135deg,#f1c16c,#e56b3b 42%,#2d7188); }
.blog-cover-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.blog-cover-mark { position:absolute; right:24px; bottom:18px; color:white; font-size:.68rem; letter-spacing:.2em; text-shadow:0 1px 5px #0006; font-weight:800; }
.blog-article-layout { display:grid; grid-template-columns:minmax(0, 1fr) 265px; gap:65px; max-width:1050px; margin:65px auto 100px; align-items:start; }
.blog-prose { min-width:0; font-size:1.045rem; line-height:1.82; color:#354050; }
.blog-prose h2,.blog-prose h3,.blog-prose h4 { line-height:1.22; color:#1b2937; letter-spacing:-.035em; scroll-margin-top:90px; }
.blog-prose h2 { font-size:clamp(1.6rem,2.7vw,2.05rem); margin:2.2em 0 .7em; }
.blog-prose h3 { font-size:1.4rem; margin:1.7em 0 .7em; }
.blog-prose p { margin:0 0 1.3em; }
.blog-prose strong { color:#1b2937; }
.blog-prose a { color:#b45e2b; text-decoration-color:#efbb93; text-underline-offset:3px; }
.blog-prose ul,.blog-prose ol { margin:0 0 1.7em; padding-left:1.5em; }
.blog-prose li { margin:0 0 .45em; }
.blog-prose blockquote { margin:2em 0; padding:8px 23px; border-left:4px solid #d98a43; background:#fffaf3; color:#665646; }
.blog-prose img { max-width:100%; height:auto; border-radius:13px; margin:15px 0; }
.blog-prose pre { padding:18px; border-radius:10px; background:#192839; color:#e1e8ed; overflow:auto; }
.blog-prose :not(pre)>code { background:#f4eee8; padding:2px 5px; border-radius:4px; }
.blog-prose table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:25px 0; }
.blog-prose td,.blog-prose th { border:1px solid #e2e5e9; padding:10px 13px; }
.blog-prose th { background:#f8f4ee; }
.blog-aside-cta { position:sticky; top:95px; padding:28px; border-radius:14px; background:#fcf5ea; border:1px solid #f2e5ce; }
.blog-aside-cta>span { font-size:.75rem; letter-spacing:.2em; color:#bd6c32; font-weight:900; }
.blog-aside-cta h2 { margin:16px 0 12px; font-size:1.48rem; line-height:1.18; letter-spacing:-.035em; }
.blog-aside-cta p { color:#766d66; font-size:.92rem; line-height:1.6; }
.blog-aside-cta a { display:block; padding:13px 15px; margin-top:20px; border-radius:8px; background:#da783c; color:white; font-weight:750; text-align:center; text-decoration:none; }
.blog-related { padding-bottom:90px; }
@media(max-width:950px) { .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .blog-article-layout { gap:35px; grid-template-columns:minmax(0,1fr) 225px; } }
@media(max-width:710px) { .blog-container { width:min(100% - 32px,1160px); } .blog-hero { padding:65px 0; } .blog-hero::after { font-size:240px; bottom:-55px; right:-40px; } .blog-grid { grid-template-columns:1fr; gap:18px; } .blog-card-media { aspect-ratio:1.8; } .blog-archive { padding-block:42px 60px; } .blog-cta-inner { flex-direction:column; align-items:stretch; } .blog-cta-button { justify-content:center; } .blog-article-layout { grid-template-columns:1fr; gap:0; margin:45px auto 70px; } .blog-article-aside { margin-top:35px; } .blog-breadcrumbs { margin-bottom:32px; } .blog-cover-hero { border-radius:10px; } }