/* ==========================================================================
   Blog, catégories, tags, recherche, 404 — chargé uniquement sur ces pages.
   (Remplace le CSS qui était écrit en chaînes PHP dans functions.php.)
   ========================================================================== */
.blog-hero { min-height: clamp(320px, 52vh, 520px); }
.blog-hero .hero-content { max-width: 760px; }

.blog-articles { padding: clamp(3rem, 8vw, 5rem) var(--gutter); background: var(--darker); }

/* La grille passe seule de 3 à 2 puis 1 colonne selon la largeur disponible. */
.articles-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem); max-width: 1200px; margin-inline: auto;
}

.blog-card {
	display: flex; flex-direction: column; overflow: hidden; min-width: 0;
	background: var(--card-bg); border: 1px solid var(--line); border-radius: 15px;
	transition: border-color .3s, transform .3s, box-shadow .3s;
}
.blog-card:hover { border-color: var(--primary); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 198, 255, 0.1); }
.blog-card-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dark); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.blog-card:hover .blog-card-image img { transform: scale(1.04); }
.blog-card-content { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-bottom: .9rem; color: var(--text-muted); font-size: .85rem; }
.blog-card-meta i { color: var(--primary); }
.blog-card-title { font-size: 1.25rem; line-height: 1.35; margin-bottom: .75rem; }
.blog-card-title a { color: var(--text); text-decoration: none; }
.blog-card-title a:hover { color: var(--primary); }
.blog-card-excerpt { flex: 1; margin-bottom: 1.25rem; color: var(--text-muted); font-size: .95rem; line-height: 1.7; }
.blog-card .btn { align-self: flex-start; padding: .65rem 1.4rem; font-size: .95rem; }

/* Pagination (n'utilise plus la classe .nav-links, réservée à l'ancien menu et masquée sur mobile) */
.pagination { margin: 3rem auto 0; max-width: 1200px; }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .9rem;
	border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); text-decoration: none; transition: background .3s, color .3s;
}
.pagination a.page-numbers:hover { background: var(--primary); color: var(--darker); }
.pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: var(--darker); font-weight: 700; }
.pagination .page-numbers.dots { border-color: transparent; }

.no-results { max-width: 520px; margin: 0 auto; padding: 3rem 1rem; text-align: center; color: var(--text-muted); }
.no-results > i { display: block; margin-bottom: 1rem; font-size: 3rem; color: var(--primary); opacity: .35; }
.no-results .btn { margin-top: 1.5rem; }

/* Inscription à la lettre d'information (blog et articles) */
.newsletter-cta {
	padding: clamp(3rem, 8vw, 5rem) var(--gutter);
	background: linear-gradient(135deg, rgba(0, 198, 255, 0.1), rgba(0, 119, 182, 0.1)), var(--dark);
	border-block: 1px solid var(--line); text-align: center;
}
.newsletter-cta h2 { font-size: clamp(1.6rem, 4.5vw, 2rem); margin-bottom: .75rem; }
.newsletter-cta p { color: var(--text-muted); margin-bottom: 1.75rem; }
.newsletter-cta .privacy-note { margin: 1.25rem 0 0; font-size: .85rem; opacity: .85; }
.newsletter-cta .privacy-note a { color: var(--primary); }