/*
	Page du blog (home.php) : recherche, article à la une, grille à deux colonnes.

	Chargée uniquement sur la page des articles (voir proskuneo_enqueue_blog() dans
	functions.php), après contenu.css dont elle reprend les conventions .ps- et les
	tokens de blocks.css. Rien ici ne doit partir dans main.css, qui reste le CSS
	repris de Webflow.
*/

/* La page des articles est plus large que les pages de contenu : 800 px suffisent à
   une colonne de texte, pas à deux colonnes de cartes. */
.ps-page.ps-blog {
	max-width: var(--ps-container);
}

.ps-blog__entete {
	margin-bottom: var(--ps-space-lg);
}

.ps-blog .ps-page__description {
	max-width: 640px;
	margin-top: var(--ps-space-sm);
	font-size: 17px;
	line-height: 1.6;
}

/* --- Recherche ------------------------------------------------------------ */

.ps-blog__recherche {
	max-width: 560px;
	margin-top: var(--ps-space-lg);
}

.ps-blog__label {
	display: block;
	margin-bottom: var(--ps-space-xs);
	color: var(--ps-navy);
	font-family: var(--ps-font-ui);
	font-size: 14px;
	font-weight: 700;
}

.ps-blog__champs {
	display: flex;
	gap: var(--ps-space-xs);
}

/* Filtres par catégorie : une bande de pastilles qui passe à la ligne plutôt qu'un
   menu déroulant — dix catégories tiennent à l'écran, et chacune reste un lien
   partageable. */
.ps-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-xs);
	margin-top: var(--ps-space-md);
}

.ps-filtres__lien {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid rgb(30 33 64 / 20%);
	border-radius: 999px;
	color: var(--ps-navy);
	font-family: var(--ps-font-ui);
	font-size: 14px;
	text-decoration: none;
}

.ps-filtres__lien:hover,
.ps-filtres__lien:focus {
	border-color: var(--ps-navy);
}

.ps-filtres__lien--actif {
	border-color: var(--ps-navy);
	background-color: var(--ps-navy);
	color: var(--ps-white);
}

.ps-filtres__compte {
	font-size: 12px;
	opacity: 0.65;
}

.ps-blog__champ {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid rgb(30 33 64 / 20%);
	border-radius: var(--ps-radius);
	background-color: var(--ps-white);
	color: var(--ps-text);
	font-family: var(--ps-font-body);
	font-size: 16px;
}

.ps-blog__champ:focus {
	border-color: var(--ps-navy);
	outline: 2px solid var(--ps-gold);
	outline-offset: 1px;
}

.ps-blog__envoyer {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
}

/* Rappel du terme cherché et nombre de résultats. */
.ps-blog__resultat {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-sm);
	align-items: baseline;
	margin: var(--ps-space-md) 0 0;
	font-size: 15px;
}

.ps-blog__reinitialiser {
	color: var(--ps-navy-dark);
	font-family: var(--ps-font-ui);
	font-weight: 700;
	text-underline-offset: 2px;
}

/* --- Cartes d'articles ---------------------------------------------------- */

/* Deux colonnes, une seule sur mobile. Volontairement figé à deux : au-delà, les
   titres passent sur trop de lignes pour rester lisibles. */
.ps-blog__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ps-space-lg);
	margin-top: var(--ps-space-lg);
}

/* Les deux cartes d'une même ligne gardent la même hauteur (align-items: stretch par
   défaut) : une carte sans image reste un bloc plein plutôt qu'un trou dans la grille. */

.ps-carte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgb(30 33 64 / 10%);
	border-radius: var(--ps-radius);
	background-color: var(--ps-white);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.ps-carte:hover,
.ps-carte:focus-within {
	border-color: var(--ps-gold);
	transform: translateY(-2px);
}

/* Sans image à la une, la carte resterait un bloc blanc sans repère : le fond crème
   et le filet doré lui rendent une tête de carte. */
.ps-carte:not(:has(.ps-carte__media)) {
	border-top: 4px solid var(--ps-gold);
	background-color: var(--ps-cream);
}

/* Une carte sans image doit tout de même remplir la hauteur de sa voisine, qui en a
   une : c'est le titre qui prend la place de l'image, agrandi jusqu'à devenir le
   visuel de la carte. Le texte est centré verticalement et le lien le suit, au lieu
   d'être collé en bas — sans quoi le trou se voyait entre les deux. */
.ps-carte:not(:has(.ps-carte__media)) .ps-carte__corps {
	justify-content: center;
	padding: var(--ps-space-lg) var(--ps-space-md);
}

.ps-carte:not(:has(.ps-carte__media)) .ps-carte__titre {
	margin-bottom: var(--ps-space-sm);
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.ps-carte:not(:has(.ps-carte__media)) .ps-carte__extrait {
	margin-bottom: 0;
	font-size: 17px;
}

.ps-carte:not(:has(.ps-carte__media)) .ps-carte__lien {
	margin-top: var(--ps-space-md);
}

.ps-carte__media {
	display: block;
	overflow: hidden;
	background-color: var(--ps-cream);
}

.ps-carte__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ps-carte__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--ps-space-md);
}

.ps-carte__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-xs);
	align-items: center;
	margin: 0 0 var(--ps-space-xs);
	color: var(--ps-text);
	font-family: var(--ps-font-ui);
	font-size: 14px;
}

.ps-carte__badge {
	padding: 3px 10px;
	border-radius: 999px;
	background-color: var(--ps-gold);
	color: var(--ps-navy);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ps-carte__categorie {
	padding: 3px 10px;
	border: 1px solid rgb(30 33 64 / 20%);
	border-radius: 999px;
	color: var(--ps-navy);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ps-carte__categorie:hover,
.ps-carte__categorie:focus {
	border-color: var(--ps-navy);
	background-color: var(--ps-navy);
	color: var(--ps-white);
}

.ps-carte__titre {
	margin: 0 0 var(--ps-space-xs);
	font-family: var(--ps-font-heading);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}

.ps-carte__titre a {
	color: var(--ps-navy);
	text-decoration: none;
}

.ps-carte__titre a:hover,
.ps-carte__titre a:focus {
	text-decoration: underline;
}

.ps-carte__extrait {
	margin: 0 0 var(--ps-space-md);
	font-family: var(--ps-font-body);
	font-size: 15px;
	line-height: 1.6;
}

/* Poussé en bas de carte : les « Lire la suite » s'alignent d'une carte à l'autre. */
.ps-carte__lien {
	margin-top: auto;
	color: var(--ps-navy-dark);
	font-family: var(--ps-font-ui);
	font-weight: 700;
	text-decoration: none;
}

.ps-carte__lien::after {
	content: ' →';
}

.ps-carte__lien:hover,
.ps-carte__lien:focus {
	text-decoration: underline;
}

/* --- Article à la une ----------------------------------------------------- */

.ps-carte--une {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	margin-top: var(--ps-space-lg);
	border-color: rgb(30 33 64 / 12%);
	background-color: var(--ps-cream);
}

/* Sans image, la une occupe la pleine largeur en une seule colonne. */
.ps-carte--une:not(:has(.ps-carte__media)) {
	display: block;
	border-top: 4px solid var(--ps-gold);
}

/* Format un peu moins panoramique que les cartes de la grille, mais borné : sans cela
   une photo verticale étirerait la une sur tout l'écran. */
.ps-carte--une .ps-carte__media img {
	aspect-ratio: 16 / 10;
	max-height: 420px;
}

.ps-carte--une .ps-carte__corps {
	justify-content: center;
	padding: var(--ps-space-lg);
}

/* Sur la une, le texte est centré verticalement : coller le lien en bas rouvrirait
   l'écart que ce centrage vient de refermer. */
.ps-carte--une .ps-carte__lien {
	margin-top: 0;
}

.ps-carte--une .ps-carte__titre {
	font-size: clamp(22px, 2.4vw, 30px);
}

.ps-carte--une .ps-carte__extrait {
	font-size: 16px;
}

/* --- Utilitaire ----------------------------------------------------------- */

/* Visible des lecteurs d'écran seulement (rappel du titre dans « Lire la suite »). */
.ps-visuellement-cache {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Mobile --------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	.ps-blog__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ps-space-md);
	}

	.ps-carte--une,
	.ps-carte--une:not(:has(.ps-carte__media)) {
		display: flex;
		flex-direction: column;
	}

	.ps-carte--une .ps-carte__media img {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.ps-carte--une .ps-carte__corps {
		padding: var(--ps-space-md);
	}

	.ps-blog__champs {
		flex-direction: column;
		align-items: stretch;
	}

	.ps-blog__envoyer {
		text-align: center;
	}
}