/* ── BLOG HERO ── */
    .blog-hero {
      background: var(--degrade);
      padding: 80px 64px 72px;
      text-align: center;
    }
    .blog-hero-inner { max-width: 640px; margin: 0 auto; }
    .blog-hero .s-tag { color: var(--vert-sauge); }
    .s-line { margin: 16px auto 32px; }
    .blog-hero h1 {
      font-family: 'Raleway', sans-serif;
      font-size: 44px;
      font-weight: 400; color: var(--blanc);
      line-height: 1.25; letter-spacing: 0.02em; margin-bottom: 20px;
    }
    .blog-hero h1 em { font-style: normal; font-weight: 400; color: var(--vert-sauge); }
    .blog-hero h1 strong { font-weight: 400; color: var(--blanc); }
    .blog-hero p {
      font-family: 'Raleway', sans-serif; font-weight: 300;
      font-size: 15px; line-height: 1.9;
      color: rgba(255,255,255,0.70); max-width: 480px; margin: 0 auto;
    }

    /* ── ARTICLES LIST ── */
    .articles-section { padding: 80px 64px; background: var(--blanc); }

    .articles-grid {
      display: flex; flex-direction: column;
      gap: 16px; margin-top: 48px;
    }

    .article-card {
      display: flex; flex-wrap: wrap;
      gap: 48px;
      padding: 44px 40px;
      background: var(--fond-section);
      border-radius: 20px;
      text-decoration: none;
      box-shadow: 0 2px 16px rgba(0,0,0,0.05);
      transition: background 0.3s, box-shadow 0.3s, transform 0.3s ease;
    }
    .article-card:hover {
      background: var(--bleu-ardoise);
      box-shadow: 0 8px 40px rgba(45,63,92,0.18);
      transform: translateY(-3px);
    }

    .article-card-meta {
      flex: 0 0 140px;
      display: flex; flex-direction: column;
      gap: 10px; padding-top: 4px;
    }
    .article-date {
      font-family: 'Raleway', sans-serif; font-size: 11px;
      letter-spacing: 0.12em; color: var(--vert-sauge);
      font-weight: 400; text-transform: uppercase;
    }
    .article-category {
      font-family: 'Raleway', sans-serif; font-size: 11px;
      letter-spacing: 0.1em; color: var(--gris-texte);
      font-weight: 400; text-transform: uppercase;
      transition: color 0.3s;
    }
    .article-card:hover .article-category { color: rgba(255,255,255,0.4); }

    .article-card-body { flex: 1 1 300px; }
    .article-card-title {
      font-family: 'Raleway', sans-serif; font-size: 22px;
      font-weight: 400; color: var(--bleu-nuit);
      margin-bottom: 14px; line-height: 1.3;
      transition: color 0.3s;
    }
    .article-card:hover .article-card-title { color: var(--blanc); }

    .article-card-excerpt {
      font-family: 'Raleway', sans-serif; font-size: 14px;
      color: var(--gris-texte); line-height: 1.85; font-weight: 400;
      margin-bottom: 24px;
      transition: color 0.3s;
    }
    .article-card:hover .article-card-excerpt { color: rgba(255,255,255,0.6); }

    .article-read-more {
      font-family: 'Raleway', sans-serif; font-size: 11px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--bleu-ardoise); font-weight: 400;
      transition: color 0.3s;
    }
    .article-card:hover .article-read-more { color: var(--vert-sauge); }

    .error-state {
      font-family: 'Raleway', sans-serif; font-size: 14px;
      color: var(--gris-texte); font-weight: 400; padding: 48px 0;
    }

    /* ── RESPONSIVE 900px ── */
    @media (max-width: 900px) {
      .blog-hero { padding: 60px 24px 52px; }
      .blog-hero h1 { font-size: 32px; }
      .articles-section { padding: 48px 24px; }
      .article-card { padding: 32px 28px; gap: 24px; }
    }

    /* ── MOBILE 600px ── */
    @media screen and (max-width: 600px) {
      .blog-hero { padding: 64px 20px 52px; }
      .blog-hero h1 { font-size: 26px; }
      .blog-hero p { font-size: 14px; }
      .articles-section { padding: 40px 16px; }
      .article-card { padding: 28px 20px; gap: 16px; border-radius: 16px; }
      .article-card-meta { flex: 0 0 100%; flex-direction: row; gap: 16px; }
      footer { padding: 20px; justify-content: center; text-align: center; }
    }