/* Base — reset, typographie, primitives partagées (kicker, bouton, carte, champ).
   Tout ce qui sert sur au moins deux gabarits vit ici. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--pt-cream);
	color: var(--pt-ink);
	font-family: var(--pt-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--pt-primary);
	text-decoration: none;
	transition: color var(--pt-transition-card);
}

a:hover {
	color: var(--pt-night);
}

/* --- Titres ------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--pt-font-title);
	font-weight: 400;
	color: var(--pt-ink);
	text-wrap: pretty;
	margin: 0;
}

h1 {
	font-size: 48px;
	line-height: 1.06;
	letter-spacing: -0.7px;
}

h2 {
	font-size: 30px;
	line-height: 1.15;
}

h3 {
	font-size: 21px;
	line-height: 1.25;
}

@media (max-width: 767px) {
	h1 {
		font-size: 31px;
		line-height: 1.1;
		letter-spacing: -0.4px;
	}

	h2 {
		font-size: 25px;
		line-height: 1.18;
	}

	h3 {
		font-size: 19px;
	}
}

p {
	margin: 0 0 20px;
}

/* --- Primitives ---------------------------------------------------------- */

/* Texte réservé aux lecteurs d'écran.
   ⚠ Le thème n'en avait AUCUNE définition — WordPress et WooCommerce en
   produisent pourtant (« Le prix initial était : 67,00 € »). Sans cette règle,
   ces textes restent dans le flux : mesuré le 2 août 2026, un de ces spans
   occupait une place d'élément flexible et faisait passer le second bouton de
   la carte boutique à la ligne. Un texte qu'on croit invisible occupe quand
   même de la place. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

/* Kicker : le motif signature. Vert = gratuit, brun = payant, sable sur night. */
.pt-kicker {
	display: block;
	font-family: var(--pt-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pt-primary);
	line-height: 1.4;
}

.pt-kicker--paid {
	color: var(--pt-brown);
}

.pt-kicker--night {
	color: var(--pt-sand);
}

.pt-kicker--muted {
	color: var(--pt-ink-muted);
}

/* Vert clair : le kicker sur fond night des écrans de commerce (`6e`, `6f`). */
.pt-kicker--lite {
	color: var(--pt-primary-lite);
}

/* Le filet de 34 px qui ouvre une section (maquettes `6a`, `6h`). */
.pt-kicker--rule {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pt-kicker--rule::before {
	content: "";
	width: 34px;
	height: 1px;
	background: currentcolor;
	flex: none;
}

/* La « voix » de la marque : Tenor Sans en italique. */
.pt-voice {
	font-family: var(--pt-font-title);
	font-style: italic;
	color: var(--pt-ink-soft);
	line-height: 1.5;
}

/* Boutons */
.pt-btn {
	display: inline-block;
	font-family: var(--pt-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--pt-radius);
	cursor: pointer;
	transition: background var(--pt-transition-button), transform var(--pt-transition-button), color var(--pt-transition-button), border-color var(--pt-transition-button);
}

.pt-btn:hover {
	transform: translateY(-1px);
}

/* Payant : brun plein */
.pt-btn--paid {
	background: var(--pt-brown);
	color: #fff;
}

.pt-btn--paid:hover {
	background: var(--pt-brown-hover);
	color: #fff;
}

/* Gratuit : vert plein */
.pt-btn--free {
	background: var(--pt-primary);
	color: #fff;
}

.pt-btn--free:hover {
	background: var(--pt-primary-hover);
	color: #fff;
}

/* Fantôme vert (sur fond clair) */
.pt-btn--ghost-free {
	background: transparent;
	color: var(--pt-primary);
	border: 1px solid var(--pt-primary);
}

.pt-btn--ghost-free:hover {
	background: var(--pt-primary);
	color: #fff;
}

/* Fantôme brun (sur fond clair) — le pendant payant de `--ghost-free`. Il
   manquait : l'espace membre a besoin d'une action discrète sur une formation
   achetée (« revoir le parcours »), et le vert y aurait annoncé du gratuit. */
.pt-btn--ghost-paid {
	background: transparent;
	color: var(--pt-brown);
	border: 1px solid var(--pt-brown);
}

.pt-btn--ghost-paid:hover {
	background: var(--pt-brown);
	color: #fff;
}

/* Fantôme sable (sur fond night) */
.pt-btn--ghost-sand {
	background: transparent;
	color: var(--pt-sand);
	border: 1px solid rgba(212, 198, 163, 0.5);
	font-size: 11.5px;
	padding: 8px 14px;
}

.pt-btn--ghost-sand:hover {
	border-color: var(--pt-sand);
	background: rgba(212, 198, 163, 0.08);
	color: var(--pt-sand);
}

/* Fantôme brun (sur fond clair) — le second bouton des écrans payants */
.pt-btn--ghost-paid {
	background: transparent;
	color: var(--pt-brown);
	border: 1px solid var(--pt-brown);
}

.pt-btn--ghost-paid:hover {
	background: var(--pt-brown);
	color: #fff;
}

/* Fantôme vert clair (sur fond night) — panneaux de `6e` et `6f` */
.pt-btn--ghost-lite {
	background: transparent;
	color: var(--pt-primary-lite);
	border: 1px solid var(--pt-primary-lite);
}

.pt-btn--ghost-lite:hover {
	background: rgba(156, 193, 150, 0.12);
	color: var(--pt-primary-lite);
}

/* Fantôme night (sur fond clair) */
.pt-btn--ghost-night {
	background: transparent;
	color: var(--pt-night);
	border: 1px solid var(--pt-night);
}

.pt-btn--ghost-night:hover {
	background: var(--pt-night);
	color: #fff;
}

/* Champs */
.pt-field {
	width: 100%;
	font-family: var(--pt-font-body);
	font-size: 14px;
	color: var(--pt-ink);
	background: #fff;
	border: var(--pt-border);
	border-radius: var(--pt-radius);
	padding: 13px 15px;
}

.pt-field::placeholder {
	color: var(--pt-ink-muted);
}

.pt-field:focus {
	outline: 2px solid var(--pt-primary);
	outline-offset: -2px;
}

/* Cartes */
.pt-card {
	background: var(--pt-card);
	border: var(--pt-border);
	border-radius: var(--pt-radius);
	transition: background var(--pt-transition-card), transform var(--pt-transition-card), box-shadow var(--pt-transition-card);
}

a.pt-card:hover,
.pt-card:hover {
	background: #fff;
	transform: translateY(-2px);
	box-shadow: var(--pt-shadow-card);
}

/* --- La carte d'article ------------------------------------------------------

   Rendue par `pt_article_card()`, appelée depuis DEUX endroits : « La suite
   logique » en fin d'article, et les trois articles en avant d'un hub. Elle vit
   donc ici, dans la feuille servie partout — et non dans `article.css`, qui
   n'est enfilée que sur un contenu singulier.

   ⚠ C'est exactement l'erreur corrigée le 4 août 2026 : les règles étaient dans
   `article.css`, donc absentes du hub. La carte y sortait nue — pas de retrait,
   pas de rythme, titre à 16 px dans la police du corps, image sans rapport de
   forme. Une brique appelée depuis plusieurs gabarits ne peut pas être habillée
   dans la feuille d'un seul. */

.pt-article-card {
	display: flex;
	flex-direction: column;
	color: inherit;
}

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

.pt-article-card__media--card img {
	aspect-ratio: 16 / 10;
}

.pt-article-card__media--thumb img {
	aspect-ratio: 4 / 3;
}

.pt-article-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

@media (max-width: 767px) {
	/* Sur mobile la carte s'allonge : vignette 4/3 à gauche, titre à droite. */
	.pt-article-card {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	.pt-article-card__media {
		flex: none;
		width: 88px;
	}

	.pt-article-card__media img {
		aspect-ratio: 4 / 3;
	}

	.pt-article-card__body {
		padding: 12px 14px 12px 0;
		gap: 5px;
	}

	.pt-article-card__title {
		font-size: 16.5px;
	}
}

/* --- Conteneurs ---------------------------------------------------------- */

.pt-wrap {
	max-width: calc(var(--pt-wrap) + var(--pt-gutter) * 2);
	margin: 0 auto;
	padding-left: var(--pt-gutter);
	padding-right: var(--pt-gutter);
}

.pt-wrap--narrow {
	max-width: calc(var(--pt-wrap-narrow) + var(--pt-gutter) * 2);
}

.pt-section {
	padding-top: var(--pt-section);
	padding-bottom: var(--pt-section);
}

.pt-section--tight {
	padding-top: var(--pt-section-tight);
	padding-bottom: var(--pt-section-tight);
}

.pt-section--night {
	background: var(--pt-night);
	color: var(--pt-on-night-body);
}

.pt-section--cream-deep {
	background: var(--pt-cream-deep);
}

.pt-section--night h1,
.pt-section--night h2,
.pt-section--night h3 {
	color: var(--pt-on-night);
}

/* --- Accessibilité -------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pt-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	background: var(--pt-night);
	color: #fff;
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 600;
}

.pt-skip-link:focus {
	left: 0;
	top: 0;
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--pt-primary);
	outline-offset: 2px;
}

/* Le handoff impose que rien d'autre que les cartes et les boutons ne bouge —
   et que tout s'arrête si l'utilisateur a demandé moins d'animation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.pt-card:hover,
	.pt-btn:hover {
		transform: none;
	}
}

/* Le formulaire de recherche sert aussi hors gabarit article (404, index vide). */
.pt-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	max-width: 520px;
}

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