/* Page de vente (`wffn_landing`).
   Reconstruction de la page Bricks encore en ligne en production.

   Une page de vente est une page longue : son rythme est fait d'alternances de
   fond (cream / creamDeep / night) plutôt que de traits de séparation. Le brun
   n'y apparaît que sur ce qui engage un paiement. */

/* --- En-tête minimal ------------------------------------------------------- */

.pt-header__minimal {
	display: flex;
	align-items: center;
	gap: 20px;
}

.pt-header__back {
	font-size: 12.5px;
	color: var(--pt-on-night-nav);
}

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

.pt-header__cta {
	font-size: 12.5px;
	padding: 10px 18px;
}

/* --- 1. Hero ---------------------------------------------------------------- */

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

.pt-pdv-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 52px;
	align-items: center;
	padding-top: 64px;
	padding-bottom: 72px;
}

.pt-pdv-hero__pitch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.pt-pdv-hero__pitch .pt-kicker {
	margin-bottom: 16px;
}

.pt-pdv-hero__title {
	font-size: 54px;
	line-height: 1.04;
	letter-spacing: -0.8px;
	color: var(--pt-on-night);
}

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

.pt-pdv-hero__lede {
	margin: 22px 0 30px;
	font-size: 17px;
	line-height: 1.65;
	max-width: 540px;
}

.pt-pdv-hero__proof {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 12.5px;
	color: #bfcdba;
}

.pt-pdv-hero__proof li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.pt-pdv-hero__proof svg {
	color: var(--pt-primary-lite);
	flex: none;
}

.pt-pdv-hero__media {
	aspect-ratio: 4 / 3;
	background: rgba(212, 198, 163, 0.08);
	border: 1px solid rgba(229, 221, 207, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pt-pdv-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Une couverture A4 (le classeur) : montrée entière, sans recadrage au 4/3. */
.pt-pdv-hero__media--page {
	aspect-ratio: auto;
	background: none;
	border: 0;
}

.pt-pdv-hero__media--page img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	border: 1px solid rgba(229, 221, 207, 0.28);
}

.pt-pdv-hole {
	font-size: 10.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pt-ink-muted);
	text-align: center;
	padding: 16px;
}

.pt-pdv-hero__media .pt-pdv-hole {
	color: var(--pt-on-night-muted);
}

/* --- Mot d'accueil (arrivée depuis un formulaire) --------------------------- */

/* Une bande fine posée AU-DESSUS du hero, donc sur le night : on vient de
   donner son adresse pour un guide gratuit, et sans elle on atterrit sans
   transition sur une page qui vend à 47 €. Elle explique ce qui vient de se
   passer — elle ne vend rien. */
/* ⚠ Le fond night est écrit ici, il n'est PAS hérité. La bande est posée AVANT
   `.pt-pdv-hero`, donc sur le crème de la page : une première version se
   contentait d'un voile vert translucide et de textes prévus pour le night —
   du vert pâle sur du crème, illisible. Un élément placé au-dessus d'un
   bandeau sombre n'est pas dans ce bandeau. */
.pt-pdv-bienvenue {
	background:
		linear-gradient(rgba(156, 193, 150, 0.12), rgba(156, 193, 150, 0.12)),
		var(--pt-night);
	border-bottom: 1px solid rgba(156, 193, 150, 0.28);
}

.pt-pdv-bienvenue__inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.pt-pdv-bienvenue svg {
	color: var(--pt-primary-lite);
	flex: none;
	margin-top: 2px;
}

.pt-pdv-bienvenue p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--pt-on-night-muted);
}

.pt-pdv-bienvenue strong {
	color: var(--pt-on-night);
	font-weight: 600;
}

/* --- La vidéo de vente ------------------------------------------------------ */

/* Façade : une image et un bouton. L'iframe YouTube n'est fabriquée qu'au clic
   (`initVideoFacade()`), donc aucune connexion tierce ni cookie tant que
   personne n'a demandé à voir la vidéo. */
.pt-video {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: var(--pt-border);
	background: var(--pt-night);
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.pt-video__affiche {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 200ms ease;
}

.pt-video:hover .pt-video__affiche {
	opacity: 0.82;
}

/* Le pictogramme de lecture : un disque et un triangle, tracés en CSS — pas
   d'image de plus à charger pour trois formes. */
.pt-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 74px;
	height: 74px;
	background: var(--pt-brown);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.pt-video__play::before {
	content: "";
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #fff;
	margin-left: 5px;
}

/* ⚠ Une fois l'iframe posée, elle remplace l'image : le conteneur garde son
   format, sinon la page sauterait au clic. */
.pt-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Titres de section ------------------------------------------------------ */

.pt-pdv-head {
	max-width: 660px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 30px;
}

.pt-pdv-head h2 {
	font-size: 36px;
	line-height: 1.12;
}

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

/* --- 2. Le récit ------------------------------------------------------------ */

.pt-pdv-story {
	background: var(--pt-cream);
}

/* La colonne de récit garde la mesure de lecture d'un article : c'est le seul
   passage de la page qu'on lit vraiment mot à mot. */
.pt-pdv-story__inner {
	max-width: calc(var(--pt-measure) + var(--pt-gutter) * 2);
}

.pt-pdv-story p {
	margin: 0 0 20px;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--pt-ink-body);
}

.pt-pdv-story__quote {
	font-size: 19px;
	color: var(--pt-ink-soft);
	border-left: 2px solid var(--pt-sand);
	padding-left: 20px;
	margin: 26px 0;
}

/* --- 3. Les freins ---------------------------------------------------------- */

.pt-pdv-freins {
	background: var(--pt-cream-deep);
	border-top: var(--pt-border);
	border-bottom: var(--pt-border);
}

.pt-pdv-freins__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.pt-pdv-frein {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pt-pdv-frein__title {
	font-family: var(--pt-font-title);
	font-size: 20px;
	line-height: 1.2;
	color: var(--pt-ink);
}

.pt-pdv-frein__text {
	font-size: 14px;
	line-height: 1.7;
	color: var(--pt-ink-soft);
}

/* --- 4. Le pivot ------------------------------------------------------------ */

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

.pt-pdv-pivot__inner {
	max-width: calc(860px + var(--pt-gutter) * 2);
	text-align: center;
}

.pt-pdv-pivot h2 {
	font-size: 40px;
	line-height: 1.1;
	color: var(--pt-on-night);
}

.pt-pdv-pivot h2 em {
	font-style: italic;
	color: var(--pt-sand);
}

.pt-pdv-pivot p {
	margin: 22px auto 0;
	font-size: 16px;
	line-height: 1.7;
	max-width: 680px;
}

/* --- 5. Prérequis ----------------------------------------------------------- */

.pt-pdv-besoins {
	background: var(--pt-cream);
}

.pt-pdv-besoins__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 44px;
	align-items: start;
}

.pt-pdv-besoins__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pt-pdv-besoins__head h2 {
	font-size: 32px;
	line-height: 1.14;
}

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

.pt-pdv-besoins__lists {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 28px;
	border: var(--pt-border);
	background: var(--pt-card);
	padding: 26px;
}

/* Deux colonnes de même poids. Sert au bloc « aujourd'hui / après » de la page
   de vente du Foyer Résilient, où aucune des deux listes ne domine l'autre —
   contrairement aux prérequis, dont la colonne « minimum » est la principale.
   ⚠ Une seule classe, comme la règle ci-dessus : la media query qui les replie
   en une colonne à 767 px est écrite plus bas, donc elle gagne encore. */
.pt-pdv-besoins__lists--pair {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pt-pdv-besoins__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Liste à coches — sert aussi à « ce que vous saurez faire ». */
.pt-pdv-check {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pt-ink-body);
}

.pt-pdv-check li {
	display: flex;
	gap: 10px;
}

.pt-pdv-check svg {
	color: var(--pt-primary);
	flex: none;
	margin-top: 3px;
}

.pt-pdv-check--soft {
	color: var(--pt-ink-soft);
}

.pt-pdv-check--soft svg {
	color: var(--pt-ink-muted);
}

/* --- 6. Le programme -------------------------------------------------------- */

.pt-pdv-programme {
	background: var(--pt-cream-deep);
	border-top: var(--pt-border);
}

.pt-pdv-modules {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--pt-border-strong);
}

.pt-pdv-module {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 24px;
	padding: 26px 0;
	border-bottom: var(--pt-border);
}

.pt-pdv-module__num {
	font-family: var(--pt-font-title);
	font-size: 34px;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--pt-primary-lite);
}

.pt-pdv-module__body h3 {
	font-size: 23px;
	line-height: 1.2;
	margin-bottom: 8px;
}

.pt-pdv-module__body p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pt-ink-soft);
	max-width: 720px;
}

.pt-pdv-module__livrable {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pt-primary);
	background: var(--pt-primary-ul);
	padding: 5px 10px;
}

/* --- 7. Ce que vous saurez faire -------------------------------------------- */

.pt-pdv-resultat {
	background: var(--pt-cream);
}

.pt-pdv-resultat__list {
	font-size: 16px;
	gap: 16px;
	max-width: 820px;
}

/* --- 8. Les outils ---------------------------------------------------------- */

.pt-pdv-outils {
	background: var(--pt-cream);
	border-top: var(--pt-border);
}

.pt-pdv-outils__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.pt-pdv-outil {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pt-pdv-outil__icon {
	width: 42px;
	height: 42px;
	background: var(--pt-primary-ul);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

.pt-pdv-outil__title {
	font-family: var(--pt-font-title);
	font-size: 19px;
	line-height: 1.2;
	color: var(--pt-ink);
}

.pt-pdv-outil__text {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--pt-ink-soft);
}

.pt-pdv-outils__note {
	margin: 30px 0 0;
	border-top: var(--pt-border);
	padding-top: 20px;
	font-size: 17px;
	max-width: 760px;
}

/* --- 9. L'auteur ------------------------------------------------------------ */

.pt-pdv-auteur {
	background: var(--pt-cream-deep);
	border-top: var(--pt-border);
}

.pt-pdv-auteur__inner {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.pt-pdv-auteur__media {
	aspect-ratio: 4 / 5;
	background: var(--pt-cream);
	border: var(--pt-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pt-pdv-auteur__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.pt-pdv-auteur__text p {
	margin: 14px 0 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--pt-ink-body);
}

/* --- 10. L'offre ------------------------------------------------------------ */

.pt-pdv-offre {
	background: var(--pt-cream);
}

.pt-pdv-offre__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 52px;
	align-items: center;
}

.pt-pdv-offre__pitch h2 {
	font-size: 38px;
	line-height: 1.1;
	margin-bottom: 14px;
}

.pt-pdv-offre__pitch p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--pt-ink-soft);
	max-width: 480px;
}

/* La carte d'achat : le seul bloc night de cette moitié de page. */
.pt-offer-card {
	background: var(--pt-night);
	color: var(--pt-on-night-body);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pt-offer-card__badge {
	align-self: flex-start;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pt-night);
	background: var(--pt-sand);
	padding: 6px 10px;
}

.pt-offer-card__amount {
	margin: 0;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.pt-offer-card__now {
	font-family: var(--pt-font-title);
	font-size: 56px;
	line-height: 0.9;
	color: var(--pt-on-night);
}

/* Le prix barré DANS UN BOUTON. Le bouton payant est brun et porte du blanc :
   un gris de charte y serait illisible, on éclaircit donc le blanc lui-même.
   La barre, elle, ne dépend pas de cette règle — le libellé est un `<del>`, que
   le navigateur barre sans aucune feuille de style. C'est voulu : l'optimiseur
   de FlyingPress retire les règles qu'aucun élément n'utilise, et un prix barré
   n'existe que les jours de remise. */
.pt-btn__was {
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.82em;
	font-weight: 400;
	margin-right: 2px;
	text-decoration: line-through;
}

/* Le prix barré d'une promotion. La carte d'offre est sur fond night : c'est
   `--pt-on-night-muted` qu'il faut ici, et non `--pt-strike`, qui est réglé
   pour le crème et se lit mal sur le sombre. */
.pt-offer-card__was {
	font-family: var(--pt-font-title);
	font-size: 26px;
	line-height: 1;
	color: var(--pt-on-night-muted);
	text-decoration: line-through;
	padding-bottom: 6px;
}

.pt-offer-card__unit {
	font-size: 13px;
	color: var(--pt-on-night-muted);
	padding-bottom: 8px;
}

.pt-offer-card__rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: rgba(229, 221, 207, 0.18);
}

.pt-offer-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.5;
}

.pt-offer-card__list li {
	display: flex;
	gap: 10px;
}

.pt-offer-card__list svg {
	color: var(--pt-primary-lite);
	flex: none;
	margin-top: 2px;
}

.pt-offer-card__cta {
	font-size: 15px;
	padding: 16px;
}

.pt-offer-card__note {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--pt-on-night-muted);
	text-align: center;
}

/* --- 11. Transparence ------------------------------------------------------- */

.pt-pdv-transparence {
	background: var(--pt-cream-deep);
	border-top: var(--pt-border);
}

.pt-pdv-transparence__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 44px;
	align-items: start;
}

.pt-pdv-transparence__inner .pt-pdv-head {
	margin-bottom: 0;
}

.pt-pdv-transparence__text p {
	margin: 0 0 16px;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--pt-ink-body);
}

.pt-pdv-transparence__text p:last-child {
	margin-bottom: 0;
}

/* --- 12. FAQ ---------------------------------------------------------------- */

.pt-pdv-faq {
	background: var(--pt-cream);
}

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

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

.pt-faq__item summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
}

.pt-faq__item summary::-webkit-details-marker {
	display: none;
}

.pt-faq__q {
	font-family: var(--pt-font-title);
	font-size: 20px;
	line-height: 1.3;
	color: var(--pt-ink);
}

.pt-faq__item[open] .pt-faq__q {
	color: var(--pt-primary);
}

/* Le signe + / − est dessiné en CSS : deux traits, pas une icône à charger. */
.pt-faq__sign {
	position: relative;
	width: 14px;
	height: 14px;
	flex: none;
	align-self: center;
}

.pt-faq__sign::before,
.pt-faq__sign::after {
	content: "";
	position: absolute;
	background: var(--pt-ink-muted);
	transition: transform var(--pt-transition-card), opacity var(--pt-transition-card);
}

.pt-faq__sign::before {
	top: 6px;
	left: 0;
	width: 14px;
	height: 1.5px;
}

.pt-faq__sign::after {
	top: 0;
	left: 6px;
	width: 1.5px;
	height: 14px;
}

.pt-faq__item[open] .pt-faq__sign::after {
	transform: scaleY(0);
	opacity: 0;
}

.pt-faq__a {
	padding: 0 0 22px;
	max-width: 780px;
}

.pt-faq__a p {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--pt-ink-soft);
}

/* --- 13. Le dernier appel --------------------------------------------------- */

.pt-pdv-final {
	background: var(--pt-night);
	color: var(--pt-on-night-body);
	padding-top: var(--pt-section-airy);
	padding-bottom: var(--pt-section-airy);
}

.pt-pdv-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.pt-pdv-final h2 {
	font-size: 42px;
	line-height: 1.1;
	color: var(--pt-on-night);
	max-width: 760px;
}

.pt-pdv-final h2 em {
	font-style: italic;
	color: var(--pt-sand);
}

.pt-pdv-final p {
	margin: 0 0 10px;
	font-size: 15.5px;
	line-height: 1.7;
	max-width: 560px;
}

/* --- 768–1023 px ------------------------------------------------------------ */

@media (max-width: 1023px) {
	.pt-pdv-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		padding-top: 48px;
		padding-bottom: 52px;
	}

	.pt-pdv-hero__title {
		font-size: 40px;
	}

	.pt-pdv-head h2 {
		font-size: 30px;
	}

	.pt-pdv-freins__grid,
	.pt-pdv-outils__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pt-pdv-pivot h2 {
		font-size: 32px;
	}

	.pt-pdv-besoins__inner,
	.pt-pdv-transparence__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.pt-pdv-offre__inner {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 32px;
	}

	.pt-pdv-offre__pitch h2 {
		font-size: 30px;
	}

	.pt-pdv-auteur__inner {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 28px;
	}

	.pt-pdv-final h2 {
		font-size: 32px;
	}
}

/* --- < 768 px ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.pt-header__minimal {
		gap: 12px;
	}

	/* Le disque de lecture se règle sur la HAUTEUR de la vidéo, pas sur sa
	   largeur : en 390 px la façade ne fait que 199 px de haut, où un carré de
	   74 px occupait plus du tiers de l'image. */
	.pt-video__play {
		width: 54px;
		height: 54px;
	}

	.pt-video__play::before {
		border-width: 10px 0 10px 16px;
		margin-left: 4px;
	}

	.pt-pdv-bienvenue p {
		font-size: 13.5px;
	}

	.pt-header__back {
		display: none;
	}

	.pt-header__cta {
		font-size: 11.5px;
		padding: 9px 14px;
	}

	.pt-pdv-hero__inner {
		padding-top: 32px;
		padding-bottom: 36px;
		gap: 26px;
	}

	.pt-pdv-hero__title {
		font-size: 31px;
		letter-spacing: -0.4px;
	}

	.pt-pdv-hero__lede {
		font-size: 15px;
		margin-bottom: 22px;
	}

	.pt-pdv-hero__pitch .pt-btn--lead {
		width: 100%;
	}

	.pt-pdv-hero__proof {
		gap: 8px 16px;
	}

	.pt-pdv-head h2 {
		font-size: 25px;
	}

	.pt-pdv-story p {
		font-size: 15.5px;
	}

	.pt-pdv-story__quote {
		font-size: 17px;
		padding-left: 14px;
	}

	.pt-pdv-freins__grid,
	.pt-pdv-outils__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.pt-pdv-pivot h2 {
		font-size: 26px;
	}

	.pt-pdv-besoins__lists {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 20px;
	}

	/* Le numéro passe au-dessus du titre : à 390 px, une colonne de 72 px
	   mangerait un tiers de la largeur du texte. */
	.pt-pdv-module {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: 20px 0;
	}

	.pt-pdv-module__body h3 {
		font-size: 20px;
	}

	.pt-pdv-resultat__list {
		font-size: 15px;
	}

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

	.pt-pdv-offre__pitch h2 {
		font-size: 26px;
	}

	.pt-offer-card {
		padding: 22px;
	}

	.pt-offer-card__now {
		font-size: 44px;
	}

	.pt-offer-card__was {
		font-size: 22px;
		padding-bottom: 4px;
	}

	.pt-pdv-auteur__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.pt-pdv-auteur__media {
		max-width: 220px;
	}

	.pt-faq__q {
		font-size: 17px;
	}

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

	.pt-pdv-final h2 {
		font-size: 26px;
	}

	/* La barre collante masque le dernier appel : on lui laisse la place. */
	.pt-pdv-final__inner {
		padding-bottom: 70px;
	}
}

/* --- Page de remerciement (maquette `6h`) ----------------------------------- */

/* ⚠ Ce bloc REMPLACE celui de la version centrée (sceau rond, tout au milieu) :
   il n'est pas empilé par-dessus. Une règle périmée plus haut dans une feuille
   impose son `display` sans erreur ni signal — c'est ce qui avait mis la barre
   de catégories du hub en colonne. Quand on refait une section, on supprime
   l'ancien bloc. */

.pt-merci-hero {
	background: var(--pt-night);
	color: var(--pt-on-night-body);
	padding: 92px 0 84px;
}

/* La photo n'arrive que si la page en porte une : sinon le night suffit, et le
   voile n'aurait rien à voiler. */
.pt-merci-hero--photo {
	background-size: cover;
	background-position: center;
	position: relative;
}

.pt-merci-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 36, 52, 0.95) 0%, rgba(10, 36, 52, 0.86) 45%, rgba(10, 36, 52, 0.5) 100%);
}

.pt-merci-hero__inner {
	position: relative;
	max-width: var(--pt-wrap-narrow);
}

.pt-merci-hero .pt-kicker {
	margin-bottom: 22px;
}

.pt-merci-hero h1 {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.06;
	letter-spacing: -0.6px;
	color: var(--pt-on-night);
	margin: 0;
	max-width: 760px;
}

.pt-merci-hero__lede {
	font-size: 20px;
	line-height: 1.5;
	color: var(--pt-sand);
	margin: 18px 0 0;
	max-width: 620px;
}

.pt-merci-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 32px 0 0;
}

.pt-merci-hero__actions .pt-btn {
	padding: 16px 26px;
	font-size: 14px;
}

.pt-merci-suite {
	background: var(--pt-cream);
	padding: 72px 0 88px;
}

.pt-merci-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 48px;
	align-items: start;
}

.pt-merci-etapes {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pt-line);
}

.pt-merci-etape {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	padding: 22px 0;
	border-bottom: 1px solid var(--pt-line);
}

.pt-merci-etape__num {
	font-family: var(--pt-font-title);
	font-size: 19px;
	line-height: 1.4;
	color: var(--pt-brown);
}

.pt-merci-etape__text {
	display: block;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--pt-ink-body);
}

/* La carte de commande — le seul endroit de la page où il y a des chiffres. */
.pt-merci-order {
	background: #fff;
	border: 1px solid var(--pt-line-strong);
	padding: 26px;
}

.pt-merci-order .pt-kicker {
	color: var(--pt-brown);
	margin-bottom: 18px;
}

.pt-merci-order__line {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14.5px;
	color: var(--pt-ink-body);
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--pt-line);
}

.pt-merci-order__meta {
	font-size: 13px;
	color: var(--pt-ink-muted);
}

.pt-merci-order__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	border-top: 1px solid var(--pt-line);
	padding-top: 18px;
	margin: 0 0 14px;
	font-family: var(--pt-font-title);
	font-size: 18px;
	color: var(--pt-ink);
}

.pt-merci-order__total span:last-child {
	font-size: 24px;
	color: var(--pt-brown);
}

.pt-merci-order__link {
	font-size: 13.5px;
	color: var(--pt-brown);
	text-decoration: none;
	border-bottom: 1px solid currentcolor;
}

.pt-merci-extra {
	background: var(--pt-cream-deep);
	border-top: 1px solid var(--pt-line);
	padding: 56px 0;
}

@media (max-width: 767px) {
	.pt-merci-hero {
		padding: 56px 0 48px;
	}

	.pt-merci-hero h1 {
		font-size: 30px;
	}

	.pt-merci-hero__lede {
		font-size: 17px;
	}

	.pt-merci-hero__actions .pt-btn {
		width: 100%;
	}

	.pt-merci-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.pt-merci-etape {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 10px;
		padding: 18px 0;
	}
}

/* ------------------------------------------------------------------ *
 * Le bandeau de fin d'offre — la seule chose au-dessus du hero.
 *
 * Brun sur crème : la charte réserve le brun au payant, et c'est bien
 * d'une offre qu'il parle. Il ne s'affiche que si une date est saisie
 * dans l'écran de la page de vente (`pt_landing_urgence()`).
 *
 * ⚠ Il ne colle PAS au défilement. Une page de vente porte déjà une
 * barre collante mobile qui répète le prix : deux bandes fixes sur un
 * écran de téléphone, c'est la moitié de la hauteur utile mangée.
 * ------------------------------------------------------------------ */
.pt-pdv-urgence {
	background: var(--pt-brown);
	color: var(--pt-cream);
}

.pt-pdv-urgence__inner {
	margin: 0 auto;
	padding: 12px var(--pt-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px 12px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
}

.pt-pdv-urgence strong {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Sous 400 px, « Tarif d'ouverture » et le décompte tiennent mal côte à
   côte : on les empile plutôt que de laisser la ligne déborder. Mesuré à
   320 px, le seul contrôle qui vaille. */
@media (max-width: 400px) {
	.pt-pdv-urgence__inner {
		flex-direction: column;
		gap: 2px;
	}
}

/* --- Bande de photos de terrain (template-parts/landing/bande-photos.php) -----
 * Ajoutée le 5 octobre 2026 : la page Bocaux ne montrait aucun geste. Deux ou
 * trois photos carrées côte à côte, même sur mobile (une seule colonne ferait
 * trois grands carrés à faire défiler pour une simple preuve visuelle). */

.pt-pdv-photos {
	padding: 8px 0 40px;
	background: var(--pt-cream);
}

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

.pt-pdv-photos__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.pt-pdv-photos__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pt-pdv-photos__item {
	margin: 0;
	border: var(--pt-border);
	background: var(--pt-card);
}

.pt-pdv-photos__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Des pages A4 (l'aperçu du classeur) : montrées entières, jamais recadrées.
   ⚠ Le ratio A4 est écrit, pas laissé à `auto` : `auto` efface celui que le
   navigateur tire des attributs width/height, et une image encore différée
   (loading=lazy) prenait alors 1 400 px de haut avant de charger. */
.pt-pdv-photos--pages .pt-pdv-photos__grid {
	max-width: 760px;
	margin: 0 auto;
}

.pt-pdv-photos--pages .pt-pdv-photos__item img {
	aspect-ratio: 210 / 297;
	object-fit: contain;
}

.pt-pdv-photos--pages .pt-pdv-photos__legende {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.pt-pdv-photos__legende {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--pt-ink-muted);
}

@media (max-width: 767px) {
	.pt-pdv-photos {
		padding-bottom: 28px;
	}

	.pt-pdv-photos__grid {
		gap: 4px;
	}
}

/* --- Classeur : les trois fermetures de bocal, dessinées (5 octobre 2026) ----
   Dans la colonne d'en-tête des prérequis, sous le paragraphe qui les nomme.
   Trois colonnes à toutes les largeurs : à 320 px, chaque dessin garde ~90 px. */
.pt-fermetures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.pt-fermeture {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 10px;
	border: var(--pt-border);
	background: var(--pt-card);
	text-align: center;
}

.pt-fermeture svg {
	width: 100%;
	max-width: 96px;
	height: auto;
	margin: 0 auto 4px;
	fill: none;
	stroke-linejoin: miter;
}

.pt-fermeture__verre { stroke: var(--pt-ink-muted); stroke-width: 2; }
.pt-fermeture__trait { stroke: var(--pt-ink-soft); stroke-width: 2; }
.pt-fermeture__capsule { stroke: var(--pt-primary); stroke-width: 4; }
.pt-fermeture__joint { stroke: var(--pt-brown); stroke-width: 4; }

.pt-fermeture__verdict {
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
}

.pt-fermeture--oui .pt-fermeture__verdict,
.pt-fermeture--marmite .pt-fermeture__verdict { color: var(--pt-primary); }
.pt-fermeture--non .pt-fermeture__verdict { color: var(--pt-brown); }
.pt-fermeture--oui { border-color: var(--pt-primary); }

.pt-fermeture__titre {
	font-size: 13px;
	line-height: 1.3;
	color: var(--pt-ink);
}

.pt-fermeture__texte {
	font-size: 12px;
	line-height: 1.45;
	color: var(--pt-ink-soft);
}