/*
 * Drache d'Avril — Pages du parcours d'achat (panier, commande).
 *
 * Pas de maquette : mise en forme dans le style du site, à partir de ses
 * composants. Fond quadrillé jaune des listings, titre en Intro Rust, et le
 * bloc Panier de WooCommerce rangé en deux panneaux blancs à ombre décalée,
 * comme les mentions et les packshots.
 *
 * Le bloc Panier est une interface React rendue dans le navigateur, avec ses
 * propres feuilles, parfois imprimées après celle-ci. Toutes les règles passent
 * donc par .commerce (la classe du <main>, cf. page-commerce.php) pour peser
 * plus que les siennes, sans !important.
 *
 * Seuils : 782 / 781 comme le reste du thème. Le bloc a aussi ses propres
 * paliers, posés en classes sur sa mise en page selon la largeur qu'IL occupe
 * (is-large, is-medium, is-small, is-mobile) : on s'appuie sur eux pour
 * empiler les panneaux, ce qui suit sa propre logique.
 */

/* -------------------------------------------------------------------------
 * Cadre de page
 * ------------------------------------------------------------------------- */
.commerce-scene {
	--qg-fond-color: var(--wp--preset--color--yellow, #ffffab);
	--qg-fond-opacity: 40%;
	--qg-grid-color: var(--wp--preset--color--orange, #fc4c02);
	--qg-grid-opacity: 12%;

	/* Le header est en position absolue : c'est à la page de réserver sa
	   hauteur, plus 32 comme le hero des listings. */
	padding-top: calc(var(--dda-header-height, 10.5rem) + var(--wp--preset--spacing--2-xl, 2rem));
}

/*
 * Bas de page : la réserve du nuage du footer, plus 80 d'air. footer.css pose
 * la réserve seule sur le dernier enfant du <main> avec !important ; on y
 * répond de même, une classe de plus pour passer devant. Sans ces 80, le nuage
 * venait toucher le bouton « Valider la commande ».
 */
.site-main > .commerce-scene.commerce-scene {
	padding-bottom: calc(var(--footer-cloud-height) + var(--wp--preset--spacing--6-xl, 5rem)) !important;
}

.commerce-inner {
	max-width: var(--wp--custom--layout--container--wide, 1280px);
	margin-inline: auto;
}

.commerce-titre {
	margin: 0 0 var(--wp--preset--spacing--3-xl, 2.5rem);
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: clamp(3rem, 6.667vw, 6rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--wp--custom--typography--headings--h1--letter-spacing, -2px);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/* Le bloc est réglé en alignwide : sa largeur, c'est le cadre qui la donne. */
.commerce .wp-block-woocommerce-cart {
	max-width: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Deux panneaux : articles, totaux
 *
 * Le bloc range ses colonnes en flex, 65 / 35 %, avec une marge à gauche des
 * totaux. On reprend la main en grille : une colonne souple pour les articles,
 * 400 au plus pour les totaux, 40 entre les deux.
 * ------------------------------------------------------------------------- */
.commerce .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	align-items: start;
	gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	margin: 0;
}

.commerce .wc-block-components-sidebar-layout > :first-child:empty {
	display: none;
}

.commerce .wc-block-cart__main,
.commerce .wc-block-cart__sidebar,
.commerce .wc-block-checkout__main,
.commerce .wc-block-checkout__sidebar {
	width: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--2-xl, 2rem);
	border: 1px solid rgb(27 28 80 / 0.1);
	border-radius: 1.5rem;
	background-color: var(--wp--preset--color--blanc, #fff);
	box-shadow: 0.375rem 0.375rem 0 0 var(--wp--preset--color--pink, #f8c9de);
}

/* Les totaux restent en vue pendant qu'on fait défiler une longue liste. */
.commerce .wc-block-cart__sidebar,
.commerce .wc-block-checkout__sidebar {
	position: sticky;
	top: var(--wp--preset--spacing--xl, 1.5rem);
}

/* Le bloc empile lui-même sous une certaine largeur ; on suit son palier. */
.commerce .wc-block-components-sidebar-layout.is-medium,
.commerce .wc-block-components-sidebar-layout.is-small,
.commerce .wc-block-components-sidebar-layout.is-mobile {
	grid-template-columns: minmax(0, 1fr);
}

.commerce .is-medium .wc-block-cart__sidebar,
.commerce .is-small .wc-block-cart__sidebar,
.commerce .is-mobile .wc-block-cart__sidebar,
.commerce .is-medium .wc-block-checkout__sidebar,
.commerce .is-small .wc-block-checkout__sidebar,
.commerce .is-mobile .wc-block-checkout__sidebar {
	position: static;
}

/* -------------------------------------------------------------------------
 * Liste des articles
 * ------------------------------------------------------------------------- */
.commerce .wc-block-cart-items {
	margin: 0;
	border: 0;
}

.commerce .wc-block-cart-items th,
.commerce .wc-block-cart-items td {
	border-color: rgb(27 28 80 / 0.1);
}

/* En-têtes « Produit » / « Total » et titre des totaux : une étiquette. */
.commerce .wc-block-cart-items__header,
.commerce .wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rose-04, #664d9a);
}

.commerce .wc-block-cart-items__header th {
	padding-top: 0;
}

.commerce .wc-block-cart-items__row {
	padding-block: var(--wp--preset--spacing--xl, 1.5rem);
}

.commerce .wc-block-cart-items__row td {
	padding-block: var(--wp--preset--spacing--xl, 1.5rem);
}

/* Vignette : le packshot de la carte produit, incliné, avec son ombre. */
.commerce .wc-block-cart-item__image img {
	rotate: -2deg;
	box-shadow: 0.25rem 0.25rem 0 0
		color-mix(in srgb, var(--wp--preset--color--rose-04, #664d9a) 40%, transparent);
}

.commerce .wc-block-cart-item__wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
}

.commerce .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.2;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.commerce .wc-block-components-product-name:hover,
.commerce .wc-block-components-product-name:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Prix unitaire, total de ligne, montants : le violet de marque, en Intro Rust. */
.commerce .wc-block-cart-item__prices,
.commerce .wc-block-cart-item__total,
.commerce .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	color: var(--wp--preset--color--violet, #7631ff);
}

.commerce .wc-block-cart-item__total {
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
}

/* Description courte sous le nom : discrète. */
.commerce .wc-block-components-product-metadata {
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	line-height: 1.5;
	color: #374151;
}

/*
 * Sélecteur de quantité : une pilule, comme les étiquettes du site.
 * 40 de haut, cible tactile confortable pour les boutons + et -.
 */
.commerce .wc-block-components-quantity-selector {
	width: 7.5rem;
	min-height: 2.5rem;
	border: 1px solid rgb(27 28 80 / 0.2);
	border-radius: 9999px;
	background-color: var(--wp--preset--color--blanc, #fff);
}

.commerce .wc-block-components-quantity-selector::after {
	/* Le bloc dessine un second contour par un pseudo-élément. */
	border: 0;
}

.commerce .wc-block-components-quantity-selector__input {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.commerce .wc-block-components-quantity-selector__button {
	min-width: 2.5rem;
	color: var(--wp--preset--color--violet, #7631ff);
}

.commerce .wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--rose-04, #664d9a);
}

/* -------------------------------------------------------------------------
 * Totaux
 * ------------------------------------------------------------------------- */
.commerce .wc-block-cart__totals-title {
	margin: 0 0 var(--wp--preset--spacing--md, 1rem);
	padding: 0;
}

.commerce .wc-block-components-totals-wrapper {
	border-color: rgb(27 28 80 / 0.1);
}

.commerce .wc-block-components-panel__button {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/* Total : libellé en étiquette, montant en grand. */
.commerce .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.commerce .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--2-xl, 2rem);
	letter-spacing: -1px;
}

/*
 * « Valider la commande » : le bouton du thème (button.css, qui l'ajoute à ses
 * sélecteurs), pleine largeur. Seule la typographie est posée ici : le bouton
 * de WooCommerce ne porte pas la fonte des titres d'office.
 */
.commerce .wc-block-cart__submit-container {
	padding-top: var(--wp--preset--spacing--md, 1rem);
}

.commerce .wc-block-cart__submit-button {
	width: 100%;
	min-height: 3.5rem;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
	background-color: var(--wp--preset--color--lilas, #e5b0fe);
}

/* -------------------------------------------------------------------------
 * Commande
 *
 * Les étapes (coordonnées, adresse, paiement…) gardent leurs titres, déjà en
 * Intro Rust par le thème. On reprend les champs : coins arrondis, liseré
 * léger, fond blanc, focus violet, comme le reste du site.
 * ------------------------------------------------------------------------- */
.commerce .wc-block-checkout__main .wc-block-components-checkout-step:first-child {
	margin-top: 0;
}

.commerce .wc-block-components-checkout-step__title {
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/*
 * Le bloc cible ses champs par .wc-block-components-form
 * .wc-block-components-text-input input[type=…] : trois classes et un
 * attribut. La première ligne en ajoute une, sans quoi le liseré sombre et les
 * coins carrés restaient.
 */
.commerce .wc-block-components-form .wc-block-components-text-input input[type],
.commerce .wc-block-components-text-input input,
.commerce .wc-block-components-text-input textarea,
.commerce .wc-blocks-components-select__select,
.commerce .wc-block-components-textarea,
.commerce .wc-block-components-totals-coupon__input input {
	border: 1px solid rgb(27 28 80 / 0.2);
	border-radius: 0.75rem;
	background-color: var(--wp--preset--color--blanc, #fff);
	color: var(--wp--preset--color--noir, #1f2937);
}

.commerce .wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: 0.75rem;
	background-color: transparent;
}

.commerce .wc-block-components-form .wc-block-components-text-input input[type]:focus,
.commerce .wc-block-components-text-input input:focus,
.commerce .wc-block-components-text-input textarea:focus,
.commerce .wc-blocks-components-select__select:focus,
.commerce .wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--violet, #7631ff);
	box-shadow: 0 0 0 1px var(--wp--preset--color--violet, #7631ff);
	outline: none;
}

/* Libellés flottants : le gris du fil d'ariane plutôt que le bleu du bloc. */
.commerce .wc-block-components-text-input label,
.commerce .wc-blocks-components-select__label {
	color: #374151;
}

.commerce .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-color: rgb(27 28 80 / 0.3);
	border-radius: 0.25rem;
}

.commerce .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--violet, #7631ff);
	background-color: var(--wp--preset--color--violet, #7631ff);
}

.commerce .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--blanc, #fff);
}

/* Liens (conditions générales, ajouter un appartement…) : violet de marque. */
.commerce .wc-block-checkout a,
.commerce .wc-block-components-address-form__address_2-toggle {
	color: var(--wp--preset--color--violet, #7631ff);
}

/* Résumé de la commande : titre en étiquette, comme « Total panier ».
   Première ligne : un niveau de plus que la règle du bloc (trois classes). */
.commerce .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text,
.commerce .wc-block-components-checkout-order-summary__title-text,
.commerce .wc-block-components-order-summary__button-text {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rose-04, #664d9a);
}

/* Le résumé a son propre cadre dans le bloc : le panneau en tient lieu. */
.commerce .wc-block-components-checkout-order-summary__content,
.commerce .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
}

.commerce .wc-block-components-order-summary-item__quantity {
	border-color: var(--wp--preset--color--blanc, #fff);
	background-color: var(--wp--preset--color--violet, #7631ff);
	color: var(--wp--preset--color--blanc, #fff);
}

.commerce .wc-block-components-order-summary-item__image img {
	rotate: -2deg;
	box-shadow: 0.25rem 0.25rem 0 0
		color-mix(in srgb, var(--wp--preset--color--rose-04, #664d9a) 40%, transparent);
}

/* « Commander » : bouton du thème (button.css), pleine largeur. */
.commerce .wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 3.5rem;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
	background-color: var(--wp--preset--color--lilas, #e5b0fe);
}

.commerce .wc-block-checkout__actions {
	padding-top: var(--wp--preset--spacing--md, 1rem);
}

/* -------------------------------------------------------------------------
 * Panier vide
 * ------------------------------------------------------------------------- */
.commerce .wp-block-woocommerce-empty-cart-block {
	padding: var(--wp--preset--spacing--3-xl, 2.5rem);
	border: 1px solid rgb(27 28 80 / 0.1);
	border-radius: 1.5rem;
	background-color: var(--wp--preset--color--blanc, #fff);
	box-shadow: 0.375rem 0.375rem 0 0 var(--wp--preset--color--pink, #f8c9de);
}

/* Contenu remplacé au rendu (inc/woocommerce.php) : message, lien, pushes. */
.commerce-vide {
	text-align: center;
}

.commerce-vide__titre {
	margin: 0 0 var(--wp--preset--spacing--md, 1rem);
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--3-xl, 2.5rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.commerce-vide__texte {
	max-width: 32rem;
	margin: 0 auto var(--wp--preset--spacing--2-xl, 2rem);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.4;
	color: var(--wp--preset--color--noir, #1f2937);
}

.commerce-vide__action {
	margin: 0;
}

.commerce-vide__action .wp-block-button__link {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
	background-color: var(--wp--preset--color--lilas, #e5b0fe);
}

/*
 * Deux catégories poussées, côte à côte. category-push.css remonte les
 * pushes impairs pour la section de l'accueil : sans objet ici, on l'annule.
 */
.commerce-vide__pushes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	margin-top: var(--wp--preset--spacing--5-xl, 4rem);
}

.commerce-vide__pushes > .category-push {
	--cp-w: min(420px, 38vw);

	margin: 0;
}

/* -------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.commerce-titre {
		font-size: 3rem;
		margin-bottom: var(--wp--preset--spacing--xl, 1.5rem);
	}

	.commerce .wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xl, 1.5rem);
	}

	.commerce .wc-block-cart__main,
	.commerce .wc-block-cart__sidebar,
	.commerce .wc-block-checkout__main,
	.commerce .wc-block-checkout__sidebar {
		position: static;
		padding: var(--wp--preset--spacing--xl, 1.5rem) var(--wp--preset--spacing--md, 1rem);
	}

	.commerce .wc-block-components-product-name {
		font-size: var(--wp--preset--font-size--md, 1rem);
	}

	/* Le nom et le total partagent une ligne : un écart entre les deux. */
	.commerce .wc-block-cart-items__row {
		column-gap: var(--wp--preset--spacing--md, 1rem);
	}

	.commerce-vide__titre {
		font-size: var(--wp--preset--font-size--2-xl, 2rem);
	}

	.commerce .wp-block-woocommerce-empty-cart-block {
		padding: var(--wp--preset--spacing--2-xl, 2rem) var(--wp--preset--spacing--md, 1rem);
	}

	/* Pushes empilés, à la largeur de ceux de l'accueil en mobile. */
	.commerce-vide__pushes {
		flex-direction: column;
		align-items: center;
		gap: var(--wp--style--block-gap, 1.5rem);
	}

	.commerce-vide__pushes > .category-push {
		--cp-w: min(420px, 82vw);
	}
}

/* -------------------------------------------------------------------------
 * Compte client
 *
 * Code court [woocommerce_my_account] : les gabarits CLASSIQUES de
 * WooCommerce (formulaire de connexion, navigation, tableau de bord,
 * commandes, adresses, détails du compte), stylés par woocommerce.css. On
 * reprend les mêmes ingrédients que le panier : panneaux blancs, champs
 * arrondis, boutons du thème (button.css, classe .button).
 * ------------------------------------------------------------------------- */

/* Connexion (visiteur) : un panneau resserré, pas toute la largeur. */
.commerce .woocommerce > h2,
.commerce .woocommerce-MyAccount-content h2,
.commerce .woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: 400;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.commerce .woocommerce > h2 {
	max-width: 36rem;
	margin: 0 0 var(--wp--preset--spacing--xl, 1.5rem);
	font-size: var(--wp--preset--font-size--2-xl, 2rem);
}

.commerce .woocommerce form.woocommerce-form-login,
.commerce .woocommerce form.woocommerce-form-register,
.commerce .woocommerce form.woocommerce-ResetPassword,
.commerce .woocommerce-MyAccount-navigation,
.commerce .woocommerce-MyAccount-content {
	margin: 0;
	padding: var(--wp--preset--spacing--2-xl, 2rem);
	border: 1px solid rgb(27 28 80 / 0.1);
	border-radius: 1.5rem;
	background-color: var(--wp--preset--color--blanc, #fff);
	box-shadow: 0.375rem 0.375rem 0 0 var(--wp--preset--color--pink, #f8c9de);
}

.commerce .woocommerce form.woocommerce-form-login,
.commerce .woocommerce form.woocommerce-form-register,
.commerce .woocommerce form.woocommerce-ResetPassword {
	max-width: 36rem;
}

/* Champs : comme ceux de la commande. Les sélecteurs reprennent la forme de
   ceux de woocommerce.css (.woocommerce form .form-row …) avec un niveau de
   plus. */
.commerce .woocommerce form .form-row .input-text,
.commerce .woocommerce form .form-row select,
.commerce .woocommerce form .form-row textarea {
	min-height: 3rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid rgb(27 28 80 / 0.2);
	border-radius: 0.75rem;
	background-color: var(--wp--preset--color--blanc, #fff);
	font-size: var(--wp--preset--font-size--md, 1rem);
	color: var(--wp--preset--color--noir, #1f2937);
}

.commerce .woocommerce form .form-row .input-text:focus,
.commerce .woocommerce form .form-row select:focus,
.commerce .woocommerce form .form-row textarea:focus {
	border-color: var(--wp--preset--color--violet, #7631ff);
	box-shadow: 0 0 0 1px var(--wp--preset--color--violet, #7631ff);
	outline: none;
}

.commerce .woocommerce form .form-row label {
	margin-bottom: var(--wp--preset--spacing--xxs, 0.25rem);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	letter-spacing: 0.02em;
	color: #374151;
}

.commerce .woocommerce form .form-row .required {
	color: var(--wp--preset--color--rouge-01, #c2181f);
	text-decoration: none;
}

/* L'œil du mot de passe : centré dans le champ arrondi. */
.commerce .woocommerce form .show-password-input {
	top: 50%;
	translate: 0 -50%;
}

.commerce .woocommerce input[type="checkbox"] {
	accent-color: var(--wp--preset--color--violet, #7631ff);
}

/* Boutons : le bouton du thème (button.css), aux couleurs par défaut. */
.commerce .woocommerce .button {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
	background-color: var(--wp--preset--color--lilas, #e5b0fe);
}

/* Connexion : bouton et « Se souvenir de moi » sur une ligne, avec de l'air. */
.commerce .woocommerce-form-login .form-row:last-of-type,
.commerce .woocommerce-form-login__rememberme {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--md, 1rem) var(--wp--preset--spacing--xl, 1.5rem);
}

.commerce .woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
}

/* WooCommerce écrit la case avant le bouton : le bouton reprend la tête. */
.commerce .woocommerce-form-login .woocommerce-form-login__rememberme {
	order: 2;
	margin: 0;
}

/* Liens du contenu et du formulaire de connexion : violet de marque. Pas la
   navigation du compte, qui a sa propre couleur (une règle plus large
   l'écrasait). */
.commerce .woocommerce-MyAccount-content a:not(.button),
.commerce .woocommerce-form-login a,
.commerce .woocommerce .lost_password a {
	color: var(--wp--preset--color--violet, #7631ff);
}

/*
 * Connecté : navigation à gauche, contenu à droite. woocommerce.css les fait
 * flotter (30 % / 68 %) ; une grille les aligne en haut et leur donne un
 * écart fixe. :has() ne vise que l'enveloppe qui contient la navigation, pas
 * celle du formulaire de connexion.
 */
.commerce .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--3-xl, 2.5rem);
}

.commerce .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.commerce .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	/* Les clearfix de woocommerce.css deviendraient des cellules de grille. */
	display: none;
}

.commerce .woocommerce-MyAccount-navigation,
.commerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* Navigation : une liste de pilules, l'entrée courante en lilas. */
.commerce .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs, 0.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.commerce .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
	transition: background-color 0.2s ease;
}

.commerce .woocommerce-MyAccount-navigation a:hover,
.commerce .woocommerce-MyAccount-navigation a:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--lilas, #e5b0fe) 40%, transparent);
}

.commerce .woocommerce-MyAccount-navigation .is-active a {
	background-color: var(--wp--preset--color--lilas, #e5b0fe);
}

.commerce .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--wp--preset--color--rose-04, #664d9a);
}

.commerce .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

.commerce .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

.commerce .woocommerce-MyAccount-content h2,
.commerce .woocommerce-MyAccount-content h3 {
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
}

/* Tableaux (commandes, téléchargements, détail d'une commande). */
.commerce .woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

.commerce .woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rose-04, #664d9a);
}

.commerce .woocommerce table.shop_table th,
.commerce .woocommerce table.shop_table td {
	padding: 0.875rem 0.5rem;
	border-color: rgb(27 28 80 / 0.1);
}

.commerce .woocommerce table.shop_table .button {
	padding: 0.5em 1em;
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
}

/* Adresses : deux cartes côte à côte, sans les flottants de woocommerce.css. */
.commerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--xl, 1.5rem);
}

.commerce .woocommerce-Addresses::before,
.commerce .woocommerce-Addresses::after {
	display: none;
}

.commerce .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: var(--wp--preset--spacing--xl, 1.5rem);
	border: 1px solid rgb(27 28 80 / 0.1);
	border-radius: 1rem;
}

.commerce .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
	margin-bottom: var(--wp--preset--spacing--md, 1rem);
}

.commerce .woocommerce-Address-title::before,
.commerce .woocommerce-Address-title::after {
	/* Clearfix de woocommerce.css : sans objet en flex. */
	display: none;
}

.commerce .woocommerce-Address address {
	font-style: normal;
	line-height: 1.5;
}

.commerce .woocommerce-Address-title h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
}

.commerce .woocommerce-Address-title .edit {
	float: none;
}

/* Messages de WooCommerce (« aucune commande », erreurs de connexion…). */
/*
 * Messages de WooCommerce (« Aucune commande n'a encore été passée »,
 * erreurs de connexion…) : un encart lilas pâle à coins arrondis, sans le
 * filet de couleur ni l'icône de woocommerce.css. Le bouton éventuel (« Parcourir
 * les produits ») reste le bouton du thème.
 */
.commerce .woocommerce-message,
.commerce .woocommerce-info,
.commerce .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md, 1rem);
	margin: 0 0 var(--wp--preset--spacing--xl, 1.5rem);
	padding: var(--wp--preset--spacing--xl, 1.5rem);
	border: 0;
	border-radius: 1rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--lilas, #e5b0fe) 25%, transparent);
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.commerce .woocommerce-error {
	background-color: var(--wp--preset--color--rouge-06, #fce6e4);
	color: var(--wp--preset--color--rouge-01, #c2181f);
}

.commerce .woocommerce-message::before,
.commerce .woocommerce-info::before,
.commerce .woocommerce-error::before,
.commerce .woocommerce-message::after,
.commerce .woocommerce-info::after {
	display: none;
}

.commerce .woocommerce-message .button,
.commerce .woocommerce-info .button {
	float: none;
	order: 2;
}

/* « Changement de mot de passe » : un sous-panneau, pas le cadre gris par
   défaut des groupes de champs. */
.commerce .woocommerce fieldset {
	margin: var(--wp--preset--spacing--xl, 1.5rem) 0;
	padding: var(--wp--preset--spacing--xl, 1.5rem);
	border: 1px solid rgb(27 28 80 / 0.1);
	border-radius: 1rem;
}

.commerce .woocommerce fieldset legend {
	padding: 0 var(--wp--preset--spacing--xs, 0.5rem);
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/* Aides sous les champs (« Indique comment votre nom apparaîtra… »). */
.commerce .woocommerce form .form-row em,
.commerce .woocommerce form .form-row + span em {
	display: block;
	margin-top: var(--wp--preset--spacing--xxs, 0.25rem);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	font-style: normal;
	color: #374151;
}

@media (max-width: 781px) {
	.commerce .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xl, 1.5rem);
	}

	.commerce .woocommerce form.woocommerce-form-login,
	.commerce .woocommerce form.woocommerce-form-register,
	.commerce .woocommerce form.woocommerce-ResetPassword,
	.commerce .woocommerce-MyAccount-navigation,
	.commerce .woocommerce-MyAccount-content {
		padding: var(--wp--preset--spacing--xl, 1.5rem) var(--wp--preset--spacing--md, 1rem);
	}

	/* La navigation passe en rangée de pilules qui retournent à la ligne. */
	.commerce .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.commerce .woocommerce-MyAccount-navigation a {
		padding: 0.5rem 0.75rem;
		font-size: var(--wp--preset--font-size--sm, 0.75rem);
	}

	/* Tableaux : woocommerce.css les passe en blocs empilés sous 768. */
	.commerce .woocommerce table.shop_table_responsive tr {
		padding-block: var(--wp--preset--spacing--xs, 0.5rem);
	}
}