/*
 * Boutique WooCommerce aux couleurs du thème : catalogue, fiche produit, mini-panier, panier,
 * commande et compte client.
 *
 * Chargée sur tout le site public quand WooCommerce est actif : le mini-panier (pastille du
 * menu et panneau latéral) est présent sur chaque page. Les couleurs viennent de la palette
 * (theme.json) ; les champs reprennent l'apparence des formulaires WPForms (formulaires.css).
 */

/* -----------------------------------------------------------------------------------------
 * Pastille du panier, accrochée au coin du bouton « Boutique » du menu.
 *
 * Le bouton et le mini-panier sont deux blocs distincts de l'en-tête : le positionnement par
 * ancre (anchor-name) place le mini-panier au coin bas droit du bouton, sans toucher au menu.
 * Seulement quand le menu est déplié dans l'en-tête (60rem et plus, voir entete.css) : en
 * dessous, le bouton Boutique est dans le menu plein écran, et le panier reste visible dans
 * l'en-tête. Un navigateur qui ignore les ancres garde le panier à droite du menu.
 *
 * Le mini-panier se place par rapport à la rangée de l'en-tête (.entete__rangee, en position
 * relative dans entete.css), comme le méga-menu.
 * ----------------------------------------------------------------------------------------- */
@supports (anchor-name: --ancre) {
	@media (min-width: 60rem) {
		/* Un peu plus de place à droite du libellé : la pastille se pose sur le coin sans le couvrir. */
		.menu-principal .menu-bouton--boutique > .wp-block-navigation-item__content {
			padding-inline-end: 1.7rem;
			anchor-name: --lpm-boutique;
		}

		/* Sur la page Panier, WooCommerce n'affiche pas de mini-panier : le bouton reprend sa marge. */
		.woocommerce-cart .menu-principal .menu-bouton--boutique > .wp-block-navigation-item__content {
			padding-inline-end: 1.15rem;
		}

		/* La pastille déborde du bouton : un peu plus d'écart entre Boutique et Contact. */
		.menu-principal .wp-block-navigation__container > .menu-bouton + .menu-bouton {
			margin-inline-start: var(--wp--preset--spacing--40);
		}

		.woocommerce-cart .menu-principal .wp-block-navigation__container > .menu-bouton + .menu-bouton {
			margin-inline-start: var(--wp--preset--spacing--20);
		}

		.entete__actions > .wc-block-mini-cart {
			position: absolute;
			z-index: 2;
			top: anchor(bottom);
			left: anchor(right);
			position-anchor: --lpm-boutique;
			translate: -55% -55%;
		}

		.entete__actions > .wc-block-mini-cart .wc-block-mini-cart__button {
			display: grid;
			place-items: center;
			width: 2rem;
			height: 2rem;
			padding: 0;
			border-radius: 999px;
			background-color: var(--wp--preset--color--base);
			box-shadow: 0 0 0 1.5px var(--wp--preset--color--secondary), 0 2px 6px rgb(0 0 0 / 18%);
			color: var(--wp--preset--color--secondary);
			transition: background-color 0.2s ease, color 0.2s ease;
		}

		.entete__actions > .wc-block-mini-cart .wc-block-mini-cart__button:hover,
		.entete__actions > .wc-block-mini-cart .wc-block-mini-cart__button:focus-visible {
			background-color: var(--wp--preset--color--secondary);
			color: var(--wp--preset--color--base);
		}

		.entete__actions > .wc-block-mini-cart .wc-block-mini-cart__icon {
			width: 1.1rem;
			height: 1.1rem;
		}
	}
}

/* Le nombre d'articles : terracotta foncée, comme le bouton Contact, pour se voir d'un coup d'œil. */
.wc-block-mini-cart__badge {
	border: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 85%, #000) !important;
	color: var(--wp--preset--color--base) !important;
	font-weight: 700;
}

/* -----------------------------------------------------------------------------------------
 * Champs de formulaire : bordure douce, arrondi, focus vert forêt, comme les formulaires WPForms.
 * ----------------------------------------------------------------------------------------- */
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce .quantity .qty,
.wc-block-components-text-input input[type],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-quantity-selector {
	border: 1px solid rgb(0 0 0 / 25%) !important;
	border-radius: 0.5rem !important;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
	font-family: inherit;
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce .quantity .qty:focus,
.wc-block-components-text-input input[type]:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--secondary) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--secondary);
	outline: none;
}

.woocommerce form .input-text {
	padding: 0.7rem 0.9rem;
}

/* Cases à cocher et boutons radio : cochés en vert forêt. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.wc-block-components-checkbox .wc-block-components-checkbox__input,
.wc-block-components-radio-control__input {
	accent-color: var(--wp--preset--color--secondary);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
	border-color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--secondary);
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--base);
}

/* -----------------------------------------------------------------------------------------
 * Catalogue : nombre de résultats et menu de tri.
 * ----------------------------------------------------------------------------------------- */
.wc-block-product-results-count .woocommerce-result-count {
	margin: 0;
	color: rgb(0 0 0 / 62%);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-ordering {
	margin: 0;
}

/* Le menu de tri, comme un champ du site ; flèche vert forêt (couleur écrite en dur : une variable
 * CSS ne passe pas dans une image). */
.woocommerce-ordering select.orderby {
	appearance: none;
	min-width: 14rem;
	padding: 0.55rem 2.5rem 0.55rem 0.95rem;
	border: 1px solid rgb(0 0 0 / 25%);
	border-radius: 999px;
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283618' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 1rem;
	color: var(--wp--preset--color--secondary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.woocommerce-ordering select.orderby:hover {
	border-color: var(--wp--preset--color--secondary);
}

.woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------------------
 * Cartes produit (catalogue, produits similaires) : comme les réalisations — photo arrondie
 * qui avance au survol, titre vert forêt sans soulignement, bouton en contour.
 * ----------------------------------------------------------------------------------------- */
.wc-block-product .wc-block-components-product-image {
	isolation: isolate;
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--30);
	border-radius: 0.5rem;
}

.wc-block-product .wc-block-components-product-image img {
	transition: transform 0.6s ease;
}

.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

.wc-block-product .wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.wc-block-product .wp-block-post-title a:hover,
.wc-block-product .wp-block-post-title a:focus {
	color: var(--wp--preset--color--primary);
}

.wc-block-product .wc-block-components-product-price {
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--secondary);
}

.wc-block-product .wp-block-button__link.wp-element-button {
	padding: 0.6rem 1.3rem;
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wc-block-product .wp-block-button__link.wp-element-button:hover,
.wc-block-product .wp-block-button__link.wp-element-button:focus {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/* « Voir le panier », sous le bouton une fois le produit ajouté. */
.wc-block-product .added_to_cart {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

/* -----------------------------------------------------------------------------------------
 * Fiche produit.
 * ----------------------------------------------------------------------------------------- */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
	overflow: hidden;
	border-radius: 0.75rem;
}

/* Vignettes : alignées en grille, arrondies ; celles qui ne sont pas affichées restent nettes. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	border-radius: 0.4rem;
	opacity: 0.75;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	box-shadow: 0 0 0 2px var(--wp--preset--color--secondary);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
}

/* Quantité et bouton « Ajouter au panier » alignés, de même hauteur. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
}

.woocommerce div.product form.cart .quantity {
	float: none;
	margin: 0;
}

.woocommerce div.product form.cart .quantity .qty {
	width: 4.5rem;
	height: 100%;
	min-height: 3rem;
	text-align: center;
}

.woocommerce div.product form.cart .button {
	float: none;
	margin: 0;
}

.wp-block-woocommerce-product-price .woocommerce-Price-amount {
	color: var(--wp--preset--color--secondary);
}

/* Onglets (Description…) : trait vert forêt sous l'onglet ouvert. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--secondary);
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--wp--preset--color--secondary);
}

/* -----------------------------------------------------------------------------------------
 * Messages (« ajouté à votre panier », erreurs) : cadre blanc arrondi plutôt que fond vert vif.
 * ----------------------------------------------------------------------------------------- */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1.5px solid var(--wp--preset--color--secondary);
	border-radius: 0.75rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
}

.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--wp--preset--color--secondary);
}

.wc-block-components-notice-banner.is-error {
	border-color: #b3261e;
}

.wc-block-components-notice-banner.is-error > svg {
	background-color: #b3261e;
}

.wc-block-components-notice-banner .wc-forward {
	color: var(--wp--preset--color--secondary) !important;
	font-weight: 600;
	opacity: 1 !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--secondary);
}

/* -----------------------------------------------------------------------------------------
 * Articles du panier (mini-panier et page Panier) et résumé de commande.
 * ----------------------------------------------------------------------------------------- */
.wc-block-components-product-name {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	text-decoration: none;
}

a.wc-block-components-product-name:hover,
a.wc-block-components-product-name:focus {
	color: var(--wp--preset--color--primary);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: 0.4rem;
}

.wc-block-components-product-metadata__description {
	color: rgb(0 0 0 / 62%);
}

.wc-block-components-quantity-selector {
	overflow: hidden;
}

/* Titre du mini-panier. */
.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
}

/* Page Panier : en-têtes de colonnes discrets. */
.wc-block-cart .wc-block-cart-items__header,
.wc-block-cart .wc-block-cart__totals-title {
	color: rgb(0 0 0 / 62%);
	font-size: 0.8125rem !important;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* Page Commande : résumé dans un cadre doux et arrondi. */
.wp-block-woocommerce-checkout-order-summary-block {
	overflow: hidden;
	border: 1px solid rgb(0 0 0 / 15%) !important;
	border-radius: 0.75rem;
}

.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--heading);
}

/* -----------------------------------------------------------------------------------------
 * Compte client (connexion, inscription, mot de passe oublié).
 * ----------------------------------------------------------------------------------------- */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid rgb(0 0 0 / 15%);
	border-radius: 0.75rem;
}

.woocommerce form .form-row label {
	color: var(--wp--preset--color--secondary);
	font-weight: 600;
}

.woocommerce form .form-row .required {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.woocommerce form.login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-inline-start: var(--wp--preset--spacing--30);
	font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product .wc-block-components-product-image img,
	.wc-block-product .wp-block-button__link.wp-element-button,
	.entete__actions > .wc-block-mini-cart .wc-block-mini-cart__button,
	.woocommerce div.product div.images .flex-control-thumbs li img {
		transition: none;
	}
}