/* Ported from src/pages/actualites/[slug].astro */
.article-detail-page { padding-bottom: var(--space-16); background: var(--color-bg); }
.article-hero { padding: var(--space-16) 0; color: #fff; margin-bottom: var(--space-8); }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.article-hero .article-badge { display: inline-block; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: var(--text-xs); font-weight: var(--fw-bold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .08em; }
.article-hero .article-title { font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -.03em; max-width: 800px; }
.article-hero .article-date { font-size: var(--text-sm); opacity: 0.85; }

.article-container { margin-top: var(--space-4); }
.article-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); align-items: start; }
.article-main { background: var(--color-surface); padding: var(--space-8); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.article-img-wrap { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); }
.article-main-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.article-content { color: var(--color-text-body); font-size: var(--text-base); line-height: 1.8; display: flex; flex-direction: column; gap: var(--space-4); }
.article-content p { margin-bottom: var(--space-2); }
.article-chapo { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.6; }

.article-body h2 { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-text); margin: var(--space-6) 0 var(--space-2); line-height: 1.3; }
.article-body h3 { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-text); margin: var(--space-4) 0 var(--space-2); }
.article-body p { margin-bottom: var(--space-2); }
.article-body ul, .article-body ol { padding-left: var(--space-6); margin-bottom: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body a { color: var(--color-primary); font-weight: var(--fw-semibold); text-decoration: underline; }
.article-body a:hover { color: var(--color-primary-dark); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: var(--space-4) 0; }

.article-download-box { margin-top: var(--space-8); padding: var(--space-6); background: var(--color-bg); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border: 1px solid var(--color-border); }
.download-info h3 { font-weight: var(--fw-bold); margin-bottom: var(--space-1); }
.download-info p { font-size: var(--text-sm); color: var(--color-text-muted); }

.article-footer { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

.article-sidebar { display: flex; flex-direction: column; gap: var(--space-6); }
.sidebar-card { background: var(--color-surface); padding: var(--space-6); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.sidebar-card h3 { font-size: var(--text-lg); font-weight: var(--fw-bold); margin-bottom: var(--space-3); border-bottom: 2px solid var(--color-primary); padding-bottom: var(--space-2); }
.sidebar-card p { font-size: var(--text-sm); color: var(--color-text-body); line-height: 1.6; margin-bottom: var(--space-4); }
.sidebar-link { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-primary); margin-bottom: var(--space-2); transition: color .2s; }
.sidebar-link:hover { color: var(--color-primary-dark); }

@media (max-width: 1023px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { display: none; }
}
@media (max-width: 767px) {
  .article-main { padding: var(--space-4); }
  .article-hero { padding: var(--space-10) 0; }
  .article-download-box { flex-direction: column; align-items: flex-start; }
}