/**
 * CPT Blog — Listing (archive) + Single
 * Couleurs thème : #958D57 (or), #f0f0f0 (gris clair), #fff (blanc)
 */

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
    --blog-gold   : #958D57;
    --blog-light  : #f0f0f0;
    --blog-white  : #fff;
    --blog-dark   : #2e2a1a;
    --blog-muted  : #5a5340;
    --blog-border : #c9c29a;
    --blog-radius : 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE ARCHIVE
══════════════════════════════════════════════════════════════════════════ */
.blog-header {
    text-align   : center;
    padding      : 48px 20px 32px;
    border-bottom: 1px solid var(--blog-border);
    margin-bottom: 32px;
}

.blog-header__label {
    display       : inline-block;
    font-size     : 0.6875rem;
    font-weight   : 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color         : var(--blog-gold);
    margin-bottom : 8px;
}

.blog-header__title {
    font-size  : clamp(1.6rem, 4vw, 2.4rem);
    color      : var(--blog-dark);
    margin     : 0 0 10px;
    line-height: 1.2;
	font-family: "Noto Serif", serif;
	text-transform: math-auto;
	color: var(--blog-gold);
}

.blog-header__desc {
    color     : var(--blog-muted);
    font-size : 0.9375rem;
    max-width : 540px;
    margin    : 0 auto;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   FILTRES CATÉGORIES (liens réels — navigation WP standard)
══════════════════════════════════════════════════════════════════════════ */
.blog-filters {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 8px;
    justify-content: center;
    padding        : 0 20px 32px;
}

.blog-filter-btn {
    display      : inline-block;
    padding      : 7px 18px;
    border       : 1.5px solid var(--blog-border);
    border-radius: 999px;
    background   : var(--blog-white);
    color        : var(--blog-muted);
    font-size    : 0.8125rem;
    font-weight  : 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition   : background 0.15s, color 0.15s, border-color 0.15s;
    line-height  : 1;
    cursor       : pointer;
}

.blog-filter-btn:hover {
    background  : var(--blog-light);
    border-color: var(--blog-gold);
    color       : var(--blog-gold);
}

.blog-filter-btn.active {
    background  : var(--blog-gold);
    border-color: var(--blog-gold);
    color       : var(--blog-white);
}

/* ══════════════════════════════════════════════════════════════════════════
   GRILLE — calquée sur .new-products du thème
══════════════════════════════════════════════════════════════════════════ */
.blog-grid {
    display              : grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap           : 15px;
    row-gap              : 20px;
    margin               : 0 auto;
}

/* ── Carte ───────────────────────────────────────────────────────────────── */
.blog-card {
    background   : var(--blog-white);
    border       : 1px solid var(--blog-border);
    overflow     : hidden;
    transition   : box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
    box-shadow: 0 0 1px 1px #958d57;
}

.blog-card__link {
    display        : flex;
    flex-direction : column;
    height         : 100%;
    text-decoration: none;
    color          : inherit;
}

/* ── Image ───────────────────────────────────────────────────────────────── */
.blog-card__image {
    position    : relative;
    width       : 100%;
    aspect-ratio: 4 / 3;
    overflow    : hidden;
    background  : var(--blog-light);
}

.blog-card__img-bg {
    position           : absolute;
    inset              : 0;
    background-size    : cover;
    background-position: center;
    transition         : transform 0.4s ease;
}

.blog-card:hover .blog-card__img-bg {
    transform: scale(1.04);
}

.blog-card__img-placeholder {
    position: absolute;
    inset   : 0;
    background: var(--blog-light);
}

/* ── Corps ───────────────────────────────────────────────────────────────── */
.blog-card__body {
    padding       : 12px 14px 16px;
    display       : flex;
    flex-direction: column;
    gap           : 5px;
    flex          : 1;
}

.blog-card__cat {
    font-size     : 0.6875rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color         : var(--blog-gold);
}

.blog-card__title {
    font-size  : 0.875rem;
    font-weight: 700;
    color      : var(--blog-dark);
    line-height: 1.35;
    margin     : 0;
}

.blog-card__excerpt {
    font-size  : 0.8rem;
    color      : var(--blog-muted);
    line-height: 1.55;
    margin     : 0;
    flex       : 1;
}

.blog-card__date {
    font-size     : 0.6875rem;
    color         : #9a907a;
    letter-spacing: 0.04em;
    margin-top    : 4px;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.blog-pagination {
    text-align: center;
    padding   : 8px 0 48px;
}

.blog-pagination .nav-links {
    display    : flex;
    justify-content: center;
    gap        : 6px;
    flex-wrap  : wrap;
}

.blog-pagination .page-numbers {
    display      : inline-flex;
    align-items  : center;
    justify-content: center;
    width        : 36px;
    height       : 36px;
    border       : 1.5px solid var(--blog-border);
    border-radius: var(--blog-radius);
    color        : var(--blog-muted);
    text-decoration: none;
    font-size    : 0.875rem;
    font-weight  : 600;
    transition   : background 0.15s, color 0.15s, border-color 0.15s;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background  : var(--blog-gold);
    border-color: var(--blog-gold);
    color       : var(--blog-white);
}

.blog-empty {
    text-align: center;
    padding   : 60px 20px;
    color     : var(--blog-muted);
    font-size : 0.9375rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SINGLE BLOG
══════════════════════════════════════════════════════════════════════════ */
.blog-single {
    max-width: 820px;
    margin   : 0 auto;
    padding  : 0 20px 60px;
}

.blog-single__nav {
    padding  : 20px 0 28px;
    font-size: 0.8rem;
}

.blog-single__nav a {
    display        : inline-flex;
    align-items    : center;
    gap            : 5px;
    color          : var(--blog-gold);
    text-decoration: none;
    font-weight    : 700;
    letter-spacing : 0.05em;
    text-transform : uppercase;
    font-size      : 0.75rem;
}

.blog-single__nav a:hover { text-decoration: underline; }

/* Méta */
.blog-single__meta {
    display    : flex;
    align-items: center;
    gap        : 12px;
    margin-bottom: 10px;
    flex-wrap  : wrap;
}

.blog-single__cat {
    display       : inline-block;
    padding       : 3px 12px;
    background    : var(--blog-light);
    border        : 1.5px solid var(--blog-border);
    border-radius : 999px;
    font-size     : 0.6875rem;
    font-weight   : 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color         : var(--blog-gold);
    text-decoration: none;
}

.blog-single__cat:hover { background: var(--blog-gold); color: #fff; border-color: var(--blog-gold); }

.blog-single__date {
    font-size : 0.75rem;
    color     : #9a907a;
    letter-spacing: 0.04em;
}

/* Titre */
.blog-single__title {
    font-size  : clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    color      : var(--blog-dark);
    line-height: 1.25;
    margin     : 0 0 24px;
}

/* Thumbnail */
.blog-single__thumbnail {
    width        : 100%;
    overflow     : hidden;
    margin-bottom: 28px;
    aspect-ratio : 16 / 7;
}

.blog-single__thumbnail img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
}

/* Contenu */
.blog-single__content {
    font-size  : 0.9875rem;
    line-height: 1.85;
    color      : var(--blog-muted);
}

.blog-single__content h2,
.blog-single__content h3 {
    color      : var(--blog-dark);
    font-weight: 700;
    margin-top : 1.75em;
}

.blog-single__content a      { color: var(--blog-gold); }
.blog-single__content a:hover { text-decoration: underline; }

.blog-single__content img {
    max-width    : 100%;
    border-radius: var(--blog-radius);
    margin       : 1.25em 0;
    display      : block;
}

.blog-single__content blockquote {
    border-left : 3px solid var(--blog-gold);
    padding-left: 1.25em;
    color       : var(--blog-gold);
    font-style  : italic;
    margin      : 1.5em 0;
}

/* Bouton retour bas de page */
.blog-single__footer {
    margin-top    : 40px;
    padding-top   : 24px;
    border-top    : 1px solid var(--blog-border);
    text-align    : center;
}

.blog-single__back-btn {
    display      : inline-block;
    padding      : 10px 24px;
    border       : 1.5px solid var(--blog-gold);
    border-radius: 999px;
    color        : var(--blog-gold);
    font-size    : 0.8125rem;
    font-weight  : 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition   : background 0.15s, color 0.15s;
}

.blog-single__back-btn:hover {
    background: var(--blog-gold);
    color     : #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .blog-grid { grid-template-columns: 1fr; }
}