/* ── HERO (variante simple, sans image ni meta) ──── */
.blog-hero { position: relative; background: var(--slate); padding: 4rem 0 3.5rem; color: #fff; }
.blog-hero-breadcrumb { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.blog-hero-breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; }
.blog-hero-breadcrumb a:hover { color: var(--gold-light); }
.blog-hero-breadcrumb .sep { color: var(--gold); margin: 0 .5rem; }
.blog-hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 300; color: #fff; line-height: 1.15; margin-bottom: 1rem; }
.blog-hero-summary { font-size: 1.02rem; color: rgba(255,255,255,.72); line-height: 1.8; max-width: 640px; margin: 0; }

/* ── FILTRE CATÉGORIE ─────────────────────── */
    .category-filter-bar {
      background: #fff; border-bottom: 1px solid var(--ivory-dark);
      position: sticky; top: 76px; z-index: 40;
    }
    .category-filter-list {
        display: flex;
        flex-wrap: wrap; 
        gap: .6rem;
        padding: 1.1rem 0;
    }

    .category-pill {
      flex-shrink: 0; font-size: .78rem; font-weight: 500; letter-spacing: .06em;
      color: var(--muted); border: 1px solid var(--ivory-dark); padding: .5rem 1.2rem;
      text-decoration: none; white-space: nowrap; transition: all .2s;
    }
    .category-pill:hover { border-color: var(--gold); color: var(--gold); }
    .category-pill.active { background: var(--slate); border-color: var(--slate); color: #fff; }

/* ── CARTE ARTICLE (liste) ─────────────────── */
    .blog-card {
      display: block; background: #fff; border: 1px solid var(--ivory-dark);
      height: 100%; position: relative; transition: border-color .2s;
    }
    .blog-card:hover { border-color: var(--gold); }
    .blog-card-img-wrap { position: relative; overflow: hidden; }
    .blog-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
    .blog-card-cat {
      position: absolute; top: 1rem; left: 1rem;
      background: rgba(30,38,40,.82); background: rgba(30,38,48,.85);
      color: var(--gold-light); font-size: .68rem; font-weight: 500; letter-spacing: .12em;
      text-transform: uppercase; padding: .4rem .9rem; text-decoration: none;
      z-index: 2;
    }
    .blog-card-cat:hover { color: #fff; }
    .blog-card-body { padding: 1.6rem; }
    .blog-card-title {
      font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600;
      color: var(--slate); line-height: 1.3; text-decoration: none; display: block; margin-bottom: .8rem;
    }
    .blog-card:hover .blog-card-title { color: var(--gold); }
    .blog-card-excerpt { font-size: .9rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.2rem; }
    
    .blog-card-meta {
        display: flex;
        justify-content: space-between; /* date à gauche, bouton à droite */
        align-items: center;
        gap: .7rem;
        font-size: .78rem;
        color: var(--muted);
        padding-top: 1rem;
        border-top: 1px solid var(--ivory-dark);
    }

    .blog-card-readmore {
        background: var(--slate);
        color: #fff;
        padding: .35rem .9rem;
        border-radius: 20px;
        font-size: .72rem;
        font-weight: 500;
        letter-spacing: .04em;
        text-decoration: none;
        white-space: nowrap;
        transition: background .2s, color .2s;
    }

    .blog-card-readmore:hover {
        background: var(--gold);
        color: var(--slate);
    }


    .blog-card-meta .author { color: var(--slate); font-weight: 500; }
    .blog-card-meta .dot { color: var(--gold); }