/*
 * Catalogue : boutique, catégories / étiquettes / attributs, recherche produits,
 * et page d'accueil si le réglage « Appliquer à la page d'accueil » est actif.
 *
 * Complète shared.css (la carte produit elle-même) par ce qui est propre à la
 * grille du catalogue : dimensions d'image, effets de survol, badge « Épuisé ».
 */

/* ---------- En-tête de catégorie ---------- */

.woocommerce .woocommerce-products-header {
	margin: 0 0 18px;
}

.woocommerce .woocommerce-products-header__title,
.woocommerce .woocommerce-products-header .page-title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 700;
	color: var(--wcdc-text);
	line-height: 1.2;
}

.woocommerce .term-description,
.woocommerce .woocommerce-product-search + .term-description {
	max-width: 620px;
	margin: 0;
	color: var(--wcdc-muted);
	font-size: 14px;
	line-height: 1.6;
}

.woocommerce .term-description p:last-child {
	margin-bottom: 0;
}

/* ---------- Barre d'outils : compteur et tri ---------- */

/*
 * WooCommerce n'enveloppe pas ces deux éléments : il les pose l'un après
 * l'autre, le compteur flottant à gauche et le formulaire de tri à droite. On
 * ne touche pas à ce montage — le transformer en ligne flex demanderait un
 * conteneur qu'il faudrait injecter par tampon de sortie — et on se contente
 * de les habiller là où ils sont.
 */
.woocommerce .woocommerce-result-count {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 40px;
	color: var(--wcdc-muted);
}

.woocommerce .woocommerce-ordering {
	position: relative;
	margin: 0 0 22px;
}

.woocommerce .woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	height: 40px;
	/* La marge à droite laisse la place à la flèche du ::after. */
	padding: 0 38px 0 14px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
	color: var(--wcdc-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	max-width: 100%;
}

/*
 * La flèche est posée sur le formulaire, pas sur le select : un select est un
 * élément remplacé, il n'accepte pas de pseudo-élément.
 *
 * Masque plutôt qu'image de fond, comme pour les icônes du menu « Mon compte » :
 * la couleur suit ainsi celle du texte.
 */
.woocommerce .woocommerce-ordering::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 14px;
	width: 11px;
	height: 11px;
	margin-top: -5px;
	pointer-events: none;
	background-color: var(--wcdc-muted);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M4.8%207.2h10.4L10%2013.6z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M4.8%207.2h10.4L10%2013.6z%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ---------- Pagination ---------- */

.woocommerce nav.woocommerce-pagination {
	margin: 10px 0 0;
	text-align: center;
}

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

.woocommerce nav.woocommerce-pagination ul li {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40px : sous les 44px recommandés pour le tactile, mais c'est la hauteur
	   du sélecteur de tri juste au-dessus ; le gap de 8px évite les erreurs de
	   frappe entre deux numéros voisins. */
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
	color: var(--wcdc-text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
	background: var(--wcdc-bg);
	border-color: var(--wcdc-primary);
	color: var(--wcdc-text);
}

.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	background: var(--wcdc-primary);
	border-color: var(--wcdc-primary);
	color: #fff;
	font-weight: 600;
}

/* Les points de suspension ne sont pas cliquables : pas de cadre. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
	min-width: 24px;
	padding: 0;
	border-color: transparent;
	background: none;
	color: var(--wcdc-muted);
}

.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
	color: var(--wcdc-primary);
	font-weight: 600;
}

/* ---------- Colonnes ---------- */

/*
 * Largeurs en calc(), à l'identique des extensions d'origine : pour n colonnes
 * et un espacement g, chaque carte fait 100/n% moins le « gap réparti »
 * g*(n-1)/n, de sorte que n cartes et n-1 gouttières tiennent exactement sur
 * une ligne. Les deux termes sont calculés en PHP et passés en variables.
 *
 * Les gouttières elles-mêmes sont posées par shared.css, sur le conteneur.
 *
 * Sélecteur doublé (.woocommerce.woocommerce) : Divi déclare ses propres
 * largeurs et marges sur li.product avec !important et la même spécificité que
 * la nôtre. À égalité, c'est l'ordre de chargement qui tranche — et son CSS
 * dynamique vit dans wp-content/et-cache/, hors du dossier du thème, donc hors
 * de portée de nos dépendances déclarées. Le doublement nous fait gagner sans
 * dépendre de cet ordre.
 */
.woocommerce.woocommerce ul.products li.product {
	width: calc(var(--wcdc-col-width, 33.3333%) - var(--wcdc-col-deduct, 20px)) !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.woocommerce.woocommerce ul.products li.product {
		width: calc(var(--wcdc-col-width-tablet, 50%) - var(--wcdc-col-deduct-tablet, 15px)) !important;
	}
}

/* Mobile : toujours une colonne. */
@media (max-width: 480px) {
	.woocommerce.woocommerce ul.products li.product {
		width: 100% !important;
	}
}

/* ---------- Image ---------- */

/*
 * Hauteur fixe + object-fit, pour éviter que les cartes se décalent selon le
 * ratio des visuels fournisseur (portrait / paysage / carré mélangés).
 *
 * La classe attachment-woocommerce_thumbnail est posée par WooCommerce sur
 * l'image principale de la boucle produit : ne touche pas aux icônes d'autres
 * extensions.
 */
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
	height: var(--wcdc-image-height, 220px) !important;
	width: 100% !important;
	object-fit: contain !important;
}

/*
 * Mode ratio : la hauteur suit la largeur de la carte au lieu d'être figée.
 * En une colonne sur téléphone, une carte de ~350px de large gardait une image
 * de 220px de haut, donc beaucoup de vide.
 *
 * La classe n'est posée que si le réglage le demande : le mode hauteur fixe
 * reste le défaut, pour ne rien changer aux boutiques déjà en place.
 */
body.wcdc-image-ratio .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
	height: auto !important;
	aspect-ratio: var(--wcdc-image-ratio, 1 / 1);
}

/* Léger zoom au survol : le conteneur doit masquer le débordement. */
body.wcdc-image-zoom .woocommerce ul.products li.product > a {
	display: block;
	overflow: hidden;
	/* Arrondi intérieur : 2px de moins que la carte, pour épouser la bordure. */
	border-radius: max(0px, calc(var(--wcdc-card-radius, 8px) - 2px));
}

body.wcdc-image-zoom .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
	transition: transform .25s ease;
}

body.wcdc-image-zoom .woocommerce ul.products li.product:hover img.attachment-woocommerce_thumbnail {
	transform: scale(1.06);
}

/*
 * Miniature générique WooCommerce (produit sans photo) : bordure discrète au
 * lieu du carré brut, plus cohérent avec le reste de la carte.
 */
body.wcdc-placeholder-style .woocommerce ul.products li.product img.woocommerce-placeholder {
	border: 1px dashed var(--wcdc-border);
	border-radius: 6px;
	opacity: .7;
}

/* ---------- Titre ---------- */

/*
 * Titre limité à 2 lignes + hauteur réservée : le prix reste toujours aligné
 * d'une carte à l'autre, quelle que soit la longueur du titre produit.
 */
body.wcdc-title-clamp .woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	line-height: 1.3em;
}

/* ---------- Produit épuisé ---------- */

/* Image grisée + badge discret, plus lisible que le style WooCommerce par défaut. */
body.wcdc-outofstock-badge .woocommerce ul.products li.product.outofstock img.attachment-woocommerce_thumbnail {
	filter: grayscale(1);
	opacity: .55;
}

body.wcdc-outofstock-badge .woocommerce ul.products li.product.outofstock::after {
	/* Libellé injecté par PHP, donc traduisible — il était codé en dur en CSS. */
	content: var(--wcdc-outofstock-label, "\00C9puis\00E9");
	position: absolute;
	top: 10px;
	left: 10px;
	background: #6b6b6b;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	body.wcdc-image-zoom .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
		transition: none;
	}
	body.wcdc-image-zoom .woocommerce ul.products li.product:hover img.attachment-woocommerce_thumbnail {
		transform: none;
	}
}