/* ============================================================
   BLOG.CSS — 8UP Media — styles spécifiques aux articles
   Requiert pages.css chargé avant
   ============================================================ */

/* ---- Article hero ---------------------------------------- */
.article-hero { padding: 100px 0 56px; background: var(--black); color: #fff; }
.article-hero .container { max-width: 860px; }
.article-category { display: inline-block; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; margin-bottom: 20px; text-decoration: none; }
.article-hero h1 { font-size: clamp(28px,4vw,46px); font-weight: 800; line-height: 1.15; margin: 0 0 20px; color: #fff; }
.article-hero h1 span { color: var(--orange); }
.article-meta { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 32px; }
.article-meta strong { color: rgba(255,255,255,.9); }
.article-meta .sep { color: rgba(255,255,255,.3); }
.article-intro { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.85); border-left: 3px solid var(--orange); padding-left: 20px; }

/* ---- Article layout --------------------------------------- */
.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 60px; align-items: start; padding: 64px 0; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media(max-width:900px){ .article-layout { grid-template-columns: 1fr; } }

/* ---- Article body ---------------------------------------- */
.article-body { min-width: 0; }
.article-body h2 { font-size: clamp(22px,2.5vw,30px); font-weight: 800; margin: 48px 0 16px; color: var(--black); line-height: 1.2; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: clamp(17px,2vw,22px); font-weight: 700; margin: 32px 0 12px; color: var(--black); }
.article-body p { font-size: 16px; line-height: 1.8; color: #333; margin: 0 0 20px; }
.article-body ul, .article-body ol { padding-left: 24px; margin: 0 0 20px; }
.article-body li { font-size: 16px; line-height: 1.75; color: #333; margin-bottom: 8px; }
.article-body strong { color: var(--black); font-weight: 700; }
.article-body a { color: var(--orange); text-decoration: none; }
.article-body a:hover { text-decoration: underline; }

.highlight-box { background: #fff7f2; border-left: 4px solid var(--orange); border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 32px 0; }
.highlight-box p { margin: 0; font-size: 15px; }
.highlight-box strong { color: var(--orange); }

.stat-inline { background: var(--black); color: #fff; border-radius: 8px; padding: 16px 20px; margin: 24px 0; display: inline-flex; align-items: baseline; gap: 12px; }
.stat-inline .val { font-size: 32px; font-weight: 800; color: var(--orange); }
.stat-inline .lbl { font-size: 14px; color: rgba(255,255,255,.75); }

.checklist { list-style: none; padding: 0; margin: 0 0 20px; }
.checklist li { padding: 8px 0 8px 32px; position: relative; border-bottom: 1px solid #f0f0f0; font-size: 16px; color: #333; }
.checklist li:last-child { border-bottom: none; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }

.warning-list { list-style: none; padding: 0; margin: 0 0 20px; }
.warning-list li { padding: 8px 0 8px 32px; position: relative; font-size: 16px; color: #333; border-bottom: 1px solid #f0f0f0; }
.warning-list li:last-child { border-bottom: none; }
.warning-list li::before { content: "✗"; position: absolute; left: 0; color: #e53e3e; font-weight: 800; }

.price-table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 15px; }
.price-table th { background: var(--black); color: #fff; padding: 12px 16px; text-align: left; font-weight: 700; }
.price-table td { padding: 12px 16px; border-bottom: 1px solid #e8e8e8; color: #333; }
.price-table tr:nth-child(even) td { background: #fafafa; }
.price-table td strong { color: var(--orange); }

/* ---- Sidebar --------------------------------------------- */
.article-sidebar { position: sticky; top: 90px; }
.toc-box { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 12px; padding: 24px; margin-bottom: 32px; }
.toc-box h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #888; margin: 0 0 16px; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: 8px; }
.toc-list a { font-size: 14px; color: var(--black); text-decoration: none; display: block; padding: 4px 0; border-bottom: 1px solid #f0f0f0; transition: color .2s; }
.toc-list a:hover { color: var(--orange); }
.toc-list a::before { content: "→ "; color: var(--orange); }

.sidebar-cta { background: var(--black); border-radius: 12px; padding: 28px; text-align: center; color: #fff; }
.sidebar-cta h4 { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 12px; }
.sidebar-cta p { font-size: 14px; color: rgba(255,255,255,.7); margin: 0 0 20px; line-height: 1.6; }
.sidebar-cta .btn { display: block; width: 100%; box-sizing: border-box; }

/* ---- Author bio ------------------------------------------ */
.author-bio { border-top: 2px solid #f0f0f0; margin-top: 48px; padding-top: 32px; display: flex; gap: 20px; align-items: flex-start; }
.author-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; flex-shrink: 0; }
.author-bio h4 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.author-bio p { font-size: 14px; color: #666; margin: 0; line-height: 1.6; }

/* ---- Related articles ------------------------------------ */
.related-articles { background: #fafafa; padding: 64px 0; }
.related-articles .section-header { margin-bottom: 32px; }
.articles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media(max-width:900px){ .articles-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .articles-grid { grid-template-columns: 1fr; } }

.article-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #e8e8e8; transition: transform .2s, box-shadow .2s; }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.article-card-img { height: 160px; background: var(--black); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.article-card-body { padding: 20px; }
.article-card-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-bottom: 8px; }
.article-card-title { font-size: 16px; font-weight: 700; color: var(--black); margin: 0 0 12px; line-height: 1.3; }
.article-card-title a { text-decoration: none; color: inherit; }
.article-card-title a:hover { color: var(--orange); }
.article-card-meta { font-size: 12px; color: #999; }

/* ---- Blog hub -------------------------------------------- */
.blog-hero { padding: 120px 0 64px; background: var(--black); color: #fff; text-align: center; }
.blog-hero h1 { font-size: clamp(36px,5vw,64px); font-weight: 800; margin: 0 0 16px; }
.blog-hero h1 span { color: var(--orange); }
.blog-hero p { font-size: 18px; color: rgba(255,255,255,.75); max-width: 600px; margin: 0 auto; }

.blog-categories { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0; }
.blog-cat-btn { padding: 8px 20px; border-radius: 40px; border: 2px solid #e8e8e8; background: #fff; font-size: 14px; font-weight: 600; color: var(--black); cursor: pointer; text-decoration: none; transition: all .2s; }
.blog-cat-btn:hover, .blog-cat-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }

.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
@media(max-width:1000px){ .blog-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:640px){ .blog-grid { grid-template-columns: 1fr; } }

.blog-card { background: #fff; border-radius: 16px; border: 1px solid #e8e8e8; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.1); }
.blog-card-img { height: 200px; background: var(--black); display: flex; align-items: center; justify-content: center; font-size: 64px; }
.blog-card-body { padding: 24px; }
.blog-card-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-bottom: 10px; display: block; text-decoration: none; }
.blog-card-title { font-size: 18px; font-weight: 700; color: var(--black); margin: 0 0 12px; line-height: 1.35; }
.blog-card-title a { text-decoration: none; color: inherit; }
.blog-card-title a:hover { color: var(--orange); }
.blog-card-excerpt { font-size: 14px; color: #666; line-height: 1.65; margin: 0 0 16px; }
.blog-card-footer { display: flex; justify-content: space-between; align-items: center; }
.blog-card-meta { font-size: 12px; color: #999; }
.blog-card-link { font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; }
.blog-card-link:hover { text-decoration: underline; }