/* Blog : liste, article, auteur */
.blog-list{display:flex;flex-direction:column;gap:28px;padding-block:8px 72px}
.blog-head h1{font-size:var(--fs-h1)}
.blog-head .lead{max-width:640px}
.blog-filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--radius-full);border:1px solid var(--line-strong);background:transparent;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip .dot{width:7px;height:7px}
.chip .n{font-size:12px;color:var(--ink-3)}
.chip[aria-current="page"] .n{color:var(--dark-ink-3)}
.chip.sm{height:36px;padding:0 11px;font-size:12.5px}
.blog-grid{--gap:28px 20px}
.article-card .article-card-body{display:flex;flex-direction:column;gap:10px}
.article-card .article-title{font-family:var(--font-head);font-weight:var(--head-w);font-size:22px;line-height:var(--lh-h3);text-wrap:pretty;margin:0}
[dir="rtl"] .article-card .article-title{font-size:20px}
.article-card .byline{font-size:13px;color:var(--ink-2)}
.article-card .badge{align-self:flex-start}
.article-card .excerpt{font-size:15.5px;color:var(--ink-2);line-height:1.6}
.article-card .thumb{border:1px solid var(--line)}
.article-card.is-featured{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.article-card.is-featured .thumb{border-radius:20px}
.article-card.is-featured .article-title{font-size:30px;line-height:var(--lh-h2)}
@media (min-width:960px){.article-card.is-featured{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px}.article-card.is-featured .article-title{font-size:36px}}
.blog-empty{border:1.5px dashed var(--line-strong);border-radius:var(--radius-l);padding:40px 20px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}

/* Auteur */
.author-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.author-photo{width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--font-head);font-size:40px;flex:none}
.author-photo img{width:100%;height:100%;object-fit:cover}
.author-photo.sm{width:40px;height:40px;font-size:18px}
.author-posts-title{font-size:28px}

/* Article */
.read-progress{position:sticky;top:64px;z-index:20;height:3px;background:var(--line-soft)}
@media (min-width:1120px){.read-progress{top:72px}}
.read-progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}
.article{display:flex;flex-direction:column;gap:32px;padding-block:8px 48px}
.article-head{max-width:860px;display:flex;flex-direction:column;gap:16px}
.article-head .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px}
.article-head h1{font-size:34px;line-height:1.05;text-wrap:balance}
@media (min-width:960px){.article-head h1{font-size:52px}}
[dir="rtl"] .article-head h1{line-height:1.4}
.article-lead{font-size:19px;line-height:1.6;color:var(--ink-2)}
.article-author{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:14px;align-self:flex-start;min-height:44px}
.article-author:hover{color:var(--ink)}
.article-author:hover b{text-decoration:underline}
.article-hero{margin:0;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
@media (min-width:1120px){.article-layout{grid-template-columns:260px minmax(0,1fr);gap:56px}.article-aside{position:sticky;top:104px}}
.article-aside{display:flex;flex-direction:column;gap:20px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:18px}
@media (min-width:1120px){.toc{background:transparent;border:0;padding:0}}
.toc ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.toc a{display:block;font-size:14px;line-height:1.4;padding:8px 0;padding-inline-start:12px;border-inline-start:2px solid var(--line);color:var(--ink-3);text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{border-inline-start-color:var(--accent);color:var(--ink);font-weight:600}
.toc .lvl-3 a{padding-inline-start:24px;font-size:13px}
.share .caption{display:block;margin-bottom:8px}
.article-body{max-width:720px;display:flex;flex-direction:column;gap:32px}
.article-prose{color:#2A2622;max-width:none}
.article-prose h2{font-size:30px;margin-top:1.4em;scroll-margin-top:96px}
.article-prose h3{font-family:var(--font-body);font-weight:600;font-size:19px;letter-spacing:0;margin-top:1.2em;scroll-margin-top:96px}
.article-prose img{border-radius:var(--radius-l);margin-inline:auto}
.article-prose a{word-break:break-word}
.article-prose blockquote,.article-prose aside.box{margin:0;background:var(--accent-soft);color:#173F31;border-radius:var(--radius-l);padding:18px 20px;font-size:15.5px;line-height:1.6}
.article-cta{display:flex;align-items:center;gap:16px;background:var(--ink);color:var(--bg);border-radius:var(--radius-l);padding:18px 20px;text-decoration:none;flex-wrap:wrap}
.article-cta:hover{color:var(--bg);background:#000}
.article-cta .kick{font-size:12.5px;color:var(--dark-ink-2)}
.article-cta b{font-size:17px;font-weight:600}
.article-faq{border-top:1px solid var(--line);padding-top:20px}
.article-faq h2{font-size:30px}
.related{display:flex;flex-direction:column;gap:24px;padding-block:24px 80px;border-top:1px solid var(--line)}
