/* ./blog — extrait du bloc <style> inline (refonte Phase 2) */

/* ── Blog Hero ── */
.blog-hero {
background: linear-gradient(135deg, var(--gray-900) 0%, var(--primary-dark) 100%);
padding: 160px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}

.blog-hero::before {
content: '';
position: absolute;
inset: 0;
background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(99,102,241,0.18), transparent),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(34,211,238,0.1), transparent);
pointer-events: none;
}

.blog-hero .container { position: relative; z-index: 1; }

.blog-hero h1 {
color: #fff;
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.12;
margin-bottom: 1.25rem;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}

.blog-hero-sub {
color: rgba(255,255,255,0.75);
font-size: 1.15rem;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 2.25rem;
}

.blog-hero-kpis {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
}

.blog-kpi strong {
display: block;
font-size: 1.75rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
margin-bottom: 0.3rem;
}

.blog-kpi span {
color: rgba(255,255,255,0.55);
font-size: 0.88rem;
font-weight: 500;
}

/* ── Articles Section ── */
.blog-section {
padding: 5rem 0;
background: var(--gray-50);
}

/* ── Article Card ── */
.blog-card {
background: white;
border: 1px solid var(--gray-200);
border-radius: var(--radius-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}

.blog-card-img {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--gray-100);
}

.blog-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
}

.blog-card:hover .blog-card-img img {
transform: scale(1.05);
}

.blog-card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
gap: 0.6rem;
}

.blog-card-meta {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--gray-500);
font-size: 0.82rem;
}

.blog-card-meta i { color: var(--primary); font-size: 0.9rem; }

.blog-card-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--gray-900);
line-height: 1.4;
margin: 0;
}

.blog-card-title a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}

.blog-card-title a:hover { color: var(--primary); }

.blog-card-excerpt {
color: var(--gray-600);
font-size: 0.92rem;
line-height: 1.7;
flex: 1;
margin: 0;
}

.blog-card-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--primary);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
margin-top: 0.5rem;
transition: gap 0.2s;
}

.blog-card-link:hover { gap: 0.55rem; }

/* ── Pagination ── */
.blog-pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 3.5rem;
}

/* ── Newsletter CTA ── */
.blog-newsletter {
padding: 5rem 0;
background: linear-gradient(135deg, var(--gray-900), var(--primary-dark));
position: relative;
overflow: hidden;
text-align: center;
}

.blog-newsletter::before,
.blog-newsletter::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
}

.blog-newsletter::before {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(99,102,241,0.15), transparent 70%);
top: -100px;
right: -100px;
}

.blog-newsletter::after {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(34,211,238,0.1), transparent 70%);
bottom: -80px;
left: -80px;
}

.blog-newsletter .container { position: relative; z-index: 1; }

.blog-newsletter h2 {
color: #fff;
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
margin-bottom: 0.75rem;
}

.blog-newsletter p {
color: rgba(255,255,255,0.75);
font-size: 1.1rem;
margin-bottom: 2rem;
}

.blog-newsletter-form {
max-width: 440px;
margin: 0 auto;
display: flex;
gap: 0.75rem;
}

.blog-newsletter-form input {
flex: 1;
padding: 0.85rem 1.1rem;
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 0.95rem;
}

.blog-newsletter-form input::placeholder { color: rgba(255,255,255,0.45); }

/* ── Responsive ── */
@media (max-width: 768px) {
.blog-hero { padding: 130px 0 50px; }
.blog-hero-kpis { gap: 1.75rem; flex-wrap: wrap; }
.blog-newsletter-form { flex-direction: column; }
}