/* WooCommerce — le parcours d'achat (handoff v4, §5.11, écrans 6a → 6f).
   Enfilée en priorité 9999 : voir pt_assets_woo(). Après nous viennent encore
   les feuilles des passerelles de paiement — Stripe et DEUX extensions PayPal.

   ⚠ Deux familles de sélecteurs, et il ne faut pas les confondre :
     · `.woocommerce …`      → les gabarits PHP (boutique, produit, compte) ;
     · `.wc-block-…`         → les blocs React (panier). Il n'y a AUCUN gabarit
       PHP derrière : chercher `.cart_item` ici revient à mesurer sa propre
       hypothèse — le panier de ce site rend `.wc-block-cart-items__row`. */

/* --- Le cadre commun ----------------------------------------------------- */

/* ⚠ La même largeur que tout le site, et pas 1040 px.

   Les maquettes du commerce posent leur contenu dans `max-width: 1040px` — mais
   à l'INTÉRIEUR d'un cadre de 1160 px déjà creusé de 60 px de padding. Ce 1040
   est donc la largeur de contenu du cadre, pas une contrainte de plus. Lu comme
   un `max-width` extérieur, il rétrécissait la colonne à 928 px et déplaçait
   son bord gauche de 116 px : en passant de « Mon espace » à « Mon compte », la
   page se décalait. Mesuré le 4 août 2026, après une remarque de Loïc.

   On reprend donc le calcul de `.pt-wrap` — c'est le même conteneur, il ne peut
   pas avoir deux largeurs selon l'écran. */
.pt-commerce__main {
	max-width: calc(var(--pt-wrap) + var(--pt-gutter) * 2);
	margin: 0 auto;
	padding: 64px var(--pt-gutter) 96px;
}

.pt-commerce__title {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.1;
	color: var(--pt-ink);
	margin: 0;
}

.pt-commerce__mention {
	font-size: 13px;
	color: var(--pt-ink-muted);
	margin: 8px 0 0;
}

/* ⚠ Le conteneur de notifications de WooCommerce est le premier enfant de
   `.woocommerce`. Dans une grille, il prend donc la PREMIÈRE case — le rail de
   « mon compte » passait en colonne 2 et le contenu retombait en ligne 2,
   large de 230 px. Et on ne peut pas le masquer sur `:empty` : il contient un
   retour à la ligne, donc il n'est pas vide au sens de CSS. Le faire courir sur
   toute la largeur règle les deux cas, plein ou vide.
   Même famille que les contrôles qui reproduisent l'erreur qu'ils vérifient :
   `:empty` teste ce qu'on croit, pas ce qui est. */
.pt-commerce .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.pt-commerce .woocommerce-message,
.pt-commerce .woocommerce-info,
.pt-commerce .woocommerce-error {
	background: var(--pt-cream-deep);
	border-top: 3px solid var(--pt-primary);
	border-radius: var(--pt-radius);
	color: var(--pt-ink-body);
	font-family: var(--pt-font-body);
	font-size: 14px;
}

.pt-commerce .woocommerce-error {
	border-top-color: var(--pt-brown);
}

/* --- Prix : 47 € barré 67 €, partout ------------------------------------- */

/* ⚠ `#pt-main` n'est pas une coquetterie : WooCommerce vise ses prix par
   `.woocommerce ul.products li.product .price` — quatre classes et deux
   éléments. Aucun empilement de nos classes ne passe devant ; un id, si.
   C'est la règle du projet, apprise trois fois sur LearnDash : quand la cible
   est atteignable par un id, l'utiliser tout de suite. */
#pt-main .price,
#pt-main .pt-shop-card__price {
	font-family: var(--pt-font-title);
	color: var(--pt-brown);
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

/* WooCommerce écrit le prix barré AVANT le prix courant. La maquette montre
   l'inverse — 47 € d'abord, 67 € barré ensuite. On ne réécrit pas le balisage
   pour ça : on le réordonne. */
#pt-main .price ins,
#pt-main .pt-shop-card__price ins,
#pt-main .price > .amount {
	order: 1;
	font-size: 38px;
	line-height: 1;
	text-decoration: none;
	background: none;
	color: var(--pt-brown);
}

#pt-main .price del,
#pt-main .pt-shop-card__price del {
	order: 2;
	font-family: var(--pt-font-body);
	font-size: 15px;
	color: var(--pt-strike);
	text-decoration: line-through;
	opacity: 1;
}

#pt-main .price .pt-price__note,
#pt-main .pt-shop-card__price .pt-price__note {
	order: 3;
}

.pt-price__note {
	font-family: var(--pt-font-body);
	font-size: 12.5px;
	color: var(--pt-ink-muted);
}

/* --- 6a. La boutique : une porte, pas un catalogue ------------------------ */

.pt-shop__intro {
	margin-bottom: 40px;
}

.pt-shop__intro .pt-kicker {
	color: var(--pt-brown);
	margin-bottom: 20px;
}

.pt-shop__title {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.08;
	letter-spacing: -0.5px;
	color: var(--pt-ink);
	margin: 0 0 18px;
	max-width: 900px;
}

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

/* La grille de WooCommerce n'a plus lieu d'être : un seul objet, pleine largeur.
   ⚠ `.woocommerce ul.products li.product` fait flotter chaque vignette à 22 % de
   large. Sans un sélecteur qui gagne, la carte flottait et le pied de page
   remontait à côté d'elle — c'est exactement ce qu'a montré la capture du
   premier déploiement. */
#pt-main ul.products {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

#pt-main ul.products::before,
#pt-main ul.products::after {
	content: none;
}

#pt-main ul.products li.product,
#pt-main li.pt-shop-card {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	border: 1px solid var(--pt-line-strong);
	background: #fff;
	margin: 0 0 28px;
	padding: 0;
	width: auto;
	float: none;
	clear: both;
}

#pt-main .pt-shop-card__media {
	position: relative;
	min-height: 400px;
	overflow: hidden;
}

/* `.woocommerce ul.products li.product a img` impose `height: auto` : sans id,
   la photo gardait sa hauteur naturelle et laissait un vide sous elle. */
#pt-main .pt-shop-card__media a,
#pt-main .pt-shop-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	box-shadow: none;
}

.pt-shop-card__flag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: var(--pt-brown);
	color: #fff;
	font-family: var(--pt-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 9px 16px;
}

.pt-shop-card__body {
	padding: 44px;
}

#pt-main .pt-shop-card__title {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.15;
	margin: 16px 0 0;
	padding: 0;
}

.pt-shop-card__title a {
	color: var(--pt-ink);
	text-decoration: none;
}

.pt-shop-card__promise {
	font-size: 18px;
	margin: 14px 0 0;
}

/* ⚠ WooCommerce pose un `::before { content:" "; display:table }` de nettoyage
   de flottants sur ses listes. Dans une grille, ce pseudo-élément devient une
   CASE : les quatre faits se retrouvaient décalés d'une position, le premier
   en haut à droite au lieu du haut à gauche. Un nettoyage de flottants dans une
   grille ne nettoie rien — il ajoute un élément. */
#pt-main .pt-shop-card__facts::before,
#pt-main .pt-shop-card__facts::after {
	content: none;
}

#pt-main .pt-shop-card__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 28px;
	list-style: none;
	margin: 26px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--pt-line);
	font-size: 13.5px;
	line-height: 2;
	color: var(--pt-ink-soft);
}

.pt-shop-card__price {
	margin: 22px 0 0;
}

.pt-shop-card__actions {
	display: flex;
	gap: 12px;
	margin: 22px 0 0;
	flex-wrap: wrap;
}

/* `.woocommerce a.button` repeint tous les boutons en gris #ebe9eb à coins
   arrondis. Les nôtres passent par l'id ; le lot est traité ici une fois pour
   tous les écrans, plutôt qu'une règle par symptôme. */
#pt-main .pt-shop-card__actions .pt-btn,
#pt-main .pt-shop-card__actions .button {
	padding: 16px 24px;
	font-size: 14px;
	border-radius: var(--pt-radius);
	line-height: 1.2;
	white-space: nowrap;
}

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

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

#pt-main .pt-btn--ghost-paid {
	background: transparent;
	color: var(--pt-brown);
	border: 1px solid var(--pt-brown);
}

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

#pt-main .pt-btn--ghost-lite {
	background: transparent;
	color: var(--pt-primary-lite);
	border: 1px solid var(--pt-primary-lite);
}

.pt-shop-card__mention {
	font-size: 12px;
	color: var(--pt-ink-muted);
	margin: 14px 0 0;
	max-width: 420px;
}

/* WooCommerce ajoute « Voir le panier » après un ajax : il n'a rien d'un bouton. */
.pt-shop-card .added_to_cart {
	display: inline-block;
	align-self: center;
	font-size: 12.5px;
	color: var(--pt-brown);
	border-bottom: 1px solid currentcolor;
	text-decoration: none;
}

/* --- 6b. La fiche produit ------------------------------------------------ */

/* Le bandeau d'achat sort de la colonne de lecture ; la description y reste.
   C'est tout l'objet de cet écran, et ça ne se fait pas au CSS seul : le
   gabarit `woocommerce.php` a d'abord dû remplacer celui de l'article. */
.single-product .pt-commerce__main {
	max-width: none;
	padding: 0;
}

/* La bande d'achat : deux colonnes sur le fond sable clair, par une grille —
   pas par les flottants de WooCommerce, qui décideraient à notre place.
   ⚠ Une seule déclaration pour `div.product` : la refaire plus bas dans la
   feuille (au lieu de compléter celle-ci) est le piège qui a laissé une vieille
   règle `display` imposer sa mise en page sur le hub, sans erreur ni signal. */
.single-product div.product {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: start;
	background: var(--pt-band);
	padding: 56px var(--pt-gutter);
	margin: 0;
}

.single-product div.product::before,
.single-product div.product::after {
	content: none;
}

/* `.woocommerce div.product div.images` et `.summary` flottent à 48 %. */
#pt-main div.product div.images,
#pt-main div.product .summary,
#pt-main .woocommerce-product-gallery {
	float: none;
	width: auto;
	margin: 0;
}

/* La description sort de la bande : elle reprend la colonne de lecture, en
   pleine largeur d'écran sur le fond crème. */
.single-product .pt-product-desc {
	grid-column: 1 / -1;
	background: var(--pt-cream);
	margin: 56px calc(var(--pt-gutter) * -1) calc(-56px);
	padding: 64px var(--pt-gutter);
}

.single-product .pt-product-desc .pt-prose {
	max-width: var(--pt-measure);
	margin: 0 auto;
}

.single-product .woocommerce-product-gallery img {
	border: 1px solid var(--pt-line-strong);
	display: block;
	width: 100%;
	height: auto;
}

.single-product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.single-product .flex-control-thumbs li {
	margin: 0;
	width: auto;
	float: none;
}

.single-product .product_title {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.1;
	color: var(--pt-ink);
	margin: 10px 0 0;
}

.single-product .woocommerce-product-details__short-description {
	font-family: var(--pt-font-title);
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: var(--pt-ink-soft);
	margin: 16px 0 0;
}

/* La carte d'achat : prix, bouton, garanties. Ouverte et fermée par
   pt_woo_buy_open() / pt_woo_buy_close(), pas par une surcharge de gabarit. */
.pt-buy {
	background: var(--pt-cream);
	border: 1px solid var(--pt-line-strong);
	padding: 26px;
	margin-top: 26px;
}

.pt-buy .price {
	margin: 0;
}

.pt-buy .price ins,
.pt-buy .price > .amount {
	font-size: 40px;
}

.pt-buy__terms {
	font-size: 13px;
	color: var(--pt-ink-soft);
	margin: 10px 0 20px;
}

.pt-buy form.cart {
	margin: 0;
	display: block;
}

.pt-buy .quantity {
	display: none; /* on n'achète pas deux fois le même accès */
}

/* ⚠ Le bouton d'achat est sorti VIOLET (#7f54b3, la couleur de WooCommerce) au
   premier déploiement : l'extension le vise par
   `.woocommerce button.button.alt` — trois classes et un élément. Nos deux
   classes perdaient. L'id tranche, et une seule fois pour tous les boutons
   d'achat de la fiche produit. */
#pt-main .pt-buy button.single_add_to_cart_button,
#pt-main .pt-buy .button.alt {
	display: block;
	width: 100%;
	background: var(--pt-brown);
	color: #fff;
	font-family: var(--pt-font-body);
	font-size: 15px;
	font-weight: 600;
	padding: 17px 22px;
	border: 0;
	border-radius: var(--pt-radius);
	transition: background var(--pt-transition-button);
}

#pt-main .pt-buy button.single_add_to_cart_button:hover,
#pt-main .pt-buy .button.alt:hover {
	background: var(--pt-brown-hover);
	color: #fff;
}

.pt-buy__promises {
	list-style: none;
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--pt-line);
	font-size: 13px;
	line-height: 2;
	color: var(--pt-ink-soft);
}

.pt-buy__promises li::before {
	content: "✓";
	color: var(--pt-primary);
	margin-right: 10px;
}

/* La description reprend la colonne de lecture : c'est du texte, il se lit. */
.single-product .woocommerce-tabs,
.single-product .product_meta {
	display: none;
}

/* --- 6c / 6d. Le panier — des blocs React, aucun PHP à surcharger --------- */

.woocommerce-cart .pt-commerce__main {
	padding-top: 56px;
}

.woocommerce-cart .wp-block-woocommerce-cart {
	margin: 0;
}

.woocommerce-cart .wc-block-cart {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 40px;
	align-items: start;
	margin-top: 32px;
}

.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main,
.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
	width: auto;
	max-width: none;
	padding: 0;
	flex: none;
}

.woocommerce-cart .wc-block-cart-items {
	border-top: 1px solid var(--pt-line-strong);
}

.woocommerce-cart .wc-block-cart-items__header {
	display: none; /* trois en-têtes de colonne pour une ligne : du chrome */
}

.woocommerce-cart .wc-block-cart-items__row {
	border-bottom: 1px solid var(--pt-line);
	padding: 24px 0;
}

.woocommerce-cart .wc-block-cart-item__image img {
	width: 120px;
	max-width: none;
	border: 1px solid var(--pt-line);
}

.woocommerce-cart .wc-block-components-product-name {
	font-family: var(--pt-font-title);
	font-size: 21px;
	line-height: 1.2;
	color: var(--pt-ink);
	text-decoration: none;
}

.woocommerce-cart .wc-block-components-product-metadata {
	font-size: 13.5px;
	color: var(--pt-ink-soft);
}

/* Pas de sélecteur de quantité : un accès s'achète une fois. Le champ est
   retiré du parcours, pas seulement masqué — `visibility` le laisserait
   atteignable au clavier. */
.woocommerce-cart .wc-block-components-quantity-selector {
	display: none;
}

.woocommerce-cart .wc-block-cart-item__quantity::before {
	content: "Quantité : 1 accès";
	display: block;
	font-size: 12px;
	color: var(--pt-ink-muted);
	margin-bottom: 6px;
}

.woocommerce-cart .wc-block-cart-item__remove-link {
	font-size: 12px;
	color: var(--pt-brown);
	text-decoration: underline;
}

/* Le prix unitaire fait doublon avec le total de ligne : à quantité toujours
   égale à 1, c'est deux fois le même chiffre à 40 px l'un de l'autre. On garde
   celui de droite, qui est aligné sur la colonne des montants. */
.woocommerce-cart .wc-block-cart-item__prices,
.woocommerce-cart .wc-block-components-sale-badge {
	display: none;
}

.woocommerce-cart .wc-block-components-product-price {
	font-family: var(--pt-font-title);
	font-size: 22px;
	color: var(--pt-brown);
}

.woocommerce-cart .wc-block-components-product-price del {
	font-family: var(--pt-font-body);
	font-size: 12.5px;
	color: var(--pt-strike);
}

/* Le récapitulatif */
.woocommerce-cart .wc-block-components-sidebar {
	background: #fff;
	border: 1px solid var(--pt-line-strong);
	padding: 30px;
}

.woocommerce-cart .wc-block-cart__totals-title {
	font-family: var(--pt-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pt-primary);
}

.woocommerce-cart .wc-block-components-totals-item__label {
	font-size: 14px;
	color: var(--pt-ink-soft);
}

.woocommerce-cart .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--pt-line);
	font-family: var(--pt-font-title);
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--pt-font-title);
	font-size: 22px;
	color: var(--pt-ink);
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--pt-font-title);
	font-size: 28px;
	color: var(--pt-brown);
}

/* ⚠ Le défaut mesuré le 2 août : fond rgb(50,55,60) sur texte rgb(43,54,48),
   soit 1,1 : 1 de contraste — un bouton illisible, valeurs par défaut du bloc.
   Il faut viser l'élément ET son texte : la couleur du libellé est posée par
   une règle distincte, c'est ce qui donnait un bouton brun au texte gris. */
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-components-checkout-button {
	background: var(--pt-brown);
	color: #fff;
	border: 0;
	border-radius: var(--pt-radius);
	font-family: var(--pt-font-body);
	font-size: 15px;
	font-weight: 600;
	padding: 18px 24px;
	width: 100%;
	box-shadow: none;
}

.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-components-checkout-button:hover {
	background: var(--pt-brown-hover);
	color: #fff;
}

/* 6d — le panier vide est un autre écran */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	padding: 8px 0 0;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.15;
	color: var(--pt-ink);
	text-align: left;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-heading {
	text-align: left;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator {
	display: none;
}

/* --- 6e. Connexion ------------------------------------------------------- */

.pt-login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--pt-line-strong);
	max-width: 940px;
	margin: 24px auto 0;
}

.pt-login__form {
	background: #fff;
	padding: 44px 40px;
}

/* ⚠ WooCommerce entoure `form.login` d'un cadre gris à coins arrondis et pose
   son propre padding : au premier déploiement, un second cadre apparaissait
   DANS le nôtre. Et ses `.form-row` flottent — « Se souvenir de moi » sortait
   du cadre par la droite. Les deux se règlent ici, au niveau de l'id. */
#pt-main .pt-login form.login {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

#pt-main .pt-login .form-row {
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 20px;
}

#pt-main .pt-login__aside {
	float: none;
	width: 100%;
	clear: both;
}

#pt-main .pt-login__aside label {
	float: none;
	width: auto;
}

.pt-login__title {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 30px;
	color: var(--pt-ink);
	margin: 14px 0 28px;
}

.pt-login label {
	display: block;
	font-family: var(--pt-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pt-ink-soft);
	margin-bottom: 8px;
}

.pt-login input[type="text"],
.pt-login input[type="password"] {
	width: 100%;
	background: var(--pt-cream);
	border: 1px solid var(--pt-line-strong);
	border-radius: var(--pt-radius);
	padding: 14px;
	font-family: var(--pt-font-body);
	font-size: 15px;
	color: var(--pt-ink);
}

.pt-login .form-row {
	margin: 0 0 20px;
}

.pt-login__submit {
	margin: 26px 0 16px;
}

.pt-login__submit .pt-btn {
	width: 100%;
	padding: 16px 22px;
	font-size: 15px;
}

.pt-login__aside {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	font-size: 13px;
	color: var(--pt-ink-soft);
}

.pt-login__aside label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pt-ink-soft);
	margin: 0;
}

.pt-login__aside a {
	color: var(--pt-brown);
	border-bottom: 1px solid currentcolor;
	text-decoration: none;
}

.pt-login__pitch {
	background: var(--pt-night);
	padding: 44px 40px;
}

.pt-login__pitch-title {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.15;
	color: var(--pt-on-night);
	margin: 14px 0 18px;
}

.pt-login__pitch-text {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--pt-on-night-body);
	margin: 0;
}

.pt-login__offer {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 28px;
	padding-top: 22px;
}

.pt-login__offer-title {
	font-size: 14px;
	color: var(--pt-on-night-body);
	margin: 0 0 10px;
}

.pt-login__offer-price {
	font-family: var(--pt-font-title);
	font-size: 26px;
	color: var(--pt-sand);
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 20px;
}

.pt-login__offer-price del {
	font-family: var(--pt-font-body);
	font-size: 13px;
	color: var(--pt-on-night-muted);
}

.pt-login__offer-price ins {
	text-decoration: none;
	background: none;
	color: var(--pt-sand);
}

.pt-login__offer .pt-btn {
	width: 100%;
	padding: 15px 22px;
}

/* --- 6f. Compte et factures ---------------------------------------------- */

.pt-account__head {
	margin-bottom: 36px;
}

.pt-account__head .pt-commerce__title {
	font-size: 34px;
	margin: 12px 0 12px;
}

.pt-account__lede {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--pt-ink-soft);
	max-width: 620px;
	margin: 0;
}

/* `.woocommerce-account .woocommerce-MyAccount-navigation` flotte à 30 % et le
   contenu à 68 % : la grille ci-dessous ne mordrait pas sans l'id. */
/* ⚠ Placement EXPLICITE, et pas au flux : mesuré le 2 août, le rail se plaçait
   en colonne 2 et le contenu en colonne 1 alors que l'ordre du balisage est
   l'inverse (relevé par `_diag-compte.mjs` : deux enfants, `order: 0` tous les
   deux). Plutôt que de chercher qui inverse le flux, on nomme les cases : une
   règle qui ne peut pas entrer en conflit n'a pas besoin de gagner. */
#pt-main .woocommerce-MyAccount-navigation {
	width: auto;
	float: none;
	grid-column: 1;
	grid-row: 1;
}

#pt-main .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	grid-column: 2;
	grid-row: 1;
}

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 40px;
	align-items: start;
}

/* La connexion n'a pas de rail : elle n'est pas dans cette grille. */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
}

.pt-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-account-nav li {
	border-bottom: 1px solid var(--pt-line);
}

.pt-account-nav li:first-child {
	border-top: 1px solid var(--pt-line);
}

.pt-account-nav a {
	display: block;
	padding: 15px 0;
	font-size: 14.5px;
	color: var(--pt-ink-body);
	text-decoration: none;
}

.pt-account-nav .is-active a {
	color: var(--pt-brown);
	font-weight: 600;
}

.pt-account-nav__espace {
	background: var(--pt-night);
	padding: 22px;
	margin-top: 32px;
}

.pt-account-nav__espace p {
	color: var(--pt-on-night);
	font-family: var(--pt-font-title);
	font-size: 17px;
	line-height: 1.3;
	margin: 10px 0 18px;
}

.pt-account-nav__espace .pt-kicker {
	margin: 0;
}

.pt-account-nav__espace .pt-btn {
	width: 100%;
}

.pt-account-card {
	background: #fff;
	border: 1px solid var(--pt-line-strong);
	padding: 26px;
}

.pt-account-card + .pt-account-card,
.pt-account-pair {
	margin-top: 24px;
}

.pt-account-orders {
	padding: 0;
}

.pt-account-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 22px 26px;
}

.pt-account-card__head h2 {
	font-family: var(--pt-font-title);
	font-weight: 400;
	font-size: 22px;
	color: var(--pt-ink);
	margin: 0;
}

.pt-account-card__count {
	font-size: 12.5px;
	color: var(--pt-ink-muted);
}

.pt-account-orders__head,
.pt-account-orders__row {
	display: grid;
	grid-template-columns: 1.6fr 0.9fr 0.7fr 0.9fr;
	gap: 16px;
	align-items: center;
	padding: 14px 26px;
}

.pt-account-orders__head {
	background: #f6f2e8;
	font-family: var(--pt-font-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pt-ink-soft);
}

.pt-account-orders__row {
	border-top: 1px solid var(--pt-line);
	font-size: 14px;
	color: var(--pt-ink-body);
	padding-top: 20px;
	padding-bottom: 20px;
}

.pt-account-orders__what strong {
	display: block;
	font-weight: 400;
	font-size: 15px;
	color: var(--pt-ink);
}

.pt-account-orders__what em {
	display: block;
	font-style: normal;
	font-size: 11.5px;
	color: var(--pt-ink-muted);
	margin-top: 4px;
}

.pt-account-orders__link {
	text-align: right;
}

.pt-account-orders__link a,
.pt-account-card__edit {
	color: var(--pt-brown);
	font-size: 13.5px;
	text-decoration: none;
	border-bottom: 1px solid currentcolor;
}

.pt-account-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.pt-account-pair .pt-account-card {
	margin-top: 0;
}

.pt-account-pair address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--pt-ink-body);
	margin: 14px 0 18px;
}

.pt-account-mail {
	font-size: 14.5px;
	color: var(--pt-ink-body);
	margin: 14px 0 4px;
}

.pt-account-dots {
	color: var(--pt-ink-muted);
	letter-spacing: 2px;
	margin: 0 0 18px;
}

.pt-account-card__edit {
	display: inline-block;
}

.pt-account-empty {
	font-size: 14px;
	color: var(--pt-ink-muted);
	padding: 0 26px 22px;
}

/* Les formulaires de « mon compte » (adresse, mot de passe) héritent du même
   habillage que la connexion : ce sont les mêmes champs. */
.woocommerce-account .woocommerce-MyAccount-content form .input-text,
.woocommerce-account .woocommerce-MyAccount-content form select {
	width: 100%;
	background: var(--pt-cream);
	border: 1px solid var(--pt-line-strong);
	border-radius: var(--pt-radius);
	padding: 13px;
	font-family: var(--pt-font-body);
	font-size: 15px;
}

.woocommerce-account .woocommerce-MyAccount-content .button {
	background: var(--pt-brown);
	color: #fff;
	border-radius: var(--pt-radius);
	font-family: var(--pt-font-body);
	font-weight: 600;
	padding: 15px 24px;
}

/* --- 768 px : une colonne ------------------------------------------------ */

@media (max-width: 767px) {
	.pt-commerce__main {
		padding: 36px var(--pt-gutter) 64px;
	}

	.pt-shop__title {
		font-size: 30px;
	}

	/* ⚠ Monter la spécificité d'une règle, c'est aussi monter celle de son
	   contre-pied : une media query n'a AUCUN poids particulier dans la cascade.
	   Les règles de bureau ci-dessus portent `#pt-main` — leur version mobile
	   doit le porter aussi, sinon la grille à deux colonnes survit à 390 px.
	   C'est la faute qui a sorti une page à 13 852 px de haut le 1er août. */
	#pt-main ul.products li.product,
	#pt-main li.pt-shop-card,
	#pt-main div.product,
	.single-product div.product,
	.woocommerce-cart .wc-block-cart,
	.pt-login,
	.woocommerce-account .woocommerce,
	.pt-account-pair,
	.pt-account-orders__head,
	.pt-account-orders__row {
		grid-template-columns: 1fr;
	}

	#pt-main .pt-shop-card__media {
		min-height: 240px;
	}

	.pt-shop-card__body {
		padding: 26px 20px;
	}

	.pt-shop-card__facts {
		grid-template-columns: 1fr;
	}

	.single-product div.product {
		padding: 32px var(--pt-gutter);
		gap: 28px;
	}

	.single-product .product_title {
		font-size: 30px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: auto;
	}

	/* ⚠ Et le contre-pied du PLACEMENT, pas seulement celui des colonnes.
	   Passer la grille à `1fr` ne suffit pas : le contenu porte
	   `grid-column: 2` sous un id, donc il se plaçait dans une DEUXIÈME colonne
	   implicite — la page sortait à 503 px de large sur un écran de 390, et le
	   tableau des commandes partait à droite de l'écran. Mesuré le 4 août 2026.

	   C'est le piège déjà écrit vingt lignes plus haut, un cran plus loin : une
	   media query n'a aucun poids dans la cascade, et il faut défaire CHAQUE
	   propriété qu'on a posée, pas seulement celle à laquelle on pense. */
	#pt-main .woocommerce-MyAccount-navigation,
	#pt-main .woocommerce-MyAccount-content {
		grid-column: 1;
	}

	#pt-main .woocommerce-MyAccount-navigation {
		grid-row: 1;
	}

	#pt-main .woocommerce-MyAccount-content {
		grid-row: 2;
	}

	/* L'en-tête de colonnes n'a plus de colonnes à nommer. */
	.pt-account-orders__head {
		display: none;
	}

	.pt-account-orders__row {
		gap: 6px;
	}
}