/**
 * Espace client et tunnel de commande.
 *
 * Le plugin pd-paniers rend « Mes paniers » sans mise en forme, volontairement.
 * C'est ici qu'on l'habille, avec le reste des pages transactionnelles.
 */

/* -------------------------------------------------------------------
 * Échelle des titres
 *
 * L'échelle de theme.json est celle de la maquette : des titres de section en
 * Berkshire, à 36-56 px, faits pour ouvrir une page d'accueil. Sur un compte ou
 * un tunnel de commande, ces mêmes balises servent à nommer un formulaire —
 * « Adresse de facturation », « Détails du compte ». À cette taille elles
 * écrasent le contenu qu'elles annoncent.
 *
 * On garde donc le Berkshire pour le titre de la page, en plus petit, et on
 * repasse les intitulés internes au sans-serif gras vert : c'est déjà ce que la
 * maquette fait de ses sous-titres.
 * ------------------------------------------------------------------- */

:is(
	.woocommerce-account,
	.woocommerce-cart,
	.woocommerce-checkout,
	.woocommerce-order-received
) main :is( h1, .wp-block-post-title ) {
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.15;
}

:is(
	.woocommerce-account,
	.woocommerce-cart,
	.woocommerce-checkout,
	.woocommerce-order-received
) main :is( h2, h3, h4 ) {
	font-family: var( --wp--preset--font-family--texte );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

/* -------------------------------------------------------------------
 * Adresses
 *
 * WooCommerce fait flotter le titre à gauche et le lien « Modifier » à droite —
 * mais sa règle vise un `h3`, alors que son gabarit rend un `h2` depuis
 * plusieurs versions. Seul le lien est donc encore flotté : il part seul à
 * droite, à la taille d'un titre.
 *
 * On remet les deux sur une ligne, calés à gauche, et le lien à une taille de
 * lien.
 * ------------------------------------------------------------------- */

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.2rem 0.9rem;
}

/*
 * WooCommerce pose un clearfix sur cet en-tête, pour son ancienne disposition
 * en flottants. En contexte flex, ces pseudo-éléments deviennent de vrais
 * éléments de la ligne : ils décalaient le titre d'un cran vers la droite.
 */
.woocommerce-account .addresses .title.woocommerce-Address-title::before,
.woocommerce-account .addresses .title.woocommerce-Address-title::after {
	content: none;
}

.woocommerce-account .woocommerce-Address-title h2 {
	margin: 0;
}

/*
 * Le `float: right` de WooCommerce reste déclaré — inutile de le contredire, il
 * n'a aucun effet sur un élément de conteneur flex.
 */
.woocommerce-account .woocommerce-Address-title .edit {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 400;
}

.woocommerce-account .woocommerce-Address address {
	margin-top: 0.6rem;
	font-style: normal;
}

/* -------------------------------------------------------------------
 * Abonnement
 * ------------------------------------------------------------------- */

.pd-subscription {
	padding: var( --wp--preset--spacing--40 );
	border: 1px solid rgba( 21, 83, 50, 0.16 );
	border-radius: 14px;
	background: var( --wp--preset--color--blanc );
}

/*
 * Exception à la règle ci-dessus : ce titre-là n'est pas un intitulé de
 * formulaire mais le nom du panier du client — « Petite Pousse ». Il garde le
 * Berkshire, en petit. Le sélecteur reprend `main` pour peser autant que la
 * règle générale, et passe grâce à sa position plus bas dans la feuille.
 */
main .pd-subscription h2 {
	margin-top: 0;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 400;
	font-size: var( --wp--preset--font-size--x-large );
	letter-spacing: 0;
}

.pd-subscription h3 {
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
}

.pd-subscription .description {
	color: #5d6657;
	font-size: var( --wp--preset--font-size--small );
}

/* -------------------------------------------------------------------
 * Abonnements terminés
 *
 * Repliés par défaut : ce qui intéresse le client, c'est le panier en cours.
 * ------------------------------------------------------------------- */

.pd-subscriptions-archive {
	margin-top: var( --wp--preset--spacing--50 );
	border-top: 1px solid rgba( 21, 83, 50, 0.16 );
	padding-top: var( --wp--preset--spacing--30 );
}

.pd-subscriptions-archive > summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.4rem 0;
	color: var( --wp--preset--color--vert-fonce );
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

/* Safari affiche encore son propre triangle sans cette règle. */
.pd-subscriptions-archive > summary::-webkit-details-marker {
	display: none;
}

.pd-subscriptions-archive > summary::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( -45deg );
	transition: transform 0.18s ease;
}

.pd-subscriptions-archive[open] > summary::before {
	transform: rotate( 45deg );
}

.pd-subscriptions-archive > summary:hover {
	text-decoration: underline;
}

.pd-subscriptions-archive > .pd-subscription {
	margin-top: var( --wp--preset--spacing--30 );
	background: var( --wp--preset--color--creme );
	border-color: transparent;
}

/* -------------------------------------------------------------------
 * Tableaux WooCommerce
 *
 * Panier, récapitulatif de commande, historique des commandes, adresses :
 * tous passent par ces deux classes. WooCommerce les rend à la taille du
 * corps de texte, celle d'un paragraphe qu'on lit en continu — alors qu'un
 * tableau se parcourt du regard, colonne par colonne. À cette taille les
 * lignes s'espacent, le tableau déborde en largeur sur mobile, et le total
 * se retrouve à un écran de son article.
 * ------------------------------------------------------------------- */

.woocommerce-table,
.shop_table {
	font-size: var( --wp--preset--font-size--small );
}