/*
 * GP Editorial — mise en forme des templates de blocs.
 *
 * Portée : accueil, blog, archives, article, recherche, page, 404.
 * Tout ce qui relève de la charte (couleurs, tailles, espacements) est lu
 * depuis les variables générées par theme.json : aucune valeur en dur ici,
 * sauf les quelques dimensions structurelles propres à la mise en page.
 *
 * Conventions de classes :
 *   .gp-section       section de page (titre + contenu)
 *   .gp-cards         grille de cartes d'articles
 *   .gp-card          carte : vignette, rubrique, titre, extrait
 *   .gp-chips         liste horizontale de liens de rubrique
 *   .gp-breadcrumb    fil d'Ariane
 */

/* -------------------------------------------------------------------------
 * Finitions typographiques et rythme vertical
 *
 * Les jetons sont réajustés sur `body` plutôt que dans theme.json : la
 * cascade suffit, et les styles en ligne posés par les blocs continuent de
 * lire la variable — ils héritent donc de la valeur corrigée sans qu'aucun
 * `!important` soit nécessaire.
 * ---------------------------------------------------------------------- */

body {
	/*
	 * La borne basse de 2,2rem (35 px) était trop haute pour une colonne de
	 * 281 px : un titre long s'y cassait en six lignes, dont deux d'un seul
	 * mot. 1,75rem (28 px) le ramène à quatre lignes pleines. Les largeurs
	 * moyennes et grandes sont inchangées : au-delà de 560 px c'est déjà
	 * `5vw` qui l'emporte, et le plafond de 3,2rem ne bouge pas.
	 */
	--wp--preset--font-size--xx-large: clamp(1.75rem, 5vw, 3.2rem);
}

@media (min-width: 900px) {

	/*
	 * Sur grand écran, les paliers hauts de l'échelle s'additionnaient
	 * (72 px de fond de section + 24 px d'interbloc + 96 px de marge de
	 * pied de page), produisant des blancs de 140 à 190 px qui donnaient
	 * une impression de page inachevée. On resserre le haut de l'échelle
	 * — de 25 % environ — sans toucher aux petits écrans, déjà justes.
	 */
	body {
		--wp--preset--spacing--60: clamp(40px, 5.5vw, 56px);
		--wp--preset--spacing--70: clamp(56px, 6vw, 68px);
	}
}

/*
 * Équilibrage des titres : supprime les lignes orphelines d'un seul mot,
 * fréquentes sur les titres longs en colonne étroite.
 */
h1,
h2,
h3,
.gp-page-title,
.gp-featured__title,
.gp-card__title,
.gp-postcards .wp-block-post-title,
.gp-rubrique__title {
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
 * Titres de section et liens « voir plus »
 * ---------------------------------------------------------------------- */

.gp-section__title {
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.4;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: 0.6rem;
	text-transform: uppercase;
}

.gp-section__head {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: 0.6rem;
}

/*
 * Le groupe est en disposition « flow » côté blocs : on neutralise les marges
 * verticales que cette disposition ajoute entre les enfants, la mise en page
 * étant ici assurée par flex.
 */
.gp-section__head > * {
	margin-block: 0;
}

.gp-section__head .gp-section__title {
	border: 0;
	margin: 0;
	padding: 0;
}

.gp-more {
	margin: 0;
}

.gp-more__link {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.gp-more__link:hover,
.gp-more__link:focus {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Grille de cartes
 *
 * Deux sources produisent des cartes :
 *   - .gp-postcards : une boucle core/post-template, dont la grille est déjà
 *     posée par la disposition « grid » du bloc — on ne redéfinit donc que
 *     l'apparence de la carte ;
 *   - .gp-cards : le balisage PHP (articles liés), qui pose lui-même sa grille.
 * Les deux partagent la même apparence de carte.
 * ---------------------------------------------------------------------- */

.gp-cards {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-cards > li,
.gp-cards__item,
.gp-postcards > li {
	margin: 0;
	padding: 0;
}

.gp-card,
.gp-postcards > li > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	height: 100%;
}

/* L'espacement d'une carte vient du gap, jamais des marges de flux. */
.gp-card > *,
.gp-postcards > li > .wp-block-group > * {
	margin-block: 0;
}

/* Vignette : cadrage constant, jamais d'ombre. */
.gp-card__media {
	display: block;
	margin: 0;
}

.gp-card__media img,
.gp-postcards .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	display: block;
	object-fit: cover;
	width: 100%;
}

.gp-postcards .wp-block-post-featured-image {
	margin: 0;
}

/* Rubrique. */
.gp-card__eyebrow,
.gp-postcards .wp-block-post-terms {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}

.gp-card__eyebrow a,
.gp-postcards .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.gp-card__eyebrow a:hover,
.gp-postcards .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* Titre. */
.gp-card__title,
.gp-postcards .wp-block-post-title {
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

.gp-card__title a,
.gp-postcards .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.gp-card__title a:hover,
.gp-postcards .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* Extrait. */
.gp-card__excerpt,
.gp-postcards .wp-block-post-excerpt,
.gp-postcards .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Article mis en avant (accueil)
 * ---------------------------------------------------------------------- */

.gp-featured .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-featured .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: center;
}

.gp-featured .wp-block-column > * {
	margin-block: 0;
}

/*
 * Le bloc Colonnes traîne une marge basse de 1,75em héritée du cœur de
 * WordPress. Dernier enfant de la section, elle ne servait qu'à ajouter
 * 32 px au blanc qui précède « Derniers articles ».
 */
.gp-featured .wp-block-columns {
	margin-bottom: 0;
}

.gp-featured__media img {
	aspect-ratio: 16 / 10;
	display: block;
	object-fit: cover;
	width: 100%;
}

.gp-featured__title {
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	line-height: 1.15;
	margin: 0;
}

.gp-featured__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.gp-featured__title a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.gp-featured__excerpt {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
}

.gp-featured .wp-block-post-terms {
	color: var(--wp--preset--color--accent);
}

.gp-featured .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.gp-featured .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Entrées par rubrique
 * ---------------------------------------------------------------------- */

.gp-rubriques {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-rubrique {
	border-top: 2px solid var(--wp--preset--color--contrast);
	margin: 0;
	padding-top: 0.9rem;
}

.gp-rubrique__title {
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.gp-rubrique__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.gp-rubrique__title a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.gp-rubrique__description {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 0 0 0.7rem;
}

/* Liste de sous-rubriques en pastilles. */
.gp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 0.8rem;
	padding: 0;
}

.gp-chips__item {
	margin: 0;
}

.gp-chips__item a {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.2;
	padding: 0.35rem 0.6rem;
	text-decoration: none;
}

.gp-chips__item a:hover,
.gp-chips__item a:focus {
	background-color: var(--wp--preset--color--accent-soft);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Liste de titres d'articles, sans vignette. */
.gp-linklist {
	border-top: 1px solid var(--wp--preset--color--border);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-linklist__item {
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin: 0;
	padding: 0.5rem 0;
}

.gp-linklist__item a {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	text-decoration: none;
}

.gp-linklist__item a:hover,
.gp-linklist__item a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Fil d'Ariane
 * ---------------------------------------------------------------------- */

.gp-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}

.gp-breadcrumb__list {
	color: var(--wp--preset--color--contrast-2);
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-breadcrumb__item {
	margin: 0;
}

/*
 * Le séparateur est accroché à l'élément qui le précède, pas à celui qui le
 * suit : quand la liste se replie, la nouvelle ligne commence par un libellé
 * et jamais par un « / » orphelin.
 */
.gp-breadcrumb__item:not(:last-child)::after {
	color: var(--wp--preset--color--border);
	content: "/";
	margin-left: 0.5rem;
}

.gp-breadcrumb__item a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}

.gp-breadcrumb__item a:hover,
.gp-breadcrumb__item a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.gp-breadcrumb__item [aria-current="page"] {
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * Article
 * ---------------------------------------------------------------------- */

.gp-article__meta {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}

.gp-article__meta > * {
	margin: 0;
}

.gp-article__meta .wp-block-post-terms a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.gp-article__meta .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/*
 * Séparateur discret entre les informations de tête d'article. Comme pour le
 * fil d'Ariane, il est solidaire de l'information qui le précède : le repli
 * sur petit écran ne peut plus commencer une ligne par un « · » isolé.
 */
.gp-article__meta > *:not(:last-child)::after {
	color: var(--wp--preset--color--border);
	content: "·";
	margin-left: 0.6rem;
}

.gp-reading-time {
	white-space: nowrap;
}

/* Corps d'article : la mesure de lecture vient de contentSize (700px ≈ 68ch). */
.gp-article__body > * {
	margin-block: 1.35em;
}

.gp-article__body > :first-child {
	margin-top: 0;
}

.gp-article__tags .wp-block-post-terms a {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast-2);
	display: inline-block;
	margin: 0 0.25rem 0.35rem 0;
	padding: 0.25rem 0.55rem;
	text-decoration: none;
	text-transform: none;
}

.gp-article__tags .wp-block-post-terms a:hover,
.gp-article__tags .wp-block-post-terms a:focus {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.gp-article__nav {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
}

.gp-article__nav .wp-block-post-navigation-link {
	font-size: var(--wp--preset--font-size--small);
	max-width: 45%;
}

.gp-article__nav .wp-block-post-navigation-link a {
	text-decoration: none;
}

.gp-article__nav .wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}

.gp-related {
	margin-top: var(--wp--preset--spacing--60);
}

/* -------------------------------------------------------------------------
 * Recherche, résultats et états vides
 * ---------------------------------------------------------------------- */

.gp-page-title,
.gp-templates .wp-block-query-title {
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.12;
	margin: 0;
}

.gp-lede {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin: 0.8rem 0 0;
	max-width: 60ch;
}

.gp-empty {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--50);
}

.gp-subcats {
	margin-bottom: var(--wp--preset--spacing--50);
}

.gp-subcats__label {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */

.wp-block-query-pagination {
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
}

.wp-block-query-pagination a {
	text-decoration: none;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus {
	text-decoration: underline;
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Petits écrans
 * ---------------------------------------------------------------------- */

@media (max-width: 599px) {
	.gp-cards {
		gap: var(--wp--preset--spacing--40);
	}

	.gp-article__nav .wp-block-post-navigation-link {
		max-width: 100%;
	}

	/*
	 * Fil d'Ariane : la page courante est tronquée sur une ligne. Le chemin
	 * tient alors en deux lignes au lieu de trois, sans troncature du côté
	 * des liens réellement cliquables.
	 */
	.gp-breadcrumb__item:last-child {
		max-width: 100%;
		min-width: 0;
	}

	.gp-breadcrumb__item [aria-current="page"] {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ======================================================================
 * Correctifs audit — bloc de recherche natif de WordPress
 * Le bloc core/search herite du theme parent un bouton en pilule (50px)
 * et refuse de se replier sous 400px : le champ tombe a 48px de large.
 * ====================================================================== */

.wp-block-search__button {
	border-radius: var(--gp-radius, 2px);
}

.wp-block-search .wp-block-search__input {
	min-width: 0;
}

@media (max-width: 480px) {

	.wp-block-search__inside-wrapper {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.wp-block-search .wp-block-search__input {
		flex: 1 1 100%;
		width: 100%;
	}

	.wp-block-search__button {
		flex: 1 1 100%;
		margin-left: 0;
	}
}