/* ============================================================
   blog.css — Styles des articles et index de blog
   ============================================================ */

.container { max-width: 740px; margin: 0 auto; padding: 60px 20px; }

.nav-back { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); text-decoration: none; font-weight: 500; margin-bottom: 40px; }
.nav-back:hover { text-decoration: underline; }

/* ── Article content ── */
article h2 { font-size: 1.5em; font-weight: 600; margin: 36px 0 14px; display: flex; align-items: center; gap: 12px; }
article h2::before { content: ''; width: 4px; height: 26px; background: var(--primary); border-radius: 2px; flex-shrink: 0; }
article p { color: var(--text-light); line-height: 1.8; margin-bottom: 16px; }
article ul { list-style: none; margin: 12px 0 16px; display: flex; flex-direction: column; gap: 10px; }
article ul li { position: relative; padding-left: 20px; color: var(--text-light); line-height: 1.7; margin-bottom: 4px; }
article ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
article a { color: var(--primary); }

/* ── Info box ── */
.info-box { background: var(--bg-secondary); border-left: 4px solid var(--primary); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 20px 0; }
.info-box p { margin-bottom: 0; }

/* ── CTA box ── */
.cta-box { background: linear-gradient(135deg, #4a7c8c 0%, #6b9aaa 100%); color: white; border-radius: 16px; padding: 40px; text-align: center; margin-top: 48px; }
.cta-box h2 { font-size: 1.5em; margin-bottom: 12px; }
.cta-box h2::before { display: none; }
.cta-box p { color: rgba(255,255,255,0.88); margin-bottom: 24px; }
.cta-btn { display: inline-block; background: white; color: var(--primary); font-weight: 700; padding: 14px 36px; border-radius: 8px; text-decoration: none; transition: all .2s; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

/* ── Comparison table ── */
.comparison-table,
.compare-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .93em; }
.comparison-table th,
.compare-table th { background: var(--primary); color: white; padding: 12px 16px; text-align: left; font-weight: 600; }
.comparison-table td,
.compare-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-light); }
.comparison-table tr:nth-child(even) td,
.compare-table tr:nth-child(even) td { background: var(--bg-secondary); }
.comparison-table td:first-child,
.compare-table td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }

/* ── Blog index ── */
.articles-list { display: flex; flex-direction: column; gap: 24px; }
.article-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; text-decoration: none; color: inherit; display: block; transition: box-shadow .2s, border-color .2s; }
.article-card:hover { box-shadow: 0 4px 16px rgba(74,124,140,.12); border-color: var(--primary); }
.article-date { font-size: .85em; color: var(--text-light); margin-bottom: 8px; }
.article-title { font-size: 1.25em; font-weight: 600; color: var(--text); margin-bottom: 10px; line-height: 1.3; }
.article-excerpt { color: var(--text-light); font-size: .97em; line-height: 1.65; }
.article-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 500; font-size: .95em; margin-top: 14px; }
.header-subtitle { font-size: 1.05em; opacity: .9; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .cta-box { padding: 28px 20px; }
    .comparison-table { font-size: .85em; }
    .article-card { padding: 20px; }
}