/* Fiche recette — le CPT `recette`, page dédiée et carte embarquée.
   Gabarit : single-recette.php · rendu : inc/recette.php

   Deux contextes pour un seul balisage :
     .pt-recette--fiche  la page dédiée, deux colonnes, ingrédients collants
     .pt-recette--carte  la version servie par [recette id="…"] dans un article,
                         qui tient dans la colonne de texte de 700 px

   ⚠ Le snippet qui déclarait le shortcode imprime encore SA feuille, dans un
   <style> du corps de page — donc APRÈS celle-ci dans l'ordre du document. Ses
   règles visent `.recette-*` ; les nôtres visent `.pt-recette*`. Des sélecteurs
   disjoints n'ont pas besoin de gagner un conflit : ils n'en ont aucun. C'est
   la parade préférée du thème à l'arithmétique de spécificité. */

/* --- La page --------------------------------------------------------------- */

.pt-recette-page__inner {
	padding-top: 40px;
	padding-bottom: var(--pt-section);
}

/* L'introduction rédigée par Loïc : elle se lit, donc elle garde la mesure
   d'une colonne de texte. La recette, elle, prend toute la largeur. */
.pt-recette-page__intro {
	max-width: var(--pt-measure);
	margin-bottom: 44px;
}

/* --- Les repères ----------------------------------------------------------- */

/* Ce qu'on veut savoir avant de sortir une planche : combien de temps, pour
   combien. Même mobilier que les repères d'un chapitre de formation. */
.pt-recette__reperes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 48px;
	padding: 20px 0;
	border-top: var(--pt-border-strong);
	border-bottom: var(--pt-border);
}

.pt-recette__repere {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pt-recette__repere-libelle {
	font-family: var(--pt-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pt-ink-muted);
}

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

/* Le bouton d'impression se pousse à droite de la même barre : il appartient
   aux repères — c'est le geste qu'on fait avant de commencer. */
.pt-recette__imprimer {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-left: auto;
	padding: 9px 16px;
	border: var(--pt-border-free);
	border-radius: var(--pt-radius);
	background: transparent;
	color: var(--pt-primary);
	font-family: var(--pt-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background var(--pt-transition-button), color var(--pt-transition-button);
}

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

/* ⚠ Ni bordure ni retrait ne changent au survol : la barre bougerait, le
   curseur sortirait du bouton, le survol s'annulerait — et ça recommencerait. */

/* --- Les deux colonnes ------------------------------------------------------ */

.pt-recette__corps {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: var(--pt-rail-gap);
	align-items: start;
	padding-top: 40px;
}

/* On cuisine en levant les yeux : la liste des courses reste sous les yeux
   pendant qu'on descend les étapes, exactement comme le sommaire d'un article.
   Le décalage de 96 px est celui du rail — sous l'en-tête collant. */
.pt-recette--fiche .pt-recette__ingredients {
	position: sticky;
	top: 96px;
	padding: 26px var(--pt-card-pad);
	border: var(--pt-border);
	background: var(--pt-card);
}

.pt-recette__soustitre {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: var(--pt-border-strong);
	font-family: var(--pt-font-title);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--pt-ink);
}

/* --- Les ingrédients -------------------------------------------------------- */

/* Une liste de quantités se lit comme une liste de courses : une ligne, un
   filet. Les puces n'apportent rien et se rognent dès que le retrait bouge. */
.pt-recette__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-recette__liste li {
	padding: 11px 0;
	border-bottom: 1px dotted var(--pt-line);
	font-family: var(--pt-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--pt-ink-body);
}

.pt-recette__liste li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* --- Les étapes ------------------------------------------------------------- */

.pt-recette__pas {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pt-pas;
}

.pt-recette__pas li {
	position: relative;
	counter-increment: pt-pas;
	padding: 0 0 22px 62px;
	font-family: var(--pt-font-body);
	font-size: 16px;
	line-height: 1.72;
	color: var(--pt-ink-body);
}

.pt-recette__pas li::before {
	content: counter(pt-pas);
	position: absolute;
	top: -4px;
	left: 0;
	width: 42px;
	font-family: var(--pt-font-title);
	font-size: 30px;
	line-height: 1.3;
	color: var(--pt-primary);
	text-align: right;
}

/* Le filet vertical relie les étapes : on voit d'un coup d'œil qu'elles
   s'enchaînent, et où l'on en est. Il s'arrête à la dernière. */
.pt-recette__pas li::after {
	content: "";
	position: absolute;
	top: 34px;
	bottom: 6px;
	left: 20px;
	width: 1px;
	background: var(--pt-line);
}

.pt-recette__pas li:last-child {
	padding-bottom: 0;
}

.pt-recette__pas li:last-child::after {
	display: none;
}

/* Le titre d'une étape (« Parer la viande »), sur sa ligne : c'est lui qu'on
   cherche des yeux en relevant la tête de la planche. */
.pt-recette__pas-titre {
	display: block;
	font-weight: 600;
	color: var(--pt-ink);
}

.pt-recette__pas-photo {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 12px;
	border: 1px solid var(--pt-line);
}

/* --- Les sections d'une fiche seule (inc/recette-sections.php) --------------- */

.pt-recette-section,
.pt-recette-avis,
.pt-recette-sources {
	max-width: var(--pt-measure);
	margin-top: var(--pt-section-tight);
}

.pt-recette-avis {
	padding: var(--pt-card-pad);
	border-left: 2px solid var(--pt-primary);
	background: var(--pt-cream-deep);
}

.pt-recette-avis__texte {
	margin: 8px 0 12px;
	padding: 0;
	border: 0;
	font-family: var(--pt-font-body);
	font-size: 17px;
	font-style: italic;
	line-height: 1.7;
	color: var(--pt-ink);
}

.pt-recette-avis__texte p {
	margin: 0 0 10px;
}

.pt-recette-avis__lien {
	font-size: 14px;
	color: var(--pt-primary);
}

/* Le tableau des variantes est plus large que la colonne de texte : la
   troisième colonne porte des phrases. */
.pt-recette-section#pt-variantes {
	max-width: none;
}

.pt-recette-variantes td:first-child {
	font-weight: 600;
	color: var(--pt-ink);
	white-space: nowrap;
}

/* Sur téléphone, le texte de « Ce qui change » est une phrase : il passe sous
   son libellé au lieu d'être serré à droite. */
@media (max-width: 767px) {
	.pt-recette-variantes tbody td {
		display: block;
		text-align: left;
	}

	.pt-recette-variantes tbody td::before {
		display: block;
		max-width: none;
		margin-bottom: 2px;
	}

	.pt-recette-variantes td:first-child {
		white-space: normal;
	}
}

.pt-recette-erreurs li {
	margin-bottom: 10px;
}

.pt-recette-sources__titre {
	margin: 0 0 8px;
	font-family: var(--pt-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pt-ink-muted);
}

.pt-recette-sources ul {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--pt-ink-soft);
}

.pt-recette-sources a {
	color: var(--pt-ink-soft);
}

/* --- La note des lecteurs (inc/recette-note.php) ---------------------------- */

.pt-note {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--pt-line);
	font-family: var(--pt-font-body);
	color: var(--pt-ink-body);
}

.pt-note__etat {
	margin: 0 0 8px;
	font-size: 15px;
}

.pt-note__etoiles {
	margin-right: 8px;
	color: var(--pt-brown);
	letter-spacing: 2px;
}

.pt-note__vote {
	margin: 0;
	padding: 0;
	border: 0;
}

.pt-note__question {
	margin-bottom: 6px;
	padding: 0;
	font-size: 14px;
	color: var(--pt-ink-soft);
}

.pt-note__etoile {
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--pt-line);
	cursor: pointer;
}

.pt-note__etoile.is-vise,
.pt-note__etoile:focus-visible {
	color: var(--pt-brown);
}

@media print {
	.pt-note { display: none; }
}

/* --- Le pas-à-pas complet --------------------------------------------------- */

.pt-recette-suite {
	max-width: var(--pt-measure);
	margin-top: var(--pt-section-tight);
	padding: var(--pt-card-pad);
	border-left: 2px solid var(--pt-primary);
	background: var(--pt-primary-ul);
}

.pt-recette-suite__texte {
	margin: 8px 0 18px;
	font-family: var(--pt-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--pt-ink-soft);
}

/* --- La carte embarquée dans un article ------------------------------------- */

/* Elle vit dans `.pt-prose`, colonne de 700 px : une seule colonne, et elle ne
   reprend pas la photo — sur les articles concernés c'est la même image que le
   bandeau, vue trois cents pixels plus haut. */
.pt-recette--carte {
	margin: 44px 0;
	padding: var(--pt-card-pad);
	border: var(--pt-border);
	background: var(--pt-card);
}

.pt-recette--carte .pt-recette__entete {
	margin-bottom: 4px;
}

.pt-recette--carte .pt-recette__titre {
	margin: 8px 0 10px;
	font-family: var(--pt-font-title);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.22;
}

/* ⚠ `text-decoration: none` ne suffit pas : la carte vit dans `.pt-prose`, qui
   souligne ses liens par une BORDURE (`border-bottom` en primary-lite). Défaire
   une seule des deux propriétés laisse le trait — mesuré sur le staging, où le
   titre sortait souligné en vert clair. Il faut défaire *chaque* propriété que
   la règle adverse a posée, pas seulement celle à laquelle on pense. */
.pt-recette--carte .pt-recette__titre a {
	color: var(--pt-ink);
	text-decoration: none;
	border-bottom: 0;
}

.pt-recette--carte .pt-recette__titre a:hover {
	text-decoration: underline;
}

.pt-recette--carte .pt-recette__chapo {
	margin: 0 0 18px;
	font-family: var(--pt-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--pt-ink-soft);
}

.pt-recette--carte .pt-recette__reperes {
	gap: 12px 32px;
	padding: 16px 0;
}

.pt-recette--carte .pt-recette__repere-valeur {
	font-size: 18px;
}

.pt-recette--carte .pt-recette__corps {
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	padding-top: 26px;
}

.pt-recette--carte .pt-recette__soustitre {
	font-size: 21px;
}

.pt-recette--carte .pt-recette__pas li {
	padding-left: 52px;
	font-size: 15px;
}

.pt-recette--carte .pt-recette__pas li::before {
	width: 34px;
	font-size: 25px;
}

.pt-recette--carte .pt-recette__pas li::after {
	left: 16px;
}

.pt-recette__pied {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: var(--pt-border);
	font-family: var(--pt-font-body);
	font-size: 14px;
}

.pt-recette__pied a {
	color: var(--pt-primary);
	font-weight: 600;
	text-decoration: none;
}

.pt-recette__pied a:hover {
	text-decoration: underline;
}

/* --- Tablette et téléphone -------------------------------------------------- */

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

@media (max-width: 767px) {
	/* Une colonne. Les ingrédients passent devant — c'est ce qu'on lit en
	   premier, et un rail collant sur un téléphone mangerait l'écran. */
	.pt-recette__corps {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
		padding-top: 28px;
	}

	.pt-recette--fiche .pt-recette__ingredients {
		position: static;
		padding: 20px 18px;
	}

	.pt-recette__reperes {
		gap: 14px 28px;
	}

	.pt-recette__imprimer {
		margin-left: 0;
	}

	.pt-recette__pas li {
		padding-left: 46px;
	}

	.pt-recette__pas li::before {
		width: 30px;
		font-size: 25px;
	}

	.pt-recette__pas li::after {
		left: 14px;
	}
}

/* --- À l'impression --------------------------------------------------------- */

/* Une fiche recette finit sur le plan de travail. Ce qui s'imprime : le titre,
   les repères, les ingrédients, les étapes. Rien d'autre — ni navigation, ni
   encart auteur, ni newsletter, ni « la suite logique ». */
/* --- L'index des recettes — archive-recette.php ------------------------- */
/* La grille reprend le rythme de `.pt-hub-featured` (hub.css) : trois colonnes,
   deux sous 1024 px, une sous 768. Deux index qui se suivent dans la même
   navigation ne doivent pas respirer différemment. */

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

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

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

.pt-recette-vignette {
	display: flex;
	flex-direction: column;
	background: var(--pt-card);
	border: var(--pt-border);
	color: inherit;
	text-decoration: none;
	transition: background var(--pt-transition-card), border-color var(--pt-transition-card);
}

.pt-recette-vignette:hover,
.pt-recette-vignette:focus-visible {
	background: #fff;
	border-color: var(--pt-line-strong);
}

.pt-recette-vignette__media {
	display: block;
	overflow: hidden;
}

/* ⚠ Un rapport imposé, pas la hauteur naturelle de l'image. Mesuré sur le
   staging le 19/08/2026 : les trois photos de recette n'ont pas le même format
   (le bouillon est nettement plus haut), et les titres ne s'alignaient plus
   d'une vignette à l'autre — la rangée partait de travers alors que les cartes,
   elles, faisaient bien la même hauteur. Une grille de vignettes ne peut pas
   dépendre du cadrage de la photo qu'on y déposera demain. */
.pt-recette-vignette__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.pt-recette-vignette__corps {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: var(--pt-card-pad);
}

.pt-recette-vignette__titre {
	font-family: var(--pt-font-title);
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--pt-ink);
}

.pt-recette-vignette__chapo {
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--pt-ink-soft);
	/* Trois lignes au plus : les chapeaux de recette vont du simple au triple,
	   et une vignette deux fois plus haute que sa voisine casse la grille. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Le temps est ce qu'on cherche du regard : il se détache, et il est le dernier
   de la carte pour rester aligné d'une vignette à l'autre. */
.pt-recette-vignette__temps {
	margin-top: auto;
	padding-top: 10px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--pt-primary);
}


@media print {
	.pt-header,
	.pt-footer,
	.pt-newsletter,
	.pt-related,
	.pt-author,
	.pt-sticky-cta,
	.pt-breadcrumb,
	.pt-skip-link,
	.pt-masthead__veil,
	.pt-masthead__fil,
	.pt-masthead__byline,
	.pt-recette__imprimer,
	.pt-recette-page__intro,
	.pt-recette-suite,
	.pt-recette-section,
	.pt-recette-avis,
	.pt-recette-sources {
		display: none !important;
	}

	/* Le bandeau photo est du texte blanc sur une image sombre : à l'encre, il
	   sortirait blanc sur blanc. On le remet à plat plutôt que de le masquer —
	   c'est lui qui porte le titre. */
	.pt-masthead {
		padding-top: 0 !important;
		background: none !important;
		color: #000 !important;
	}

	/* Depuis le 9 août 2026 la photo est une `<img>` et non plus un `::before` :
	   masquer l'ancien pseudo-élément ne suffisait plus, la photo repassait à
	   l'impression et le titre redevenait blanc sur blanc. */
	.pt-masthead::before,
	.pt-masthead__shot {
		display: none !important;
	}

	.pt-masthead__inner {
		padding: 0 !important;
	}

	.pt-masthead__title,
	.pt-masthead__lede,
	.pt-masthead__cat {
		color: #000 !important;
	}

	.pt-recette-page__inner {
		padding: 0 !important;
	}

	.pt-recette__corps {
		grid-template-columns: 34% minmax(0, 1fr);
		gap: 24px;
	}

	.pt-recette--fiche .pt-recette__ingredients {
		position: static;
		background: none;
	}

	/* Une étape coupée en deux par un saut de page se relit deux fois. */
	.pt-recette__pas li,
	.pt-recette__liste li {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.pt-recette__pas li::before {
		color: #000;
	}
}