/* ==========================================================================
   HiveShop — boutique : grille produits, fiche produit, panier, tunnel
   ========================================================================== */

/* === EN-TETE DE LA BOUTIQUE === */

.woocommerce-products-header { margin-bottom: 1.25rem; }

.woocommerce-products-header__title { margin-bottom: 0.3rem; }

.term-description { color: var(--hs-text-muted); }

/* WooCommerce insere des <br class="clear"> entre ses blocs, vestige de
   l'epoque des flottants. En grille moderne ils ne servent qu'a creuser
   des vides de plusieurs dizaines de pixels. */
.woocommerce .hs-shop-toolbar br.clear,
.woocommerce ul.products br.clear,
.woocommerce div.product br.clear {
	display: none;
}

.woocommerce-result-count {
	margin: 0;
	color: var(--hs-text-muted);
	font-size: 0.875rem;
}

.woocommerce-ordering { margin: 0; }

.woocommerce-ordering select {
	width: auto;
	min-width: 220px;
	padding-block: 0.55rem;
	font-size: 0.9375rem;
}

/* ─── LE TRI EN BOUTONS ─────────────────────────────────────────────────────
 *
 * 🔑 LE MEME VOCABULAIRE QUE LES FILTRES D'AVIS.
 *
 * Pastille arrondie, bordure fine, primaire pleine a l'etat actif : ce sont les
 * memes valeurs que « .hs-avis-filtre ». Deux dessins differents pour deux
 * series de boutons qui font le meme geste — restreindre ou reordonner une
 * liste — donneraient deux vocabulaires a apprendre au lieu d'un.
 *
 * 🔴 AUCUNE COULEUR EN DUR : LE THEME CHANGE DE PALETTE.
 *
 * Six prereglages (ardoise, ocean, foret, terracotta, prune, nuit) et douze
 * couleurs reglables. Un « #1d2327 » ecrit ici resterait sombre sur la palette
 * « nuit » et deviendrait illisible. Tout passe par --hs-*, avec un repli
 * uniquement pour le cas ou la feuille dynamique ne serait pas chargee.
 *
 * 🔴 « --hs-on-primary », PAS « --hs-on-accent ».
 *
 * Piege deja rencontre sur les filtres d'avis : l'encre d'accent ecrivait du
 * noir sur du noir, la primaire etant un presque-noir sur la palette par
 * defaut. L'encre doit etre celle calculee POUR le fond qu'on utilise. */
.hs-tri {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

.hs-tri__btn {
	padding: 0.4375rem 0.875rem;
	border: 1px solid var(--hs-border, #e5e7eb);
	background: var(--hs-bg, #fff);
	border-radius: 99px;
	color: var(--hs-text-muted, #6b7280);
	font-size: 0.8125rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--hs-transition, .15s ease),
	            background var(--hs-transition, .15s ease),
	            color var(--hs-transition, .15s ease);
}

.hs-tri__btn:hover,
.hs-tri__btn:focus-visible {
	border-color: var(--hs-primary, #1f2937);
	color: var(--hs-text, #374151);
	text-decoration: none;
}

.hs-tri__btn.est-actif {
	background: var(--hs-primary, #1f2937);
	border-color: var(--hs-primary, #1f2937);
	color: var(--hs-on-primary, #fff);
	font-weight: 600;
}

/* 🔴 SIX BOUTONS NE TIENNENT PAS SUR 390 PX : ILS S'EMPILENT.
 *
 * Mesure : les libelles courts font ensemble 564 px ; le telephone en offre
 * 343.
 *
 * 🔴 UNE BANDE QUI DEFILE A ETE ESSAYEE, ET REFUSEE.
 *
 * Premiere version : defilement horizontal avec accrochage. Deux defauts, dans
 * cet ordre —
 *
 *   1. le dernier bouton visible etait tranche au milieu d'un mot
 *      (« Nouveaut… ») : un texte coupe se lit comme un defaut de mise en
 *      page, pas comme une invitation a faire glisser ;
 *   2. corrige par un fondu lateral, il restait qu'un tri CACHE hors ecran
 *      n'existe pas — c'est le probleme meme du menu deroulant qu'on venait
 *      de supprimer.
 *
 * Chris : « tu peux pas les empiler les boutons en verticale que ce soit joli
 * sur le mobile ». C'est la bonne reponse : sur un telephone la hauteur est
 * gratuite, la largeur non.
 *
 * 🔑 UNE GRILLE, PAS UN RETOUR A LA LIGNE.
 *
 * « flex-wrap » aligne des pastilles de largeurs differentes et laisse un
 * trou variable en fin de chaque rangee. « auto-fit » avec « 1fr » donne des
 * colonnes EGALES : les boutons forment un pave regulier, et le nombre de
 * colonnes s'ajuste tout seul — trois sur un grand telephone, deux sur un
 * petit, sans qu'aucune largeur ne soit ecrite en dur. */
@media (max-width: 767px) {
	.hs-tri {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
		gap: 0.375rem;
		width: 100%;
	}

	.hs-tri__btn {
		text-align: center;
		padding-inline: 0.5rem;
		/* Sans cela, un libelle plus long que sa colonne l'elargirait et
		   casserait l'egalite des colonnes. */
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* 🔑 LE TRI SANS RECHARGEMENT DOIT SE VOIR PENDANT QU'IL TRAVAILLE.
 *
 * Sans retour visuel, un reseau lent donne une page qui ne repond pas : on
 * reclique, et le deuxieme appel annule le premier — la reponse arrive alors
 * plus tard qu'en laissant faire.
 *
 * Le contenu s'attenue et cesse d'accepter les clics, la barre de tri restant
 * pleinement lisible : c'est elle qu'on regarde, et le bouton choisi est deja
 * en surbrillance. */
.hs-shop-main.est-en-cours ul.products,
.hs-shop-main.est-en-cours .woocommerce-pagination {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity var(--hs-transition, .15s ease);
}

@media (prefers-reduced-motion: reduce) {
	.hs-shop-main.est-en-cours ul.products,
	.hs-shop-main.est-en-cours .woocommerce-pagination { transition: none; }
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	float: none;
}

.hs-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--hs-border);
}

/* === GRILLE PRODUITS === */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(var(--hs-cols, 4), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	text-align: left;
}

/* Vignette : ratio carre, seconde image revelee au survol. */

.hs-card__media {
	position: relative;
	overflow: hidden;
	margin-bottom: 0.85rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	background: var(--hs-bg-alt);
	aspect-ratio: 1 / 1;
}

.woocommerce ul.products li.product a img,
.hs-card__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 420ms cubic-bezier(.4, 0, .2, 1), opacity var(--hs-transition);
}

.hs-card__hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 260ms ease;
}

.hs-card__hover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

li.product:hover .hs-card__hover { opacity: 1; }

li.product:hover .hs-card__media > a img:first-of-type { transform: scale(1.04); }

/* Bouton d'ajout : masque, il monte au survol. Sur ecran tactile il reste
   visible en permanence — il n'y a pas de survol a exploiter. */

/* 🔑 LES BOUTONS SONT SOUS LE PRIX, ET TOUJOURS VISIBLES.
 *
 * Ils etaient poses sur l'image, reveles au survol. Mais le survol n'existe
 * pas sur un ecran tactile : le theme les y affichait alors en permanence,
 * masquant le bas de chaque photo — exactement ce qu'on voulait eviter.
 *
 * « margin-top: auto » les pousse au bas de la tuile. La grille reste donc
 * reguliere meme quand un titre tient sur deux lignes et le voisin sur une :
 * c'est ce que la surimpression cherchait a obtenir, obtenu autrement. */

.hs-card__action {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.6rem;
}

/* La tuile devient une colonne, sans quoi « margin-top: auto » n'a aucun
   effet : il lui faut un conteneur flexible pour pousser contre. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.hs-card__action .button {
	width: 100%;
	padding: 0.65rem 1rem;
	font-size: 0.875rem;
}

/* === APRES UN AJOUT AU PANIER ===
 *
 * 🔴 WOOCOMMERCE SORT UN LIEN NU, PAS UN BOUTON.
 *
 * « Voir le panier » arrive en simple <a>, souligne, colle au bouton qu'il
 * suit. A cote d'un bouton plein, il fait accident : deux propositions de
 * meme importance, dont une seule ressemble a quelque chose sur quoi cliquer.
 *
 * On lui donne donc la meme forme — meme hauteur, meme rayon, meme graisse —
 * et une couleur DIFFERENTE, pour qu'il se distingue sans se disputer
 * l'attention avec l'action principale.
 */

.added_to_cart,
.hs-card__action .added_to_cart {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0.65rem 1rem;
	border: 1px solid var(--hs-accent);
	border-radius: var(--hs-radius);
	background: var(--hs-accent);
	/* 🔴 « --hs-heading » SUR « --hs-accent » : LE PIEGE QUE CE FICHIER DECRIT
	   LUI-MEME quarante lignes plus haut, et qu'il reproduisait ici. Sur la
	   palette par defaut, titres et accent sont tous deux sombres : 1,9:1.
	   --hs-on-accent existe precisement pour ce cas — elle est CALCULEE pour
	   l'accent, quelle que soit la palette. */
	color: var(--hs-on-accent, var(--hs-heading));
	font-family: var(--hs-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background var(--hs-transition), border-color var(--hs-transition), color var(--hs-transition);
}

/* Au survol le fond devient « heading » : l'encre suit, avec le jeton derive
   du meme fond. « --hs-bg » marchait par hasard sur les palettes claires. */
.added_to_cart:hover,
.hs-card__action .added_to_cart:hover {
	background: var(--hs-heading);
	border-color: var(--hs-heading);
	color: var(--hs-on-heading, var(--hs-bg));
}

/* Sur une fiche produit, le lien n'est pas dans une tuile : il ne doit pas
   s'etaler sur toute la largeur du contenu. */
.woocommerce div.product .added_to_cart,
.woocommerce-page div.product .added_to_cart {
	width: auto;
	margin-left: 0.5rem;
	padding: 0.75rem 1.25rem;
}

/* 🔑 L'ETAT « added » DOIT AVOIR SA COULEUR.
 *
 * Sans regle, le bouton retombe sur le style general et vire au presque-noir :
 * le client ne sait pas si son geste a fonctionne. Un vert de confirmation,
 * pris dans la palette, et l'affaire est dite. */

/* 🔑 La CONFIRMATION d'un achat doit se lire sur les douze palettes. En
   « #fff », elle tombait a 1,7:1 sur « nuit » et 2,0:1 sur « or & nuit »
   (mesure du 26/08) : le client cliquait, et ne voyait pas que ca avait
   marche. */
.woocommerce a.button.added,
.woocommerce button.button.added,
.hs-card__action .button.added {
	background: var(--hs-success, #15803d);
	border-color: var(--hs-success, #15803d);
	color: var(--hs-on-success, #fff);
}

.woocommerce a.button.added:hover,
.woocommerce button.button.added:hover,
.hs-card__action .button.added:hover {
	background: var(--hs-success, #15803d);
	border-color: var(--hs-success, #15803d);
	color: var(--hs-on-success, #fff);
	transform: none;
}

.woocommerce a.button.added::after,
.hs-card__action .button.added::after {
	margin-left: 0.4rem;
	font-weight: 700;
}

/* 🔑 PENDANT L'APPEL, LE BOUTON DOIT LE DIRE.
 *
 * Sans retour visuel, le client reclique — et ajoute deux fois le meme
 * article sans s'en rendre compte. */
.woocommerce a.button.loading,
.hs-card__action .button.loading {
	opacity: 0.75;
	pointer-events: none;
}

/* Textes de la carte. */

.hs-card__cat {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--hs-text-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* 🔑 LE SOULIGNEMENT VIENT DU LIEN, PAS DU TITRE.
 *
 * WooCommerce enveloppe toute la tuile dans un <a> : le titre herite donc du
 * soulignement des liens de contenu. Sur une grille de douze produits, cela
 * fait douze traits qui ne designent rien — le lien, c'est la tuile entiere. */

.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 0.35rem;
	padding: 0;
	color: var(--hs-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.woocommerce ul.products li.product a {
	text-decoration: none;
}

.woocommerce ul.products li.product .price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	color: var(--hs-heading);
	font-size: 1rem;
	font-weight: 600;
}

.woocommerce ul.products li.product .price del {
	color: var(--hs-text-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	background: transparent;
	color: var(--hs-sale);
	text-decoration: none;
}

/* 🔑 LES ETOILES ET LE COMPTE SUR UNE SEULE LIGNE.
 *
 * « .star-rating » est un bloc chez WooCommerce, et il flotte : le compte
 * ajoute apres lui passait a la ligne, ou se collait sous les etoiles. On
 * lui rend son rang d'element en ligne, et on aligne les deux sur la
 * meme base. */
.wc-block-grid__product-rating .star-rating,
.woocommerce ul.products li.product .star-rating {
	display: inline-block;
	float: none;
	vertical-align: middle;
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	color: var(--hs-accent);
}

/* Le nombre d'avis : discret, mais lisible. C'est un reperage, pas une
   information principale — il ne doit pas peser autant que le prix.
   Les deux selecteurs : la grille classique, et les BLOCS de l'editeur
   (accueil, pages construites a la main) qui ont leur propre structure. */
.wc-block-grid__product-rating .hs-card__avis,
.woocommerce ul.products li.product .hs-card__avis {
	display: inline-block;
	vertical-align: middle;
	margin: 0.35rem 0 0 0.4rem;
	font-size: 0.75rem;
	color: var(--hs-text-muted, #6b7280);
	white-space: nowrap;
}

/* === FICHE PRODUIT === */

.woocommerce div.product {
	position: relative;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	/* 🔑 LA PHOTO PREND PLUS DE PLACE QUE LE TEXTE.
	 *
	 * A 1,1 contre 1, l'image faisait 696 px sur un ecran de 1376 : a peine
	 * plus que la colonne de texte, alors que c'est elle qu'on regarde pour
	 * decider. Un tapis se juge sur sa matiere et sa teinte, pas sur une liste.
	 *
	 * A 1,45 contre 1 elle passe a 800 px, et la colonne de droite garde
	 * environ 550 px — assez pour le prix, les variantes et le bouton, qui
	 * n'ont jamais eu besoin de plus. */
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	align-items: start;
}

/* 🔴 PAS DE COLONNE COLLANTE. LA GALERIE MONTE AVEC LA PAGE.
 *
 * Le theme demandait « position: sticky » depuis le debut, mais WooCommerce
 * imposait « relative » avec une specificite plus forte (0,4,2 contre 0,3,2) :
 * l'effet n'avait donc JAMAIS fonctionne, et personne ne l'avait vu.
 *
 * En corrigeant la specificite le 20/08/2026, je l'ai active pour la premiere
 * fois — et le resultat est mauvais. La galerie fait l'image plus huit
 * vignettes : elle est plus haute que la fenetre. Un bloc plus haut que la
 * fenetre ne « colle » pas, il se fige : on descend, le texte defile, et
 * l'image reste plantee. Verdict de Chris, sans appel : « c'est horrible ».
 *
 * « top » doit etre remis a « auto » explicitement, sinon le decalage de 96 px
 * hérité de l'ancienne regle continue de s'appliquer.
 */
.woocommerce div.product div.images.woocommerce-product-gallery {
	/* 🔴 « relative », PAS « static » — ET SURTOUT PAS « sticky ».
	 *
	 * Trois etats, trois consequences, mesurees le 20/08/2026 :
	 *
	 *   sticky   la galerie est plus haute que la fenetre : elle se fige au
	 *            lieu de suivre. « C'est horrible » (Chris).
	 *   static   la loupe de zoom, en « absolute », perd son referent et se
	 *            cale sur div.product — elle atterrissait A CHEVAL SUR LE
	 *            TITRE du produit, a 1584 px du bord.
	 *   relative la galerie monte avec la page ET sert de repere aux elements
	 *            positionnes qu'elle contient.
	 *
	 * « top: auto » reste indispensable : sans lui, le decalage de 96 px
	 * herite de l'ancienne regle sticky s'applique de nouveau, un element
	 * « relative » lisant « top » comme un « sticky ». */
	position: relative;
	top: auto;
	width: 100% !important;
	float: none !important;
	margin: 0;
}

/* Le badge de remise est en position absolue : sans reference positionnee,
   il se calerait sur la fenetre et flotterait au-dessus de l'image. */
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}

.woocommerce div.product .woocommerce-product-gallery .hs-badge,
.woocommerce div.product > .hs-badge {
	top: 1rem;
	left: 1rem;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper { border-radius: var(--hs-radius); overflow: hidden; }

.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--hs-radius); }

/* 🔴 LES SELECTEURS SONT LONGS A DESSEIN : ILS DOIVENT BATTRE WOOCOMMERCE.
 *
 * Mesure du 20/08/2026, avant correction :
 *
 *   case de la grille   132 px          vignette affichee   33 px  (desktop)
 *   case de la grille    54 px          vignette affichee   14 px  (390 px)
 *
 * Une vignette de 14 px ne se voit pas et ne se touche pas.
 *
 * La cause n'est pas notre CSS, c'est celui de WooCommerce :
 *
 *   .woocommerce div.product div.images .flex-control-thumbs li  (0,4,3)
 *       width: 25%;
 *   .woocommerce div.product .flex-control-thumbs li             (0,3,2)  ← le notre
 *       width: auto;
 *
 * Le sien gagne. Et « 25 % » se calcule sur la CASE DE GRILLE, pas sur la
 * bande : chaque vignette occupait donc le quart de sa case. On reprend son
 * selecteur en y ajoutant une classe, ce qui suffit a passer devant sans
 * dependre de l'ordre de chargement des feuilles — et sans « !important »,
 * qui rendrait la regle impossible a ajuster ensuite.
 */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	gap: 0.5rem;
	/* auto-fill plutot qu'un nombre fixe : cinq colonnes sur un telephone
	   donnent des timbres-poste, et huit photos sur cinq colonnes laissent une
	   seconde ligne a trois trous. La bande se remplit d'elle-meme. */
	grid-template-columns: repeat(auto-fill, minmax(clamp(64px, 8vw, 96px), 1fr));
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	/* Les photos d'un fournisseur ne sont pas toutes au meme format. Sans
	   cadrage impose, la bande devient un escalier. */
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-sm);
	opacity: 0.7;
	cursor: pointer;
	transition: opacity var(--hs-transition), border-color var(--hs-transition);
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--hs-primary);
	opacity: 1;
}

/* ─── LES CHEVRONS DE LA GALERIE ────────────────────────────────────────────
 *
 * 🔴 POURQUOI ILS EXISTENT : LES VIGNETTES SONT TROP BAS.
 *
 * Mesure du 21/08/2026, fiche a huit photos, fenetre de 860 px : la grande
 * image fait 1047 px de haut et la bande de vignettes commence a y = 1309 —
 * soit 449 px SOUS le bas de l'ecran. Changer de photo demandait de descendre,
 * cliquer, puis remonter pour regarder. Seize allers-retours pour huit photos.
 *
 * 🔑 LE MEME LANGAGE QUE LA LOUPE, PARCE QU'ILS FONT LE MEME METIER.
 *
 * La loupe de WooCommerce est une pastille ronde blanche de 36 px, posee a
 * 16 px du bord, en z-index 99. Les chevrons reprennent exactement cela : ce
 * sont les commandes de l'image, elles doivent se ressembler. Un troisieme
 * style aurait fait trois vocabulaires sur un seul visuel.
 *
 * 🔑 DISCRETS, MAIS JAMAIS INVISIBLES.
 *
 * Chris : « des chevrons tres tres subtils ». Une opacite nulle au repos les
 * rendrait introuvables — personne ne survole une image pour decouvrir des
 * commandes dont il ignore l'existence. Ils se tiennent donc a 0.4, montent a
 * 1 au survol de la galerie, et restent a 0.75 en permanence sur les appareils
 * sans survol, ou ils n'ont aucune autre facon de se montrer.
 */
/* 🔑 LE CADRE DE L'IMAGE SERT DE REPERE AUX CHEVRONS.
 *
 * theme.js les deplace ici (voir son commentaire) pour qu'ils se centrent sur
 * la photo et non sur « photo + vignettes ». Encore faut-il que ce cadre soit
 * positionne : FlexSlider le fait, on l'ecrit quand meme — le jour ou il
 * changera d'avis, les chevrons partiraient se caler sur la page entiere sans
 * qu'aucune erreur ne le signale. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport {
	position: relative;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	z-index: 99;

	/* 36 px : la taille exacte de la loupe, mesuree sur la page. */
	width: 36px;
	height: 36px;
	margin-top: -18px;

	display: flex;
	align-items: center;
	justify-content: center;

	/* 🔴 Pastille blanche FIXE sous un chevron themable : sur les palettes
	   sombres, --hs-text est clair, donc chevron clair sur pastille blanche —
	   invisible. La pastille suit desormais le fond du theme. */
	background: var(--hs-bg, #fff);
	border-radius: 100%;
	box-shadow: 0 1px 4px rgb(0 0 0 / 12%);

	/* 🔴 « text-indent » PLUTOT QUE « font-size: 0 ».
	 *
	 * FlexSlider ecrit « Previous » et « Next » DANS le lien, et WooCommerce
	 * pose par-dessus une icone de police en « ::before ». Annuler la taille de
	 * police effacerait les deux — y compris l'icone si l'on decidait un jour
	 * de s'en servir. Le retrait deporte le texte hors de la pastille, que
	 * « overflow: hidden » decoupe ; les lecteurs d'ecran, eux, le lisent
	 * toujours. */
	overflow: hidden;
	text-indent: -9999px;

	opacity: 0.4;
	transition: opacity var(--hs-transition), background-color var(--hs-transition);
}

/* WooCommerce pose une icone de police dans ces liens : on la retire, le
   chevron est dessine ci-dessous. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a::before {
	content: none;
}

/* 🔑 LE CHEVRON EST DESSINE, PAS ECRIT.
 *
 * Deux bordures tournees a 45 degres, plutot qu'un caractere « ‹ » ou une
 * police d'icones : le trait garde la meme epaisseur a toutes les tailles, ne
 * depend d'aucune fonte a charger, et se recolore avec la palette du theme. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a::after {
	content: "";
	width: 9px;
	height: 9px;
	border-style: solid;
	border-color: var(--hs-text, #374151);
	border-width: 0 0 1.5px 1.5px;
	text-indent: 0;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-prev {
	left: 16px;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-next {
	right: 16px;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-prev::after {
	transform: rotate(45deg);
	/* Un chevron n'a pas son poids visuel au centre de sa boite : sans ces 2 px,
	   il parait colle au bord droit de la pastille. */
	margin-left: 3px;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-next::after {
	transform: rotate(-135deg);
	margin-right: 3px;
}

/* Survol de la GALERIE, pas du chevron : sinon il faudrait trouver une cible de
   36 px a 40 % d'opacite avant qu'elle ne devienne visible. */
.woocommerce div.product div.images.woocommerce-product-gallery:hover .flex-direction-nav a {
	opacity: 1;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a:hover {
	background: #fff;
	box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

/* 🔑 AU BOUT DE LA SERIE, LA FLECHE S'EFFACE.
 *
 * « animationLoop » est a false : a la derniere photo, « suivant » ne mene
 * nulle part. FlexSlider pose « flex-disabled » ; on la fait disparaitre plutot
 * que de la griser. Une fleche visible qui ne repond pas se clique deux fois
 * avant qu'on comprenne. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-disabled,
.woocommerce div.product div.images.woocommerce-product-gallery:hover .flex-direction-nav a.flex-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Sur un ecran tactile il n'y a pas de survol : les chevrons ne se
   reveleraient jamais. Ils restent donc lisibles en permanence, un peu plus
   petits pour ne pas manger l'image sur un telephone. */
@media (hover: none) {
	.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a {
		opacity: 0.75;
		width: 32px;
		height: 32px;
		margin-top: -16px;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-prev { left: 10px; }
	.woocommerce div.product div.images.woocommerce-product-gallery .flex-direction-nav a.flex-next { right: 10px; }
}

.woocommerce div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0;
}

.woocommerce div.product .product_title {
	margin-bottom: 0.5rem;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0 0 1rem;
	color: var(--hs-heading);
	font-size: 1.5rem;
	font-weight: 700;
}

.woocommerce div.product p.price del { color: var(--hs-text-muted); font-size: 1.1rem; font-weight: 400; opacity: 1; }
.woocommerce div.product p.price ins { background: transparent; color: var(--hs-sale); text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 1.5rem;
	color: var(--hs-text);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.woocommerce div.product form.cart .button {
	flex: 1 1 200px;
	padding-block: 0.95rem;
	font-size: 1rem;
}

.woocommerce div.product form.variations_form { display: block; }

.woocommerce div.product .variations {
	width: 100%;
	margin-bottom: 1rem;
}

.woocommerce div.product .variations th,
.woocommerce div.product .variations td {
	padding: 0.4rem 0;
	border: 0;
}

.woocommerce div.product .variations label { margin: 0; }

/* Selecteur de quantite. */

.woocommerce .quantity {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-sm);
}

.woocommerce .quantity input.qty {
	width: 56px;
	padding: 0.7rem 0.25rem;
	border: 0;
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
}

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

.hs-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 42px;
	border: 0;
	background: var(--hs-bg-alt);
	color: var(--hs-heading);
	cursor: pointer;
	transition: background var(--hs-transition), color var(--hs-transition);
}

.hs-qty__btn:hover { background: var(--hs-primary); color: var(--hs-on-primary); }

.woocommerce div.product .product_meta {
	padding-top: 1rem;
	border-top: 1px solid var(--hs-border);
	color: var(--hs-text-muted);
	font-size: 0.875rem;
}

.woocommerce div.product .product_meta > span { display: block; margin-bottom: 0.25rem; }

.woocommerce div.product .stock { color: var(--hs-success); font-weight: 500; }
.woocommerce div.product .stock.out-of-stock { color: var(--hs-sale); }

/* Onglets, avis, suggestions : ils occupent la largeur sous les deux colonnes.
 *
 * 🔴 « div.product » EST UNE GRILLE — TOUT ENFANT OUBLIE ICI SE RETRECIT.
 *
 * Mesure du 21/08/2026, apres avoir sorti les avis de leur onglet :
 *
 *   div.product      1376 px   grille de deux colonnes
 *   onglets          1376 px   ils portent « grid-column: 1 / -1 »
 *   bloc des avis     786 px   ← tombe dans la colonne de la GALERIE
 *
 * Rien ne le signale : pas d'erreur, pas de debordement, juste des avis sur
 * trois colonnes serrees dans la moitie gauche pendant que la droite reste
 * vide. Chris : « j'ai l'impression que ça s'arrête au milieu du texte ».
 *
 * Tout bloc ajoute apres le resume doit donc etre inscrit ici. */

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .hs-avis-bloc,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	grid-column: 1 / -1;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--hs-border);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--hs-radius-sm);
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.6rem 1rem;
	color: var(--hs-text-muted);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hs-primary); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--hs-bg-alt);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	margin-bottom: 1.25rem;
	font-size: 1.4rem;
}

/* === AVIS === */

.woocommerce #reviews #comments ol.commentlist { padding: 0; }

.woocommerce #reviews #comments ol.commentlist li {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--hs-border);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0 0 0 68px;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	width: 52px;
	border: 0;
	border-radius: 999px;
	padding: 0;
	background: none;
}

.woocommerce p.stars a { color: var(--hs-accent); }

/* === PANIER === */

.woocommerce table.shop_table {
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th {
	padding: 0.9rem 1rem;
	background: var(--hs-bg-alt);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.woocommerce table.shop_table td { padding: 1rem; }

.woocommerce table.cart img { width: 72px; border-radius: var(--hs-radius-sm); }

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--hs-bg-alt);
	color: var(--hs-text-muted) !important;
	font-size: 1.1rem;
	line-height: 1;
}

.woocommerce a.remove:hover {
	background: var(--hs-sale);
	color: var(--hs-on-sale, #fff) !important;
}

.woocommerce .cart-collaterals {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.5rem;
}

.woocommerce .cart_totals {
	width: min(420px, 100%);
	padding: 1.25rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	background: var(--hs-bg-alt);
	float: none !important;
}

.woocommerce .cart_totals h2 { font-size: 1.15rem; }

.woocommerce .wc-proceed-to-checkout { padding: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; margin: 0.5rem 0 0; }

/* === TUNNEL DE COMMANDE === */

.woocommerce-checkout .hs-main { padding-top: 1.5rem; }

.woocommerce-checkout form.checkout {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
}

.woocommerce-checkout #customer_details { grid-column: 1; }

.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout #order_review {
	grid-column: 2;
}

.woocommerce-checkout #order_review {
	position: sticky;
	top: calc(var(--hs-header-h) + 1.5rem);
	padding: 1.25rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	background: var(--hs-bg-alt);
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

.woocommerce form .form-row { margin-bottom: 1rem; padding: 0; }

.woocommerce form .form-row label { display: block; }

.woocommerce-checkout #payment {
	border-radius: var(--hs-radius);
	background: var(--hs-bg);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 1rem;
	border-bottom: 1px solid var(--hs-border);
}

.woocommerce-checkout #payment div.form-row { padding: 1rem; }

.woocommerce-checkout #payment #place_order { width: 100%; padding-block: 0.95rem; font-size: 1rem; }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 0.875rem; }

/* === COMPTE CLIENT === */

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 240px;
	margin-right: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.8rem;
	border-radius: var(--hs-radius-sm);
	color: var(--hs-heading);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--hs-bg-alt);
	color: var(--hs-primary);
}

/* === RESPONSIVE === */

@media (max-width: 1024px) {
	.woocommerce div.product { grid-template-columns: 1fr; }

	/* 🔴 CE SELECTEUR EST LONG POUR LA MEME RAISON : IL DOIT BATTRE WOOCOMMERCE.
	 *
	 * Avant correction, en 390 px : position « relative » et top « 96px ».
	 * La galerie descendait donc de 96 px SANS que la place soit reservee,
	 * et le titre du produit venait se poser par-dessus la bande de vignettes.
	 *
	 * On croyait la regle ci-dessous appliquee. Elle ne l'etait pas :
	 *
	 *   .woocommerce div.product div.images.woocommerce-product-gallery  (0,4,2)
	 *       position: relative;                                (WooCommerce)
	 *   .woocommerce div.product .woocommerce-product-gallery            (0,3,2)
	 *       position: static;                                  (le notre)
	 *
	 * Une media query n'ajoute AUCUNE specificite : etre dans un @media ne fait
	 * pas gagner une regle. Il fallait donc egaler le selecteur de WooCommerce.
	 *
	 * « top: auto » est indispensable : sans lui, le decalage de 96 px reste
	 * inscrit et ressortirait au premier retour a « relative ».
	 */
	.woocommerce div.product div.images.woocommerce-product-gallery {
		position: relative;
		top: auto;
	}

	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }

	.woocommerce-checkout #customer_details,
	.woocommerce-checkout h3#order_review_heading,
	.woocommerce-checkout #order_review { grid-column: 1; }

	.woocommerce-checkout #order_review { position: static; }
}

@media (max-width: 900px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

	.woocommerce table.shop_table_responsive tr td { text-align: right; }

	.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; margin: 0 0 1.5rem; }
}

/* ========================================================================
 * PAGE PANIER — BLOCS WOOCOMMERCE
 *
 * 🔴 CETTE PAGE N'UTILISE PAS LE SHORTCODE CLASSIQUE.
 *
 * Depuis WooCommerce 8, la page panier est faite de blocs Gutenberg :
 * vingt-sept blocs imbriques, aux classes « wc-block-* ». Aucune des classes
 * historiques — shop_table, cart_totals, cart-collaterals — n'y figure.
 *
 * Tout le CSS ecrit pour l'ancienne page ne s'appliquait donc a rien, et la
 * page arrivait avec les seuls styles de WooCommerce : bloc des totaux
 * debordant a droite, boutons sombres sur fond sombre, selecteur de quantite
 * illisible.
 * ===================================================================== */

/* 🔑 PANIER ET COMMANDE PRENNENT TOUTE LA LARGEUR UTILE.
 *
 * Ce ne sont pas des pages de lecture : personne ne lit un panier de gauche a
 * droite. Les brider a la largeur d'un article — pensee pour le confort de
 * lecture — comprimait le recapitulatif au point de couper les prix.
 *
 * On leur donne donc une largeur propre, plus genereuse que le contenu
 * editorial, et bornee par la fenetre pour ne jamais provoquer de defilement
 * horizontal. */

:root { --hs-shop-wide: min(1440px, 100% - 2rem); }

.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout.alignwide {
	width: var(--hs-shop-wide);
	max-width: var(--hs-shop-wide);
	margin-left: auto;
	margin-right: auto;
}

/* Le conteneur du theme ne doit pas les rebrider par-dessus. */
.woocommerce-cart .hs-container,
.woocommerce-checkout .hs-container,
.woocommerce-cart .hs-main > .hs-container,
.woocommerce-checkout .hs-main > .hs-container {
	max-width: var(--hs-shop-wide);
}

/* La grille : articles a gauche, totaux a droite. */
.wc-block-cart {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: start;
}

.wc-block-cart__main,
.wc-block-cart__sidebar { min-width: 0; }

/* 🔑 LES TOTAUX SUIVENT LE DEFILEMENT, SANS JAMAIS DEBORDER.
 *
 * Sur un panier de dix articles, le bouton « Valider la commande » disparait
 * en bas de page. Colle en haut, il reste sous les yeux.
 *
 * 🔴 MAIS UN BLOC COLLANT PLUS HAUT QUE LA FENETRE NE COLLE PLUS.
 *
 * Le navigateur le laisse alors defiler normalement, et son bas — donc le
 * bouton — sort de l'ecran sans jamais revenir. C'est le defaut classique de
 * « position: sticky » : il ne fonctionne que si l'element tient dans la
 * hauteur disponible.
 *
 * On borne donc sa hauteur a celle de la fenetre, moins l'en-tete. Au-dela,
 * c'est le bloc lui-meme qui defile — le bouton reste atteignable dans tous
 * les cas.
 *
 * « align-self: start » est indispensable : dans une grille, un element
 * s'etire par defaut sur toute la hauteur de sa ligne, ce qui annule
 * purement et simplement le collage. */

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar,
.woocommerce-checkout #order_review {
	position: sticky;
	top: calc(var(--hs-header-h) + 1rem);
	align-self: start;
	max-height: calc(100vh - var(--hs-header-h) - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* La barre de defilement n'apparait que si elle sert a quelque chose. */
	scrollbar-width: thin;
}

.wc-block-cart__sidebar {
	padding: 1.25rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	background: var(--hs-bg-alt);
}

/* --- Les lignes d'articles --- */

.wc-block-cart-items { border-collapse: collapse; }

.wc-block-cart-items__header {
	color: var(--hs-text-muted);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--hs-border);
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--hs-border);
}

.wc-block-cart-item__image img {
	width: 100%;
	max-width: 72px;
	border-radius: var(--hs-radius);
}

.wc-block-components-product-name {
	color: var(--hs-heading);
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-product-name:hover { color: var(--hs-primary); }

.wc-block-cart-item__total,
.wc-block-components-product-price__value {
	color: var(--hs-heading);
	font-weight: 700;
}

.wc-block-components-product-price del { opacity: 0.55; font-weight: 400; }

/* --- Selecteur de quantite ---
 *
 * 🔴 SES BOUTONS ETAIENT NOIRS SUR NOIR.
 *
 * WooCommerce les rend en <button> nus. La regle generale du theme leur
 * appliquait donc un fond plein et 1,5 rem de rembourrage : deux gros paves
 * sombres encadrant un chiffre illisible. */

.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	max-width: 120px;
	border: 1px solid var(--hs-border);
	border-radius: 999px;
	background: var(--hs-bg);
	overflow: hidden;
}

.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	width: 2.5rem;
	min-width: 0;
	padding: 0.45rem 0;
	border: 0;
	background: transparent;
	color: var(--hs-heading);
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button {
	flex: 0 0 auto;
	width: 2rem !important;
	height: 2rem !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--hs-text-muted) !important;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1;
	opacity: 1;
	box-shadow: none !important;
	transition: background var(--hs-transition), color var(--hs-transition);
}

.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:hover:not([disabled]) {
	background: var(--hs-primary) !important;
	color: var(--hs-on-primary) !important;
	transform: none;
}

.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

/* --- Le lien « Retirer » --- */

/* 🔴 « Retirer » SORTAIT EN RECTANGLE NOIR VIDE.
 *
 * WooCommerce le rend en <button> dont le libelle est masque pour les seuls
 * lecteurs d'ecran. Sans style propre, il heritait du fond plein du theme :
 * un pave sombre sans texte, dont personne ne pouvait deviner l'usage. */

button.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link {
	display: inline-block;
	width: auto;
	min-width: 0;
	margin-top: 0.4rem;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--hs-text-muted) !important;
	font-family: var(--hs-font-body);
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: underline;
	box-shadow: none !important;
}

button.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:hover {
	color: var(--hs-sale, #dc2626) !important;
	background: none !important;
	transform: none;
}

/* --- Les totaux --- */

.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper .wc-block-components-title {
	color: var(--hs-text-muted);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
	font-size: 0.9rem;
	color: var(--hs-text);
}

.wc-block-components-totals-item__value {
	font-weight: 600;
	color: var(--hs-heading);
	white-space: nowrap;
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--hs-heading);
}

.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--hs-border);
	padding-top: 0.75rem;
	margin-top: 0.75rem;
}

.wc-block-components-totals-wrapper:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

/* --- Les boutons ---
 *
 * 🔴 « Valider la commande » SORTAIT NOIR SUR NOIR.
 *
 * Le bloc pose sa propre couleur de fond, que le theme ne connaissait pas. */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
a.wc-block-cart__submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.85rem 1.25rem;
	border: 1px solid var(--hs-primary);
	border-radius: var(--hs-radius);
	background: var(--hs-primary);
	color: var(--hs-on-primary);
	font-family: var(--hs-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
a.wc-block-cart__submit-button:hover {
	background: var(--hs-primary-dark);
	border-color: var(--hs-primary-dark);
	color: var(--hs-on-primary);
}

/* Le code promo : un depliant discret, pas un formulaire de plus. */
.wc-block-components-panel__button {
	color: var(--hs-text-muted);
	font-size: 0.85rem;
	font-weight: 500;
	background: none;
	border: 0;
	padding: 0.35rem 0;
}

.wc-block-components-panel__button:hover { color: var(--hs-primary); }

.wc-block-components-totals-coupon__button {
	background: var(--hs-heading);
	border-color: var(--hs-heading);
	color: var(--hs-bg);
	white-space: nowrap;
}

/* --- Panier vide --- */

.wc-block-cart__empty-cart__title {
	color: var(--hs-heading);
	font-family: var(--hs-font-heading);
}

/* --- Mobile ---
 *
 * 🔑 UNE SEULE COLONNE, ET LES TOTAUX EN PREMIER.
 *
 * Sur un ecran etroit, faire defiler dix articles avant d'apercevoir le
 * montant total est la meilleure facon de perdre un client. Le recapitulatif
 * passe donc au-dessus, et il cesse d'etre colle : deux zones collantes sur
 * 400 px de haut ne laisseraient plus rien a lire. */

@media (max-width: 900px) {
	.wc-block-cart {
		grid-template-columns: minmax(0, 1fr);
	}

	.wc-block-cart__sidebar {
		position: static;
		order: -1;
	}
}

@media (max-width: 600px) {
	.wc-block-cart-items__header { display: none; }

	.wc-block-cart-item__image img { max-width: 56px; }

	.wc-block-cart__sidebar { padding: 1rem; }

	.wc-block-components-quantity-selector { max-width: 108px; }
}


/* === TUNNEL DE COMMANDE EN BLOCS ===
 *
 * La page « Validation de la commande » est elle aussi faite de blocs. Elle
 * porte ses propres classes, distinctes de celles du panier. */

.wc-block-checkout__main,
.wc-block-checkout__sidebar { min-width: 0; }

.wc-block-checkout__sidebar {
	padding: 1.25rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius);
	background: var(--hs-bg-alt);
}

.wc-block-components-checkout-place-order-button {
	width: 100%;
	margin-top: 0.75rem;
}

.wc-block-components-address-form input,
.wc-block-components-text-input input,
.wc-block-components-select select {
	border-color: var(--hs-border);
	border-radius: var(--hs-radius-sm);
	font-family: var(--hs-font-body);
}

.wc-block-components-checkout-step__heading,
.wc-block-components-title {
	color: var(--hs-heading);
	font-family: var(--hs-font-heading);
}

/* 🔑 SUR MOBILE, RIEN NE COLLE.
 *
 * Deux zones collantes sur 400 px de haut ne laisseraient plus rien a lire, et
 * le recapitulatif passe au-dessus pour que le montant soit visible d'emblee.
 * Faire defiler dix articles avant d'apercevoir le total est la meilleure
 * facon de perdre un client. */

@media (max-width: 900px) {
	.wc-block-checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.wc-block-cart__sidebar,
	.wc-block-checkout__sidebar,
	.woocommerce-checkout #order_review {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.wc-block-checkout__sidebar { order: -1; }

	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout #customer_details,
	.woocommerce-checkout h3#order_review_heading,
	.woocommerce-checkout #order_review {
		grid-column: 1;
	}
}


/* === TUNNEL DE COMMANDE ===
 *
 * 🔴 NE PAS IMPOSER SA PROPRE GRILLE.
 *
 * J'avais force « display: grid » sur les conteneurs du bloc de commande. Le
 * resultat fut pire que le mal : le formulaire comprime a 230 px sur la
 * gauche, le recapitulatif reduit a une colonne de 110 px ou le titre
 * s'affichait sur trois lignes coupees, et les deux tiers de la page vides.
 *
 * 🔑 CE BLOC EST MONTE EN JAVASCRIPT, ET IL A DEJA SA MISE EN PAGE.
 *
 * Ses classes ne sont pas lisibles depuis le serveur, et sa structure interne
 * change d'une version a l'autre. Lui imposer une grille depuis l'exterieur,
 * c'est parier sur un DOM qu'on ne voit pas — et le pari a ete perdu.
 *
 * On se contente donc de ce qui est sur : la LARGEUR disponible et les
 * COULEURS. La disposition reste celle de WooCommerce, qui sait ou sont ses
 * propres colonnes.
 */

.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wc-block-components-sidebar,
.wc-block-components-main,
.wp-block-woocommerce-checkout-fields-block,
.wp-block-woocommerce-checkout-totals-block {
	min-width: 0;
	max-width: 100%;
}

/* Les lignes du recapitulatif : le prix ne se coupe jamais, le nom passe a la
   ligne au besoin. */
.wc-block-components-order-summary-item__total-price {
	font-weight: 700;
	color: var(--hs-heading);
	white-space: nowrap;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	overflow-wrap: anywhere;
}

/* 🔴 LA PASTILLE DE QUANTITE ETAIT INVISIBLE.
 *
 * Deux defauts superposes, et chacun suffisait :
 *
 * 1. LA SPECIFICITE. WooCommerce qualifie sa regle par le conteneur —
 *    « .wc-block-components-order-summary .…__quantity », soit (0,2,0)
 *    contre (0,1,0) ici. Notre fond n'etait jamais applique, et celui de
 *    WooCommerce restait : « background: currentColor », c'est-a-dire la
 *    couleur du TEXTE environnant. Un gris pale.
 *
 * 2. LE CHIFFRE N'EST PAS DANS L'ELEMENT QU'ON PEIGNAIT. Il vit dans un
 *    <span> enfant qui porte son propre « color: #fff ». Une declaration
 *    « color » sur le parent ne l'atteint pas, meme en gagnant la
 *    specificite.
 *
 * Gris pale sur gris pale : on ne voyait rien.
 *
 * 🔑 EXACTEMENT LA PASTILLE DU MENU.
 *
 * Le compteur pose sur l'icone panier de l'en-tete et celui du
 * recapitulatif disent la meme chose au client. Ils partagent donc les
 * memes variables — « --hs-pastille-fond » et « --hs-pastille-encre »,
 * definies une seule fois dans components.css. Changer l'une change les
 * deux ; elles ne peuvent plus diverger.
 *
 * Seule la GEOMETRIE differe : WooCommerce ancre la sienne sur le coin de
 * la vignette, on le laisse faire.
 */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity,
.wc-block-components-order-summary-item__quantity {
	background: var(--hs-pastille-fond);
	color: var(--hs-pastille-encre);

	/* Un peu plus grande que celle du menu : 22 px contre 18. La vignette
	   du recapitulatif fait 64 px de cote, l'icone de l'en-tete 24 —
	   a taille egale, la pastille y paraissait perdue. */
	min-width: 22px;
	min-height: 22px;
	padding: 0 5px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;

	/* 🔑 LE SEUL ECART AVEC LA PASTILLE DU MENU, ET IL EST VOULU.
	 *
	 * Dans l'en-tete, elle est posee sur l'icone panier : jamais a cheval
	 * sur autre chose. Ici, elle deborde du coin de la photo — moitie sur
	 * la vignette, moitie sur le fond de la page.
	 *
	 * Mesure des douze palettes : l'accent sur le fond de page descend a
	 * 1,5 pour 1 sur « vitamine » (jaune sur blanc) et reste sous 3 pour 1
	 * sur six palettes. Sans liseré, la pastille s'y dissout.
	 *
	 * Le liseré prend la couleur du fond : il detache la pastille sans
	 * toucher a sa couleur, donc sans rompre le rappel. */
	border: 2px solid var(--hs-bg);
}

/* 🔴 LE CHIFFRE N'EST PAS DANS L'ELEMENT QU'ON PEINT.
 *
 * Il vit dans un <span> enfant, auquel WooCommerce donne son propre
 * « color: var(--wp--preset--color--base, #fff) ». Une declaration
 * « color » sur le parent ne l'atteint jamais. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span,
.wc-block-components-order-summary-item__quantity span {
	color: var(--hs-pastille-encre);
	padding: 0;
}

/* ========================================================================
 * BOUTONS DES BLOCS WOOCOMMERCE
 *
 * 🔴 LES EXCLURE DE LA REGLE GLOBALE NE SUFFISAIT PAS.
 *
 * La regle generale du theme les repeignait — mal, en gros paves sombres —
 * mais elle les repeignait. En la restreignant aux seuls elements qui
 * demandent une apparence de bouton, ceux des blocs se sont retrouves SANS
 * AUCUN style : ils sont donc revenus au violet par defaut de WooCommerce,
 * qui n'a rien a faire dans une boutique dont on choisit la palette.
 *
 * 🔑 EXCLURE D'UNE REGLE, C'EST S'ENGAGER A EN ECRIRE UNE AUTRE.
 *
 * Toutes les couleurs viennent de la palette : changer de theme les repeint.
 * ===================================================================== */

.wc-block-components-button:not(.is-link),
.wc-block-components-button.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-totals-coupon__button,
button.wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--hs-primary);
	border-radius: var(--hs-radius);
	background-color: var(--hs-primary);
	color: var(--hs-on-primary);
	font-family: var(--hs-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
	transition: background-color var(--hs-transition), border-color var(--hs-transition);
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-totals-coupon__button:hover,
button.wc-block-components-button:not(.is-link):hover {
	background-color: var(--hs-primary-dark);
	border-color: var(--hs-primary-dark);
	color: var(--hs-on-primary);
}

/* Le texte interne du bouton, que WooCommerce enveloppe. */
.wc-block-components-button__text { color: inherit; }

/* Les boutons « lien » restent des liens : les habiller en boutons ferait
   trois propositions de meme poids dans un formulaire qui n'en veut qu'une. */
.wc-block-components-button.is-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--hs-primary);
	font-weight: 500;
	text-decoration: underline;
}

.wc-block-components-button.is-link:hover { color: var(--hs-primary-dark); }

/* --- Champs de formulaire --- */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-combobox .components-form-token-field__input-container {
	border-color: var(--hs-border);
	border-radius: var(--hs-radius-sm);
	background: var(--hs-bg);
	color: var(--hs-heading);
	font-family: var(--hs-font-body);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	border-color: var(--hs-primary);
	outline: 2px solid rgba(var(--hs-primary-rgb, 31, 41, 55), 0.15);
	outline-offset: 0;
}

/* L'etiquette flottante prend la couleur du theme, pas le violet. */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
	color: var(--hs-primary);
}

/* --- Cases a cocher et boutons radio --- */

.wc-block-components-checkbox__input[type="checkbox"]:checked,
.wc-block-components-radio-control__input:checked {
	background-color: var(--hs-primary);
	border-color: var(--hs-primary);
}

.wc-block-components-radio-control-accordion-option--checked-option,
.wc-block-components-radio-control__option--checked-option {
	border-color: var(--hs-primary);
}

/* --- Notices --- */

.wc-block-components-notice-banner.is-error {
	border-color: var(--hs-sale, #dc2626);
	background: rgba(var(--hs-sale-rgb, 220, 38, 38), 0.06);
}

.wc-block-components-notice-banner.is-success {
	border-color: var(--hs-success, #15803d);
	background: rgba(var(--hs-success-rgb), 0.06);
}

/* --- Liens des blocs --- */

.wc-block-components-panel__button,
.wc-block-cart__empty-cart__title + p a,
.wc-block-components-order-summary__button-text {
	color: var(--hs-primary);
}


/* ========================================================================
 * 🔴 LE VIOLET DE WOOCOMMERCE
 *
 * WooCommerce peint ses boutons « alt » — celui de la fiche produit, celui
 * de la validation — en #7f54b3, sa couleur de marque. La regle qui l'impose
 * pese 0,3,1 de specificite :
 *
 *     .woocommerce button.button.alt { background-color: #7f54b3; }
 *
 * Toute regle du theme qui ne monte pas aussi haut est ignoree, si bien que
 * le bouton le plus important de la boutique restait violet sur un site dont
 * on choisit pourtant la palette.
 *
 * 🔑 ON NE SE BAT PAS A COUPS DE SPECIFICITE.
 *
 * On la depasse une fois, proprement, et on n'y revient plus. Les couleurs
 * viennent de la palette : changer de theme les repeint toutes.
 * ===================================================================== */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt {
	background-color: var(--hs-primary);
	border-color: var(--hs-primary);
	color: var(--hs-on-primary);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover {
	background-color: var(--hs-primary-dark);
	border-color: var(--hs-primary-dark);
	color: var(--hs-on-primary);
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled {
	background-color: var(--hs-border);
	border-color: var(--hs-border);
	color: var(--hs-text-muted);
}

/* Le selecteur de quantite de la fiche produit, colle au bouton. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

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

.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	margin: 0;
	padding: 0.85rem 1.5rem;
	border-radius: var(--hs-radius);
	font-size: 0.95rem;
	font-weight: 600;
}


/* ========================================================================
 * NOTICES WOOCOMMERCE
 *
 * Celle de l'ajout au panier est supprimee cote PHP — le tiroir dit deja ce
 * qu'elle annonce. Restent les autres : erreurs de formulaire, code promo
 * refuse, stock insuffisant. Elles sont utiles, mais arrivaient avec les
 * couleurs de WooCommerce : un vert et un bleu qui n'existent nulle part
 * ailleurs sur le site.
 * ===================================================================== */

/* ⚠️ LA MISE EN FORME DES NOTICES VIT DANS components.css, PAS ICI.
 *
 * Ce bloc la redefinissait a l'identique — ou presque : rayon, encre, marge et
 * taille differaient, et comme ce fichier n'est charge que sur les pages de
 * boutique, le rendu dependait de la page. Les selecteurs qui n'existaient que
 * dans l'autre fichier (.woocommerce-noreviews, p.no-comments) gardaient ses
 * valeurs : deux notices cote a cote n'avaient pas la meme apparence.
 *
 * Ne remettre ici que ce qui est PROPRE aux pages de boutique. */

/* WooCommerce pose une pastille en ::before : elle ne s'accorde a rien. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message { border-left-color: var(--hs-success, #15803d); }
.woocommerce-info    { border-left-color: var(--hs-primary); }
.woocommerce-error   { border-left-color: var(--hs-sale, #dc2626); }

.woocommerce-error li { list-style: none; }

/* Le bouton de la notice ne doit pas ecraser le message qu'il accompagne. */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	margin-left: auto;
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
}

/* --- Notices des blocs --- */

.wc-block-components-notice-banner {
	border-radius: var(--hs-radius);
	font-family: var(--hs-font-body);
}

.wc-block-components-notice-banner.is-info {
	border-color: var(--hs-primary);
	background: var(--hs-bg-alt);
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	color: var(--hs-heading);
}

/* ========================================================================
 * UNIFICATION DES DEUX MOTEURS DE RENDU
 *
 * 🔴 LE SITE AFFICHE SES PRODUITS DE DEUX FACONS SANS RIEN EN COMMUN.
 *
 * L'accueil emploie les blocs Gutenberg (« wc-block-grid__product »), toutes
 * les autres pages la boucle classique de WooCommerce. Le hook du theme n'est
 * donc jamais appele sur l'accueil : « .hs-card__action » n'y existe pas, et
 * aucune regle de tuile ne s'y applique.
 *
 * Mesure a l'appui : bouton a 12 px sur l'accueil contre 15 px partout
 * ailleurs, titre a 12 px/700 contre 16 px/600.
 *
 * 🔑 TOUTE REGLE DE TUILE VISE DESORMAIS LES DEUX. C'est la seule facon de ne
 *    plus corriger un cote en cassant l'autre.
 * ===================================================================== */

/* --- 1. LE BOUTON D'AJOUT, IDENTIQUE PARTOUT --- */

/* 🔴 LA SPECIFICITE DOIT EGALER CELLE DE WOOCOMMERCE, DES DEUX COTES.
 *
 * WooCommerce ecrit « .woocommerce ul.products li.product .button » — 0,3,2 de
 * specificite. Ma regle simple, a 0,2,0, etait donc ignoree sur la boutique
 * mais appliquee sur l'accueil, ou WooCommerce n'a pas de regle equivalente.
 *
 * Resultat : deux boutons differents pour un meme role, et la sensation de
 * corriger un cote en cassant l'autre. On monte au meme niveau partout. */

.woocommerce ul.products li.product .hs-card__action .add_to_cart_button,
.woocommerce-page ul.products li.product .hs-card__action .add_to_cart_button,
.hs-card__action .add_to_cart_button,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	/* La mesure de reference est celle de la boutique : plus lisible que les
	   12 px que les blocs imposaient sur l'accueil. */
	padding: 0.8rem 1.25rem;
	border: 1px solid var(--hs-primary);
	border-radius: var(--hs-radius);
	background-color: var(--hs-primary);
	color: var(--hs-on-primary);
	font-family: var(--hs-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.hs-card__action .add_to_cart_button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover {
	background-color: var(--hs-primary-dark);
	border-color: var(--hs-primary-dark);
	color: var(--hs-on-primary);
}

/* --- 2. LE CONTENEUR D'ACTIONS, DES DEUX COTES ---
 *
 * « .wc-block-grid__product-add-to-cart » joue exactement le role de
 * « .hs-card__action » : il doit empiler de la meme facon, sans quoi
 * « Voir le panier » se place differemment selon la page. */

.hs-card__action,
.wc-block-grid__product-add-to-cart,
.wp-block-woocommerce-product-button {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.6rem;
}

.wc-block-grid__product,
.wp-block-woocommerce-product-template li {
	display: flex;
	flex-direction: column;
}

/* --- 3. LE TITRE DE TUILE, IDENTIQUE PARTOUT --- */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wp-block-woocommerce-product-template .wp-block-post-title,
.wc-block-grid__product-title a {
	margin: 0 0 0.35rem;
	color: var(--hs-heading);
	font-family: var(--hs-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

/* --- LE PRIX, IDENTIQUE PARTOUT --- */

.wc-block-grid__product-price,
.wp-block-woocommerce-product-price {
	color: var(--hs-heading);
	font-size: 0.95rem;
	font-weight: 700;
}

.wc-block-grid__product-price del { opacity: 0.55; font-weight: 400; }
.wc-block-grid__product-price ins { text-decoration: none; }

/* --- 4. LES CHAMPS DE FORMULAIRE, UNE SEULE APPARENCE ---
 *
 * 🔴 DEUX BORDURES ET DEUX RAYONS POUR LA MEME FONCTION.
 *
 * Les champs classiques sortaient a rayon 0, ceux des blocs a 4 px, quand tout
 * le reste du theme est a 6. Trois arrondis differents sur un meme tunnel de
 * commande, cela se voit. */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .input-text,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select .wc-block-components-select__container {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-sm);
	background: var(--hs-bg);
	color: var(--hs-heading);
	font-family: var(--hs-font-body);
	font-size: 0.95rem;
	line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce .input-text:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	border-color: var(--hs-primary);
	outline: 2px solid rgba(var(--hs-primary-rgb, 31, 41, 55), 0.12);
	outline-offset: 0;
}

/* --- 5. UNE SEULE LARGEUR POUR TOUT LE PARCOURS D'ACHAT ---
 *
 * 🔴 1201 px sur la boutique, 1265 px sur le panier.
 *
 * Soixante-quatre pixels d'ecart entre deux pages du meme parcours : la grille
 * se decale d'un ecran a l'autre, et le regard le remarque sans savoir
 * pourquoi. */

.hs-entry--shop,
.woocommerce .hs-shop-layout,
.hs-main--shop .hs-container--wide {
	width: 100%;
	max-width: var(--hs-shop-wide);
	margin-left: auto;
	margin-right: auto;
}

/* ========================================================================
 * PARCOURS D'ACHAT — TABLETTE ET MOBILE
 *
 * 🔴 IL N'Y AVAIT PAS DE CSS MOBILE, SEULEMENT UN REPLI.
 *
 * Les regles precedentes se contentaient de passer la grille sur une colonne
 * en dessous de 900 px. Tout le reste — vignettes, badges, prix, marges —
 * gardait ses dimensions de bureau, et se retrouvait comprime dans 375 px.
 *
 * Constate sur mobile : le badge « Economisez 12,10 € » sortait de l'ecran,
 * les prix se collaient au bord droit, et une bande grise vide surmontait le
 * recapitulatif de commande.
 *
 * Trois paliers desormais : bureau, tablette (900 px), mobile (600 px).
 * ===================================================================== */

/* --- TABLETTE : 600 a 900 px --- */

@media (max-width: 900px) {

	/* Le recapitulatif passe au-dessus, mais sans occuper toute la hauteur :
	   sur une tablette, il reste de la place pour voir un article. */
	.wc-block-cart__sidebar,
	.wc-block-checkout__sidebar,
	.wc-block-components-sidebar {
		padding: 1rem 1.15rem;
	}

	/* Les lignes d'articles gardent leur vignette, mais reduite. */
	.wc-block-cart-item__image img { max-width: 64px; }

	/* Les boutons d'achat s'elargissent : le doigt vise moins bien
	   que le pointeur. */
	.hs-card__action .add_to_cart_button,
	.wc-block-grid__product-add-to-cart .wp-block-button__link {
		padding: 0.85rem 1rem;
	}
}

/* --- MOBILE : moins de 600 px --- */

@media (max-width: 600px) {

	/* 🔴 LE BADGE DE REMISE SORTAIT DE L'ECRAN.
	 *
	 * « Economisez 12,10 € » est pose a droite du prix, sur une ligne qui
	 * n'a plus la place de les tenir tous les deux. On le fait passer
	 * dessous, aligne a droite comme le montant qu'il commente. */
	.wc-block-cart-item__total,
	.wc-block-components-product-badge,
	.wc-block-cart-item__prices {
		display: block;
		max-width: 100%;
		overflow-wrap: anywhere;
		text-align: right;
	}

	.wc-block-components-sale-badge,
	.wc-block-cart-item__total .wc-block-components-sale-badge {
		display: inline-block;
		margin-top: 0.3rem;
		white-space: normal;
		font-size: 0.72rem;
		line-height: 1.3;
	}

	/* Les prix ne touchent plus le bord : la table de WooCommerce n'a pas de
	   marge propre, elle s'appuie sur celle de la page. */
	.wc-block-cart-items,
	.wc-block-cart-items__row {
		padding-left: 0;
		padding-right: 0;
	}

	.wc-block-cart-item__wrap { padding-right: 0.15rem; }

	/* Vignette plus petite : elle prenait le tiers de la largeur. */
	.wc-block-cart-item__image,
	.wc-block-cart-item__image img { max-width: 52px; }

	.wc-block-components-product-name { font-size: 0.9rem; }

	.wc-block-components-product-metadata,
	.wc-block-components-product-metadata__description { font-size: 0.82rem; }

	/* Le selecteur de quantite et la corbeille sur une meme ligne, serres. */
	.wc-block-cart-item__quantity {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.wc-block-components-quantity-selector { max-width: 104px; }

	/* Les totaux : libelle a gauche, montant a droite, sans debordement. */
	.wc-block-components-totals-item {
		gap: 0.5rem;
		font-size: 0.88rem;
	}

	.wc-block-components-totals-item__value { white-space: nowrap; }

	/* Le bouton de validation prend toute la largeur, et se voit. */
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button {
		padding: 0.95rem 1rem;
		font-size: 1rem;
	}

	/* 🔴 LA BANDE GRISE AU-DESSUS DU RECAPITULATIF.
	 *
	 * En dessous de 900 px, WooCommerce replie le recapitulatif derriere un
	 * bouton depliant. Le conteneur garde pourtant son rembourrage haut : il
	 * en resulte une bande vide au-dessus du titre, qui ne dit rien et donne
	 * l'impression d'un bloc casse. */
	.wc-block-checkout__sidebar,
	.wc-block-components-sidebar {
		padding-top: 0;
		border: 0;
		background: transparent;
	}

	.wc-block-components-checkout-order-summary__title,
	.wc-block-components-panel__button {
		margin: 0;
		padding: 0.9rem 1rem;
		border: 1px solid var(--hs-border);
		border-radius: var(--hs-radius);
		background: var(--hs-bg-alt);
		font-size: 0.95rem;
		font-weight: 600;
	}

	.wc-block-components-checkout-order-summary__content {
		padding: 0 1rem 1rem;
		border: 1px solid var(--hs-border);
		border-top: 0;
		border-radius: 0 0 var(--hs-radius) var(--hs-radius);
		background: var(--hs-bg-alt);
	}

	/* Deux colonnes de produits plutot qu'une : sur 375 px, une seule tuile
	   par ligne oblige a faire defiler dix ecrans pour voir six articles. */
	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.wc-block-grid__product-title {
		font-size: 0.88rem;
	}

	.hs-card__action .add_to_cart_button,
	.wc-block-grid__product-add-to-cart .wp-block-button__link {
		padding: 0.7rem 0.5rem;
		font-size: 0.82rem;
	}

	/* Le titre de page ne doit pas manger un ecran a lui seul. */
	.woocommerce-cart .hs-entry__title,
	.woocommerce-checkout .hs-entry__title { font-size: 1.75rem; }
}

/* --- TRES PETITS ECRANS : moins de 380 px --- */

@media (max-width: 380px) {
	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ========================================================================
 * PANIER MOBILE ET TABLETTE — RESSERRAGE DES LIGNES
 *
 * 🔴 LA VIGNETTE ETAIT LOIN DU TEXTE, LE BADGE ECRASE SUR TROIS LIGNES.
 *
 * WooCommerce reserve a la colonne image une largeur pensee pour le bureau :
 * la vignette y flotte a gauche, et le texte commence bien plus loin qu'elle
 * ne s'arrete. Sur 375 px, ces pixels perdus manquent cruellement a la
 * colonne de droite — « Economisez 12,10 € » s'y retrouvait coupe en trois.
 *
 * On rend donc a la colonne image sa largeur reelle, et le badge passe en
 * pleine largeur sous le prix plutot que de se plier dans une colonne etroite.
 * ===================================================================== */

@media (max-width: 900px) {

	/* La colonne image ne fait plus que la taille de sa vignette. */
	.wc-block-cart-item__image {
		width: 64px;
		min-width: 64px;
		padding-right: 0.65rem !important;
	}

	.wc-block-cart-item__image img {
		width: 64px;
		max-width: 64px;
		height: auto;
	}

	/* Le texte commence juste apres. */
	.wc-block-cart-item__product { padding-left: 0 !important; }

	/* 🔑 LE BADGE PREND TOUTE LA LARGEUR SOUS LE PRIX.
	 *
	 * Plie dans une colonne de 60 px, « Economisez 12,10 € » tenait sur trois
	 * lignes. Sous le prix, il en occupe une seule. */
	.wc-block-cart-item__total {
		padding-left: 0.35rem !important;
		text-align: right;
	}

	.wc-block-components-sale-badge {
		display: block;
		width: max-content;
		max-width: 100%;
		margin: 0.35rem 0 0 auto;
		padding: 0.2rem 0.45rem;
		white-space: nowrap;
		font-size: 0.7rem;
		line-height: 1.2;
	}
}

@media (max-width: 600px) {

	.wc-block-cart-item__image,
	.wc-block-cart-item__image img {
		width: 56px;
		min-width: 56px;
		max-width: 56px;
	}

	.wc-block-cart-item__image { padding-right: 0.55rem !important; }

	/* La description passe a la ligne au lieu de pousser la colonne. */
	.wc-block-components-product-metadata__description {
		overflow-wrap: anywhere;
		font-size: 0.8rem;
		line-height: 1.35;
	}

	/* 🔴 LE BADGE NE DOIT PLUS JAMAIS SE PLIER.
	 *
	 * S'il n'a pas la place a droite, il descend sur sa propre ligne, sous le
	 * bloc entier — mieux vaut une ligne de plus qu'un mot coupe en trois. */
	.wc-block-components-sale-badge {
		font-size: 0.68rem;
		padding: 0.18rem 0.4rem;
	}

	.wc-block-cart-item__total { min-width: 5.5rem; }
}

/* ========================================================================
 * RECAPITULATIF DE COMMANDE — RESPIRATION EN HAUT
 *
 * 🔴 « Resume de la commande » COLLAIT AU BORD SUPERIEUR.
 *
 * En repliant le bloc sous 900 px, WooCommerce le colle au contenu qui le
 * precede : le titre se retrouve a quelques pixels du fil d'Ariane, sans rien
 * pour l'en separer. Le regard ne sait plus ou commence le recapitulatif.
 * ===================================================================== */

@media (max-width: 900px) {

	.wc-block-checkout__sidebar,
	.wc-block-components-sidebar {
		margin-top: 1.25rem;
		margin-bottom: 1.5rem;
	}

	.wc-block-components-checkout-order-summary,
	.wp-block-woocommerce-checkout-order-summary-block {
		margin-top: 0;
	}

	/* Le titre depliant respire des deux cotes. */
	.wc-block-components-checkout-order-summary__title,
	.wc-block-components-checkout-order-summary__title-text {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* ========================================================================
 * TUNNEL DE COMMANDE — MEME LARGEUR UTILE QUE LE PANIER, SUR MOBILE
 *
 * 🔴 LE FORMULAIRE PERDAIT DE LA PLACE EN REMBOURRAGES SUPERPOSES.
 *
 * Le panier arrive presque au bord de l'ecran, et c'est bien ainsi : sur
 * 375 px, chaque pixel compte. La commande, elle, empilait trois
 * rembourrages — celui de la page, celui du bloc, celui de chaque etape —
 * qui se cumulaient a plus de 50 px perdus de chaque cote.
 *
 * 🔑 RESTREINDRE LE TEXTE QUAND IL RESTE DU REMBOURRAGE N'A AUCUN SENS.
 *
 * Une adresse coupee en trois lignes dans un champ etroit, alors que la moitie
 * de l'ecran est vide, se remarque immediatement — et decourage de remplir le
 * formulaire jusqu'au bout.
 * ===================================================================== */

@media (max-width: 900px) {

	/* Le bloc et ses colonnes cessent d'ajouter leur propre marge. */
	.wp-block-woocommerce-checkout,
	.wc-block-checkout,
	.wc-block-checkout__main,
	.wc-block-components-main,
	.wp-block-woocommerce-checkout-fields-block {
		padding-left: 0;
		padding-right: 0;
	}

	/* Les etapes du formulaire : le trait de separation reste, la marge part. */
	.wc-block-components-checkout-step {
		padding-left: 0;
		padding-right: 0;
	}

	/* WooCommerce decale le contenu de chaque etape pour aligner sur le
	   numero de l'etape. Sur mobile, ce decalage coute une quinzaine de
	   pixels sans rien apporter : le numero n'est plus affiche. */
	.wc-block-components-checkout-step__container,
	.wc-block-components-checkout-step__content {
		padding-left: 0;
		margin-left: 0;
	}

	.wc-block-components-checkout-step__heading { margin-left: 0; }
}

@media (max-width: 600px) {

	/* La page elle-meme se rapproche des bords, comme le panier. */
	.woocommerce-checkout .hs-entry--shop,
	.woocommerce-cart .hs-entry--shop {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.wp-block-woocommerce-checkout,
	.wp-block-woocommerce-cart {
		width: 100%;
		max-width: 100%;
	}

	/* Les champs occupent toute la largeur disponible. */
	.wc-block-components-address-form,
	.wc-block-components-address-form .wc-block-components-text-input {
		width: 100%;
	}

	/* Deux champs cote a cote — prenom et nom, code postal et ville —
	   deviennent illisibles sous 600 px : chacun sa ligne. */
	.wc-block-components-address-form__first_name,
	.wc-block-components-address-form__last_name,
	.wc-block-components-address-form__postcode,
	.wc-block-components-address-form__city {
		grid-column: 1 / -1;
	}

	/* Le recapitulatif replie s'aligne sur la meme largeur. */
	.wc-block-checkout__sidebar,
	.wc-block-components-sidebar {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ========================================================================
 * COMMANDE — MEME LARGEUR EXACTE QUE LE PANIER
 *
 * 🔴 IL RESTAIT UNE LARGEUR MAXIMALE INTERNE.
 *
 * Annuler les rembourrages ne suffisait pas : WooCommerce borne aussi la
 * largeur de ses etapes et de ses champs, pour eviter des lignes trop longues
 * sur grand ecran. Sur mobile, cette precaution devient une perte seche —
 * mesure sur les captures : le formulaire s'arretait une trentaine de pixels
 * avant le panier, sur la meme fenetre.
 *
 * On leve donc la borne en dessous de 900 px, ou la largeur disponible est
 * deja le facteur limitant.
 * ===================================================================== */

@media (max-width: 900px) {

	.wc-block-checkout,
	.wc-block-checkout__main,
	.wc-block-components-main,
	.wc-block-components-sidebar,
	.wc-block-checkout__sidebar,
	.wp-block-woocommerce-checkout-fields-block,
	.wp-block-woocommerce-checkout-totals-block,
	.wc-block-components-checkout-step,
	.wc-block-components-checkout-step__container,
	.wc-block-components-checkout-step__content,
	.wc-block-components-address-form,
	.wc-block-components-address-form > *,
	.wc-block-components-text-input,
	.wc-block-components-select,
	.wc-block-components-combobox {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	/* Le formulaire lui-meme, que WooCommerce borne parfois en « ch ». */
	.wc-block-checkout__form,
	form.wc-block-components-form {
		max-width: 100%;
		width: 100%;
	}

	/* 🔑 LA MEME MARGE DE PAGE QUE LE PANIER, ET UNE SEULE.
	 *
	 * Les deux pages partagent desormais cette valeur : si elle change, elle
	 * change pour les deux, et l'oeil ne verra plus de decalage en passant de
	 * l'une a l'autre. */
	.woocommerce-cart .hs-entry--shop,
	.woocommerce-checkout .hs-entry--shop {
		padding-left: var(--hs-marge-achat, 0.75rem);
		padding-right: var(--hs-marge-achat, 0.75rem);
	}
}

:root { --hs-marge-achat: 0.75rem; }

/* ========================================================================
 * 🔴 LE REMBOURRAGE QUI AMPUTAIT LE FORMULAIRE
 *
 * Mesure au navigateur : « .wc-block-checkout__main » porte un
 * padding-right de 51,48 px. WooCommerce ne separe pas ses deux colonnes
 * avec un « gap » de grille, mais avec ce rembourrage.
 *
 * Sur mobile, la colonne de droite passe DESSOUS : le rembourrage ne separe
 * donc plus rien — il ampute simplement le formulaire d'une cinquantaine de
 * pixels, exactement ce qui manquait par rapport au panier.
 *
 * 🔑 Il faut monter la specificite : le selecteur de WooCommerce combine la
 *    classe generique et la classe de bloc.
 * ===================================================================== */

@media (max-width: 900px) {

	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-checkout__main,
	.wc-block-checkout .wc-block-components-main,
	.wc-block-checkout .wc-block-checkout__main,
	.wc-block-components-main.wc-block-checkout__main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar,
	.wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	/* Le panier emploie la meme structure : meme traitement. */
	.wc-block-cart .wc-block-components-main,
	.wc-block-cart .wc-block-cart__main,
	.wc-block-cart .wc-block-components-sidebar,
	.wc-block-cart .wc-block-cart__sidebar {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	/* Le recapitulatif garde son encadre, mais pose a l'interieur. */
	.wc-block-cart .wc-block-cart__sidebar > *,
	.wc-block-components-sidebar-layout .wc-block-checkout__sidebar > * {
		box-sizing: border-box;
	}
}

/* ========================================================================
 * 🔴 LA MARGE DE « alignwide » — LE DERNIER VOLEUR DE PLACE
 *
 * Mesure au navigateur : « .wp-block-woocommerce-checkout.alignwide » porte
 * un margin de 16 px de chaque cote, herite de WordPress. Il s'ajoute au
 * rembourrage de la page, lui-meme deja reduit.
 *
 * Sur 390 px, ces deux marges superposees representent pres de 15 % de
 * l'ecran, pour ne separer de rien : le bloc est deja seul sur sa ligne.
 *
 * 🔑 LES DEUX PAGES SONT TRAITEES ENSEMBLE, DANS LA MEME REGLE.
 *
 * C'est la seule facon de garantir qu'elles resteront alignees : une valeur
 * unique, deux selecteurs, aucun risque de les voir diverger a la prochaine
 * retouche.
 * ===================================================================== */

@media (max-width: 900px) {

	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-cart.alignwide,
	.wp-block-woocommerce-checkout,
	.wp-block-woocommerce-checkout.alignwide {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* La page porte desormais SEULE la marge laterale, et la meme pour les
	   deux parcours. */
	.woocommerce-cart .hs-entry--shop,
	.woocommerce-checkout .hs-entry--shop {
		padding-left: var(--hs-marge-achat);
		padding-right: var(--hs-marge-achat);
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 600px) {
	/* Un cran plus serre : sur 390 px, chaque pixel se voit. */
	:root { --hs-marge-achat: 0.85rem; }
}

/* ========================================================================
   VARIANTES : BOUTONS ET PASTILLES
   ========================================================================

   🔑 UNE SEULE MECANIQUE POUR LES DEUX MODES.

   Un bouton texte et une pastille de couleur ne different que par deux
   choses : ce qu'il y a a l'interieur, et la largeur. Tout le reste —
   l'anneau, l'etat choisi, l'etat impossible, l'espacement, l'animation —
   est commun, ecrit UNE fois, et gouverne par les variables ci-dessous.

   Changer l'epaisseur de l'anneau ou la taille des pastilles sur toute la
   boutique = changer une ligne ici. Il n'y a pas d'autre endroit ou le
   faire, et il ne doit pas y en avoir.

   🔑 L'ANNEAU EST UN box-shadow, PAS UN border.

   Un border qui passe de 1 a 2 px au clic ferait GRANDIR le bouton, et
   toute la ligne sauterait sous la souris. Le box-shadow se dessine hors
   du flux : le bouton ne bouge pas d'un pixel entre ses trois etats.
   ======================================================================== */

:root {
	--hs-swatch-h: 2.5rem;              /* hauteur commune aux deux modes */
	--hs-swatch-min: 3rem;              /* largeur minimale d'un bouton texte */
	--hs-swatch-pastille: 2.5rem;       /* cote d'une pastille de couleur */
	--hs-swatch-gap: 0.5rem;            /* ecart entre deux choix */
	--hs-swatch-ring: 1px;              /* anneau au repos */
	--hs-swatch-ring-active: 2px;       /* anneau du choix retenu */
	--hs-swatch-radius: var(--hs-radius-sm);
	--hs-dim-boite: 3.25rem;            /* cote de la boite qui porte la forme */
	--hs-dim-largeur: 5.5rem;           /* largeur minimale d'un bouton dimension */
}

/* --- Le menu d'origine ---------------------------------------------------

   Masque UNIQUEMENT quand le JavaScript a relie les boutons (classe posee
   par theme.js). Sans lui, le menu reste visible et la fiche achetable. */

/* 🔴 DEUX PIEGES SUPERPOSES, ET IL FAUT LES DEUX POUR MASQUER CE MENU.
 *
 * 1. « min-width » BAT « width ». La largeur finale d'un element est BORNEE
 *    par min/max-width apres calcul : ce n'est pas une question de cascade.
 *    WooCommerce pose min-width: 75% sur ses menus de variation, donc un
 *    width: 1px vaut 75 %.
 *
 * 2. NEUTRALISER min-width DEMANDE DE GAGNER LA CASCADE. Le selecteur de
 *    WooCommerce vaut 0,4,3 :
 *       .woocommerce div.product form.cart .variations select
 *    Un « .variations_form.hs-swatches-ready select[data-hs-native] » ne pese
 *    que 0,3,1 : il perd. Le width: 1px passait — personne d'autre ne declare
 *    width — mais le min-width: 0 etait ignore en silence.
 *
 * Mesure avant correction : menu « masque » a 967 px, page a 1712 px pour une
 * fenetre de 1400. Un defilement horizontal sur la fiche produit, que l'oeil
 * ne pouvait pas attribuer puisque le coupable est transparent.
 */
.woocommerce div.product form.cart.hs-swatches-ready .variations select[data-hs-native],
.variations_form.hs-swatches-ready select[data-hs-native] {
	position: absolute;
	width: 1px;
	min-width: 0;
	max-width: none;
	height: 1px;
	min-height: 0;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Le formulaire d'un produit variable ---------------------------------

   🔴 LA MISE EN LIGNE DU FORMULAIRE ECRASE LES CHOIX.

   « form.cart » est en flex-direction: row — regle ecrite pour un produit
   SIMPLE, ou elle range la quantite a cote du bouton. Sur un produit
   variable, le formulaire contient trois blocs qui doivent s'EMPILER :
   les choix, l'alerte, puis le bloc prix + quantite + achat.

   En ligne, mesure sur la fiche de demonstration : le tableau des choix
   tombait a 184 px alors que 632 px etaient disponibles, coince a cote du
   bloc d'achat. Les pastilles se serraient les unes contre les autres et
   les tailles passaient a la ligne sans raison.

   Le formulaire variable s'empile donc, et c'est le bloc d'achat — lui
   seul — qui remet quantite et bouton cote a cote. */

.woocommerce div.product form.cart.variations_form { display: block; }

.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.woocommerce div.product form.cart.variations_form .single_variation { margin-bottom: 1rem; }

/* --- Le tableau des variations -------------------------------------------

   🔴 UN <table> A DEUX COLONNES COUPE LES BOUTONS.

   WooCommerce rend un tableau : libelle a gauche, choix a droite. Passe
   600 px de large, la colonne de droite ne tient plus et le dernier bouton
   se fait rogner — c'est exactement le defaut visible sur la fiche de
   reference (« L - Largeur 1 Metr… »).

   On passe donc en blocs empiles a TOUTES les largeurs : le libelle
   au-dessus, les choix en dessous, sur toute la largeur disponible. */

.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce div.product form.cart .variations tr + tr { margin-top: 1.25rem; }

.woocommerce div.product form.cart .variations .label label {
	display: block;
	margin-bottom: 0.55rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--hs-heading);
}

/* --- Le groupe de choix -------------------------------------------------- */

.hs-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-swatch-gap);
	margin: 0;
	padding: 0;
}

/* --- Un choix ------------------------------------------------------------ */

/* 🔴 « --hs-swatch-min » ETAIT DEFINIE ET LUE NULLE PART.
 *
 * Le fichier annonce trente lignes plus haut que changer la taille des
 * pastilles se fait « en une ligne ici, et il ne doit pas y avoir d'autre
 * endroit ». La largeur minimale, elle, n'etait jamais appliquee : un choix
 * court — « S », « M », « 38 » — se reduisait a son texte plus le padding,
 * soit une cible bien plus etroite que haute.
 *
 * Une variable declaree que personne ne lit est un reglage qui ment : on croit
 * tenir la taille des choix depuis ce bloc, et la moitie n'obeit pas. */
.hs-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hs-swatch-h);
	min-width: var(--hs-swatch-min);
	margin: 0;
	padding: 0 0.85rem;
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	color: var(--hs-text);
	background: var(--hs-bg);
	border: 0;
	border-radius: var(--hs-swatch-radius);
	box-shadow: 0 0 0 var(--hs-swatch-ring) var(--hs-border);
	cursor: pointer;
	transition: box-shadow var(--hs-transition), color var(--hs-transition), opacity var(--hs-transition);
	-webkit-appearance: none;
	appearance: none;
}

.hs-swatch:hover { box-shadow: 0 0 0 var(--hs-swatch-ring) var(--hs-primary); }

.hs-swatch:focus-visible {
	outline: 2px solid var(--hs-primary);
	outline-offset: 2px;
}

.hs-swatch.is-selected {
	color: var(--hs-primary-dark);
	box-shadow: 0 0 0 var(--hs-swatch-ring-active) var(--hs-primary);
}

/* --- Le mode pastille ----------------------------------------------------

   Le nom reste dans le DOM pour les lecteurs d'ecran et pour l'infobulle,
   mais c'est la couleur qui parle. */

.hs-swatches--color .hs-swatch {
	width: var(--hs-swatch-pastille);
	min-width: var(--hs-swatch-pastille);
	height: var(--hs-swatch-pastille);
	min-height: var(--hs-swatch-pastille);
	padding: 0;
	background: var(--hs-swatch-color, var(--hs-bg-alt));
	border-radius: 50%;
	/* L'anneau est decolle de la pastille : sans cet ecart, un anneau de la
	   meme famille que la couleur (rouge sur bordeaux) devient invisible. */
	box-shadow: 0 0 0 var(--hs-swatch-ring) var(--hs-border), 0 0 0 calc(var(--hs-swatch-ring) + 2px) var(--hs-bg) inset;
}

.hs-swatches--color .hs-swatch:hover {
	box-shadow: 0 0 0 3px var(--hs-bg), 0 0 0 calc(3px + var(--hs-swatch-ring)) var(--hs-primary);
}

.hs-swatches--color .hs-swatch.is-selected {
	box-shadow: 0 0 0 3px var(--hs-bg), 0 0 0 calc(3px + var(--hs-swatch-ring-active)) var(--hs-primary);
}

.hs-swatches--color .hs-swatch__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Un choix impossible -------------------------------------------------

   Grise et barre, mais TOUJOURS cliquable et lisible : masquer une valeur
   ferait disparaitre un choix sous la souris du client au moment ou il en
   change un autre. Il faut qu'il voie que la taille existe, et qu'elle
   n'est pas disponible dans la couleur retenue. */

.hs-swatch.is-disabled {
	/* 🔴 MESURE FAITE : A 0.4, LA LETTRE DISPARAIT.
	   Un « S » barre a 40 % d'opacite ne se lit plus — le client voit une
	   case vide et croit a un bug d'affichage, au lieu de comprendre que la
	   taille existe mais pas dans cette couleur. Il faut qu'il LISE ce qui
	   lui est refuse. */
	opacity: 0.65;
	color: var(--hs-text-muted);
	cursor: not-allowed;
}

.hs-swatch.is-disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 0.5px),
		var(--hs-text-muted) calc(50% - 0.5px),
		var(--hs-text-muted) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
	pointer-events: none;
}

.hs-swatch.is-disabled:hover { box-shadow: 0 0 0 var(--hs-swatch-ring) var(--hs-border); }

/* --- Le mode dimension ---------------------------------------------------

   🔑 LE BOUTON DESSINE LE TAPIS.

   « 120 × 240 » ne dit rien tant qu'on n'a pas fait le calcul de tete. Le
   rectangle, lui, se lit d'un coup : celui-la est carre, celui-ci est un
   couloir. Toutes les tailles du groupe sont ramenees a la meme echelle, si
   bien que les formes se comparent entre elles.

   🔑 UNE BOITE CARREE FIXE, UN RECTANGLE CENTRE DEDANS.

   Si le rectangle etait pose directement dans le bouton, un tapis 50 × 290
   ferait un bouton deux fois plus haut qu'un tapis 60 × 60, et la ligne
   partirait en escalier. La boite reserve toujours la meme place ; seul son
   contenu change de forme. */

.hs-swatches--dimension .hs-swatch {
	flex-direction: column;
	gap: 0.45rem;
	min-width: var(--hs-dim-largeur);
	padding: 0.6rem 0.7rem;
	font-size: 0.8125rem;
	line-height: 1.15;
}

.hs-swatch__forme {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hs-dim-boite);
	height: var(--hs-dim-boite);
}

.hs-swatch__forme::before {
	content: "";
	/* Le rectangle ne descend jamais sous 3 px : un tapis tres etroit doit
	   rester visible, meme reduit au trait. */
	width: max(3px, calc(var(--hs-dim-boite) * var(--hs-dim-w, 1)));
	height: max(3px, calc(var(--hs-dim-boite) * var(--hs-dim-h, 1)));
	/* 🔴 MESURE FAITE : SUR --hs-bg-alt, LES FORMES DISPARAISSENT.
	   Un rectangle gris tres clair borde de --hs-border ne se distingue plus
	   du fond blanc du bouton : on ne compare plus rien. La forme est ici la
	   seule information qui compte, elle doit se voir. On teinte donc avec la
	   couleur du theme, assez pour la lire, assez peu pour ne pas rivaliser
	   avec le choix retenu. */
	background: rgba(var(--hs-primary-rgb), 0.18);
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(var(--hs-primary-rgb), 0.55);
	transition: background var(--hs-transition), box-shadow var(--hs-transition);
}

.hs-swatch.is-selected .hs-swatch__forme::before {
	background: var(--hs-primary);
	box-shadow: inset 0 0 0 1px var(--hs-primary);
}

.hs-swatches--dimension .hs-swatch__label { white-space: nowrap; }

/* --- Le lien « Effacer » ------------------------------------------------- */

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--hs-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce div.product form.cart .reset_variations:hover { color: var(--hs-primary); }

/* --- Doigts plutot que souris -------------------------------------------

   Sous 600 px, la cible passe a 44 px : c'est le minimum sous lequel un
   doigt rate le bouton une fois sur trois. */

@media (max-width: 600px) {
	:root {
		--hs-swatch-h: 2.75rem;
		--hs-swatch-pastille: 2.75rem;
		--hs-swatch-gap: 0.625rem;
	}
}

/* Zone touchable de la croix de suppression, dans le tableau du panier.
   26 px dessines, 44 px touchables — voir components.css pour le principe. */
.woocommerce a.remove { position: relative; }

.woocommerce a.remove::after {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
}