/* Panier et validation de commande */

.woocommerce-cart-form__contents {
	width: 100%;
	table-layout: auto;
	margin-bottom: var(--eho-espace-xl);
	border-collapse: collapse;
}

.eho-contenu .woocommerce-cart-form__contents thead th,
.woocommerce-cart-form__contents thead th {
	padding: var(--eho-espace-md) var(--eho-espace-lg);
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-semi);
	text-align: start;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--eho-bleu);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--eho-bordure);
}

.woocommerce-cart-form__contents td {
	padding: var(--eho-espace-lg);
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid var(--eho-bordure);
}

.woocommerce-cart-form__contents .product-remove {
	width: 3rem;
}

/* Le nom du produit porte aussi le distributeur : c'est la colonne qui a
   besoin de place, les autres n'affichent qu'un montant ou un compteur. */

.woocommerce-cart-form__contents .product-name {
	width: auto;
	min-width: 16rem;
}

.woocommerce-cart-form__contents .product-price {
	width: 7rem;
}

.woocommerce-cart-form__contents .product-subtotal {
	width: 7.5rem;
}

/* Les intitules de colonnes ne se coupent pas en deux : « Sous-total » tenait
   sur deux lignes et decalait toute la rangee d'en-tete. */

.woocommerce-cart-form__contents thead th {
	white-space: nowrap;
}

/* Depuis que le selecteur de quantite est a sa taille de production, 82 px, sa
   colonne n'a plus besoin de 9 rem : la place rendue va au nom du produit, qui
   tenait sur deux lignes. */

.woocommerce-cart-form__contents .product-quantity {
	width: 7.5rem;
}

.woocommerce-cart-form__contents .product-thumbnail {
	width: 7rem;
}

.woocommerce-cart-form__contents .product-thumbnail img {
	width: 5.5rem;
	max-width: none;
	height: auto;
}

.woocommerce-cart-form__contents .product-name a {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-bleu);
	text-decoration: none;
}

.woocommerce-cart-form__contents .product-remove a {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--eho-texte-faible);
	text-decoration: none;
	border-radius: var(--eho-rayon-rond);
}

.woocommerce-cart-form__contents .product-remove a:hover {
	color: var(--eho-blanc);
	background-color: var(--eho-erreur);
}

/* Code promo et actions */

/* La cellule des actions porte un `colspan` : lui donner `display: flex` la
   sortait du tableau, elle retombait dans la premiere colonne large de 48 px,
   et ses deux boutons s'y ecrasaient. « Appliquer le code promo » devenait un
   disque de quatre lignes, « Mettre a jour le panier » une pilule verticale
   d'une lettre par ligne. La cellule reste donc une cellule. */

.woocommerce-cart-form .actions {
	padding: var(--eho-espace-lg) 0;
	border-bottom: 0;
	text-align: end;
}

.woocommerce-cart-form .coupon {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	float: inline-start;
}

.woocommerce-cart-form .actions .button {
	white-space: nowrap;
}

@media (max-width: 560px) {
	.woocommerce-cart-form .coupon {
		float: none;
		flex-wrap: wrap;
		margin-bottom: var(--eho-espace-md);
	}

	.woocommerce-cart-form .actions {
		text-align: start;
	}
}

.woocommerce-cart-form .coupon input[type="text"] {
	min-width: 12rem;
	padding: 0.65rem var(--eho-espace-md);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-block;
	text-decoration: none;
	padding: 0.75rem 1.75rem;
	font-family: inherit;
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-semi);
	text-transform: uppercase;
	color: var(--eho-blanc);
	background-color: var(--eho-bleu);
	border: 0;
	border-radius: var(--eho-rayon-rond);
	cursor: pointer;
	transition: background-color var(--eho-transition);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
	background-color: var(--eho-bleu-fonce, #1b1c42);
}

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

.woocommerce a.checkout-button,
.woocommerce .checkout-button {
	display: block;
	text-decoration: none;
	padding: 0.9rem 2rem;
	text-align: center;
	background-color: var(--eho-vert);
}

.woocommerce a.checkout-button:hover {
	background-color: var(--eho-vert-fonce);
}

/* Totaux */

/* Le tableau des lignes et le total du panier se suivaient l'un sous l'autre,
   chacun en pleine largeur : le total se retrouvait sous un grand vide, tres
   loin des lignes qu'il additionne. Ils passent cote a cote. */

@media (min-width: 1024px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: var(--eho-espace-xl);
		align-items: start;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .cart-collaterals {
		position: sticky;
		top: var(--eho-espace-lg);
	}
}

.cart_totals {
	max-width: 30rem;
	margin-inline-start: auto;
	padding: var(--eho-espace-xl);
	background-color: var(--eho-blanc);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
}

.cart_totals h2 {
	text-transform: uppercase;
}

.cart_totals h2 {
	margin-block-start: 0;
	font-size: 1.375rem;
}

.cart_totals table {
	width: 100%;
	margin-bottom: var(--eho-espace-lg);
	border-collapse: collapse;
}

.eho-contenu .cart_totals th,
.cart_totals th,
.cart_totals td {
	background-color: transparent;
	padding: var(--eho-espace-sm) 0;
	text-align: start;
	border: 0;
	border-bottom: 1px solid var(--eho-bordure);
}

.cart_totals td {
	text-align: end;
}

.cart_totals .order-total td {
	font-size: 1.25rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-bleu);
}

/* Validation de commande */

.eho-commande-form__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--eho-espace-2xl);
	align-items: start;
}

/* La production decoupe le panneau du recapitulatif en ticket : encoches
   demi-rondes en haut et en bas, 17 px de periode, cotes droits. Le masque
   remplace le rayon, qui arrondissait les quatre coins.
   Le motif part du centre : cale a gauche, la derniere encoche etait coupee
   par le bord droit et le panneau paraissait decentre. */

.eho-commande-form__colonne--recap {
	--eho-encoche: 17px;
	--eho-encoche-h: 12px;
	--eho-masque-ticket:
		radial-gradient(circle 6px at 50% 0, transparent 96%, #000) top center / var(--eho-encoche) var(--eho-encoche-h) repeat-x,
		radial-gradient(circle 6px at 50% 100%, transparent 96%, #000) bottom center / var(--eho-encoche) var(--eho-encoche-h) repeat-x,
		linear-gradient(#000, #000) center / 100% calc(100% - var(--eho-encoche-h) * 2) no-repeat;
	padding: calc(var(--eho-espace-xl) + var(--eho-encoche-h)) var(--eho-espace-xl);
	background-color: var(--eho-gris-050);
	-webkit-mask: var(--eho-masque-ticket);
	mask: var(--eho-masque-ticket);
}

.eho-commande-form__titre {
	margin-block-start: 0;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--eho-bleu);
}

.eho-commande-form__colonne--recap .eho-commande-form__titre {
	text-align: center;
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--eho-espace-2xl);
}

/* Le titre de section est porte par notre gabarit.
 *
 * Celui des champs de livraison, lui, n'est pas un titre : il contient la case
 * « Expedier a une adresse differente ? ». Le masquer avec l'autre supprimait
 * la case, et il n'y avait plus aucun moyen de livrer ailleurs qu'a l'adresse
 * de facturation. */

.woocommerce-checkout .woocommerce-billing-fields > h3 {
	display: none;
}

.woocommerce-checkout .woocommerce-shipping-fields > h3 {
	margin-block: var(--eho-espace-lg) var(--eho-espace-md);
	font-size: var(--eho-taille-base);
	font-weight: var(--eho-poids-moyen);
	color: var(--eho-texte);
}

.woocommerce-checkout .woocommerce-shipping-fields > h3 label {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	cursor: pointer;
}

.woocommerce-checkout .form-row {
	display: grid;
	gap: 0.35rem;
	margin-bottom: var(--eho-espace-md);
}

.woocommerce-checkout .form-row label {
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection {
	width: 100%;
	padding: 0.7rem var(--eho-espace-md);
	font-family: inherit;
	font-size: var(--eho-taille-base);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
	background-color: var(--eho-blanc);
}

/* Le panneau ouvre deja sur 44 px de marge interieure : le titre n'a pas
   besoin d'en rajouter au-dessus, il lui faut de l'air en dessous. */

.woocommerce-checkout #order_review_heading {
	margin-block: 0 var(--eho-espace-xl);
}

.woocommerce-checkout-review-order {
	padding: var(--eho-espace-lg);
	background-color: var(--eho-blanc);
	border-radius: var(--eho-rayon-sm);
	box-shadow: 0 1px 3px rgb(20 22 60 / 6%);
}

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}

.eho-contenu .woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout-review-order-table thead th {
	color: var(--eho-bleu);
	background-color: transparent;
	text-transform: uppercase;
	font-size: var(--eho-taille-sm);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: var(--eho-espace-sm) 0;
	text-align: start;
	border: 0;
	border-bottom: 1px solid var(--eho-bordure);
}

.woocommerce-checkout-review-order-table td {
	text-align: end;
}

.woocommerce-checkout-review-order-table .product-name {
	text-align: start;
}

.woocommerce-checkout #place_order {
	width: 100%;
	margin-block-start: var(--eho-espace-lg);
	padding: 1rem;
	font-size: var(--eho-taille-base);
	background-color: var(--eho-vert);
}

.woocommerce-checkout #place_order:hover {
	background-color: var(--eho-vert-fonce);
}

@media (max-width: 900px) {
	.eho-commande-form__grille {
		grid-template-columns: 1fr;
	}

	.woocommerce-cart-form__contents,
	.woocommerce-cart-form__contents tbody,
	.woocommerce-cart-form__contents tr,
	.woocommerce-cart-form__contents td {
		display: block;
		width: auto;
	}

	.woocommerce-cart-form__contents thead {
		display: none;
	}

	/* Chaque ligne devient une carte. Empilees telles quelles, les cellules
	   gardaient chacune sa largeur, 48 puis 112 puis 345 : on obtenait une
	   croix isolee, une vignette, puis trois nombres sans dire lequel etait le
	   prix, la quantite ou le total. */

	.woocommerce-cart-form__contents tr.cart_item {
		position: relative;
		margin-bottom: var(--eho-espace-md);
		padding: var(--eho-espace-md);
		border: 1px solid var(--eho-bordure);
		border-radius: var(--eho-rayon-sm);
	}

	.woocommerce-cart-form__contents tr.cart_item td {
		padding: 0;
		border: 0;
	}

	.woocommerce-cart-form__contents td.product-remove {
		position: absolute;
		inset-block-start: var(--eho-espace-sm);
		inset-inline-end: var(--eho-espace-sm);
	}

	.woocommerce-cart-form__contents td.product-thumbnail {
		margin-bottom: var(--eho-espace-sm);
	}

	.woocommerce-cart-form__contents td.product-thumbnail img {
		width: 5rem;
		height: auto;
	}

	/* WooCommerce porte l'intitule de colonne en `data-title` : on le rend
	   visible a gauche, la valeur restant a droite. */

	.woocommerce-cart-form__contents td[data-title] {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--eho-espace-sm);
		padding-block: 0.4rem;
	}

	.woocommerce-cart-form__contents td[data-title]::before {
		content: attr(data-title);
		flex: none;
		font-size: var(--eho-taille-sm);
		font-weight: var(--eho-poids-semi);
		color: var(--eho-texte-faible);
	}

	/* Le nom se suffit a lui-meme : l'annoncer par « Produit » ferait du bruit. */

	.woocommerce-cart-form__contents td.product-name {
		display: block;
	}

	.woocommerce-cart-form__contents td.product-name::before {
		display: none;
	}

	.cart_totals {
		max-width: none;
	}
}

/* Controle de quantite, comme en production */

/* Releve sur la production : 84 x 32, trois cellules separees par un filet, et
   un corps plus petit que le texte courant. Le champ etait auparavant style a
   part, avant que le script ne l'enveloppe : il gardait sa bordure, ses 4,5 rem
   et son remplissage, et le tout faisait 138 x 44. */

.eho-quantite {
	display: inline-flex;
	align-items: stretch;
	height: 2rem;
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
	overflow: hidden;
}

.eho-quantite__bouton {
	width: 1.5rem;
	padding: 0;
	font-size: var(--eho-taille-sm);
	line-height: 1;
	color: var(--eho-texte-faible);
	background: none;
	border: 0;
	cursor: pointer;
}

.eho-quantite__bouton:hover {
	color: var(--eho-bleu);
	background-color: var(--eho-gris-050);
}

.eho-quantite .quantity {
	display: block;
}

.eho-quantite input {
	width: 2rem;
	height: 100%;
	padding: 0;
	font-size: var(--eho-taille-sm);
	text-align: center;
	background: none;
	border: 0;
	border-inline: 1px solid var(--eho-bordure);
	border-radius: 0;
	appearance: textfield;
}

.eho-quantite input::-webkit-outer-spin-button,
.eho-quantite input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* Les libelles de totaux n'ont pas de fond en production. */

.eho-contenu .woocommerce-checkout-review-order-table th,
.eho-contenu .cart_totals th {
	background-color: transparent;
}

/* Le champ pays est remplace par select2, qui impose sa propre hauteur : le
   champ mesurait 51 px quand les autres en font 72, et son intitule flottait
   au-dessus d'une ligne trop courte. */

.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: auto;
	padding: 0.7rem var(--eho-espace-md);
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-sm);
	background-color: var(--eho-blanc);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: inherit;
	color: inherit;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	inset-inline-end: var(--eho-espace-sm);
}

/* Couleurs relevees sur le panier de la production, capture du 7 septembre
   2026 : le vert de marque porte les actions et les montants a payer, le bleu
   marine n'y apparait pas. Les intitules du bloc de totaux y sont en casse
   normale, pas en capitales, et le message d'expedition est rouge. */

.woocommerce-cart-form .actions .button,
.woocommerce-cart-form [name="apply_coupon"] {
	background-color: var(--eho-vert);
	border-color: var(--eho-vert);
	color: var(--eho-blanc);
}

.woocommerce-cart-form .product-remove a {
	color: var(--eho-vert);
}

.woocommerce-cart-form__contents .product-subtotal,
.cart_totals .order-total .amount {
	color: var(--eho-vert);
	font-weight: var(--eho-poids-gras);
}

.cart_totals th {
	text-transform: none;
	font-weight: var(--eho-poids-moyen);
}

/* Le message d'expedition est un texte nu dans la cellule, sans balise a
   viser : la couleur se pose sur la cellule et le formulaire la reprend. */

.cart_totals .shipping td {
	color: var(--eho-rouge);
}

.cart_totals .shipping td .woocommerce-shipping-calculator,
.cart_totals .shipping td .shipping__list {
	color: var(--eho-texte);
}

/* Prenom et nom cote a cote, comme sur la commande de la production. Ils
   s'empilent sous 700 px, ou deux colonnes ne tiennent plus. */

@media (min-width: 700px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--eho-espace-lg);
	}

	.woocommerce-billing-fields__field-wrapper > .form-row,
	.woocommerce-shipping-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
	}

	.woocommerce-billing-fields__field-wrapper > .form-row-first,
	.woocommerce-shipping-fields__field-wrapper > .form-row-first {
		grid-column: 1;
	}

	.woocommerce-billing-fields__field-wrapper > .form-row-last,
	.woocommerce-shipping-fields__field-wrapper > .form-row-last {
		grid-column: 2;
	}
}

/* Recapitulatif de la commande, releve sur la capture de la production :
   intitules en casse normale, et la quantite reste sur la ligne du produit au
   lieu de tomber sous le distributeur. */

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .order-total th {
	text-transform: none;
	font-weight: var(--eho-poids-moyen);
}

.woocommerce-checkout-review-order-table .product-name {
	width: auto;
}

.woocommerce-checkout-review-order-table .product-name .product-quantity {
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table .eho-panier__distributeur {
	display: block;
}

.woocommerce-checkout-review-order-table .order-total .amount {
	color: var(--eho-vert);
	font-weight: var(--eho-poids-gras);
}

/* Le tableau du recapitulatif est en petit corps sur la production : les noms
   de produit y tiennent sur une ligne au lieu de passer a deux. */

.woocommerce-checkout-review-order-table {
	font-size: var(--eho-taille-sm);
}

.woocommerce-checkout-review-order-table .product-name {
	color: var(--eho-texte-faible);
}

/* Le recapitulatif abandonne la mise en page par colonnes de tableau. Elle
   accordait au sous-total la largeur de la plus longue chaine de la colonne,
   le message d'expedition, et repliait du meme coup les noms de produit et le
   distributeur. Chaque ligne se pose donc en flex, intitule a gauche et valeur
   calee a droite, comme sur la production. */

.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
	display: block;
}

.woocommerce-checkout-review-order-table tr {
	display: flex;
	align-items: baseline;
	gap: var(--eho-espace-md);
	border-bottom: 1px solid var(--eho-bordure);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	width: auto;
	border-bottom: 0;
}

.woocommerce-checkout-review-order-table thead th:first-child,
.woocommerce-checkout-review-order-table .product-name {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-checkout-review-order-table thead th + th,
.woocommerce-checkout-review-order-table .product-total {
	flex: 0 0 auto;
	text-align: end;
}

.woocommerce-checkout-review-order-table tfoot th {
	flex: 0 0 auto;
}

.woocommerce-checkout-review-order-table tfoot td {
	flex: 1 1 auto;
	text-align: end;
}

.woocommerce-checkout-review-order-table .eho-panier__distributeur {
	font-size: var(--eho-taille-xs);
}

/* Le montant occupe sa ligne, la mention de TVA passe dessous, comme sur la
   production ou « (dont 6,65 € TVA) » n'est jamais accolee au total. */

.woocommerce-checkout-review-order-table .order-total td,
.cart_totals .order-total td {
	line-height: 1.4;
}

.woocommerce-checkout-review-order-table .order-total .amount,
.cart_totals .order-total .amount {
	display: block;
	font-size: var(--eho-taille-lg);
}

.woocommerce-checkout-review-order-table .order-total small.includes_tax,
.cart_totals .order-total small.includes_tax {
	display: block;
	font-size: var(--eho-taille-xs);
	color: var(--eho-texte-faible);
}

/* La mention de TVA porte elle aussi un montant : sans cette remise a plat,
   la regle ci-dessus le detachait et coupait la phrase en trois morceaux. */

.woocommerce-checkout-review-order-table .order-total small.includes_tax .amount,
.cart_totals .order-total small.includes_tax .amount {
	display: inline;
	font-size: inherit;
	color: inherit;
}

/* « (facultatif) » est une mention secondaire, pas une part de l'intitule. */

.woocommerce-checkout .form-row label .optional {
	font-weight: var(--eho-poids-normal);
	font-size: var(--eho-taille-xs);
	color: var(--eho-texte-faible);
}

/* La zone de commentaire de la production fait cinq lignes, pas deux. */

.woocommerce-checkout #order_comments {
	min-height: 11rem;
	resize: vertical;
}

/* Meme correction que sur le recapitulatif : la colonne des valeurs du total
   panier se calait sur l'intitule le plus court et pliait le message
   d'expedition sur quatre lignes. */

.cart_totals table,
.cart_totals table tbody {
	display: block;
}

.cart_totals table tr {
	display: flex;
	align-items: baseline;
	gap: var(--eho-espace-md);
	border-bottom: 1px solid var(--eho-bordure);
}

.eho-contenu .cart_totals th,
.cart_totals th,
.cart_totals td {
	border-bottom: 0;
}

.cart_totals table th {
	flex: 0 0 auto;
}

.cart_totals table td {
	flex: 1 1 auto;
}

/* Le bouton de mise a jour reste gris tant qu'aucune quantite n'a bouge, comme
   sur la production. */

.woocommerce-cart-form .actions .button[disabled],
.woocommerce-cart-form .actions .button:disabled {
	background-color: var(--eho-gris-100);
	color: var(--eho-texte-faible);
	opacity: 1;
}

/* Les deux invites d'en-tete, connexion et code promo, sont espacees sur la
   production : 25 px entre elles, 70 px avant les colonnes. Sans marge, elles
   se collaient l'une a l'autre et au titre de facturation. */

.woocommerce-checkout .woocommerce-form-login-toggle {
	margin-block-end: var(--eho-espace-lg);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-block-end: var(--eho-espace-2xl);
}

/* Le volume d'une ligne vendue au litre. Le selecteur d'articles ne convient
   pas : quatre chiffres n'y tiennent pas, et un pas de 1 litre n'a pas de sens
   sur une commande de 1 000. */

.eho-volume {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.eho-volume__champ {
	width: 5rem;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--eho-gris-200);
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	text-align: right;
}

.eho-volume__champ:focus-visible {
	outline: 2px solid var(--eho-lien);
	outline-offset: 1px;
}

.eho-volume__unite {
	color: var(--eho-gris-600);
	font-weight: var(--eho-poids-semi);
}

/* Le prix d'une ligne au litre doit nommer son unite : « 1,008 € » seul se
   lit comme le prix de l'article. */
.eho-panier__unite {
	color: var(--eho-gris-600);
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* Le panier vit dans `.eho-contenu`, et heritait des regles ecrites pour les
   tableaux du contenu importe : `overflow-wrap: anywhere` autorisait la coupure
   au milieu d'un nombre, « 1 068,50 EUR » se lisant « 1 » puis « 068,50 EUR »
   a la ligne suivante.

   Tout ceci est reserve aux ecrans larges. En dessous, la table doit rester
   pliee a son conteneur : `table-layout: auto` la laisse grandir jusqu'a son
   contenu minimal, et a 1024 elle passait alors sous la boite des totaux. */

@media (min-width: 1200px) {
	.eho-contenu .woocommerce-cart-form__contents {
		table-layout: auto;
	}

	.eho-contenu .woocommerce-cart-form__contents td,
	.eho-contenu .woocommerce-cart-form__contents th {
		overflow-wrap: normal;
	}

	/* Un montant ne se coupe pas. */

	.woocommerce-cart-form__contents .product-price,
	.woocommerce-cart-form__contents .product-subtotal {
		white-space: nowrap;
	}

	/* Les colonnes de chiffres n'ont pas besoin des 24px lateraux du gabarit :
	   la place rendue va au nom du produit. */

	.woocommerce-cart-form__contents .product-price,
	.woocommerce-cart-form__contents .product-quantity,
	.woocommerce-cart-form__contents .product-subtotal {
		padding-inline: var(--eho-espace-md);
	}

	.woocommerce-cart-form__contents .product-subtotal {
		width: 7.75rem;
	}

	.woocommerce-cart-form__contents .product-quantity {
		width: 8.25rem;
	}

	/* « / litre » prend sa ligne sous le montant : le prix reste l'element
	   fort, et la colonne n'a plus a porter les deux de front. */

	.woocommerce-cart-form__contents .eho-panier__unite {
		display: block;
	}
}


/* Consigne rattachee a sa bouteille.
 *
 * Les deux lignes portaient le meme traitement : rien ne disait que la caution
 * dependait de la bouteille du dessus, et la consigne avait sa propre croix. */

.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne td {
	padding-top: 0;
	background-color: var(--eho-gris-100);
	border-top: 0;
}

/* Le rattachement tient a un filet vertical, pas a un retrait : sous 900px le
   tableau passe en blocs et un padding-left n'y dit plus rien. */

.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne > td:first-child {
	border-left: 3px solid var(--eho-bleu);
}

/* Le retrait par padding valait 8px, invisible. Il est amplifie et double d'un
   chevron : dans un tableau, les colonnes s'alignent, donc seul le contenu peut
   dire le rattachement. */

.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne .product-name {
	position: relative;
	padding-left: calc(var(--eho-espace-lg) + 1.75rem);
}

.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne .product-name::before {
	content: "\21B3";
	position: absolute;
	inset-inline-start: var(--eho-espace-lg);
	font-size: 1.125rem;
	line-height: 1.2;
	color: var(--eho-bleu);
}

/* Ecart entre bouteilles et consignes. Une ligne, pas une carte : l'encart
   d'origine repetait ce que les lignes disent deja, et c'est ce doublon qui a
   fait retirer la carte du panier. */

.eho-panier__manque-consigne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--eho-espace-xs);
	margin: 0 0 var(--eho-espace-lg);
	padding: var(--eho-espace-sm) var(--eho-espace-md);
	font-size: var(--eho-taille-sm);
	font-weight: var(--eho-poids-semi);
	color: var(--eho-bleu);
	background-color: var(--eho-gris-100);
	border-left: 3px solid var(--eho-jaune);
	border-radius: var(--eho-rayon-sm);
}

.eho-panier__manque-consigne a {
	font-weight: var(--eho-poids-semi);
	color: var(--eho-lien);
	text-decoration: underline;
}

/* La cellule de retrait porte une croix ronde de 1,75rem, posee sur `a` avec
   une specificite de (0,2,1). La consigne, elle, porte un lien nomme : sa
   regle de classe seule ne pesait que (0,1,0) et ne reprenait ni la boite ni
   le `display: grid`. « Retirer » restait donc enferme dans 28px et debordait
   de sa boite, coupe au bord de la carte. */

.woocommerce-cart-form__contents .product-remove a.eho-panier__retirer-consigne {
	display: inline;
	width: auto;
	height: auto;
	border-radius: 0;
}

.woocommerce-cart-form__contents .product-remove a.eho-panier__retirer-consigne:hover {
	background-color: transparent;
}

.eho-panier__retirer-consigne {
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
	text-decoration: underline;
	white-space: nowrap;
}

.eho-panier__retirer-consigne:hover,
.eho-panier__retirer-consigne:focus-visible {
	color: var(--eho-erreur);
}

/* Dans le panier, la pastille prend sa ligne : collee au nom, elle se lisait
   comme la suite du titre. Le recapitulatif de commande la garde en ligne. */

.woocommerce-cart-form__contents .product-name .eho-panier__consigne {
	display: flex;
	width: fit-content;
}

.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne .product-thumbnail img {
	width: 3rem;
	opacity: 0.75;
}

.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne .product-quantity {
	color: var(--eho-texte-faible);
}

/* La pastille, sous le nom du produit. */

.eho-panier__consigne {
	display: inline-flex;
	align-items: center;
	gap: var(--eho-espace-xs);
	margin-top: 0.35rem;
	padding: 0.15rem 0.6rem;
	font-size: var(--eho-taille-xs, 0.8125rem);
	font-weight: var(--eho-poids-semi);
	line-height: 1.5;
	border-radius: var(--eho-rayon-rond);
}

.eho-panier__consigne--rattachee {
	padding: 0;
	font-weight: var(--eho-poids-normal);
	color: var(--eho-texte-faible);
	background-color: transparent;
}

@media (max-width: 900px) {
	/* Le filet reprend le bleu de la marque : en gris de bordure il etait
	   invisible, et c'est lui qui porte le rattachement une fois le tableau
	   demonte en blocs. */

	.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne {
		padding-left: var(--eho-espace-sm);
		border-left: 3px solid var(--eho-bleu);
	}

	.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne > td:first-child {
		border-left: 0;
	}

	/* Le chevron reste : annuler le retrait le sortait de la cellule et
	   decalait le nom de 9px vers la gauche, soit l'inverse du sens voulu. */

	.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne .product-name {
		padding-left: 1.75rem;
	}

	.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne .product-name::before {
		inset-inline-start: 0;
	}
}


/* Etape de consigne, entre le panier et la commande. Une question par
   bouteille, posee une fois, au lieu de marqueurs disperses dans le tableau. */

.eho-consigne-etape {
	padding-block: var(--eho-espace-xl) var(--eho-espace-3xl);
}

.eho-consigne-etape__intro {
	max-width: 46rem;
	margin: 0 0 var(--eho-espace-xl);
	color: var(--eho-texte-faible);
}

.eho-consigne-etape__bloc {
	margin: 0 0 var(--eho-espace-lg);
	padding: var(--eho-espace-lg);
	border: 1px solid var(--eho-bordure);
	border-left: 3px solid var(--eho-bleu);
	border-radius: var(--eho-rayon-sm);
}

.eho-consigne-etape__produit {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--eho-espace-sm);
	padding: 0;
	font-size: 1.125rem;
	font-weight: var(--eho-poids-semi);
	color: var(--eho-texte-fort);
}

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

.eho-consigne-etape__question {
	margin: var(--eho-espace-md) 0 var(--eho-espace-sm);
	font-weight: var(--eho-poids-semi);
}

.eho-consigne-etape__choix {
	display: grid;
	gap: var(--eho-espace-sm);
}

/* Chaque reponse se lit comme une ligne de prix : ce que le client prend a
   gauche, ce qu'il paie a droite. */
.eho-consigne-etape__option {
	display: flex;
	align-items: center;
	gap: var(--eho-espace-sm);
	padding: 0.75rem 1.25rem;
	cursor: pointer;
	border: 1px solid var(--eho-bordure);
	border-radius: var(--eho-rayon-rond);
}

.eho-consigne-etape__libelle {
	flex: 1;
}

.eho-consigne-etape__montant {
	font-weight: 600;
	white-space: nowrap;
}

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

.eho-consigne-etape__option:has(input:checked) {
	color: var(--eho-blanc);
	background-color: var(--eho-vert);
	border-color: var(--eho-vert);
}

.eho-consigne-etape__consequence {
	margin: var(--eho-espace-md) 0 0;
	font-size: var(--eho-taille-sm);
	color: var(--eho-texte-faible);
}

.eho-consigne-etape__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--eho-espace-md);
	margin-top: var(--eho-espace-xl);
}

.eho-consigne-etape__retour {
	color: var(--eho-texte-faible);
	text-decoration: underline;
}

/* Correctifs de la carte de panier sous 900px.
 *
 * Ils vivent en fin de feuille a dessein : les largeurs de colonnes et la
 * teinte de la consigne sont posees plus haut, et a specificite egale c'est la
 * derniere regle qui l'emporte. Places plus haut, ils perdaient en silence. */

@media (max-width: 900px) {

	/* Les largeurs de colonnes survivaient au demontage du tableau : la cellule
	   du sous-total restait a 7,75rem, soit 120px, dont 70 pour son intitule.
	   « 107,20 € » se coupait alors en « 107,2 » puis « 0 € ». Le `td` devant la
	   classe donne la specificite qui manquait. */

	.woocommerce-cart-form__contents td.product-thumbnail,
	.woocommerce-cart-form__contents td.product-name,
	.woocommerce-cart-form__contents td.product-price,
	.woocommerce-cart-form__contents td.product-quantity,
	.woocommerce-cart-form__contents td.product-subtotal {
		width: auto;
		padding-inline: 0;
	}

	.woocommerce-cart-form__contents td.product-price,
	.woocommerce-cart-form__contents td.product-subtotal {
		white-space: nowrap;
	}

	/* La teinte de la consigne vivait sur chaque cellule : mise en carte, elle
	   ne peignait que les blocs et laissait les creux en blanc. */

	.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne {
		background-color: var(--eho-gris-100);
	}

	.woocommerce-cart-form__contents tr.eho-panier__ligne--consigne td {
		background-color: transparent;
	}

	/* La bouteille porte une croix, qui tient en 28px ; la consigne porte un
	   lien nomme « Retirer ». La cellule gardait la largeur de la croix et le
	   mot sortait de sa boite, coupe au bord de la carte. `max-content` la
	   taille sur son texte, quel qu'il soit. */

	.woocommerce-cart-form__contents td.product-remove {
		inset-inline-start: auto;
		width: max-content;
		padding-inline: 0;
	}
}

/* --- Moyens de paiement ------------------------------------------------- */

/* WooCommerce empile le bouton radio, le libelle et le logo de chaque
   passerelle sur trois lignes, et Alma fait de meme pour chacune de ses
   echeances. Tout se remet sur une ligne : un radio, un nom, un logo. */

.woocommerce-checkout #payment ul.wc_payment_methods {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border: 1px solid var(--eho-gris-clair, #e2e2e2);
	border-radius: 0.5rem;
	overflow: hidden;
}

.woocommerce-checkout #payment li.wc_payment_method {
	margin: 0;
	padding: 0.9rem 1.1rem;
	border-top: 1px solid var(--eho-gris-clair, #e2e2e2);
}

.woocommerce-checkout #payment li.wc_payment_method:first-child {
	border-top: 0;
}

.woocommerce-checkout #payment li.wc_payment_method > input.input-radio {
	margin: 0 0.6rem 0 0;
	vertical-align: middle;
	accent-color: var(--eho-vert, #6ab32d);
}

.woocommerce-checkout #payment li.wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	vertical-align: middle;
	font-weight: var(--eho-poids-semi, 600);
	color: var(--eho-bleu, #252754);
	cursor: pointer;
}

.woocommerce-checkout #payment li.wc_payment_method > label img {
	display: inline-block;
	max-height: 1.6rem;
	width: auto;
	margin: 0;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 0.75rem 0 0;
	padding: 0;
	background: none;
	color: var(--eho-texte, #5a6670);
	font-size: 0.9375rem;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment div.payment_box p:first-child {
	margin-top: 0;
}

/* Le bloc d'Alma range ses enfants sur une grille a deux colonnes : la
   description, puis une echeance par colonne, puis les echeanciers. On
   repasse en ligne, les echeances a la suite, le reste en pleine largeur. */

.woocommerce-checkout #payment div.payment_box.payment_method_alma_pnx_gateway {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0 !important;
}

.woocommerce-checkout #payment div.payment_box.payment_method_alma_pnx_gateway > div:not(.alma_woocommerce_gateway_fieldset) {
	flex: 0 0 100% !important;
	width: 100% !important;
}

/* Les echeances d'Alma, cote a cote : un radio, le logo, « 2x ». La feuille
   d'Alma encadre le logo et transforme le libelle en minuscule vignette
   bordee, et chaque option prenait une colonne : tout redevient une ligne. */

.woocommerce-checkout #payment .alma_woocommerce_gateway_fieldset {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.45rem !important;
	width: auto !important;
	margin: 0.6rem 1.75rem 0.25rem 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.woocommerce-checkout #payment .alma_woocommerce_gateway_fieldset input[type="radio"] {
	margin: 0 !important;
	accent-color: var(--eho-vert, #6ab32d);
}

.woocommerce-checkout #payment .alma_woocommerce_gateway_checkbox {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	margin: 0 !important;
	cursor: pointer;
}

.woocommerce-checkout #payment .alma_woocommerce_gateway_logo {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	width: auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.woocommerce-checkout #payment .alma_woocommerce_gateway_logo img {
	height: 1.4rem !important;
	width: auto !important;
	margin: 0 !important;
}

.woocommerce-checkout #payment .alma_woocommerce_gateway_label {
	display: inline !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: 1rem !important;
	font-weight: var(--eho-poids-semi, 600) !important;
	color: var(--eho-bleu, #252754) !important;
}

/* Le formulaire de carte Stripe : ses deux `fieldset` gardaient la bordure
   par defaut du navigateur, soit deux boites empilees autour de champs qui
   dessinent deja les leurs. */

.woocommerce-checkout #payment .payment_box fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-checkout #payment .payment_box fieldset + fieldset {
	margin-top: 0.75rem;
}

/* La case « enregistrer ma carte » de Stripe, alignee sur son libelle. */

.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
}

.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew input {
	margin: 0;
}

/* Stripe pose un champ cache pour relire les styles d'un champ de saisie. Il
   herite de la largeur de 100 % des champs du tunnel et se retrouve decale a
   droite de l'ecran : un ascenseur horizontal apparait des qu'on choisit la
   carte. Il reste dans le DOM, Stripe le lit, mais hors de la page. */

#wc-stripe-hidden-style-input {
	position: absolute !important;
	left: -9999px !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}