/* Hub de catégorie et index du blog — handoff §5.3. */

/* --- Barre de catégories --------------------------------------------------- */

.pt-cats {
	background: var(--pt-night);
	border-top: 1px solid rgba(212, 198, 163, 0.2);
}

/* Sur desktop la barre passe à la ligne : Pleine Terre a huit catégories aux
   noms longs, un onglet coupé en bord d'écran donne l'impression d'un bug.
   Sous 768 px elle défile horizontalement, comme le veut le handoff. */
.pt-cats__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 767px) {
	.pt-cats__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		/* La barre déborde volontairement de la gouttière : le lecteur doit
		   voir qu'il y a d'autres rayons à droite. */
		margin: 0 calc(var(--pt-gutter) * -1);
		padding: 0 var(--pt-gutter);
	}

	.pt-cats__list::-webkit-scrollbar {
		display: none;
	}

	/* Le signal qu'on peut balayer.
	 *
	 * Un onglet coupé net au bord de l'écran ne dit rien : Loïc a constaté le
	 * 6 août 2026 que le lecteur ne devine pas qu'il y a d'autres rayons de
	 * chaque côté. On le lui montre — les onglets s'effacent du côté où il en
	 * reste, et un chevron nomme le geste.
	 *
	 * ⚠ L'effacement passe par des VARIABLES, pas par des classes ni des
	 * attributs. FlyingPress retire de la feuille les règles dont le sélecteur
	 * n'existe pas dans la page au moment de la mise en cache : un
	 * `.pt-cats--fin` qui n'apparaît qu'après un défilement serait supprimé, et
	 * le fondu resterait collé au bout de la course. Une variable ne crée aucun
	 * sélecteur — le JS l'écrit en style en ligne, et il n'y a rien à retirer.
	 * Sans JavaScript, elles décrivent l'état de départ : ça continue à droite,
	 * rien à gauche. C'est vrai au chargement, et la barre déborde toujours à
	 * cette largeur.
	 */
	.pt-cats {
		position: relative;
		--pt-cats-avant: 0px;
		--pt-cats-apres: 62px;
		--pt-cats-suite: 1;
	}

	/* Le dernier onglet s'efface au lieu d'être tranché — c'est ce fondu qui dit
	   « ça continue ». On masque le contenu plutôt que de poser un pavé sombre
	   par-dessus : la barre est transparente sur le bandeau photo, et un
	   rectangle bleu nuit y ferait une tache que le voile ne justifie pas. */
	.pt-cats__list {
		-webkit-mask-image: linear-gradient(
			90deg,
			transparent 0,
			#000 var(--pt-cats-avant),
			#000 calc(100% - var(--pt-cats-apres)),
			transparent 100%
		);
		mask-image: linear-gradient(
			90deg,
			transparent 0,
			#000 var(--pt-cats-avant),
			#000 calc(100% - var(--pt-cats-apres)),
			transparent 100%
		);
	}

	/* Le chevron nomme le geste. Tracé, pas écrit : une police d'icônes pour une
	   flèche coûterait un fichier de plus. */
	.pt-cats::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 14px;
		width: 7px;
		height: 7px;
		border-top: 2px solid var(--pt-sand);
		border-right: 2px solid var(--pt-sand);
		transform: translateY(-50%) rotate(45deg);
		pointer-events: none;
		opacity: var(--pt-cats-suite);
		transition: opacity 160ms linear;
	}

	.pt-cats__list a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

.pt-cats__list a {
	display: block;
	white-space: nowrap;
	padding: 14px 18px;
	font-size: 12.5px;
	color: var(--pt-on-night-nav);
}

.pt-cats__list a:hover {
	color: var(--pt-sand);
}

.pt-cats__list .is-current a {
	background: var(--pt-sand);
	color: var(--pt-night);
	font-weight: 600;
}

/* --- Chapeau de catégorie -------------------------------------------------- */

.pt-hub-head__count {
	margin-bottom: 14px;
}

/* ⚠ Ce chapeau est TOUJOURS posé sur le bandeau nocturne : sa couleur doit être
   claire. Écrit en `--pt-ink-soft` (encre sombre), il ne se voyait pas sur
   `/blog/` — sur les catégories il passait par chance, la description de
   catégorie arrivant enveloppée dans un `<p>` qui héritait du bandeau. Une
   couleur qui dépend de l'enveloppe du contenu n'est pas une couleur choisie. */
.pt-hub-head__intro,
.pt-hub-head__intro p {
	margin: 18px 0 0;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--pt-on-night-body);
	max-width: 640px;
}

.pt-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
	list-style: none;
	padding: 0;
}

.pt-tags a {
	display: block;
	border: var(--pt-border);
	background: var(--pt-card);
	padding: 8px 14px;
	font-size: 12.5px;
	color: var(--pt-ink-soft);
	transition: background var(--pt-transition-card), color var(--pt-transition-card);
}

.pt-tags a:hover {
	background: #fff;
	color: var(--pt-ink);
}

@media (max-width: 1023px) {
	.pt-hub-head {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.pt-hub-head {
		padding-top: 26px;
	}

		.pt-hub-head__intro {
		font-size: 16px;
	}
}

/* --- Pilier ---------------------------------------------------------------- */

.pt-pillar {
	border: var(--pt-border-strong);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-bottom: var(--pt-section-tight);
	background: var(--pt-card);
	transition: background var(--pt-transition-card), box-shadow var(--pt-transition-card);
}

.pt-pillar:hover {
	background: #fff;
	box-shadow: var(--pt-shadow-card);
}

.pt-pillar__media img {
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
}

.pt-pillar__body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
}

.pt-pillar__title {
	font-family: var(--pt-font-title);
	font-size: 34px;
	line-height: 1.15;
	color: var(--pt-ink);
	text-wrap: pretty;
}

.pt-pillar p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--pt-ink-soft);
}

@media (max-width: 767px) {
	.pt-pillar {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt-pillar__body {
		padding: 20px;
	}

	.pt-pillar__title {
		font-size: 25px;
	}
}

/* --- Entrées par intention -------------------------------------------------- */

.pt-intents {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: var(--pt-section-tight);
}

.pt-intent {
	padding: var(--pt-card-pad);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pt-intent__title {
	font-family: var(--pt-font-title);
	font-size: 21px;
	line-height: 1.25;
	color: var(--pt-ink);
}

.pt-intent ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--pt-border);
}

.pt-intent li {
	border-bottom: var(--pt-border);
}

.pt-intent li a {
	display: block;
	padding: 12px 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--pt-ink-soft);
}

.pt-intent li a:hover {
	color: var(--pt-primary);
}

@media (max-width: 1023px) {
	.pt-intents {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pt-intents {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Articles en avant ------------------------------------------------------ */

.pt-hub-featured {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 40px;
}

@media (max-width: 1023px) {
	.pt-hub-featured {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pt-hub-featured {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* --- Index en lignes -------------------------------------------------------- */

.pt-index {
	border-top: var(--pt-border-strong);
}

/* ⚠ `align-items: center` et non `baseline` depuis que la vignette est là :
   alignée sur la ligne de base du texte, une image de 72 px de haut poussait
   toute la ligne vers le bas. */
.pt-index__row {
	display: grid;
	grid-template-columns: 96px 140px minmax(0, 1fr) 100px 70px;
	gap: 20px;
	align-items: center;
	padding: 14px 0;
	border-bottom: var(--pt-border);
	transition: background var(--pt-transition-card);
}

/* La vignette de l'index — la même que celle de l'accueil, au pixel près : une
   ligne d'index est le même objet des deux côtés. La case garde sa place même
   sans image, sinon la colonne des titres changerait de largeur d'une ligne à
   l'autre. */
.pt-index__vignette {
	display: block;
	width: 96px;
	aspect-ratio: 4 / 3;
	background: var(--pt-cream-deep);
	overflow: hidden;
}

.pt-index__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pt-index__row:hover {
	background: var(--pt-card);
}

.pt-index__cat {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pt-primary);
}

.pt-index__title {
	font-family: var(--pt-font-title);
	font-size: 22px;
	line-height: 1.25;
	color: var(--pt-ink);
	text-wrap: pretty;
}

.pt-index__row:hover .pt-index__title {
	color: var(--pt-primary);
}

.pt-index__date,
.pt-index__time {
	font-size: 12.5px;
	color: var(--pt-ink-muted);
}

.pt-index__time {
	text-align: right;
}

@media (max-width: 1023px) {
	.pt-index__row {
		grid-template-columns: 96px 130px minmax(0, 1fr) 90px;
	}

	.pt-index__date {
		display: none;
	}
}

@media (max-width: 767px) {
	/* ⚠ La vignette reste, mais elle passe à gauche d'un bloc de texte : à une
	   colonne, elle occuperait toute la largeur et chaque ligne ferait 300 px
	   de haut. */
	.pt-index__row {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"vignette cat"
			"vignette titre"
			"vignette duree";
		align-items: start;
		gap: 4px 14px;
		padding: 16px 0;
	}

	.pt-index__vignette {
		grid-area: vignette;
		width: 72px;
		align-self: center;
	}

	.pt-index__cat {
		grid-area: cat;
	}

	.pt-index__title {
		grid-area: titre;
	}

	.pt-index__time {
		grid-area: duree;
	}

	.pt-index__title {
		font-size: 18px;
	}

	.pt-index__date {
		display: none;
	}

	.pt-index__time {
		text-align: left;
		font-size: 11.5px;
	}
}

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

/* L'index du blog et la recherche finissent sur la pagination — ou, sans
   résultat, sur le formulaire. Sans ce retrait, ils touchent la bande sombre du
   pied à 0 px. On reprend le pas vertical du site plutôt qu'une valeur inventée :
   `--pt-section` se réduit tout seul en mobile. */
/* La respiration avant le pied de page. Portée par TOUS les écrans d'index —
   `/blog/`, la recherche, les archives ET les rayons. Le rayon ne l'avait pas :
   son double appel de fin touchait la bande sombre du pied, sans un pixel entre
   les deux. Une même respiration, une même classe : deux règles séparées
   finissent par diverger. */
.pt-index-page {
	padding-bottom: var(--pt-section);
}

.pt-pagination {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.pt-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.pt-pagination .page-numbers {
	display: block;
	min-width: 44px;
	min-height: 44px;
	padding: 12px 16px;
	border: 1px solid var(--pt-night);
	font-size: 13px;
	font-weight: 600;
	color: var(--pt-night);
	text-align: center;
	transition: background var(--pt-transition-button), color var(--pt-transition-button);
}

.pt-pagination .page-numbers:hover,
.pt-pagination .page-numbers.current {
	background: var(--pt-night);
	color: #fff;
}

.pt-pagination .page-numbers.dots {
	border-color: transparent;
}

/* --- Double CTA de bas de hub ------------------------------------------------ */

.pt-hub-ctas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: var(--pt-section-tight);
}

.pt-hub-cta {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.pt-hub-cta--paid {
	background: var(--pt-night);
}

.pt-hub-cta--paid .pt-hub-cta__title {
	color: #fff;
}

.pt-hub-cta--paid p {
	color: var(--pt-on-night-body);
}

.pt-hub-cta--free {
	background: var(--pt-primary-ul);
	border: var(--pt-border-free);
}

.pt-hub-cta__title {
	font-family: var(--pt-font-title);
	font-size: 25px;
	line-height: 1.2;
	color: var(--pt-ink);
	text-wrap: pretty;
}

/* ⚠ Le sélecteur est DISJOINT, et ce n'est pas du zèle. Écrit `.pt-hub-cta p`,
   il valait `.pt-hub-cta--paid p` en spécificité (une classe + un élément) et
   se trouvait plus bas dans la feuille : à égalité, la dernière gagne. La
   règle du bandeau payant était donc servie et **muette**, et son paragraphe
   sortait en encre sombre sur le fond nuit — 2,03 de contraste, mesuré le
   9 août 2026 en interrogeant le moteur, pas en relisant la feuille.
   Une règle qui ne peut pas entrer en conflit n'a pas besoin de gagner. */
.pt-hub-cta:not(.pt-hub-cta--paid) p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--pt-ink-soft);
}

/* La part commune, qui vaut pour les deux bandeaux. */
.pt-hub-cta p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
}

@media (max-width: 767px) {
	.pt-hub-ctas {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt-hub-cta {
		padding: 22px 20px;
	}

	.pt-hub-cta__title {
		font-size: 21px;
	}
}

/* === Bandeau photo du hub de catégorie (handoff v3, §5.3, version `4a`) =====

   Mêmes voiles que l'article : la barre de catégories et le fil d'Ariane sont
   posés sur la photo, pas au-dessus d'elle. */

/* `display: block` est explicite à dessein : une grille périmée de la version
   `2a` traînait plus haut dans cette feuille et transformait le bandeau en deux
   colonnes — la barre de catégories et le fil d'Ariane se retrouvaient côte à
   côte. Elle est supprimée, mais la déclaration reste, comme garde-fou. */
.pt-hub-head {
	display: block;
	position: relative;
	background-color: var(--pt-night);
	color: var(--pt-on-night-body);
	/* La place de l'en-tête, sorti du flux. */
	padding-top: 76px;
	/* Le pilier vient mordre le bas du bandeau. */
	margin-bottom: 56px;
}

.pt-hub-head::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--pt-hub-shot);
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

/* Trois couches, dans cet ordre de peinture (la première est au-dessus).
 *
 * ⚠ La deuxième existe depuis le 6 août 2026, et elle répare un défaut de
 * conception. Le voile de fond est un dégradé LATÉRAL : opaque à gauche (0,86),
 * presque transparent à droite (0,30) — c'est-à-dire que l'image se voit surtout
 * du côté droit… là où passent les rubriques du menu, le panier et le bouton de
 * compte. Une photo un peu claire à cet endroit rendait la barre illisible.
 * Tant que le bandeau servait l'illustration nocturne commune, personne ne le
 * voyait ; au premier réglage par rayon, si.
 *
 * La lisibilité de la navigation ne peut pas dépendre du dessin qu'on met
 * derrière : on assombrit donc la hauteur de l'en-tête, sur toute la largeur, et
 * l'image reprend la main juste en dessous. */
.pt-hub-head__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, rgba(10, 36, 52, 0.72) 0, rgba(10, 36, 52, 0.5) 76px, rgba(10, 36, 52, 0) 160px),
		linear-gradient(100deg, rgba(10, 36, 52, 0.86) 0%, rgba(10, 36, 52, 0.66) 46%, rgba(10, 36, 52, 0.3) 100%);
}

.pt-hub-head__veil::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(180deg, rgba(10, 36, 52, 0) 0%, rgba(10, 36, 52, 0.62) 58%, rgba(10, 36, 52, 0.94) 100%);
}

.pt-hub-head__bar,
.pt-hub-head__fil {
	position: relative;
	border-bottom: 1px solid rgba(229, 221, 207, 0.12);
}

/* La barre de catégories est écrite pour du crème : sur la photo, l'onglet
   actif passe en sable plein et les autres en texte clair. */
.pt-hub-head__bar .pt-cats {
	background: transparent;
	border: 0;
}

.pt-hub-head__bar .pt-cats a {
	color: #e4ece0;
}

.pt-hub-head__bar .pt-cats a:hover {
	color: #fff;
}

.pt-hub-head__bar .pt-cats .is-active,
.pt-hub-head__bar .pt-cats [aria-current] {
	background: var(--pt-sand);
	color: var(--pt-night);
}

.pt-hub-head__fil .pt-breadcrumb,
.pt-hub-head__fil .pt-breadcrumb a {
	color: #a9bbb2;
	background: transparent;
	border: 0;
}

/* ⚠ La page COURANTE du fil d'Ariane n'est pas un lien : elle échappait aux
   deux règles ci-dessus et gardait l'encre sombre du thème sur le bandeau
   sombre — 2,03 de contraste, mesuré le 9 août 2026, et vu à l'œil par Loïc.
   `article.css` posait déjà cette règle pour le bandeau d'article ; le hub
   l'avait oubliée. C'est le défaut annoncé par le commentaire du voile :
   « quand on répare ce défaut quelque part, le chercher partout où le même
   voile est employé ». */
.pt-hub-head__fil .pt-breadcrumb a:hover,
.pt-hub-head__fil .pt-breadcrumb [aria-current] {
	color: #e4ece0;
}

.pt-hub-head__inner {
	position: relative;
	padding-top: 72px;
	padding-bottom: 104px;
}

/* Les deux bandes se suivent, elles ne se partagent pas une ligne. */
.pt-hub-head__bar,
.pt-hub-head__fil {
	display: block;
	width: 100%;
	clear: both;
}

.pt-hub-head__count {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--pt-sand);
}

.pt-hub-head__filet {
	width: 44px;
	height: 1px;
	background: var(--pt-sand);
	flex: none;
}

.pt-hub-head__title {
	margin: 0;
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 58px;
	line-height: 1.04;
	letter-spacing: -1px;
	color: var(--pt-on-night);
	max-width: 880px;
	text-wrap: pretty;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
}

.pt-hub-head__title em {
	font-style: italic;
	color: var(--pt-sand);
}

.pt-hub-head__intro {
	margin-top: 22px;
	max-width: 660px;
	font-size: 16.5px;
	line-height: 1.7;
	color: #e8efe4;
}

/* Le pilier chevauche la photo : plaque cream à filet gauche brun, et l'ombre
   qui le décolle. Sans `position: relative`, il passerait sous les voiles. */
.pt-pillar {
	position: relative;
	z-index: 1;
	margin-top: -56px;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	background: var(--pt-cream);
	border: 0;
	border-left: 3px solid var(--pt-brown);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
	text-decoration: none;
}

.pt-pillar__media {
	min-height: 280px;
	background-color: var(--pt-night);
}

.pt-pillar__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pt-pillar__title {
	font-family: var(--pt-font-title);
	font-size: 32px;
	line-height: 1.15;
	color: var(--pt-ink);
}

/* Les trois entrées par intention : des colonnes séparées par des filets, plus
   des cartes. Le numéro alterne vert / brun / vert. */
.pt-intents {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.pt-intent {
	background: transparent;
	border: 0;
	border-left: 1px solid var(--pt-line);
	padding: 0 30px;
}

.pt-intent:first-child {
	border-left: 0;
	padding-left: 0;
}

.pt-intent:last-child {
	padding-right: 0;
}

.pt-intent::before {
	content: counter(pt-intent);
	counter-increment: pt-intent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 16px;
	border: 1px solid var(--pt-primary);
	font-family: var(--pt-font-title);
	font-size: 14px;
	color: var(--pt-primary);
}

.pt-intents {
	counter-reset: pt-intent;
}

.pt-intent:nth-child(2)::before {
	border-color: var(--pt-brown);
	color: var(--pt-brown);
}

/* ⚠ Les trois cartes sont ALIGNÉES, plus décalées en escalier.

   Le décalage (26 px puis 52 px de retrait haut) venait de l'écosystème de
   l'accueil et suivait la maquette du hub. À l'usage il se lit mal : trois
   articles de même rang n'ont aucune raison d'être posés à trois hauteurs, et
   la troisième carte descendait sous la ligne de flottaison. Retiré le 4 août
   2026 à la demande de Loïc — écart assumé à la maquette `4a`. */
.pt-hub-featured {
	align-items: stretch;
}

@media (max-width: 1023px) {
	.pt-hub-head__inner {
		padding-top: 48px;
		padding-bottom: 72px;
	}

	.pt-hub-head__title {
		font-size: 42px;
	}

	.pt-pillar {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt-intents {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt-intent {
		border-left: 0;
		border-top: 1px solid var(--pt-line);
		padding: 24px 0 0;
	}

	.pt-intent:first-child {
		border-top: 0;
		padding-top: 0;
	}

	/* Le contre-pied du décalage n'a plus rien à défaire : les cartes sont
	   alignées à toutes les tailles depuis le 4 août 2026. Règle supprimée
	   plutôt que laissée là — une règle qui ne mord sur rien fait croire, à la
	   relecture, qu'un réglage existe encore. */
}

@media (max-width: 767px) {
	.pt-hub-head {
		padding-top: 64px;
	}

	.pt-hub-head__title {
		font-size: 32px;
	}

	.pt-hub-head__inner {
		padding-top: 36px;
		padding-bottom: 56px;
	}
}