/* --- Réinitialisation et base --- */
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a1a1a, #2d2d2d); color: #ffffff; line-height: 1.6; }

.blog-container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }

.blog-header { 
    text-align: center; 
    margin-bottom: 4rem; 
    padding: 3rem 2rem; 
    background: transparent;
    border-radius: 12px; 
}
.blog-header h1 { font-size: 2.8rem; font-weight: 700; margin-bottom: 1rem; color: #ffffff; }
.blog-header h2 { font-size: 1.3rem; font-weight: 400; color: #727272; max-width: 700px; margin: 0 auto; }

.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.5rem; }
.article-card { background: #242424; border: 1px solid #333333; border-radius: 12px; text-decoration: none; color: #ffffff; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; display: flex; flex-direction: column; }
.article-card:hover { transform: translateY(-5px); border-color: #ff9800; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }

.card-content { padding: 2rem; display: flex; flex-direction: column; height: 100%; }
.card-date { font-size: 0.85rem; color: #888888; margin-bottom: 0.75rem; }
.card-content h3 { font-size: 1.4rem; margin: 0 0 1rem 0; font-weight: 600; color: #ffffff; line-height: 1.3; }
.card-excerpt { color: #ff9800; font-size: 0.8rem; font-weight: bold; margin-bottom: 10px; }
.card-link { font-size: 0.95rem; font-weight: 600; color: #ff9800; transition: color 0.2s ease, padding-left 0.2s ease; }
.article-card:hover .card-link { padding-left: 5px; }

.articles-section-title { text-align: center; margin: 4rem 0 3rem 0; font-size: 2.2rem; color: white; text-transform: uppercase; letter-spacing: 2px; position: relative; display: flex; justify-content: center; align-items: center; gap: 20px; }
.articles-section-title::before, .articles-section-title::after { content: ""; height: 2px; width: 50px; background: #ff8c00; border-radius: 2px; }

.hidden-article { display: none !important; }
.btn-container { text-align: center; margin-top: 40px; }
#show-more-btn { background: #ff8c00; color: white; border: none; padding: 12px 30px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem; }
.no-article { text-align: center; grid-column: 1 / -1; color: #888888; font-style: italic; }