/*
 * Tiroir du panier — le temps de l'aller-retour serveur.
 *
 * `block_loading()` du thème ajoute `.loading` au tiroir, ce qui pose un voile blanc à
 * 90 % sur tout le contenu et lance une barre de progression. C'est ce qui donnait
 * l'impression que le panier « recharge » à chaque clic sur + ou −.
 *
 * Les chiffres étant désormais recalculés à l'instant côté navigateur (panier.js), il
 * n'y a plus rien à cacher : on laisse le tiroir visible et lisible pendant que le
 * serveur confirme.
 */
.popup-fly-cart.gb-panier--silencieux.loading > .inner::before {
	opacity: 0;
	visibility: hidden;
}

.popup-fly-cart.gb-panier--silencieux.loading > .inner::after {
	animation: none;
	opacity: 0;
}

/*
 * Au retour des fragments, WooCommerce remplace tout le contenu du tiroir : chaque
 * `<m-image>` est reconstruit. Le thème lance alors son fondu d'apparition —
 *
 *     .glow-bar-lazy-image--deferred img            { opacity: 0 }
 *     .glow-bar-lazy-image--deferred.m-img-loaded img { animation: image-fade-in 0.5s }
 *     @keyframes image-fade-in { 0% { opacity: 0; transform: scale(1.1) } }
 *
 * — qui rejoue une demi-seconde à chaque changement de quantité, alors que la
 * photographie est en cache et n'a pas bougé. C'est ce qui donnait l'impression que
 * l'image se rechargeait. Dans le tiroir, on la laisse simplement en place.
 */
#popup-fly-cart .glow-bar-lazy-image,
#popup-fly-cart .glow-bar-lazy-image img,
#popup-fly-cart .glow-bar-lazy-image--deferred img,
#popup-fly-cart .glow-bar-lazy-image--deferred.m-img-loaded img {
	opacity: 1;
	animation: none;
	transform: none;
}

/*
 * Descendre sous 1 n'a pas de sens : la ligne dispose déjà de « Supprimer ». Le bouton
 * reste visible mais inerte, plutôt que de disparaître et de faire sauter la rangée.
 */
.popup-fly-cart .quantity .decrease.disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Le bouton reste cliquable pendant la synchronisation : rien ne doit bouger. */
.popup-fly-cart .quantity .increase,
.popup-fly-cart .quantity .decrease {
	touch-action: manipulation;
}

/* ================================================================
   Habillage du panier — tiroir et page
   ================================================================
   Les deux surfaces arrivaient telles que le thème les livre : barre de
   progression jaune, bouton « Commander » noir à angles droits, vignettes
   carrées, sélecteur de quantité gris. Rien qui ressemble au reste du site, qui
   est rose, arrondi, et travaille sur des blancs rosés.
   
   On reprend ici les mêmes gestes que la fiche produit : pastilles à
   `border-radius: 999px`, hauteur 54 px pour l'action principale, sélecteur de
   quantité en gélule à boutons ronds, vignettes arrondies sur fond `#fdf9fb`.
   ================================================================ */

/* ------------------------------------------------ jauge « livraison offerte » */

/*
 * Elle arrivait en jaune-orangé, la couleur d'origine du thème : sur une page
 * rose, c'est la seule tache chaude, et l'œil y va avant d'aller au panier.
 */
/*
 * Attention : ce ne sont pas les blocs eux-mêmes qui portent la couleur, mais
 * leurs pseudo-éléments — un `::before` gris pour le rail, un `::before` jaune
 * (#ffbc11) pour le remplissage. Peindre le bloc ne servait à rien : le
 * pseudo-élément repasse par-dessus.
 */
.glow-bar-progress .progress-bar-wrap,
.glow-bar-progress .progress-bar-wrap::before {
	height: 6px;
	border-radius: 999px;
	background: var(--gb-blush, #fff2f8);
}

.glow-bar-progress .progress-bar,
.glow-bar-progress .progress-bar::before {
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gb-pink-soft, #ff7eb6), var(--gb-pink, #e5177b));
}

/* La pastille étoilée chevauche la fin de la barre : elle suit le remplissage. */
.glow-bar-progress .progress-value {
	border-color: var(--gb-pink, #e5177b);
	background: #fff;
	color: var(--gb-pink, #e5177b);
	box-shadow: 0 2px 8px rgba(229, 23, 123, 0.22);
}

/* Le jaune est posé sur le tracé lui-même, pas sur le `<svg>` : il faut viser le `path`. */
.glow-bar-progress .progress-value svg,
.glow-bar-progress .progress-value svg path {
	fill: currentColor;
}

/* ------------------------------------------------------------ pièces communes */

/* Vignettes : arrondies et posées sur le blanc rosé, comme dans les grilles. */
.popup-fly-cart .product-thumbnail img,
.woocommerce-cart-form .col-product-info img {
	border-radius: 12px;
	background: #fdf9fb;
}

/*
 * Le sélecteur de quantité, repris de la fiche produit : une gélule bordée, deux
 * boutons ronds. Le thème le donnait en rectangle gris.
 */
.popup-fly-cart .quantity,
.woocommerce-cart-form .product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 5px;
	border: 1px solid #e7d7e0;
	border-radius: 999px;
	background: #fff;
}

.popup-fly-cart .quantity .qty,
.woocommerce-cart-form .product-quantity .quantity .qty {
	order: 2;
	width: 40px;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--gb-ink, #150911);
}

/*
 * Le thème pose les deux boutons en `position: absolute`, calés sur les bords du
 * champ. Un élément absolu sort du flux : ni `order` ni `flex` ne l'atteignent, et
 * le « − » se retrouvait par-dessus le chiffre. On les remet dans le flux.
 *
 * `relative` et non `static` : le signe lui-même est un `::before` en position
 * absolue, dont le bouton est le bloc conteneur. En passant le bouton à `static`,
 * les deux signes allaient se placer par rapport à la gélule et se superposaient
 * en son centre. `relative` garde le bouton dans le flux tout en lui laissant son
 * rôle de repère.
 */
.popup-fly-cart .quantity .decrease,
.popup-fly-cart .quantity .increase,
.woocommerce-cart-form .product-quantity .quantity .decrease,
.woocommerce-cart-form .product-quantity .quantity .increase {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/*
	 * Le thème masque le « - » et le « + » du balisage avec `font-size: 0` et
	 * dessine le signe en icône (`::before`, Font Awesome). Il laisse toutefois
	 * une interligne de 43 px, prévue pour un bouton plus haut : dans un rond de
	 * 30 px le signe tombait sous le centre. On recentre en flex, interligne 1.
	 */
	line-height: 1;
	background: #fdf9fb;
	color: var(--gb-plum, #6b3d55);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.popup-fly-cart .quantity .decrease::before,
.popup-fly-cart .quantity .increase::before,
.woocommerce-cart-form .product-quantity .quantity .decrease::before,
.woocommerce-cart-form .product-quantity .quantity .increase::before {
	display: block;
	font-size: 11px;
	line-height: 1;
}

.popup-fly-cart .quantity .decrease { order: 1; }
.popup-fly-cart .quantity .increase { order: 3; }
.woocommerce-cart-form .product-quantity .quantity .decrease { order: 1; }
.woocommerce-cart-form .product-quantity .quantity .increase { order: 3; }

.popup-fly-cart .quantity .decrease:hover,
.popup-fly-cart .quantity .increase:hover,
.woocommerce-cart-form .product-quantity .quantity .decrease:hover,
.woocommerce-cart-form .product-quantity .quantity .increase:hover {
	background: var(--gb-blush, #fff2f8);
	color: var(--gb-pink, #e5177b);
}

/* « Supprimer » : discret au repos, rose au survol — jamais rouge. */
.popup-fly-cart a.remove,
.woocommerce-cart-form a.remove {
	color: #a4939c;
	transition: color 0.2s ease;
}

.popup-fly-cart a.remove:hover,
.woocommerce-cart-form a.remove:hover {
	color: var(--gb-pink, #e5177b);
}

/* L'action principale, partout : la pastille rose de la fiche produit. */
.popup-fly-cart .woocommerce-mini-cart__buttons a.checkout,
.woocommerce .cart_totals a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 26px;
	border: 1.5px solid var(--gb-pink, #e5177b);
	border-radius: 999px;
	background: var(--gb-pink, #e5177b);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.popup-fly-cart .woocommerce-mini-cart__buttons a.checkout:hover,
.woocommerce .cart_totals a.checkout-button:hover {
	border-color: var(--gb-pink-deep, #c0135a);
	background: var(--gb-pink-deep, #c0135a);
	color: #fff;
}

/* ------------------------------------------------------------ la page Panier */

/*
 * Le thème empile : tableau pleine largeur, puis encadré des totaux flottant à
 * droite — ce qui laissait la moitié gauche de la page vide sous les articles.
 * Deux colonnes, et les totaux suivent le défilement : c'est la disposition
 * qu'attend un panier, et le bouton « Commander » reste sous les yeux.
 *
 * `.cart-collaterals` est un enfant de `.woocommerce-cart-form`, pas son voisin :
 * c'est donc ce dernier qui porte la grille.
 */
@media (min-width: 992px) {
	.woocommerce-cart-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 366px;
		gap: 56px;
		align-items: start;
	}

	.woocommerce-cart-form > .cart-collaterals {
		position: sticky;
		top: 108px;
		width: auto;
		margin: 0;
		float: none;
	}
}

/* L'en-tête du tableau, en petites capitales prune plutôt qu'en gras noir. */
.woocommerce-cart-form .shop_table thead th {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--gb-blush-line, #f8d3e5);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap; /* « Sous-total » passait à la ligne dans sa colonne. */
	color: var(--gb-plum, #6b3d55);
}

/*
 * Largeurs de colonnes : le libellé du produit prend la place qui reste, les
 * trois colonnes chiffrées sont dimensionnées pour leur contenu.
 */
.woocommerce-cart-form .shop_table .product-price,
.woocommerce-cart-form .shop_table .product-subtotal {
	width: 130px;
	text-align: right;
}

.woocommerce-cart-form .shop_table .product-quantity {
	width: 150px;
}

/* Des lignes aérées, séparées d'un filet rosé et non d'un gris franc. */
.woocommerce-cart-form .shop_table tr.woocommerce-cart-form__cart-item td {
	padding-top: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #f4ecf0;
	vertical-align: middle;
}

.woocommerce-cart-form .col-product-info .product-name a {
	font-size: 15.5px;
	font-weight: 600;
	color: var(--gb-ink, #150911);
}

.woocommerce-cart-form .col-product-info .product-name a:hover {
	color: var(--gb-pink, #e5177b);
}

.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
	font-size: 15px;
	color: var(--gb-ink, #150911);
}

.woocommerce-cart-form .product-subtotal {
	font-weight: 600;
}

/* L'encadré des totaux : une carte, pas un cadre à angles droits. */
.woocommerce .cart_totals {
	padding: 26px 24px 24px;
	border: 1px solid var(--gb-blush-line, #f8d3e5);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 28px rgba(21, 9, 17, 0.05);
}

.woocommerce .cart_totals .cart-totals-table th,
.woocommerce .cart_totals .cart-totals-table td {
	padding: 10px 0;
	border: 0;
}

.woocommerce .cart_totals .cart-totals-label {
	font-weight: 400;
	color: var(--gb-plum, #6b3d55);
}

/*
 * Le filet se pose sur la rangée, pas sur ses deux cellules : sous 992 px le
 * tableau passe en blocs et la rangée en `flex`, si bien qu'un filet par cellule
 * se lisait comme deux traits séparés par un vide.
 */
.woocommerce .cart_totals .order-total {
	border-top: 1px solid var(--gb-blush-line, #f8d3e5);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	padding-top: 16px;
	border-top: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--gb-ink, #150911);
}

/* --------------------------------------------------------------- le tiroir */

.popup-fly-cart .fly-cart-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--gb-ink, #150911);
}

.popup-fly-cart .product-name a {
	font-size: 15px;
	font-weight: 600;
	color: var(--gb-ink, #150911);
}

.popup-fly-cart .product-name a:hover {
	color: var(--gb-pink, #e5177b);
}

/*
 * Le pied du tiroir se détache sur un blanc rosé : il porte le total et
 * l'action, et doit se lire comme un bloc à part du défilement des articles.
 */
.popup-fly-cart .fly-cart-footer {
	border-top: 1px solid var(--gb-blush-line, #f8d3e5);
	background: var(--gb-blush, #fff2f8);
}

.popup-fly-cart .cart-footer-actions {
	border-bottom: 1px solid var(--gb-blush-line, #f8d3e5);
}

.popup-fly-cart .cart-footer-actions .tm-button,
.popup-fly-cart .cart-footer-actions a {
	color: var(--gb-plum, #6b3d55);
	transition: color 0.2s ease;
}

.popup-fly-cart .cart-footer-actions .tm-button:hover,
.popup-fly-cart .cart-footer-actions a:hover {
	color: var(--gb-pink, #e5177b);
}

.popup-fly-cart .cart-totals-label {
	color: var(--gb-plum, #6b3d55);
}

.popup-fly-cart .order-total .cart-totals-label,
.popup-fly-cart .order-total .cart-totals-value {
	font-weight: 700;
	color: var(--gb-ink, #150911);
}

/* « Voir le panier » : un lien souligné, pas un second bouton concurrent. */
.popup-fly-cart a.view-cart .button-text {
	font-weight: 600;
	color: var(--gb-ink, #150911);
}

.popup-fly-cart a.view-cart:hover .button-text {
	color: var(--gb-pink, #e5177b);
}