/* =========================================================================
   Seminaire.re — Styles de la liste des actualités (home.php / archive.php)
   -------------------------------------------------------------------------
   Repris de la maquette « actualites.html ». Chargé uniquement sur l'index
   du blog et ses archives : pas de conflit avec les autres gabarits.
   Les variables CSS proviennent de front.css.
   ========================================================================= */

/* --- Filtres par catégorie --------------------------------------------- */
.cats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 46px; }
.cats a {
	display: inline-block; font-family: 'Outfit', sans-serif; font-size: .88rem;
	font-weight: 500; padding: 10px 20px; border-radius: 100px;
	border: 1px solid var(--line); background: var(--paper); color: var(--ink);
	transition: background .25s, color .25s, border-color .25s;
}
.cats a:hover { border-color: var(--volcan); }
.cats a.active { background: var(--volcan); color: var(--cream); border-color: var(--volcan); }

/* --- Article à la une --------------------------------------------------- */
.feature {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
	border-radius: var(--r-lg); overflow: hidden;
	background: var(--paper); border: 1px solid var(--line); margin-bottom: 70px;
}
.feature-img { position: relative; min-height: 420px; background: var(--sand); }
.feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-body { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.feature-body .tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.feature-body h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); color: var(--volcan-deep); }
.feature-body h2 a { color: inherit; transition: color .25s; }
.feature-body h2 a:hover { color: var(--volcan); }
.feature-body p { margin: 16px 0 26px; color: var(--muted); }
.feature-body .meta { font-size: .86rem; color: var(--muted); margin-bottom: 24px; }

/* --- Grille d'articles -------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.post { display: flex; flex-direction: column; }
.post-img { display: block; border-radius: var(--r-lg); overflow: hidden; height: 250px; margin-bottom: 18px; background: var(--sand); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.post:hover .post-img img { transform: scale(1.06); }
.post .tag { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.post h3 { font-size: 1.3rem; color: var(--volcan-deep); margin: 9px 0; }
.post h3 a { color: inherit; transition: color .25s; }
.post:hover h3 a { color: var(--volcan); }
.post p { font-size: .93rem; color: var(--muted); }
.post .meta { font-size: .84rem; color: var(--muted); margin-top: 10px; }

/* --- Pagination --------------------------------------------------------- */
.pagination { margin-top: 54px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 13px;
	border-radius: var(--r); border: 1px solid var(--line); background: var(--paper);
	color: var(--ink); font-weight: 500; font-size: .92rem;
	transition: background .25s, color .25s, border-color .25s;
}
.pagination a.page-numbers:hover { border-color: var(--volcan); }
.pagination .page-numbers.current { background: var(--volcan); color: var(--cream); border-color: var(--volcan); }
.pagination .page-numbers.dots { border: none; background: none; }

/* --- Bloc newsletter ---------------------------------------------------- */
.news-cta { text-align: center; background: var(--volcan); color: var(--cream); border-radius: var(--r-lg); padding: 64px; }
.news-cta h2 { color: var(--cream); font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.news-cta p { margin: 14px auto 28px; max-width: 46ch; color: rgba(255,255,255,.78); font-weight: 300; }
.news-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.news-form input { flex: 1; border: none; border-radius: 100px; padding: 15px 24px; font-family: 'Outfit', sans-serif; font-size: .95rem; outline: none; }

@media (max-width: 980px) {
	.feature { grid-template-columns: 1fr; }
	.feature-img { min-height: 280px; }
	.feature-body { padding: 40px; }
	.posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.posts { grid-template-columns: 1fr; }
	.feature-body { padding: 30px; }
	.news-cta { padding: 40px 24px; }
	.news-form { flex-direction: column; }
	.news-form .btn { justify-content: center; }
}