/*
	Mise en forme des pages de contenu : pages simples, articles, listings, recherche et 404.

	S'appuie sur les tokens --ps- de blocks.css. Les deux landing pages ne passent pas par
	ici : elles sont entièrement composées de blocs.
*/

.ps-page {
	width: 90%;
	max-width: 800px;
	margin-inline: auto;
	padding-block: var(--ps-space-2xl);
	color: var(--ps-text);
	font-family: var(--ps-font-body);
}

.ps-page--centre {
	text-align: center;
}

.ps-page__entete {
	margin-bottom: var(--ps-space-xl);
}

.ps-page__titre {
	margin: 0;
	color: var(--ps-navy);
	font-family: var(--ps-font-display);
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 900;
	line-height: 1.15;
	text-transform: uppercase;
}

.ps-page__categories,
.ps-page__meta {
	margin: 0 0 var(--ps-space-xs);
	color: var(--ps-gold);
	font-family: var(--ps-font-ui);
	font-size: 14px;
	font-weight: 700;
}

.ps-page__meta {
	margin: var(--ps-space-sm) 0 0;
	color: var(--ps-text);
	font-weight: 400;
}

/* Corps de texte : c'est ici que vit le contenu rédigé dans l'éditeur. */
.ps-page__contenu {
	font-size: 17px;
	line-height: 1.7;
}

.ps-page__contenu > * + * {
	margin-top: var(--ps-space-md);
}

.ps-page__contenu :is(h2, h3, h4) {
	margin-top: var(--ps-space-xl);
	color: var(--ps-navy);
	font-family: var(--ps-font-heading);
	font-weight: 800;
	line-height: 1.25;
}

.ps-page__contenu h2 {
	font-size: 26px;
}

.ps-page__contenu h3 {
	font-size: 21px;
}

.ps-page__contenu a {
	color: var(--ps-navy-dark);
	text-underline-offset: 2px;
}

.ps-page__contenu :is(ul, ol) {
	padding-left: 1.3em;
}

.ps-page__contenu li + li {
	margin-top: var(--ps-space-xs);
}

.ps-page__contenu blockquote {
	margin: var(--ps-space-lg) 0;
	padding-left: var(--ps-space-md);
	border-left: 3px solid var(--ps-gold);
	font-style: italic;
}

.ps-page__contenu img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ps-radius);
}

.ps-page__contenu table {
	width: 100%;
	border-collapse: collapse;
}

.ps-page__contenu :is(th, td) {
	padding: var(--ps-space-xs) var(--ps-space-sm);
	border: 1px solid rgb(30 33 64 / 12%);
	text-align: left;
}

.ps-page__vide {
	font-size: 17px;
}

/* --- Listing d'articles --------------------------------------------------- */

.ps-liste {
	display: grid;
	gap: var(--ps-space-xl);
}

.ps-liste__item {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--ps-space-lg);
	align-items: start;
}

/* Sans image à la une, le texte occupe toute la largeur. */
.ps-liste__item:not(:has(.ps-liste__media)) {
	grid-template-columns: 1fr;
}

.ps-liste__media img {
	width: 100%;
	height: auto;
	border-radius: var(--ps-radius);
}

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

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

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

.ps-liste__meta {
	margin: 0 0 var(--ps-space-sm);
	font-size: 14px;
}

.ps-liste__extrait {
	margin: 0 0 var(--ps-space-sm);
	line-height: 1.6;
}

.ps-liste__lien {
	color: var(--ps-navy-dark);
	font-family: var(--ps-font-ui);
	font-weight: 700;
	text-decoration: none;
}

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

/* --- Navigation ----------------------------------------------------------- */

.ps-page__navigation {
	display: flex;
	justify-content: space-between;
	gap: var(--ps-space-md);
	margin-top: var(--ps-space-xl);
	padding-top: var(--ps-space-lg);
	border-top: 1px solid rgb(30 33 64 / 12%);
}

.ps-page__navigation a {
	color: var(--ps-navy-dark);
	font-family: var(--ps-font-ui);
	font-weight: 700;
	text-decoration: none;
}

.wp-block-post-navigation-link,
.navigation.pagination {
	margin-top: var(--ps-space-xl);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-xs);
	justify-content: center;
}

.navigation.pagination :is(a, span) {
	padding: 6px 14px;
	border-radius: var(--ps-radius);
	font-family: var(--ps-font-ui);
	font-weight: 700;
	text-decoration: none;
}

.navigation.pagination a {
	background-color: var(--ps-cream);
	color: var(--ps-navy);
}

.navigation.pagination .current {
	background-color: var(--ps-navy);
	color: var(--ps-white);
}

@media screen and (max-width: 767px) {
	.ps-liste__item,
	.ps-liste__item:not(:has(.ps-liste__media)) {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Lien du fondateur, dans le pied de page
   ==========================================================================

   Le nom « Dan Luiten » de la ligne de copyright mène à sa page. Il hérite de la
   couleur du texte qui l'entoure plutôt que d'imposer la sienne : le pied de page est
   sombre, et un lien bleu par défaut y serait illisible.

   Le soulignement n'apparaît qu'au survol et au focus. Toujours affiché, il attirerait
   l'œil sur une mention légale qui n'a pas à prendre le pas sur le reste.
   ------------------------------------------------------------------------- */

.ps-lien-fondateur {
	color: inherit;
	text-decoration: none;
}

.ps-lien-fondateur:hover,
.ps-lien-fondateur:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ps-lien-fondateur:focus-visible {
	outline: 2px solid var(--ps-gold, #e5ac5b);
	outline-offset: 2px;
}

/* ==========================================================================
   Hiérarchie du hero de l'accueil
   ==========================================================================

   Le 29 août 2026, les balises du hero ont été échangées : la phrase qui décrit
   l'école devient le <h1>, l'accroche qui l'était passe en <p>. Aucun texte n'a été
   réécrit, et les classes sont conservées.

   ⚠️ Ces deux règles existent pour que le rendu ne bouge pas d'un pixel. Sans elles,
   les marges par défaut des balises s'appliqueraient :

   - `h1` du thème pose `margin-bottom: 10px`, que le <div> n'avait pas ;
   - `p` du thème pose `margin-top: 0`, quand le <h1> avait 20px.

   Les valeurs ci-dessous reproduisent exactement ce qui s'affichait avant l'échange.
   ------------------------------------------------------------------------- */

h1._1-hero-subtext-4 {
	margin-bottom: 0;
}

p.heading-147 {
	margin-top: 20px;
}

/* ==========================================================================
   Signature de l'auteur, sous le titre d'un article
   ==========================================================================

   Les articles sont signés Dan Luiten depuis le 29 août 2026. La signature suit la
   date sur la même ligne, séparée par un point médian dessiné en CSS plutôt qu'écrit
   dans le HTML : un séparateur décoratif n'a pas à être lu par une synthèse vocale.

   Le lien hérite de la couleur du texte : cette ligne est une mention discrète, pas
   un appel à cliquer. Le soulignement n'apparaît qu'au survol et au focus.
   ------------------------------------------------------------------------- */

.ps-page__auteur::before {
	content: "·";
	margin: 0 0.45em;
	speak: never;
}

.ps-page__auteur a {
	color: inherit;
	text-decoration: none;
}

.ps-page__auteur a:hover,
.ps-page__auteur a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ps-page__auteur a:focus-visible {
	outline: 2px solid var(--ps-gold, #e5ac5b);
	outline-offset: 2px;
}