/* ============================================
   ARTICLE.CSS — Styles pour les pages de contenu/guides
============================================ */

.article-hero {
    background: linear-gradient(135deg, #1B2A4A 0%, #0F1D36 100%);
    padding: 8rem 0 4rem;
    color: #fff;
}
.article-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    max-width: 800px;
}
.article-hero h1 em {
    color: #E8601C;
    font-style: normal;
}

.article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}
.article-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1B2A4A;
    margin: 2.5rem 0 1rem;
}
.article-body h2:first-child {
    margin-top: 0;
}
.article-body p {
    color: #374151;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.article-body ul {
    margin: 0.5rem 0 1.5rem 1.25rem;
    color: #374151;
    line-height: 1.8;
}
.article-body ul li {
    margin-bottom: 0.4rem;
}
.article-body blockquote {
    border-left: 4px solid #E8601C;
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: #FFF7ED;
    border-radius: 0 8px 8px 0;
    color: #92400E;
    font-weight: 500;
}
.article-body .warning {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    color: #92400E;
    line-height: 1.7;
}
.article-body .conclusion {
    background: linear-gradient(135deg, #1B2A4A 0%, #0F1D36 100%);
    border-radius: 12px;
    padding: 2rem;
    margin: 2.5rem 0;
    color: #CBD5E1;
}
.article-body .conclusion h2 {
    color: #fff;
    margin-top: 0;
}
.article-body .conclusion ul {
    color: #CBD5E1;
}
.article-cta {
    text-align: center;
    margin: 2rem 0 0;
}

@media (max-width: 640px) {
    .article-hero { padding: 7rem 0 3rem; }
    .article-hero h1 { font-size: 1.6rem; }
    .article-body h2 { font-size: 1.25rem; }
}