/* Barre de fil d'Ariane et compteur de resultats */

.eho-boutique__barre {
	padding-block: var(--eho-espace-md) 1.625rem;
}

.eho-boutique__barre-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--eho-espace-md);
}

.eho-boutique__barre-inner .woocommerce-result-count {
	margin-bottom: 0;
}

/* Deux colonnes : filtres puis catalogue */

.eho-boutique__grille {
	display: grid;
	/* La colonne de filtres fait 313px sur la production : plus etroite, elle
	   elargit les vignettes et rallonge chaque rangee. */
	grid-template-columns: 19.5rem 1fr;
	/* 30px : la production laisse 1330 - 312 - 988 entre les deux colonnes, ce
	   qui donne des vignettes de 316 et non de 315. */
	gap: 1.875rem;
	align-items: start;
	padding-block-end: var(--eho-espace-3xl);
}

.eho-boutique__filtres {
	display: grid;
	gap: 1.25rem;
}

/* La colonne de filtres suit le defilement. L'en-tete haut du site colle deja
   en haut de la fenetre : sans ce decalage de sa hauteur, les premiers filtres
   passeraient dessous. Sous 1024 la colonne repasse au-dessus de la grille,
   ou coller n'aurait plus de sens. */
@media (min-width: 1025px) {
	.eho-boutique__filtres {
		position: sticky;
		inset-block-start: calc(var(--eho-entete-hauteur) + var(--eho-espace-md));
	}
}

/* Boite de filtre de la production : 42px de haut, bordure de 2px a 10 % de
   noir, angles vifs, fond transparent. La notre etait un bloc gris arrondi. */
/* Filtres retenus, au-dessus de la colonne. Releve sur la production : 15px de
   texte en 600, gris fonce, la croix seule en vert, et des entrees espacees de
   10 par 15. Chaque entree se clique pour se retirer. */
.eho-filtres-actifs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 0.9375rem;
	margin-bottom: 0.9375rem;
	font-size: 0.95rem;
	font-weight: var(--eho-poids-semi);
}

.eho-filtres-actifs a {
	display: inline-flex;
	align-items: center;
	gap: 0.28125rem;
	color: #333333;
	text-decoration: none;
}

.eho-filtres-actifs a::before {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	background-color: var(--eho-vert);
	mask: url("../../icons/fermer.svg") no-repeat center / contain;
	-webkit-mask: url("../../icons/fermer.svg") no-repeat center / contain;
}

.eho-filtres-actifs a:hover {
	color: var(--eho-vert);
}

.eho-filtre {
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-radius: 0;
	overflow: hidden;
}

.eho-filtre__titre {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.375rem;
	margin-bottom: 0;
	padding-inline: 0.9375rem 1.0625rem;
	cursor: pointer;
	list-style: none;
	font-size: 0.75rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1;
	text-transform: uppercase;
	color: #333333;
}

.eho-filtre__titre::-webkit-details-marker {
	display: none;
}

.eho-filtre__titre::after {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	background-color: currentColor;
	mask: url("../../icons/chevron-bas.svg") no-repeat center / contain;
	-webkit-mask: url("../../icons/chevron-bas.svg") no-repeat center / contain;
	transition: transform var(--eho-transition);
}

.eho-filtre[open] > .eho-filtre__titre::after {
	transform: rotate(180deg);
}

/* Deplie, la production separe l en-tete du panneau par un trait : c est la
   bordure basse de son titre. Replie, le bloc n en montre pas, sinon elle
   doublerait celle du conteneur. */
.eho-filtre[open] > .eho-filtre__titre {
	border-block-end: 2px solid rgba(0, 0, 0, 0.1);
}

/* L'intitule absorbe la place libre sans jamais se couper : la pastille et le
   chevron restent ainsi colles au bord droit de la boite. */
.eho-filtre__libelle {
	flex: 1 1 auto;
	min-width: max-content;
	white-space: nowrap;
}

/* C'est la pastille qui se coupe quand le nom du rayon est long, pas
   l'intitule : la production ecrit « CATEGORIES » en entier et tronque
   « Produits pet... ». */
.eho-filtre__valeur {
	flex: 0 1 auto;
	min-width: 0;
	margin-inline-start: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0.25rem 0.5rem;
	font-weight: var(--eho-poids-semi);
	text-transform: none;
	letter-spacing: normal;
	color: #333333;
	background-color: #f7f7f7;
}

/* Depuis que le curseur a remplace les deux champs, ce corps n a plus deux
   colonnes a aligner : en flex, le curseur s y reduisait a sa largeur propre,
   56px de rail au lieu des 273 de la production. */
.eho-filtre__prix {
	padding: 1.25rem;
	background-color: var(--eho-blanc);
}


/* La production aligne « Filtrer » sur la meme rangee que le dernier filtre,
   et non seul en dessous. Les blocs precedents gardent la pleine largeur. */
.eho-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.625rem;
}

.eho-filtres > .eho-filtre {
	flex: 1 1 100%;
}

.eho-filtres > .eho-filtre:last-of-type {
	flex: 1 1 0;
	min-width: 0;
}

.eho-filtres__valider {
	flex: none;
	/* Les blocs de filtre s'etirent pour rester de meme hauteur, pas le bouton :
	   depuis que « Marques » s'ouvre de lui-meme quand une marque est retenue,
	   `stretch` en faisait une pastille de 120px. */
	align-self: start;
	min-height: 2.625rem;
	padding-inline: 1.25rem;
	font-size: 0.8125rem;
}

/* La production ne met aucune marge interne sur la liste : l espacement des
   entrees vient de leur propre padding, 8px sur 18. */
.eho-filtre__liste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eho-filtre__liste a {
	display: flex;
	justify-content: space-between;
	gap: var(--eho-espace-xs);
	padding: 0.5rem 1.125rem;
	font-size: 1rem;
	font-weight: var(--eho-poids-semi);
	color: #767676;
	text-decoration: none;
}

.eho-filtre__liste a:hover,
.eho-filtre__liste a[aria-current] {
	color: var(--eho-vert);
}

/* Entree de marque. Relevee sur la production : la ligne fait 46px de haut, le
   logo s affiche en 60 par 30 et tient dans sa boite sans etre deforme. Sans
   ces regles, l image sortait a sa taille de vignette et coupait le nom. */
/* Selecteur porte au meme poids que `.eho-filtre__liste a`, qui sinon impose son
   `space-between` et decale chaque nom selon sa longueur. */
.eho-filtre__liste a.eho-filtre__marque {
	justify-content: flex-start;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.875rem;
}

/* Curseur de prix, releve sur la production : un rail de 2px, la plage retenue
   dans le vert des boutons, et des poignees qui ne sont pas des ronds mais des
   traits de 4 par 15, poses au centre d une zone de clic de 30. */
.eho-prix__piste {
	position: relative;
	height: 1.25rem;
}

.eho-prix__piste::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0.5625rem;
	height: 2px;
	background-color: rgba(0, 0, 0, 0.106);
}

.eho-prix__plage {
	position: absolute;
	inset-block-start: 0.5625rem;
	height: 2px;
	background-color: var(--eho-vert-panier);
}

.eho-prix__poignee {
	position: absolute;
	inset-block-start: -0.3125rem;
	width: 1.875rem;
	height: 1.875rem;
	padding: 0;
	margin-inline-start: -0.9375rem;
	background: none;
	border: 0;
	cursor: ew-resize;
	touch-action: none;
}

.eho-prix__poignee::after {
	content: "";
	position: absolute;
	inset-block-start: 0.4375rem;
	inset-inline-start: 0.8125rem;
	width: 4px;
	height: 15px;
	background-color: var(--eho-vert-panier);
}

.eho-prix__poignee:focus-visible {
	outline: 2px solid var(--eho-vert);
	outline-offset: 2px;
}

.eho-prix__valeurs {
	margin: 1.25rem -1.25rem -1.25rem;
	padding: 0.625rem 1.25rem;
	border-block-start: 1px solid rgba(0, 0, 0, 0.106);
	font-size: 1rem;
	font-weight: var(--eho-poids-moyen);
	color: #767676;
}

.eho-prix__valeurs .woocommerce-Price-amount {
	color: inherit;
}

.eho-filtre__logo {
	flex: none;
	width: 3.75rem;
	height: 1.875rem;
	object-fit: contain;
}

.eho-filtre__compte {
	color: var(--eho-texte-faible);
}

/* En-tete du catalogue */

.eho-boutique__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--eho-espace-md);
	margin-bottom: 1.1875rem;
	/* Bandeau de la production : 988 par 74, gris neutre #f8f8f8 et angles vifs.
	   Le notre etait arrondi et tirait sur le bleu. */
	padding: 1.25rem;
	background-color: #f8f8f8;
	border-radius: 0;
}

.eho-boutique__titre {
	margin-bottom: 0;
	font-size: 1.5rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

/* La production n'encadre pas son menu de tri : fond transparent, un simple
   filet de 2px sous le champ, et le chevron pose en fond a droite. */
.eho-boutique__contenu .woocommerce-ordering {
	position: relative;
	width: 16.4375rem;
}

/* Le chevron est pose sur le formulaire et non en fond du menu : un SVG en
   `background-image` perd le `currentColor` et se peint en noir. */
.eho-boutique__contenu .woocommerce-ordering::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.125rem;
	inset-block-start: 50%;
	width: 0.75rem;
	height: 0.75rem;
	transform: translateY(-50%);
	pointer-events: none;
	background-color: #767676;
	mask: url("../../icons/chevron-bas.svg") no-repeat center / contain;
	-webkit-mask: url("../../icons/chevron-bas.svg") no-repeat center / contain;
}

.eho-boutique__contenu .woocommerce-ordering select {
	width: 100%;
	padding: 5px 20px 5px 2px;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-titre-page);
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	border-radius: 0;
	appearance: none;
}

/* Grille produits */

.eho-boutique__contenu ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La production tient sa vignette en 372px de haut : 16px de marge interne y
   ajoutaient 35px par rangee, soit pres de 600px sur dix-sept rangees. */
.eho-boutique__item {
	display: flex;
	padding: 0.9375rem 0.9375rem 0.75rem;
	background-color: var(--eho-blanc);
	border-radius: 12px;
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.08);
	transition: box-shadow var(--eho-transition);
}

.eho-boutique__item:hover {
	box-shadow: var(--eho-ombre);
}

.eho-boutique__item > .eho-carte-produit {
	width: 100%;
}

/* Fiche produit */

.eho-produit__haut {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--eho-espace-3xl);
	align-items: start;
	padding-block: 0 var(--eho-espace-xl);
}

.eho-produit__media {
	position: relative;
}

.eho-produit__media img {
	width: 100%;
	border-radius: var(--eho-rayon);
}

/* Pastille de promotion. WooCommerce la sort avant la galerie, sans style : le
   mot « Promo ! » tombait en texte nu au-dessus de l'image. La production la
   pose arrondie sur la photo, comme nos vignettes de listing. */
.eho-produit__media .onsale {
	position: absolute;
	inset-block-start: var(--eho-espace-sm);
	inset-inline-start: var(--eho-espace-sm);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.125rem;
	padding: 0.3125rem 0.75rem;
	font-size: 0.75rem;
	font-weight: var(--eho-poids-semi);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: var(--eho-blanc);
	background-color: var(--eho-vert-panier);
	border-radius: 2.1875rem;
}

/* 34 px sur ordinateur, 24 sous 1024, 20 sous 769 : les trois paliers de la
   production, releves dans sa feuille de style. A 40 px, notre titre passait
   sur deux lignes la ou le sien tient sur une. */

.eho-produit__titre {
	margin-block: var(--eho-espace-sm) var(--eho-espace-md);
	font-size: 2.125rem;
	font-weight: var(--eho-poids-semi);
	line-height: var(--eho-interligne-titre);
	color: var(--eho-texte-fort);
}

@media (max-width: 1024px) {
	.eho-produit__titre {
		font-size: 1.5rem;
	}
}

@media (max-width: 768px) {
	.eho-produit__titre {
		font-size: 1.25rem;
	}
}

.eho-produit__resume .price {
	display: block;
	margin-bottom: var(--eho-espace-md);
	font-size: 1.75rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-vert);
}

.eho-produit__resume .price .woocommerce-price-suffix {
	font-size: 0.6em;
	font-weight: var(--eho-poids-normal);
	color: var(--eho-texte-faible);
}

.eho-produit__resume .quantity input {
	width: 5rem;
	padding: 0.6rem var(--eho-espace-sm);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon);
}

/* Le formulaire porte trois blocs : le choix de consigne, le champ de quantite
   et le bouton. En simple flex, la consigne prenait toute la largeur utile, la
   quantite se retrouvait collee au bord droit et le bouton passait seul a la
   ligne suivante, a plus de 250 px du champ auquel il repond.
   La consigne occupe donc sa propre ligne, et les deux autres se suivent. */

.eho-produit__resume form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--eho-espace-md);
	margin-block: var(--eho-espace-lg);
}

.eho-produit__resume form.cart > .eho-consigne {
	flex: 1 1 100%;
	order: 1;
	margin: 0;
}

.eho-produit__resume form.cart > .quantity {
	order: 2;
}

.eho-produit__resume form.cart > .single_add_to_cart_button {
	order: 3;
}

.eho-produit__resume .single_add_to_cart_button {
	padding: 0.9rem 2rem;
	font-weight: var(--eho-poids-gras);
	text-transform: uppercase;
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
	border: 0;
	border-radius: var(--eho-rayon-rond);
	cursor: pointer;
}

.eho-produit__resume .single_add_to_cart_button:hover {
	background-color: var(--eho-vert-fonce);
}

/* Onglets et produits associes : titre en capitales surligne de vert, motif de la production */

.woocommerce-tabs {
	padding-block: var(--eho-espace-xl);
}

.woocommerce-tabs .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eho-espace-lg);
	margin: 0 0 var(--eho-espace-lg);
	padding: 0;
	list-style: none;
}

.woocommerce-tabs .tabs li {
	padding-top: var(--eho-espace-sm);
	border-top: 3px solid transparent;
}

.woocommerce-tabs .tabs li.active {
	border-top-color: var(--eho-vert);
}

.woocommerce-tabs .tabs a {
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-semi);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eho-texte-faible);
	text-decoration: none;
}

.woocommerce-tabs .tabs li.active a {
	color: var(--eho-texte-fort);
}

/* Quatre onglets ne tiennent pas sur 375 avec 24px entre eux : « FAQ »
   passait seule a la ligne, detachee du reste. */
@media (max-width: 30rem) {
	.woocommerce-tabs .tabs {
		gap: var(--eho-espace-sm);
	}

	.woocommerce-tabs .tabs a {
		font-size: 0.8125rem;
		letter-spacing: 0.03em;
	}
}

.woocommerce-tabs .wc-tab > h2:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Note moyenne, sous le titre de la fiche. */

.eho-note-produit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--eho-espace-xs) var(--eho-espace-sm);
	margin-bottom: var(--eho-espace-sm);
	font-size: 0.9375rem;
}

.eho-note-produit__lien {
	display: inline-flex;
	text-decoration: none;
}

/* Les etoiles de la fiche sont un peu plus petites et plus serrees que celles
   des cartes d'avis : elles accompagnent le titre, elles ne le concurrencent
   pas. */
.eho-note-produit .eho-etoiles {
	gap: 0.125rem;
}

.eho-note-produit .eho-etoile {
	width: 0.95em;
	height: 0.95em;
}

/* Avis de la fiche produit. WooCommerce sort une liste ordonnee : le
   navigateur y ajoutait ses numeros, l'avatar Gravatar par defaut et la note
   en toutes lettres. Le gabarit `single-product/review.php` rend la carte du
   theme, et la liste devient une grille de colonnes. */

.woocommerce-Reviews .woocommerce-Reviews-title {
	margin-bottom: var(--eho-espace-lg);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.woocommerce-Reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: var(--eho-espace-lg);
}

.woocommerce-Reviews .commentlist > li {
	margin: 0 0 var(--eho-espace-lg);
	break-inside: avoid;
}

/* La carte de la page des avis se termine par un lien produit qui ferme sa
   boite. Ici elle s'arrete au corps : sans cette marge, le texte collait au
   bord. */
.woocommerce-Reviews .eho-avis__contenu {
	padding-bottom: var(--eho-espace-md);
}

.woocommerce-Reviews .woocommerce-pagination {
	margin-block: var(--eho-espace-lg) 0;
}

/* Formulaire de depot d'avis. C'est celui vers lequel mene la relance envoyee
   apres commande, et il sortait avec les controles bruts du navigateur : la
   note en liens soulignes, les champs sans bordure et le bouton gris. */

#review_form_wrapper {
	margin-block-start: var(--eho-espace-2xl);
	padding-block-start: var(--eho-espace-xl);
	border-block-start: 1px solid var(--eho-bordure);
}

#review_form .comment-reply-title {
	display: block;
	margin-bottom: var(--eho-espace-xs);
	font-size: 1.25rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

#review_form .comment-notes,
#review_form .comment-form-cookies-consent label {
	font-size: 0.875rem;
	color: var(--eho-texte-faible);
}

#review_form .comment-form > p {
	margin-bottom: var(--eho-espace-md);
}

#review_form label {
	display: block;
	margin-bottom: var(--eho-espace-2xs);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
	width: 100%;
	max-width: 34rem;
	padding: 0.6rem 0.9rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--eho-texte);
	background-color: var(--eho-blanc);
	border: 1px solid var(--eho-gris-300);
	border-radius: var(--eho-rayon-sm);
}

#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus,
#review_form textarea:focus {
	outline: 2px solid var(--eho-vert);
	outline-offset: 1px;
	border-color: var(--eho-vert);
}

#review_form textarea {
	min-height: 8rem;
	resize: vertical;
}

/* La note est une rangee de cinq liens que WooCommerce peint avec sa propre
   police d'icones, absente ici : ils sortaient en « 1 etoile sur 5 » souligne.
   Chaque lien devient une etoile, et le survol remplit jusqu'a lui. */
#review_form .stars {
	display: flex;
	gap: 0.25rem;
	margin-bottom: var(--eho-espace-md);
}

#review_form .stars span {
	display: flex;
	gap: 0.25rem;
}

#review_form .stars a {
	position: relative;
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 0;
	text-decoration: none;
}

#review_form .stars a::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--eho-gris-300);
	mask: url("../../icons/etoiles.svg") no-repeat center / contain;
	-webkit-mask: url("../../icons/etoiles.svg") no-repeat center / contain;
	transition: background-color var(--eho-transition);
}

#review_form .stars:hover a::before,
#review_form .stars.selected a::before {
	background-color: var(--eho-jaune, #f5a623);
}

#review_form .stars a:hover ~ a::before,
#review_form .stars.selected a.active ~ a::before {
	background-color: var(--eho-gris-300);
}

#review_form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--eho-espace-xs);
}

#review_form .comment-form-cookies-consent label {
	margin-bottom: 0;
	font-weight: var(--eho-poids-normal);
}

#review_form .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding-inline: 1.75rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: var(--eho-poids-gras);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
	border: 0;
	border-radius: var(--eho-rayon-rond);
	cursor: pointer;
	transition: background-color var(--eho-transition);
}

#review_form .form-submit input[type="submit"]:hover {
	background-color: var(--eho-vert-fonce);
}

@media (max-width: 62rem) {
	.woocommerce-Reviews .commentlist {
		columns: 1;
	}
}

/* Contenu des onglets repris de la production : tableaux de caracteristiques,
   paragraphes et FAQ en accordeon. Le motif de l'accordeon est celui des pages
   guide, ici reporte sur le panneau d'onglet. */

.eho-onglet-texte > *:last-child,
.eho-donnees-techniques > *:last-child {
	margin-bottom: 0;
}

/* Description de categorie, servie sous la grille comme en production. Ses
   titres sont ceux d'un texte de rubrique, pas d'un titre de page : sans mise
   a l'echelle, le premier h2 sortait a la taille du h1 de la boutique. */

.term-description {
	max-width: 62rem;
	margin-block-start: var(--eho-espace-2xl);
}

.term-description > *:last-child {
	margin-bottom: 0;
}

.term-description h2 {
	margin-block: var(--eho-espace-xl) var(--eho-espace-sm);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
}

.term-description h3 {
	margin-block: var(--eho-espace-lg) var(--eho-espace-xs);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
}

.term-description h2:first-child {
	margin-block-start: 0;
}

.term-description .wp-block-details {
	padding-block: var(--eho-espace-md);
	border-bottom: 1px solid var(--eho-bordure);
}

.term-description .wp-block-details summary {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	font-size: 1.0625rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	cursor: pointer;
	list-style: none;
}

.term-description .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.term-description .wp-block-details summary::before {
	content: "";
	flex: none;
	width: 0.75em;
	height: 0.75em;
	background-color: currentColor;
	mask: url("../../icons/chevron-bas.svg") no-repeat center / contain;
	-webkit-mask: url("../../icons/chevron-bas.svg") no-repeat center / contain;
	transition: transform var(--eho-transition);
}

.term-description .wp-block-details[open] > summary {
	color: var(--eho-vert);
}

.term-description .wp-block-details[open] > summary::before {
	transform: rotate(180deg);
}

/* Classe posee par l'editeur de la production sur les paragraphes justifies. */
.eho-onglet-texte .text-align-justify {
	text-align: justify;
}

.eho-onglet-texte table,
.eho-donnees-techniques table {
	width: 100%;
	border-collapse: collapse;
}

.eho-onglet-texte th,
.eho-onglet-texte td,
.eho-donnees-techniques th,
.eho-donnees-techniques td {
	padding: var(--eho-espace-sm);
	border: 1px solid var(--eho-bordure);
}

.eho-onglet-texte .wp-block-details {
	padding-block: var(--eho-espace-md);
	border-bottom: 1px solid var(--eho-bordure);
}

.eho-onglet-texte .wp-block-details summary {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	font-size: 1.0625rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	cursor: pointer;
	list-style: none;
}

.eho-onglet-texte .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.eho-onglet-texte .wp-block-details summary::before {
	content: "";
	flex: none;
	width: 0.75em;
	height: 0.75em;
	background-color: currentColor;
	mask: url("../../icons/chevron-bas.svg") no-repeat center / contain;
	-webkit-mask: url("../../icons/chevron-bas.svg") no-repeat center / contain;
	transition: transform var(--eho-transition);
}

.eho-onglet-texte .wp-block-details[open] > summary {
	color: var(--eho-vert);
}

.eho-onglet-texte .wp-block-details[open] > summary::before {
	transform: rotate(180deg);
}

.eho-onglet-texte .wp-block-details > *:not(summary) {
	margin-block-start: var(--eho-espace-md);
}

.eho-onglet-texte .wp-block-details > *:last-child {
	margin-bottom: 0;
}

.eho-produit .related,
.eho-produit .upsells {
	padding-top: var(--eho-espace-sm);
	border-top: 3px solid var(--eho-vert);
}

.eho-produit .related > h2,
.eho-produit .upsells > h2 {
	margin-bottom: var(--eho-espace-xl);
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-semi);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eho-texte-fort);
}

.eho-produit .related ul.products,
.eho-produit .upsells ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--eho-espace-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.eho-produit .related ul.products,
	.eho-produit .upsells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.eho-boutique__grille {
		grid-template-columns: 1fr;
	}

	/* La production garde trois colonnes jusqu'a 1024, la colonne de filtres
	   passant au-dessus de la grille. */
	.eho-boutique__contenu ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

	.eho-produit__haut {
		grid-template-columns: 1fr;
		gap: var(--eho-espace-xl);
	}
}

/* La production ne descend jamais a une colonne : elle en garde deux depuis
   768px inclus, la ou nous empilions des vignettes pleine largeur. */
@media (max-width: 768px) {
	.eho-boutique__contenu ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
}

/* Recherche de la colonne de filtres */

/* Releve sur la production : 50px de haut, fond gris plein sans bordure, coins
   a peine casses, et un bouton carre qui occupe toute la hauteur. */
.eho-filtre-recherche {
	display: flex;
	align-items: stretch;
	height: 3.125rem;
	background-color: #f1f2f3;
	border-radius: 3px;
	overflow: hidden;
}

.eho-filtre-recherche__champ {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline: 1.0417rem;
	font-size: 1.0625rem;
	border: 0;
	background: transparent;
}

.eho-filtre-recherche__champ:focus {
	outline: none;
}

.eho-filtre-recherche__bouton {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.125rem;
	border: 0;
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
}

.eho-filtre-recherche__bouton:hover {
	background-color: var(--eho-vert-fonce);
}

/* WooCommerce injecte ce declencheur en JavaScript, avec un emoji pour toute
   icone. L'emoji est masque, l'icone du theme le remplace et le libelle est
   repris de l'attribut aria-label, deja traduit. */

.woocommerce-product-gallery__trigger {
	position: absolute;
	inset-block-end: var(--eho-espace-md);
	inset-inline-start: var(--eho-espace-md);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding-inline: 0.9rem;
	font-size: 0.875rem;
	font-weight: var(--eho-poids-gras);
	line-height: 1;
	text-decoration: none;
	color: var(--eho-texte-fort);
	background-color: var(--eho-blanc);
	border-radius: var(--eho-rayon-rond);
	box-shadow: var(--eho-ombre-sm);
}

.woocommerce-product-gallery__trigger:hover {
	color: var(--eho-vert);
}

.woocommerce-product-gallery__trigger > span {
	display: none;
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	mask: url("../../icons/recherche.svg") no-repeat center / contain;
	-webkit-mask: url("../../icons/recherche.svg") no-repeat center / contain;
}

.woocommerce-product-gallery__trigger::after {
	content: attr(aria-label);
}

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

/* Blocs panier et commande de WooCommerce */

.wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 2rem;
	font-weight: var(--eho-poids-gras);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
	border: 0;
	border-radius: var(--eho-rayon-rond);
}

.wc-block-components-button:not(.is-link):hover {
	color: var(--eho-blanc);
	background-color: var(--eho-vert-fonce);
}

.wc-block-cart__submit-container {
	display: flex;
	justify-content: stretch;
}

.wc-block-cart__submit-button {
	width: 100%;
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: var(--eho-poids-gras);
	color: var(--eho-texte-fort);
}

.wc-block-components-product-name {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	text-decoration: none;
}

.wc-block-components-product-price__value {
	color: var(--eho-vert);
}

.wc-block-cart-items__header {
	font-size: var(--eho-taille-sm);
	letter-spacing: 0.06em;
	color: var(--eho-texte-faible);
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	padding-block: var(--eho-espace-xl) var(--eho-espace-3xl);
}

/* Disponibilite par secteur */

.eho-disponibilite {
	display: grid;
	gap: var(--eho-espace-sm);
	justify-items: start;
	margin-block: var(--eho-espace-lg);
	padding: var(--eho-espace-md) var(--eho-espace-lg);
	border-radius: var(--eho-rayon);
}

.eho-disponibilite--sans_secteur {
	color: var(--eho-texte-fort);
	background-color: var(--eho-gris-050);
	border: 1px solid var(--eho-bordure);
}

.eho-disponibilite--indisponible,
.eho-disponibilite--rupture {
	color: #7a5c00;
	background-color: rgba(255, 194, 0, 0.16);
	border: 1px solid rgba(255, 194, 0, 0.4);
}

.eho-disponibilite__texte,
.eho-disponibilite__aide {
	margin-bottom: 0;
}

.eho-disponibilite__aide {
	font-size: var(--eho-taille-sm);
}

.eho-disponibilite__aide a {
	font-weight: var(--eho-poids-semi);
	color: inherit;
}

/* Fil d'etapes du tunnel */

.eho-tunnel-etapes {
	padding-block: var(--eho-espace-md);
	background-color: var(--eho-gris-050);
}

.eho-tunnel-etapes__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--eho-espace-md);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.0625rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.eho-tunnel-etapes__item + .eho-tunnel-etapes__item::before {
	content: "→";
	margin-inline-end: var(--eho-espace-md);
	color: var(--eho-gris-400);
}

.eho-tunnel-etapes__item--courante > span {
	padding-bottom: 0.2rem;
	color: var(--eho-bleu);
	border-bottom: 2px solid var(--eho-vert);
}

.eho-tunnel-etapes__item--faite a {
	color: var(--eho-vert);
	text-decoration: none;
}

.eho-tunnel-etapes__item--a-venir > span {
	color: var(--eho-texte-faible);
}

.eho-tunnel-note {
	margin-block: var(--eho-espace-lg) 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte);
}

/* Panier vide */

.wp-block-woocommerce-empty-cart-block,
.cart-empty {
	padding-block: var(--eho-espace-3xl);
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block h2,
.cart-empty {
	font-size: 2rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.wc-block-cart__empty-cart__title {
	font-size: 2rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

/* Mention de consigne sur la fiche produit : le choix se fait a l'etape dediee */

.eho-consigne {
	display: grid;
	gap: 0.25rem;
	margin-block: var(--eho-espace-lg);
	padding: var(--eho-espace-md) var(--eho-espace-lg);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon);
}

.eho-consigne__titre {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.eho-consigne__detail {
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-filtre__case {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	cursor: pointer;
}

.eho-filtre__case input {
	flex: none;
}

.eho-filtre__case .eho-filtre__compte {
	margin-inline-start: auto;
}

/* Mon compte : connexion et inscription cote a cote, comme la production */

.woocommerce-account .woocommerce > .u-columns,
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--eho-espace-3xl);
	align-items: start;
	padding-block: var(--eho-espace-md);
}

/* La production compose ce formulaire en 14px, ses champs faisant 42px de haut
   contre 50 chez nous. Sur deux colonnes et six champs, l'ecart se voyait. */
.woocommerce-account .u-columns .woocommerce-Input,
.woocommerce-account .u-columns .input-text {
	padding-block: 0.625rem;
	font-size: 0.875rem;
}

.woocommerce-account .u-columns .col-1 {
	border-inline-end: 1px solid var(--eho-bordure);
	padding-inline-end: var(--eho-espace-3xl);
}

.woocommerce-account .u-columns h2 {
	margin-bottom: var(--eho-espace-lg);
	font-size: 1.75rem;
	font-weight: var(--eho-poids-semi);
	text-align: center;
	color: var(--eho-texte-fort);
}

.woocommerce-account .u-columns .col-2 {
	text-align: center;
}

.woocommerce-form-row {
	display: grid;
	gap: var(--eho-espace-2xs);
	margin-bottom: var(--eho-espace-md);
	text-align: start;
}

.woocommerce-form-row label {
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-texte);
}

.woocommerce-form-row .required {
	color: var(--eho-rouge);
	text-decoration: none;
}

.woocommerce-form-row input.input-text,
.woocommerce-form-row .password-input {
	width: 100%;
}

.woocommerce-form-row input.input-text,
.woocommerce-form-row .woocommerce-Input {
	padding: 0.75rem var(--eho-espace-md);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
	background-color: var(--eho-blanc);
}

.woocommerce-form-row input.input-text:focus {
	outline: none;
	border-color: var(--eho-vert);
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	width: 100%;
	padding: 0.9rem var(--eho-espace-lg);
	font-weight: var(--eho-poids-gras);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
	border: 0;
	border-radius: var(--eho-rayon-rond);
	cursor: pointer;
}

.woocommerce-form-register__submit {
	width: auto;
	color: var(--eho-texte-fort);
	background-color: var(--eho-gris-100);
}

.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
	color: var(--eho-blanc);
	background-color: var(--eho-vert-fonce);
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	margin-top: var(--eho-espace-md);
	font-size: var(--eho-taille-sm);
}

.woocommerce-LostPassword {
	margin-top: var(--eho-espace-md);
	text-align: end;
	font-size: var(--eho-taille-sm);
}

.woocommerce-LostPassword a {
	color: var(--eho-vert);
	text-decoration: none;
}

@media (max-width: 1024px) {
	.woocommerce-account .woocommerce > .u-columns,
	.woocommerce-account .u-columns.col2-set {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .u-columns .col-1 {
		border-inline-end: 0;
		padding-inline-end: 0;
		padding-bottom: var(--eho-espace-xl);
		border-bottom: 1px solid var(--eho-bordure);
	}
}

/* Bouton d'affichage du mot de passe */

.woocommerce-form-row .password-input {
	position: relative;
	display: block;
}

.woocommerce-form-row .show-password-input {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--eho-espace-sm);
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.woocommerce-form-row .show-password-input::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--eho-texte-faible);
	mask: url("../../icons/oeil.svg") no-repeat center / contain;
	-webkit-mask: url("../../icons/oeil.svg") no-repeat center / contain;
}

.woocommerce-form-row .show-password-input.display-password::before {
	background-color: var(--eho-vert);
}

.eho-prix-sans-secteur {
	font-size: var(--eho-taille-sm);
	font-style: italic;
	color: var(--eho-texte);
}

/* Sous 768px la production resserre ses vignettes : 160px de carte dans un
   pas de 250px, la ou nos 16px de marge interne portaient le pas a 269. */
@media (max-width: 768px) {
	.eho-boutique__item {
		padding: var(--eho-espace-xs);
	}
}

/* A 375 la production insere 10 px entre le bord de la carte et l'image :
   carte de 160, image de 140, pour un pas de rangee de 222 px. La notre
   laissait l'image occuper toute la carte, d'ou un pas de 244 et 22 px de trop
   sur chacune des 26 rangees. Retirer la marge exterieure ne sert a rien : la
   vignette carree grandit d'autant, essaye et mesure a un pixel pres. */
@media (max-width: 560px) {
	.eho-boutique__item .eho-carte-produit__media {
		width: calc(100% - 1.25rem);
		margin-inline: auto;
	}
}

/* Une seule ligne, coupee au besoin. La hauteur d'une rangee est fixee par sa
   vignette la plus haute, et deux lignes autorisees donnaient des rangees
   inegales : 409 px puis 431 px, quand la production tient un pas constant de
   395 px. Verifie sur ses 102 produits, les deux pages de la boutique : tous
   ses titres font 22 px, y compris « Coffret complet Bi-bouteilles Propane
   avec detendeur », le plus long du catalogue. */
.eho-boutique__item .eho-carte-produit__titre {
	/* La production coupe net : sa boite de titre fait une ligne de haut et
	   deborde en `hidden`, sans `text-overflow`. Le `-webkit-line-clamp` posait
	   des points de suspension que le listing en ligne n a pas. */
	height: 1.4em;
	line-height: 1.4;
	overflow: hidden;
}

/* Sous 560px la production tient son titre de vignette sur une seule ligne,
   coupee au besoin : la carte fait 212px de haut la ou la notre en faisait 257. */
@media (max-width: 560px) {
	.eho-boutique__item .eho-carte-produit__titre {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		/* La production descend a 14,4px dans la grille de la boutique, pas
		   dans les rangees de l'accueil. */
		font-size: 0.9rem;
	}
}

/* Catalogue vide : le visiteur doit comprendre que c'est son secteur qui
   commande ce qu'il voit, pas une recherche infructueuse. */
.eho-catalogue-vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--eho-espace-sm);
	padding: var(--eho-espace-2xl) var(--eho-espace-md);
	text-align: center;
	background: var(--eho-gris-050);
	border-radius: var(--eho-rayon);
}

.eho-catalogue-vide__icone {
	width: 3rem;
	height: 3rem;
	color: var(--eho-rouge);
}

.eho-catalogue-vide__titre {
	margin: 0;
	font-family: var(--eho-police-titre);
	font-size: var(--eho-taille-xl);
	color: var(--eho-texte-fort);
}

.eho-catalogue-vide__texte {
	max-width: 34rem;
	margin: 0;
	color: var(--eho-texte-faible);
}

.eho-catalogue-vide__lien {
	margin: 0;
	font-size: var(--eho-taille-sm);
}

/* Pagination du listing. WooCommerce sort `nav.woocommerce-pagination` avec un
   `ul.page-numbers` que les regles generiques, ecrites pour `.eho-pagination
   .nav-links`, ne touchaient pas : le listing affichait la liste a puces du
   navigateur, alignee a gauche.

   La production centre une rangee de carres de 34px espaces de 3px, sans rayon,
   la page courante sur fond vert et les autres en gris tres fonce. */
.eho-boutique__apres {
	padding-block: var(--eho-espace-xl) var(--eho-espace-3xl);
}

.woocommerce-pagination {
	margin-block: 0;
	text-align: center;
}

/* `inline-flex` debordait de sa ligne des que la rangee passait a la ligne :
   sur telephone, « Page 4 sur 8 » se peignait par-dessus les boutons. */
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.woocommerce-pagination li {
	display: flex;
	margin: 0;
}

/* Angles doux plutot que pastilles rondes : en pilule complete, les numeros
   devenaient des jetons et « Precedent » une longue gelule, et la rangee se
   lisait comme une chaine d'objets sans rapport.

   Les selecteurs descendent sous `li` a dessein : la liste elle-meme porte la
   classe `page-numbers`, et sans cette precision elle recevait la bordure, la
   hauteur et le rayon d'un bouton. D'ou le cadre arrondi qui entourait tout le
   groupe, et le debordement de la rangee sur telephone. */
.woocommerce-pagination li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.75rem;
	font-size: 0.9375rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
	text-decoration: none;
	background-color: var(--eho-blanc);
	border: 1px solid var(--eho-gris-200);
	border-radius: var(--eho-rayon);
	transition: background-color var(--eho-transition), color var(--eho-transition), border-color var(--eho-transition);
}

.woocommerce-pagination li a.page-numbers:hover,
.woocommerce-pagination li a.page-numbers:focus-visible {
	color: var(--eho-texte-fort);
	background-color: var(--eho-gris-050);
	border-color: var(--eho-gris-400);
}

.woocommerce-pagination li .page-numbers.current {
	color: var(--eho-blanc);
	background-color: var(--eho-vert-panier);
	border-color: var(--eho-vert-panier);
}

/* Les points de suspension ne sont pas cliquables : leur donner l'apparence
   d'un bouton inviterait a cliquer dans le vide. */
.woocommerce-pagination li .page-numbers.dots {
	min-width: 1.75rem;
	padding-inline: 0;
	color: var(--eho-texte-faible);
	background-color: transparent;
	border-color: transparent;
}

/* Precedent et suivant portent leur nom et se detachent du groupe des
   numeros : deux fleches nues ne disaient ni ou elles menaient, ni qu'on
   etait au bout. */
.woocommerce-pagination li a.prev,
.woocommerce-pagination li a.next {
	padding-inline: 1rem;
}

.woocommerce-pagination li a.prev {
	margin-inline-end: 0.375rem;
}

.woocommerce-pagination li a.next {
	margin-inline-start: 0.375rem;
}

.eho-pagination__fleche {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
}

.eho-pagination__etat {
	margin: var(--eho-espace-sm) 0 0;
	font-size: 0.8125rem;
	color: var(--eho-texte-faible);
}

@media (max-width: 30rem) {
	.eho-pagination__libelle {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.woocommerce-pagination li a.prev,
	.woocommerce-pagination li a.next {
		padding-inline: 0.5rem;
	}
}

/* Fil d'etapes sous 768px. Centre et replie, il composait un escalier : chaque
   ligne commencait par une fleche et se recentrait plus a droite que la
   precedente. Aligne a gauche et en plus petit, il redevient un fil. */

@media (max-width: 768px) {
	.eho-tunnel-etapes__liste {
		justify-content: flex-start;
		gap: var(--eho-espace-xs);
		font-size: 0.75rem;
		letter-spacing: 0.02em;
	}

	.eho-tunnel-etapes__item + .eho-tunnel-etapes__item::before {
		margin-inline-end: var(--eho-espace-xs);
	}
}

/* Fiche d'un produit vendu au litre : le bouton renvoie au devis. */
.eho-devis-renvoi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--eho-espace-xs);
	margin: var(--eho-espace-md) 0;
}

.eho-devis-renvoi__aide {
	color: var(--eho-texte-faible);
	font-size: var(--eho-taille-sm);
}

.eho-prix__unite {
	color: var(--eho-texte-faible);
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-normal);
}