/**
 * Boutique : fiche produit, listes de produits, messages.
 * Chargé uniquement sur les pages WooCommerce.
 *
 * Sommaire
 * 1. Cadre et messages
 * 2. Fiche produit : barre du haut
 * 3. Fiche produit : galerie
 * 4. Fiche produit : résumé, options, quantité, ajout au panier
 * 5. Accessoires compatibles
 * 6. Fenêtres d'information
 * 7. Onglets
 * 8. Listes de produits
 * 9. Panier et commande (blocs WooCommerce)
 * 10. Compte client et formulaires WooCommerce
 */

/* 1. Cadre et messages --------------------------------------------------- */

.shop {
	padding-bottom: 60px;
}

.woocommerce-notices-wrapper:not(:empty) {
	padding-top: 24px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0 0 16px;
	padding: 14px 20px;
	border-left: 4px solid var(--c-ink);
	background: var(--c-mist);
	font-size: 16px;
	line-height: 1.5;
	line-height: round(1.5em, 1px);
	list-style: none;
}

.woocommerce-error {
	border-left-color: var(--c-red);
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	margin-left: auto;
}

.button,
button.button,
a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 10px 28px;
	border: 2px solid var(--c-red);
	border-radius: var(--wp--custom--radius--button);
	background: var(--c-white);
	color: var(--c-black);
	font-size: 14px;
	/* 18 px et non 17 : avec une hauteur de ligne impaire, le texte se pose un pixel trop haut. */
	line-height: 18px;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.button:hover,
button.button:hover,
a.button:hover {
	background: var(--c-red);
	color: var(--c-white);
}

.button.disabled,
.button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* 2. Fiche produit : barre du haut --------------------------------------- */

.product-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 24px;
	grid-column: 1 / -1;
	min-height: 30px;
	margin-bottom: 32px;
	font-size: 13px;
	line-height: 1.5;
	line-height: round(1.5em, 1px);
	letter-spacing: 0;
}

.product-topbar__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 0;
}

.product-topbar__meta a {
	text-decoration: none;
}

.product-topbar__sku::before {
	content: "/ ";
}

.product-topbar__meta > span:first-child:last-child::before,
.product-topbar__meta > .product-topbar__sku:first-child::before {
	content: none;
}

.product-topbar__share {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	list-style: none;
}

.product-topbar__share a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--c-black);
	text-decoration: none;
}

.product-topbar__share a:hover {
	color: var(--c-red);
}

.product-topbar__share .icon {
	width: 20px;
	height: 20px;
}

/* 3. Fiche produit : galerie --------------------------------------------- */

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 clamp(32px, 7vw, 106px);
	padding-top: 12px;
}

.woocommerce-product-gallery {
	position: relative;
	min-width: 0;
	margin-bottom: 40px;
}

/* Le diaporama de WooCommerce aligne les photos côte à côte : seul le cadre visible doit dépasser. */
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__image {
	overflow: hidden;
}

.woocommerce-product-gallery__image {
	position: relative;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* Pendant son initialisation, le diaporama élargit ses photos à dix fois la largeur de la page le temps
   d'une image : sans hauteur imposée, la galerie mesurait 14 000 px et tout le reste sautait. */
.woocommerce-product-gallery {
	container-type: inline-size;
}

.woocommerce-product-gallery .flex-viewport {
	aspect-ratio: 4 / 3;
	/* Hauteur arrondie au pixel, pour que la suite de la page tombe sur des pixels entiers.
	   « !important » : le diaporama écrit sa propre hauteur, à virgule, dans la balise. */
	height: round(75cqw, 1px) !important;
}

/* Avant que le diaporama ne s'initialise, seule la première photo occupe la place :
   la page ne saute pas quand les autres se rangent derrière elle. */
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n + 2) {
	display: none;
}

/* Une galerie de plusieurs photos réserve d'avance la hauteur de sa rangée de vignettes. */
.woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)) {
	padding-bottom: 80px;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: round(75cqw, 1px);
	object-fit: contain;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-white);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
	text-decoration: none;
	font-size: 18px;
	line-height: 1;
}

.woocommerce-product-gallery__trigger img {
	display: none !important;
}

/* WooCommerce met un emoji dans ce lien : on le remplace par une loupe dessinée. */
.woocommerce-product-gallery__trigger {
	font-size: 0;
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--c-black);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Vignettes : une seule rangée, dans l'espace réservé ; elle défile s'il y a beaucoup de photos. */
.flex-control-thumbs {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: safe center;
	gap: 6px;
	height: 60px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.flex-control-thumbs li {
	flex: none;
	width: 76px;
}

.flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity var(--transition);
}

.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
	opacity: 1;
}

.onsale {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 4px 12px;
	background: var(--c-red);
	color: var(--c-white);
	font-size: 13px;
	letter-spacing: 0;
}

@media (max-width: 899px) {
	.single-product div.product > .product-topbar {
		order: 3;
		margin: 0 0 32px;
	}

	.single-product div.product > .woocommerce-tabs {
		order: 4;
	}
}

@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 590fr) minmax(0, 408fr);
		padding-right: clamp(0px, 7vw, 96px);
	}

	.single-product div.product > .woocommerce-tabs {
		margin-right: calc(-1 * clamp(0px, 7vw, 96px));
	}

	.single-product div.product > .product-topbar {
		margin-right: calc(-1 * clamp(0px, 7vw, 96px));
		margin-bottom: 96px;
	}

	.single-product div.product > .summary {
		padding-top: 36px;
	}
}

/* 4. Fiche produit : résumé ---------------------------------------------- */

.summary {
	min-width: 0;
	margin-bottom: 48px;
}

.product_title {
	margin: 0 0 22px;
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.1;
	line-height: round(1.1em, 1px);
}

.summary > .price {
	margin: 0 0 22px;
	font-family: var(--f-display);
	font-size: 20px;
	line-height: 1.3;
	line-height: round(1.3em, 1px);
	letter-spacing: 0;
}

.price del {
	opacity: 0.5;
}

.price ins {
	text-decoration: none;
}

.woocommerce-product-details__short-description {
	margin-bottom: 20px;
}

.woocommerce-product-details__short-description p {
	margin: 0 0 0.6em;
	margin: 0 0 round(0.6em, 1px);
}

.stock {
	margin: 0 0 16px;
	font-size: 15px;
	letter-spacing: 0;
}

.stock.out-of-stock {
	color: var(--c-red);
}

/* Options (variations). */
table.variations {
	width: 100%;
	margin-bottom: 8px;
	border-collapse: collapse;
}

table.variations tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 6px 16px;
	margin-bottom: 14px;
}

table.variations th,
table.variations td {
	padding: 0;
	font-weight: 400;
	text-align: left;
}

table.variations th {
	padding-top: 6px;
}

table.variations td.value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

table.variations select {
	flex: 1 1 100%;
	min-width: 0;
	height: 44px;
	padding: 0 38px 0 14px;
	border: 1px solid #c9c9c9;
	border-radius: var(--wp--custom--radius--field);
	background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
	font-size: 14px;
	letter-spacing: 0;
	appearance: none;
	text-overflow: ellipsis;
}

.reset_variations {
	font-size: 13px;
	letter-spacing: 0;
}

.single_variation {
	margin-bottom: 18px;
}

.woocommerce-variation-price .price {
	font-size: 18px;
	line-height: 31px;
}

.woocommerce-variation-description p {
	margin: 0 0 8px;
	font-size: 15px;
}

/* Quantité et ajout au panier. */
/* En ligne : accessoires sur toute la largeur, puis quantité et bouton côte à côte.
   Flex plutôt que grille : une longue liste d'accessoires n'élargit pas la colonne de la quantité. */
form.cart:not(.variations_form),
.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

form.cart > .accessories,
.woocommerce-variation-add-to-cart > .accessories {
	flex: 1 1 100%;
	min-width: 0;
}

form.cart .quantity {
	flex: none;
}

form.cart .single_add_to_cart_button {
	flex: 1 1 140px;
	width: auto;
}

/* Téléphone : « Ajouter au panier » tient sur une ligne à côté de la quantité. */
@media (max-width: 480px) {
	form.cart:not(.variations_form),
	.woocommerce-variation-add-to-cart {
		column-gap: 16px;
	}

	form.cart .single_add_to_cart_button {
		padding-inline: 16px;
	}
}

.quantity {
	display: inline-flex;
	height: 46px;
	border: 1px solid var(--c-black);
	border-radius: var(--wp--custom--radius--field);
}

/* Sélecteur doublé pour passer devant le style général des champs de formulaire. */
.quantity .qty,
.woocommerce form .quantity .qty {
	width: 42px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--c-black);
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

.qty-button {
	width: 42px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 16px;
	cursor: pointer;
}

.qty-button:hover {
	color: var(--c-red);
}


.single_add_to_cart_button::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h3l2.6 11.5a2 2 0 0 0 2 1.5h7.8a2 2 0 0 0 1.9-1.5L21.5 7H6.5l-.5-2.3A1 1 0 0 0 5 4H2zM10 21.5a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6zm7.5 0a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 5. Accessoires compatibles --------------------------------------------- */

.accessories {
	border: 1px solid #d5d5d5;
	border-radius: var(--wp--custom--radius--card);
	font-size: 14px;
	letter-spacing: 0;
}

.accessories__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 46px;
	padding: 8px 14px;
	cursor: pointer;
	list-style: none;
}

.accessories__summary::-webkit-details-marker {
	display: none;
}

.accessories__title {
	font-weight: 700;
}

.accessories__count {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--c-gray);
	font-size: 12px;
}

.accessories__count::after {
	content: "";
	border: 4px solid transparent;
	border-top-color: currentColor;
	border-bottom: 0;
	transition: transform var(--transition);
}

.accessories[open] .accessories__count::after {
	transform: rotate(180deg);
}

.accessories__list {
	max-height: 320px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	border-top: 1px solid #d5d5d5;
	list-style: none;
}

.accessories__item {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--c-line);
	line-height: 1.35;
	line-height: round(1.35em, 1px);
}

.accessories__item:last-child {
	border-bottom: 0;
}

.accessories__check {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--c-red);
}

.accessories__name {
	cursor: pointer;
}

a.accessories__name {
	color: var(--c-black);
}

.accessories__price {
	grid-column: 2;
	color: var(--c-gray);
	font-size: 13px;
}

.accessories__qty {
	grid-column: 3;
	grid-row: 1 / span 2;
	width: 56px;
	height: 36px;
	padding: 0 6px;
	border: 1px solid #c9c9c9;
	border-radius: var(--wp--custom--radius--field);
	text-align: center;
}

.accessories__qty:disabled {
	opacity: 0.4;
}

.accessories__link {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-size: 13px;
}

.accessories__description {
	grid-column: 2 / -1;
	margin: 0;
	color: var(--c-gray);
	font-size: 13px;
}

/* 6. Fenêtres d'information ---------------------------------------------- */

.info-button {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid var(--c-gray);
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-gray);
	font-family: Georgia, serif;
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	/* Zone de clic élargie à 44 px sans grossir l'icône. */
	position: relative;
}

.info-button::after {
	content: "";
	position: absolute;
	inset: -12px;
}

.info-button:hover {
	border-color: var(--c-red);
	color: var(--c-red);
}

.info-dialog {
	width: min(92vw, 560px);
	max-height: 85vh;
	padding: 32px;
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 20px 60px rgb(0 0 0 / 0.35);
	font-size: 16px;
	line-height: 1.6;
	line-height: round(1.6em, 1px);
	letter-spacing: 0;
}

.info-dialog::backdrop {
	background: rgb(0 0 0 / 0.55);
}

.info-dialog__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.info-dialog__close:hover {
	color: var(--c-red);
}

.info-dialog__title {
	margin: 0 40px 20px 0;
	font-size: 24px;
}

.info-dialog__list {
	margin: 0;
}

.info-dialog__list dt {
	margin-top: 16px;
	font-weight: 700;
}

.info-dialog__list dd {
	margin: 4px 0 0;
}

/* 7. Onglets ------------------------------------------------------------- */

.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 24px;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-tabs ul.tabs li {
	margin-bottom: -1px;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
}

.woocommerce-tabs ul.tabs li.active {
	border-color: var(--c-line);
	background: var(--c-white);
}

.woocommerce-tabs ul.tabs a {
	display: block;
	/* Hauteur de ligne paire et un pixel de plus au-dessus : le texte est centré au pixel dans 53 px. */
	padding: 12px 21px 11px;
	line-height: 30px;
	color: var(--c-red);
	letter-spacing: 0.01em;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--c-black);
}

.woocommerce-Tabs-panel {
	padding: 24px 20px;
	border: 1px solid var(--c-line);
	/* Arrondi des cartes, sauf le coin qui touche le premier onglet. */
	border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) var(--wp--custom--radius--card);
	overflow-wrap: anywhere;
}

.woocommerce-Tabs-panel > h2:first-child {
	margin: 0 0 20px;
	color: var(--c-red);
	font-size: 15px;
}

/* Mention affichée quand le contenu d'un onglet n'existe pas dans la langue du visiteur. */
.woocommerce-Tabs-panel .product-tab-note {
	color: var(--c-gray);
	font-size: 15px;
	font-style: italic;
}

.woocommerce-Tabs-panel p {
	margin: 0 0 1.1em;
	margin: 0 0 round(1.1em, 1px);
}

.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
	margin: 0 0 1.1em;
	margin: 0 0 round(1.1em, 1px);
	padding-left: 1.4em;
	padding-left: round(1.4em, 1px);
}

.woocommerce-Tabs-panel img {
	height: auto;
}

.woocommerce-Tabs-panel table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

@media (min-width: 768px) {
	.woocommerce-Tabs-panel {
		padding: 44px 40px;
	}
}

/* 8. Listes de produits -------------------------------------------------- */

/* Bandeau des catégories et de la recherche. */
.shop-banner {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 180px;
	margin-bottom: 48px;
	background: var(--c-ink);
	color: var(--c-white);
}

.shop-banner.has-image {
	min-height: clamp(220px, 32vw, 395px);
}

.shop-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.shop-banner__inner {
	position: relative;
	padding-block: 32px;
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

.shop-banner__title {
	margin: 0;
	color: var(--c-white);
	font-size: clamp(32px, 5vw, 44px);
}

.shop-banner__text {
	max-width: 640px;
	margin-top: 12px;
}

.shop-banner__text p {
	margin: 0;
}

/* Bandeau de la page Boutique : bloc Bannière édité par le client. */
.shop-intro {
	margin-bottom: 48px;
}

.shop-intro .wp-block-cover {
	min-height: clamp(220px, 26vw, 318px);
	padding: 32px 0;
}

.shop-intro .wp-block-cover__inner-container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
	color: var(--c-white);
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

.shop-intro .wp-block-cover h1 {
	margin: 0;
	color: var(--c-white);
	font-size: clamp(24px, 3.2vw, 30px);
	line-height: 1.1;
	line-height: round(1.1em, 1px);
}

.shop-intro .wp-block-columns {
	align-items: center;
	gap: 24px 96px;
}

.shop-intro .wp-block-cover p {
	margin: 0;
}

/* Sections de la page Boutique. */
.shop-section {
	margin-bottom: 72px;
	scroll-margin-top: calc(var(--header-height) + 16px);
}

.shop-section__title {
	margin: 0 0 40px;
	font-size: clamp(26px, 3.4vw, 34px);
	text-transform: uppercase;
}

.shop-section__title a {
	color: var(--c-black);
	text-decoration: none;
}

.shop-section__title a:hover {
	color: var(--c-red);
}

/* Grille : 1 colonne sur mobile, 2 sur tablette, 3 sur grand écran. */
ul.products {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products::before,
ul.products::after {
	content: none;
}

@media (min-width: 600px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 60px;
	}

	ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 30px;
	}
}

/* Carte : toutes de même hauteur dans une rangée, nom et prix sur la même ligne. */
ul.products li.product {
	display: flex;
	flex-direction: column;
	padding: 25px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	font-size: 16px;
	line-height: 1.6;
	line-height: round(1.6em, 1px);
	letter-spacing: 0;
	transition: box-shadow var(--transition), transform var(--transition);
}

ul.products li.product:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

ul.products li.product > a {
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	gap: 0 16px;
	color: var(--c-black);
	text-decoration: none;
}

/* Tous les produits occupent la même place dans leur cadre, quelle que soit la photo. */
ul.products li.product > a {
	container-type: inline-size;
}

ul.products li.product img {
	grid-column: 1 / -1;
	width: 100%;
	aspect-ratio: 4 / 3;
	/* Hauteur arrondie au pixel : une hauteur à virgule décale d'un demi-pixel tout ce qui suit,
	   et le texte des boutons ne tombe plus au centre. */
	height: round(75cqw, 1px);
	margin-bottom: 20px;
	object-fit: contain;
}

.woocommerce-loop-product__title,
.woocommerce-loop-category__title,
.entry-content h2.woocommerce-loop-product__title,
.entry-content h2.woocommerce-loop-category__title {
	margin: 0;
	font-family: var(--f-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	line-height: round(1.5em, 1px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.woocommerce-loop-category__title {
	grid-column: 1 / -1;
	text-align: center;
}

ul.products li.product .price {
	align-self: start;
	color: var(--c-red);
	font-family: var(--f-display);
	font-size: 14px;
	line-height: 26px;
	white-space: nowrap;
}

ul.products li.product .onsale {
	display: none;
}

.product-card__excerpt {
	grid-column: 1 / -1;
	margin: 12px 0 0;
	color: #333;
}

.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--field);
	color: var(--c-black);
	text-decoration: none;
}

.woocommerce-pagination .current {
	border-color: var(--c-ink);
	background: var(--c-ink);
	color: var(--c-white);
}

/* 9. Panier et commande (blocs WooCommerce) ------------------------------ */

/* Les blocs Panier et Commande restent natifs : on règle seulement leur largeur,
   leurs polices et leurs boutons pour qu'ils suivent le reste du site. */
.entry-content > .wp-block-woocommerce-cart.alignwide,
.entry-content > .wp-block-woocommerce-checkout.alignwide {
	width: min(100% - 2 * var(--gutter), var(--container));
}

.wc-block-cart,
.wc-block-checkout {
	font-size: 16px;
	letter-spacing: 0;
}

.wc-block-cart .wc-block-components-product-name,
.wc-block-checkout .wc-block-components-product-name {
	color: var(--c-black);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.wc-block-cart .wc-block-components-product-name:hover {
	color: var(--c-red);
}

/* Panier sur téléphone : la grille native de WooCommerce (80 px + 132 px + prix) dépasse de l'écran
   dès que le prix est long. Le produit prend la place restante, le total de la ligne passe dessous. */
.is-mobile table.wc-block-cart-items {
	display: block;
	width: 100%;
}

.is-mobile table.wc-block-cart-items tbody {
	display: block;
}

.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 80px minmax(0, 1fr);
}

.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2;
}

.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-row-start: 2;
	grid-column: 2;
	justify-self: end;
	margin-top: 8px;
}

/* Nom du mode de livraison, sous « Expédition » : lisible. */
.wc-block-components-totals-shipping .wc-block-components-totals-shipping__via {
	font-size: 12px;
}

.wc-block-cart-items__header,
.wc-block-cart__totals-title {
	font-size: 13px;
	letter-spacing: 0.04em;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700;
}

.wc-block-components-button:not(.is-link) {
	min-height: 52px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--c-red);
	color: var(--c-white);
	font-weight: 700;
	transition: background-color var(--transition);
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--c-ink);
	color: var(--c-white);
}

.wc-block-checkout__form h2,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary .wc-block-components-panel__button {
	font-family: var(--f-body);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
}

/* Commande : champs, choix du paiement et récapitulatif aux arrondis du site. */
.wc-block-checkout .wc-block-components-text-input input[type],
.wc-block-cart .wc-block-components-text-input input[type],
.wc-block-components-form .wc-block-components-text-input input[type],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__container,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-radius: var(--wp--custom--radius--field);
}

.wc-block-checkout .wc-block-components-radio-control__option,
.wc-block-checkout .wc-block-components-radio-control label.wc-block-components-radio-control__option-checked,
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-address-card,
.wp-block-woocommerce-checkout-order-summary-block {
	border-radius: var(--wp--custom--radius--card);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	box-shadow: 0 0 0 1px var(--c-red);
	border-color: var(--c-red);
}

/* Suggestions sous le panier (« ventes croisées ») : mêmes cartes que la boutique. */
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection {
	margin-top: 56px;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection h2 {
	font-size: 24px;
}

.wp-block-woocommerce-cart .wc-block-product-template {
	gap: 20px;
}

.wp-block-woocommerce-cart .wc-block-product {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--shadow-card);
}

.wp-block-woocommerce-cart .wc-block-product img {
	aspect-ratio: 4 / 3;
	object-fit: contain !important;
}

.wp-block-woocommerce-cart .wc-block-product .wp-block-post-title {
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
}

.wp-block-woocommerce-cart .wc-block-product .wp-block-post-title a {
	color: var(--c-black);
	text-decoration: none;
}

.wp-block-woocommerce-cart .wc-block-product .wp-block-button {
	margin-top: auto;
}

.wp-block-woocommerce-cart .wc-block-product .wp-block-button__link {
	padding: 10px 18px;
	font-size: 13px;
}

/* Panier vide : la bannière occupe toute la largeur, sans marges ni bandes au-dessus et au-dessous
   (audit desktop, captures 24 et 38 ; audit mobile MOB-030). */
.wp-block-woocommerce-empty-cart-block .wp-block-cover {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.woocommerce-cart .entry:has(.wp-block-woocommerce-empty-cart-block .wp-block-cover) .entry__header {
	display: none;
}

.woocommerce-cart .entry:has(.wp-block-woocommerce-empty-cart-block .wp-block-cover) .entry-content {
	padding-bottom: 0;
}

/* Panier vide : bannière éditée par le client. */
.wp-block-woocommerce-empty-cart-block .wp-block-cover h2 {
	color: var(--c-white);
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

/* Avis : sélecteur d'étoiles (le texte reste lu par les lecteurs d'écran). */
.comment-form-rating .stars span {
	display: inline-flex;
	gap: 2px;
}

.comment-form-rating .stars a {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	color: var(--c-line);
	font-size: 0;
	text-decoration: none;
}

.comment-form-rating .stars a::before {
	content: "★";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 30px;
	line-height: 1;
}

/* Étoiles allumées jusqu'à celle qui est choisie ou survolée. */
.comment-form-rating .stars.selected a,
.comment-form-rating .stars:hover a {
	color: var(--c-red);
}

.comment-form-rating .stars.selected a.active ~ a,
.comment-form-rating .stars a:hover ~ a {
	color: var(--c-line);
}

.star-rating {
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1em;
	overflow: hidden;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.08em;
}

.star-rating::before {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	color: var(--c-line);
}

.star-rating span {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	padding-top: 1.5em;
	padding-top: round(1.5em, 1px);
}

.star-rating span::before {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--c-red);
}

/* Avis : la liste à gauche, le formulaire dans un encadré à droite. */
#reviews {
	display: grid;
	gap: 32px;
}

#reviews .woocommerce-Reviews-title {
	margin: 0 0 16px;
	font-size: 24px;
}

#reviews .woocommerce-noreviews {
	margin: 0;
	color: var(--c-gray);
}

#reviews .commentlist {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Un avis : nom et date, étoiles, texte. Avec les portraits activés (Réglages → Commentaires),
   le portrait rond se place à gauche. */
#reviews .comment_container {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--c-line);
}

#reviews .commentlist li:last-child .comment_container {
	border-bottom: 0;
}

#reviews .comment_container:has(.avatar) {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 0 16px;
}

#reviews .comment_container .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

#reviews .comment-text {
	display: grid;
	gap: 6px;
}

#reviews .comment-text .meta {
	order: -1;
	margin: 0;
	font-size: 15px;
	line-height: 22px;
}

#reviews .woocommerce-review__author {
	font-weight: 700;
}

#reviews .woocommerce-review__published-date,
#reviews .woocommerce-review__dash {
	color: var(--c-gray);
}

#reviews .description p {
	margin: 4px 0 0;
}

#review_form_wrapper {
	align-self: start;
	padding: 24px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-mist);
}

#reviews .comment-reply-title {
	display: block;
	margin-bottom: 16px;
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 24px;
}

#review_form .comment-form > * {
	margin: 0 0 16px;
}

#review_form .comment-form > :last-child {
	margin-bottom: 0;
}

#review_form textarea,
#review_form input[type="text"],
#review_form input[type="email"] {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #c9c9c9;
	border-radius: var(--wp--custom--radius--field);
	background: var(--c-white);
	font: inherit;
	line-height: 26px;
}

#review_form textarea {
	height: 140px;
	resize: vertical;
}

#review_form label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 22px;
}

#review_form .must-log-in {
	margin: 0;
}

@media (min-width: 900px) {
	#reviews {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		gap: 56px;
	}
}

/* 10. Compte client et formulaires WooCommerce ----------------------------- */

.woocommerce form .form-row {
	margin: 0 0 18px;
}

.woocommerce form label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	letter-spacing: 0;
}

.woocommerce form .required {
	color: var(--c-red);
	text-decoration: none;
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid #c9c9c9;
	border-radius: var(--wp--custom--radius--field);
	background: var(--c-white);
	font-size: 16px;
	letter-spacing: 0;
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	border-color: var(--c-red);
	outline: 0;
	box-shadow: 0 0 0 1px var(--c-red);
}

/* Champ de mot de passe avec son bouton « afficher ». */
.woocommerce form .password-input {
	position: relative;
	display: block;
}

.woocommerce form .show-password-input {
	position: absolute;
	top: 1px;
	right: 1px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.woocommerce form .show-password-input::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--c-gray);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0 20px 0 0;
	cursor: pointer;
}

.woocommerce form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--c-red);
}

/* Connexion et inscription : un seul cadre par formulaire, champs larges (audit MOB-027). */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 520px;
	padding: 28px 24px;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
}

.woocommerce-account .woocommerce > h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
	margin: 0 0 20px;
	font-size: 26px;
}

.woocommerce-account .u-columns {
	display: grid;
	gap: 40px;
}

@media (min-width: 900px) {
	.woocommerce-account .u-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-LostPassword {
	margin: 12px 0 0;
	font-size: 15px;
}

/* Espace client connecté : menu à gauche, contenu à droite. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	gap: 32px 56px;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	list-style: none;
	overflow: hidden;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 13px 18px;
	border-bottom: 1px solid var(--c-line);
	color: var(--c-black);
	font-size: 16px;
	letter-spacing: 0;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li:last-child a {
	border-bottom: 0;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
	background: var(--c-ink);
	color: var(--c-white);
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-MyAccount-content p {
	margin: 0 0 1.1em;
	margin: 0 0 round(1.1em, 1px);
}

/* Tableaux (commandes, détail d'une commande). */
.woocommerce table.shop_table {
	width: 100%;
	margin-bottom: 32px;
	border-collapse: collapse;
	font-size: 16px;
	letter-spacing: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}

.woocommerce table.shop_table thead th {
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce table.shop_table .button {
	min-height: 40px;
	padding: 6px 18px;
}

@media (max-width: 699px) {
	/* Sur mobile, chaque commande devient une fiche : une ligne par information. */
	.woocommerce table.shop_table_responsive thead {
		display: none;
	}

	.woocommerce table.shop_table_responsive tr {
		display: block;
		margin-bottom: 16px;
		border: 1px solid var(--c-line);
		border-radius: var(--wp--custom--radius--card);
	}

	.woocommerce table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive td::before {
		content: attr(data-title);
		font-weight: 700;
		text-align: left;
	}
}

.woocommerce-Addresses {
	display: grid;
	gap: 32px;
}

@media (min-width: 700px) {
	.woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-Address-title h2,
.woocommerce-order-details__title,
.woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 22px;
}

.woocommerce address {
	font-style: normal;
}

/* Confirmation de commande. */
.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 0 0 32px;
	padding: 20px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-mist);
	font-size: 14px;
	letter-spacing: 0;
	list-style: none;
}

.woocommerce-order-overview strong {
	display: block;
	font-size: 17px;
}

/* Bouton de téléchargement direct, à côté de chaque document des onglets. */
.download-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	padding: 3px 12px;
	border: 1px solid var(--c-red);
	border-radius: var(--wp--custom--radius--button);
	color: var(--c-red);
	/* Texte de 13 px sur une ligne de 21 px : centré au pixel dans la pastille. */
	font-size: 13px;
	line-height: 21px;
	letter-spacing: 0;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition);
}

.download-button:hover {
	background: var(--c-red);
	color: var(--c-white);
}

/* WooCommerce garde la galerie invisible jusqu'à l'initialisation de son script. Comme la première
   photo est déjà en place et stable, on l'affiche tout de suite : c'est le plus gros élément de la page. */
.woocommerce-product-gallery {
	opacity: 1 !important;
}

/* Liste compacte sur mobile : photo à gauche, nom et prix à droite (catégories d'accessoires). */
@media (max-width: 599px) {
	.is-compact-list ul.products {
		gap: 12px;
	}

	.is-compact-list ul.products li.product {
		padding: 12px;
	}

	.is-compact-list ul.products li.product > a {
		grid-template-columns: 88px minmax(0, 1fr);
		align-items: center;
		gap: 2px 14px;
	}

	.is-compact-list ul.products li.product img {
		grid-column: 1;
		grid-row: 1 / span 3;
		height: auto;
		margin: 0;
	}

	.is-compact-list .woocommerce-loop-product__title,
	.is-compact-list ul.products li.product .price {
		grid-column: 2;
		font-size: 14px;
		line-height: 1.35;
		white-space: normal;
	}

	.is-compact-list .woocommerce-loop-product__title {
		text-transform: none;
	}

	.is-compact-list .product-card__excerpt {
		display: none;
	}
}

/* Produits et familles dans une page de contenu (accueil) : codes courts natifs de WooCommerce. */
.entry-content .woocommerce {
	margin-block: 32px;
}

/* Familles : cinq tuiles sur une ligne, deux par ligne sur mobile. */
.entry-content ul.products.columns-5 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.entry-content ul.products.columns-5 li.product {
	padding: 16px;
}

.entry-content ul.products.columns-5 li.product img {
	margin-bottom: 12px;
}

.entry-content ul.products.columns-5 .woocommerce-loop-category__title {
	font-size: 14px;
}

/* Mobile : une tuile seule sur la dernière ligne prend toute la largeur. */
@media (max-width: 599px) {
	.entry-content ul.products.columns-5 li.product:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Son image garde la taille de celles des autres tuiles. */
	.entry-content ul.products.columns-5 li.product:last-child:nth-child(odd) img {
		/* Largeur d'une tuile voisine (moitié de la rangée, moins l'écart et les marges), hauteur aux 3/4. */
		width: calc(50cqw - 18px);
		height: round(calc(37.5cqw - 13.5px), 1px);
		margin-inline: auto;
	}

	/* Noms longs (« Préamplificateurs et convertisseurs ») : un peu plus petits, et coupés à la syllabe
	   avec un trait d'union plutôt qu'au milieu du mot. */
	.entry-content ul.products.columns-5 li.product {
		padding-inline: 10px;
	}

	.entry-content ul.products.columns-5 .woocommerce-loop-category__title {
		font-size: 12px;
		letter-spacing: 0;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* Le nombre de produits n'est pas affiché dans les tuiles. */
.entry-content .woocommerce-loop-category__title .count {
	display: none;
}

@media (min-width: 600px) {
	.entry-content ul.products.columns-5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.entry-content ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 24px;
	}
}