/* ==========================================================================
   Panier et tunnel de commande

   Les deux pages sortaient telles que WooCommerce les livre : un tableau de
   données pour le panier, une colonne de champs sans regroupement pour la
   commande. Fonctionnel, et daté au moment précis où le visiteur sort sa carte.

   Trois principes.

   1. Aucun modèle PHP de WooCommerce n'est surchargé. Un modèle copié se fige à
      la version du jour et casse en silence à chaque mise à jour. Tout est
      obtenu ici, sur les classes que WooCommerce garantit.

   2. Les couleurs viennent du LOGO officiel, relevées dans son SVG : vert
      #397441, vert profond #04251E, or #D19334. Le thème enfant habille déjà la
      page « Mon compte » en #4f7345 et #c9a962, à quelques pour cent de là :
      l'écart ne se voit pas, et le logo fait foi.

   3. Le `reset.css` du thème stylise TOUS les boutons en rose #cc3366 avec un
      sélecteur d'attribut, de même poids qu'une classe. Chaque règle de bouton
      est donc préfixée par `.gg-boutique`, ce qui nous sort du match nul quel
      que soit l'ordre de chargement.
   ========================================================================== */

.gg-boutique {
	--b-vert: #397441;
	--b-vert-fonce: #2c5a33;
	--b-vert-profond: #04251e;
	--b-or: #d19334;
	--b-or-fonce: #a8741f;

	--b-encre: #1d2a22;
	--b-texte: #4a544c;
	--b-gris: #6d766f;
	/*
	 * Gris à peine teinté de vert : un gris pur à côté du vert de marque paraît
	 * sale.
	 *
	 * Il valait #7c8a7e, avec un commentaire annonçant 4,6:1 sur blanc. Le calcul
	 * était faux : 3,62:1, donc SOUS le seuil AA de 4,5:1. Et cette variable ne
	 * sert pas qu'à des filets, elle porte du vrai texte : les intitulés des
	 * caractéristiques du gant, les en-têtes du récapitulatif, les titres de
	 * section et le libellé du bouton désactivé.
	 *
	 * #66756a donne 4,86:1 sur blanc et 4,63:1 sur `--b-fond`, les deux fonds sur
	 * lesquels il se pose. La nuance reste discrète.
	 */
	--b-gris-clair: #66756a;

	--b-fond: #f7f8f6;
	--b-carte: #ffffff;
	--b-filet: #e4e8e3;
	--b-filet-fort: #cfd6cd;
	--b-vert-pale: #eef4ee;
	--b-or-pale: #fdf6e8;

	--b-rayon: 14px;
	--b-rayon-petit: 9px;
	--b-ombre: 0 1px 2px rgba(20, 40, 28, 0.04), 0 10px 30px rgba(20, 40, 28, 0.06);
}

/* Le thème plafonne son contenu à 800 px sous 1 200 px de fenêtre : un tunnel
   à deux colonnes y serait étranglé. On élargit, sur ces deux pages seulement.

   La marge du bas manquait complètement : mesuré, le bloc de contenu s'arrêtait
   exactement là où commence le pied de page vert, et le bouton « Valider la
   commande » s'y trouvait collé. Le thème ne prévoit rien parce que ses pages
   ordinaires finissent par du texte, qui a ses propres marges ; une carte, non. */
.gg-boutique .site-main {
	max-width: 1180px;
	padding-block-end: clamp(36px, 5vw, 72px);
}

.gg-boutique .woocommerce {
	color: var(--b-texte);
	font-size: 15.5px;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Titres et messages
   -------------------------------------------------------------------------- */

.gg-boutique .entry-title,
.gg-boutique .woocommerce h1,
.gg-boutique .woocommerce h2,
.gg-boutique .woocommerce h3 {
	color: var(--b-encre);
	letter-spacing: -0.01em;
}

.gg-boutique .woocommerce h3 {
	font-size: 17px;
	margin: 0 0 14px;
}

/* Le message d'erreur du paiement doit pouvoir être lu.

   Elementor pose `html { scroll-behavior: smooth }` sur tout le site. Quand la
   banque refuse la carte, WooCommerce écrit son avis en haut du formulaire de
   commande, puis appelle `$( 'html, body' ).animate({ scrollTop })` pour
   l'amener à l'écran. Les deux ensemble s'annulent : l'animation jQuery ne
   déplace rien quand le navigateur a reçu l'ordre de défiler en douceur.

   Mesuré sur la préproduction avec la carte de test 4000 0000 0000 0002 :
   l'avis est écrit à 1910 px du haut, la fenêtre reste à 866 px, rien ne
   bouge. Le client ne voit que ses champs se recolorer, sans savoir pourquoi sa
   commande n'aboutit pas.

   Cette feuille n'est chargée que sur le panier et la commande : le défilement
   en douceur n'est retiré que là. Elle est imprimée après celle d'Elementor,
   la règle passe donc devant à spécificité égale, sans `!important`.

   Ce que cet équilibre suppose, et qu'il faut revérifier si l'ordre change un
   jour (optimisation CSS de l'hébergeur, feuille de kit Elementor réimprimée
   plus tard) : la règle redeviendrait inerte SANS RIEN CASSER D'AUTRE, donc en
   silence. La vérification tient en un test : payer avec la carte de refus
   4000 0000 0000 0002 et regarder si la page remonte jusqu'à l'avis. */
html {
	scroll-behavior: auto;
}

/* Les avis de WooCommerce : bandeau brut par défaut, avec une bordure épaisse
   sur le dessus. Ils deviennent des cartes, et l'erreur se distingue enfin du
   succès autrement que par une nuance. */
.gg-boutique .woocommerce-message,
.gg-boutique .woocommerce-info,
.gg-boutique .woocommerce-error,
.gg-boutique .woocommerce-notices-wrapper > ul {
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid var(--b-filet);
	border-left: 3px solid var(--b-vert);
	border-radius: var(--b-rayon-petit);
	background: var(--b-carte);
	box-shadow: none;
	list-style: none;
	font-size: 15px;
}

.gg-boutique .woocommerce-message::before,
.gg-boutique .woocommerce-info::before,
.gg-boutique .woocommerce-error::before {
	display: none;
}

.gg-boutique .woocommerce-error {
	border-left-color: #b4432f;
	background: #fdf3f1;
	color: #8f3323;
}

/* --------------------------------------------------------------------------
   Boutons

   Tous préfixés par `.gg-boutique` pour battre le rose du reset du thème.
   -------------------------------------------------------------------------- */

.gg-boutique .woocommerce a.button,
.gg-boutique .woocommerce button.button,
.gg-boutique .woocommerce input.button,
.gg-boutique .woocommerce a.button.alt,
.gg-boutique .woocommerce button.button.alt,
.gg-boutique .woocommerce input.button.alt,
.gg-boutique .woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--b-rayon-petit);
	background: var(--b-vert);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.16s ease, transform 0.06s ease;
}

.gg-boutique .woocommerce a.button:hover,
.gg-boutique .woocommerce button.button:hover,
.gg-boutique .woocommerce input.button:hover,
.gg-boutique .woocommerce a.button.alt:hover,
.gg-boutique .woocommerce button.button.alt:hover,
.gg-boutique .woocommerce input.button.alt:hover,
.gg-boutique .woocommerce #place_order:hover {
	background: var(--b-vert-fonce);
	color: #fff;
}

.gg-boutique .woocommerce .button:active,
.gg-boutique .woocommerce #place_order:active {
	transform: translateY(1px);
}

.gg-boutique .woocommerce .button:focus-visible,
.gg-boutique .woocommerce #place_order:focus-visible {
	outline: 2px solid var(--b-vert-profond);
	outline-offset: 2px;
}

/* « Mettre à jour le panier » naît désactivé : WooCommerce ne l'active qu'une
   fois une quantité modifiée. Rendu translucide, il paraissait cassé plutôt
   qu'en attente.

   `!important` sur l'opacité, et seulement là : une feuille chargée après la
   nôtre impose 0,5, vérifié dans le style calculé, et l'emporte donc à
   spécificité utile égale. Le reste de l'état désactivé se dit sans forcer. */
.gg-boutique .woocommerce .button:disabled,
.gg-boutique .woocommerce .button[disabled] {
	opacity: 1 !important;
	background: transparent;
	border-color: var(--b-filet);
	color: var(--b-gris-clair);
	cursor: not-allowed;
}

.gg-boutique .woocommerce .button:disabled:hover,
.gg-boutique .woocommerce .button[disabled]:hover {
	background: transparent;
	border-color: var(--b-filet);
	color: var(--b-gris-clair);
}

/* Bouton secondaire : « Mettre à jour le panier » et « Appliquer le code
   promo » ne doivent pas rivaliser avec la validation de commande. */
.gg-boutique .woocommerce button[name="update_cart"],
.gg-boutique .woocommerce button[name="apply_coupon"],
.gg-boutique .woocommerce input[name="apply_coupon"] {
	background: var(--b-carte);
	border-color: var(--b-filet-fort);
	color: var(--b-encre);
	font-weight: 500;
}

.gg-boutique .woocommerce button[name="update_cart"]:hover,
.gg-boutique .woocommerce button[name="apply_coupon"]:hover {
	background: var(--b-vert-pale);
	border-color: var(--b-vert);
	color: var(--b-vert-profond);
}

/* --------------------------------------------------------------------------
   Champs de saisie
   -------------------------------------------------------------------------- */

.gg-boutique .woocommerce input[type="text"],
.gg-boutique .woocommerce input[type="email"],
.gg-boutique .woocommerce input[type="tel"],
.gg-boutique .woocommerce input[type="number"],
.gg-boutique .woocommerce input[type="password"],
.gg-boutique .woocommerce textarea,
.gg-boutique .woocommerce select,
.gg-boutique .woocommerce .select2-selection {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--b-filet-fort);
	border-radius: var(--b-rayon-petit);
	background: var(--b-carte);
	color: var(--b-encre);
	font-family: inherit;
	/* 16 px au minimum : en dessous, iOS zoome sur le champ à la première frappe
	   et le tunnel saute sous les doigts du visiteur. */
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gg-boutique .woocommerce textarea {
	min-height: 96px;
	resize: vertical;
}

/* Le champ « Notes de commande » ressortait seul avec un filet sombre
   rgba(32, 7, 7, 0.8), un rayon de 4 px et 8 px de marge intérieure, quand tous
   les autres champs prenaient bien les nôtres : mesuré côte à côte sur la page
   servie. Une feuille servie depuis un domaine tiers, donc illisible depuis la
   page, le vise plus précisément que nous.

   Ce sélecteur porte l'identifiant du champ : il l'emporte sur n'importe quel
   empilement de classes, sans avoir à écrire `!important`. Vérifié en
   l'injectant dans la page avant de l'écrire ici. */
.gg-boutique .woocommerce textarea#order_comments {
	padding: 12px 14px;
	border: 1px solid var(--b-filet-fort);
	border-radius: var(--b-rayon-petit);
}

.gg-boutique .woocommerce input:focus,
.gg-boutique .woocommerce textarea:focus,
.gg-boutique .woocommerce select:focus {
	outline: none;
	border-color: var(--b-vert);
	box-shadow: 0 0 0 3px rgba(57, 116, 65, 0.14);
}

.gg-boutique .woocommerce label {
	display: block;
	margin-bottom: 5px;
	color: var(--b-gris);
	font-size: 13.5px;
	font-weight: 500;
}

.gg-boutique .woocommerce .required {
	color: #b4432f;
	text-decoration: none;
}

/* Champ en erreur : WooCommerce ne pose qu'une classe, sans style visible dans
   ce thème. Le visiteur cherchait donc lui-même quel champ posait problème. */
.gg-boutique .woocommerce .woocommerce-invalid input,
.gg-boutique .woocommerce .woocommerce-invalid select,
.gg-boutique .woocommerce .woocommerce-invalid .select2-selection {
	border-color: #b4432f;
	box-shadow: 0 0 0 3px rgba(180, 67, 47, 0.12);
}

.gg-boutique .woocommerce .woocommerce-validated input {
	border-color: var(--b-vert);
}

/* Select2, que WooCommerce impose pour le pays : il arrive avec ses propres
   hauteurs, qui ne tombent jamais d'accord avec celles des autres champs. */
.gg-boutique .woocommerce .select2-container--default .select2-selection--single {
	height: 48px;
	display: flex;
	align-items: center;
}

.gg-boutique .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--b-encre);
	line-height: 1.4;
}

.gg-boutique .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

/* --------------------------------------------------------------------------
   PANIER

   Le tableau devient une liste de cartes. Sur téléphone, un tableau de quatre
   colonnes ne tient pas : WooCommerce le laisse déborder ou l'écrase.
   -------------------------------------------------------------------------- */

.gg-boutique .woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 22px;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 10px;
	border-radius: 0;
	font-size: 15px;
}

.gg-boutique .woocommerce table.shop_table thead th {
	padding: 0 16px 6px;
	border: 0;
	background: transparent;
	color: var(--b-gris-clair);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.gg-boutique .woocommerce table.cart tbody tr.woocommerce-cart-form__cart-item {
	background: var(--b-carte);
	box-shadow: var(--b-ombre);
	border-radius: var(--b-rayon);
}

.gg-boutique .woocommerce table.cart tbody td {
	/* La marge intérieure est portée par la carte, plus par chaque cellule. */
	padding: 0;
	border: 0;
	/* Le thème peint `rgba(128, 128, 128, 0.07)` sur toute cellule de tableau,
	   relevé dans le style calculé. Sur une carte blanche, ça dessinait un
	   rectangle gris derrière le nom et derrière la quantité. */
	background: transparent;
}

.gg-boutique .woocommerce table.cart td.product-thumbnail img {
	width: 84px;
	height: 84px;
	max-width: none;
	object-fit: cover;
	border-radius: var(--b-rayon-petit);
	display: block;
}

/* WooCommerce n'entoure le nom d'un lien que si la fiche produit est visible.
   Nos gants sont vendus depuis le configurateur et masqués du catalogue : le
   nom sort donc en texte nu, et une règle qui ne visait que le `a` le laissait
   à la couleur de corps de texte. La cellule porte le style, le lien hérite. */
.gg-boutique .woocommerce table.cart td.product-name {
	color: var(--b-encre);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.gg-boutique .woocommerce table.cart td.product-name a {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.gg-boutique .woocommerce table.cart td.product-name a:hover {
	color: var(--b-vert);
}

/* Les caractéristiques du gant : taille, doublure, matière, pointure, papier
   cadeau. WooCommerce les sort en liste de définitions serrée et illisible. */
.gg-boutique .woocommerce table.cart td.product-name dl.variation {
	font-weight: 400;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1px 8px;
	margin: 8px 0 0;
	font-size: 13.5px;
}

.gg-boutique .woocommerce table.cart td.product-name dl.variation dt {
	margin: 0;
	color: var(--b-gris-clair);
	font-weight: 500;
}

.gg-boutique .woocommerce table.cart td.product-name dl.variation dd {
	margin: 0;
	color: var(--b-texte);
}

.gg-boutique .woocommerce table.cart td.product-name dl.variation dd p {
	margin: 0;
}

.gg-boutique .woocommerce table.cart td.product-price,
.gg-boutique .woocommerce table.cart td.product-subtotal {
	color: var(--b-encre);
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gg-boutique .woocommerce table.cart td.product-quantity .quantity input.qty {
	width: 74px;
	min-height: 44px;
	text-align: center;
	font-size: 15px;
}


/* --------------------------------------------------------------------------
   La ligne d'article, une carte à toutes les largeurs

   Première tentative : garder les six colonnes du tableau et leur donner une
   largeur. Deux raisons de l'abandonner.

   1. Ça ne marche pas. Sur un tableau en `table-layout: auto`, une largeur
      posée sur une cellule n'est qu'une préférence : le navigateur redistribue
      le reste comme il l'entend. Mesuré sur la préproduction, la colonne de
      suppression prenait 527 px, puis encore 228 px après correction, pendant
      que le nom du produit était tassé sur 146 px.

   2. Même en marchant, ce serait le mauvais rendu : la colonne de gauche fait
      677 px de large, mesurés, et six colonnes dont un nom de gant, cinq
      caractéristiques et un sélecteur de quantité n'y tiendront jamais.

   D'où une seule mise en page, du téléphone au grand écran : une carte par
   article, comme sur les boutiques d'aujourd'hui. Le tableau n'est plus utilisé
   comme tableau, mais son balisage reste celui de WooCommerce : aucun modèle
   PHP n'est surchargé, et la page tient encore debout sans notre feuille.
   -------------------------------------------------------------------------- */

.gg-boutique .woocommerce table.cart {
	display: block;
	border-spacing: 0;
}

.gg-boutique .woocommerce table.cart thead {
	display: none;
}

.gg-boutique .woocommerce table.cart tbody {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gg-boutique .woocommerce table.cart tbody tr.woocommerce-cart-form__cart-item {
	display: grid;
	/* Ligne 1 : la photo, le nom et ses caractéristiques, la croix.
	   Ligne 2 : la quantité, le prix unitaire, le total de la ligne. */
	grid-template-columns: 84px minmax(0, 1fr) auto auto;
	grid-template-areas:
		"photo nom nom  retirer"
		"photo qte prix total";
	gap: 14px 16px;
	align-items: center;
	padding: 16px;
}

/* La barre d'actions est une ligne de tableau elle aussi : sans cette règle,
   un `display: table-row` se retrouve enfant d'un conteneur flexible. */
.gg-boutique .woocommerce table.cart tbody tr:not(.woocommerce-cart-form__cart-item) {
	display: block;
}

.gg-boutique .woocommerce table.cart td.product-remove { grid-area: retirer; justify-self: end; align-self: start; }
.gg-boutique .woocommerce table.cart td.product-thumbnail { grid-area: photo; align-self: start; }
.gg-boutique .woocommerce table.cart td.product-name { grid-area: nom; align-self: start; }
.gg-boutique .woocommerce table.cart td.product-quantity { grid-area: qte; }
.gg-boutique .woocommerce table.cart td.product-price { grid-area: prix; justify-self: end; }
.gg-boutique .woocommerce table.cart td.product-subtotal { grid-area: total; justify-self: end; }

/* Prix unitaire et total de ligne portent le même nombre quand la quantité
   vaut 1 : les distinguer évite de faire douter le visiteur. */
.gg-boutique .woocommerce table.cart td.product-price {
	color: var(--b-gris);
	font-size: 14px;
	font-weight: 500;
}

.gg-boutique .woocommerce table.cart td.product-price::after {
	content: " l'unité";
	font-size: 13px;
}

.gg-boutique .woocommerce table.cart td.product-subtotal {
	position: relative;
	font-size: 17px;
}

/*
 * Un intitulé pour le total de la ligne, lu mais pas vu.
 *
 * La carte porte deux montants côte à côte. Le prix unitaire se désigne
 * lui-même, grâce au « l'unité » ajouté ci-dessus ; le total, lui, n'avait plus
 * rien : l'en-tête du tableau est masqué, et la mise en grille a fait tomber les
 * associations entre en-tête et cellule. En lecture linéaire, on entendait deux
 * montants sans savoir lequel était lequel.
 *
 * Le libellé reste invisible à l'œil : à côté d'un chiffre en 17 px, il ferait
 * doublon avec la colonne « Total » du récapitulatif juste à droite.
 */
.gg-boutique .woocommerce table.cart td.product-subtotal::before {
	content: "Total de la ligne : ";
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sous 620 px, trois valeurs sur la même ligne ne tiennent plus. */
@media (max-width: 620px) {
	.gg-boutique .woocommerce table.cart tbody tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"photo nom  retirer"
			"photo prix prix"
			"qte   qte  total";
		gap: 12px 14px;
	}

	.gg-boutique .woocommerce table.cart td.product-price {
		justify-self: start;
	}

	/* La colonne de la photo tombe à 72 px sur cette plage, alors que l'image
	   était figée à 84 px : mesuré au contrôle final, elle débordait de 12 px et
	   il ne restait que 2 px entre elle et le nom du produit. Elle suit
	   maintenant sa colonne. */
	.gg-boutique .woocommerce table.cart td.product-thumbnail img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* La croix de suppression : 14 px de police et aucune zone de clic. Elle devient
   un bouton rond de 36 px, discret jusqu'au survol. */
.gg-boutique .woocommerce table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	color: var(--b-gris-clair) !important;
	font-size: 22px;
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gg-boutique .woocommerce table.cart td.product-remove a.remove:hover {
	background: #fdf1ee;
	color: #b4432f !important;
}

/*
 * La zone cliquable dépasse le dessin.
 *
 * Le rond fait 36 px, ce qui satisfait le seuil AA des WCAG (24 px) mais pas
 * les 44 px recommandés au doigt. Le grossir à 44 px alourdirait la carte pour
 * une action qu'on ne veut surtout pas rendre proéminente : c'est la seule du
 * panier qui détruit quelque chose.
 *
 * Le pseudo-élément étend donc la cible à 44 px sans rien changer à ce qui se
 * voit. Le `position: relative` est déjà porté par le lien, qui est en
 * `inline-flex`.
 */
.gg-boutique .woocommerce table.cart td.product-remove a.remove {
	position: relative;
}

.gg-boutique .woocommerce table.cart td.product-remove a.remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* Le code promo, replié à gauche de la barre d'actions. Il attirait l'œil plus
   que la validation de commande, alors qu'il ne sert qu'à une minorité. */
.gg-boutique .woocommerce table.cart td.actions {
	padding: 18px 0 0;
	background: transparent;
	box-shadow: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.gg-boutique .woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.gg-boutique .woocommerce table.cart td.actions .coupon label {
	display: none;
}

.gg-boutique .woocommerce table.cart td.actions .coupon input#coupon_code {
	width: 190px;
	min-height: 44px;
}

/* « Modifier l'adresse » sortait en rose #cc3366, la couleur que le `reset.css`
   du thème donne à tous les liens. C'est un lien discret, pas une action. */
.gg-boutique .woocommerce .shipping-calculator-button {
	display: inline-block;
	margin-top: 4px;
	color: var(--b-vert);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gg-boutique .woocommerce .shipping-calculator-button:hover {
	color: var(--b-vert-profond);
}

/* WooCommerce accroche un chevron à ce lien via `::after` et sa propre police
   d'icônes. Relevé sur la page servie : `font-family: WooCommerce` avec un
   caractère de la zone à usage privé. La police n'étant pas chargée ici, le
   navigateur affichait un glyphe de secours, un petit rectangle vert
   incompréhensible juste après « Modifier l'adresse ». On le remplace par un
   chevron dessiné en bordures, qui ne dépend d'aucune police. */
.gg-boutique .woocommerce .shipping-calculator-button::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-inline-start: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	font-family: inherit;
}

/* Les totaux : la carte qui porte la décision. */
.gg-boutique .woocommerce .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

.gg-boutique .woocommerce .cart_totals > h2 {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--b-gris-clair);
}

.gg-boutique .woocommerce .cart_totals table.shop_table {
	border-spacing: 0;
	background: var(--b-carte);
	border: 1px solid var(--b-filet);
	border-radius: var(--b-rayon);
	box-shadow: var(--b-ombre);
	overflow: hidden;
	margin-bottom: 16px;
}

.gg-boutique .woocommerce .cart_totals table.shop_table th,
.gg-boutique .woocommerce .cart_totals table.shop_table td {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--b-filet);
	background: transparent;
	font-size: 15px;
	vertical-align: top;
}

.gg-boutique .woocommerce .cart_totals table.shop_table th {
	color: var(--b-gris);
	font-weight: 500;
	width: 45%;
}

.gg-boutique .woocommerce .cart_totals table.shop_table td {
	text-align: right;
	color: var(--b-encre);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Des lignes en flex plutôt qu'un tableau, pour que l'expédition puisse
   occuper toute la largeur de la carte (plus bas) : une cellule de tableau ne
   le sait pas sans `colspan`, que le gabarit de WooCommerce ne pose pas. Les
   deux cellules d'une ligne gardent la même hauteur, leurs filets restent
   alignés.

   Le `th` est affiché à toutes les largeurs : sous 768 px, la feuille
   responsive de WooCommerce le masque (`tbody th`), et le libellé de secours
   qu'elle injecte en `::before` est retiré plus bas. Mesuré le 01/10/2026 à
   375 px : « Sous-total », « Expédition » et « Total » avaient disparu, il ne
   restait que les montants. */
.gg-boutique .woocommerce .cart_totals table.shop_table,
.gg-boutique .woocommerce .cart_totals table.shop_table tbody {
	display: block;
}

.gg-boutique .woocommerce .cart_totals table.shop_table tr {
	display: flex;
}

.gg-boutique .woocommerce .cart_totals table.shop_table th {
	display: block;
}

.gg-boutique .woocommerce .cart_totals table.shop_table td {
	flex: 1 1 0;
	min-width: 0;
}

.gg-boutique .woocommerce .cart_totals tr.order-total th,
.gg-boutique .woocommerce .cart_totals tr.order-total td {
	border-bottom: 0;
	background: var(--b-vert-pale);
	font-size: 17px;
	color: var(--b-vert-profond);
}

.gg-boutique .woocommerce .cart_totals tr.order-total td {
	font-size: 21px;
	font-weight: 700;
}

/* L'expédition passe sous son libellé, sur toute la largeur de la carte. À
   côté, les choix n'avaient que la moitié de la carte au panier, et moins
   encore dans la commande, où leur colonne est celle des prix : « Livraison
   offerte » y tenait sur deux lignes (relevé en production le 01/10/2026). */
.gg-boutique .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
	flex-wrap: wrap;
}

.gg-boutique .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
	flex: 0 0 100%;
	width: 100%;
	padding-bottom: 0;
	border-bottom: 0;
}

.gg-boutique .woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	flex: 0 0 100%;
	padding-top: 10px;
	text-align: left;
}

/* Sous les choix, au panier : « Les options de livraison seront mises à jour
   lors de la commande » et le lien de calcul. La cellule les alignait à
   droite, en gras, sur trois lignes. Le `text-align` est posé ici et non sur
   la cellule, que la feuille responsive de WooCommerce aligne à droite en
   `!important` sous 768 px. */
.gg-boutique .woocommerce .woocommerce-shipping-destination {
	margin: 10px 0 0;
	color: var(--b-gris-clair);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
}

.gg-boutique .woocommerce form.woocommerce-shipping-calculator {
	text-align: left;
}

/* Les modes de livraison : des libellés collés à des ronds minuscules. */
.gg-boutique .woocommerce .cart_totals #shipping_method,
.gg-boutique .woocommerce .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}

.gg-boutique .woocommerce #shipping_method li,
.gg-boutique .woocommerce .woocommerce-shipping-methods li {
	margin: 0;
	padding: 0;
}

/* Dans le panier, l'input et son label sont FRÈRES et non imbriqués : mesuré
   dans le DOM servi. C'est donc le `li` qui porte la boîte, sinon le rond se
   retrouve au-dessus du libellé au lieu d'être devant lui. */
.gg-boutique .woocommerce #shipping_method li,
.gg-boutique .woocommerce .woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 0 14px;
	border: 1px solid var(--b-filet-fort);
	border-radius: var(--b-rayon-petit);
	background: var(--b-carte);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Le survol ne prend que la bordure : avec le fond en plus, une carte survolée
   ressemblait à la carte retenue. */
.gg-boutique .woocommerce #shipping_method li:hover,
.gg-boutique .woocommerce .woocommerce-shipping-methods li:hover {
	border-color: var(--b-vert);
}

/* Le choix retenu se voit sans chercher le rond. Un mode seul arrive en champ
   caché, sans bouton radio : il est retenu d'office, et s'affiche comme tel.
   Sans `:has()` (navigateurs d'avant 2024), la carte reste neutre. */
.gg-boutique .woocommerce #shipping_method li:has(input:checked),
.gg-boutique .woocommerce #shipping_method li:has(input[type="hidden"]),
.gg-boutique .woocommerce .woocommerce-shipping-methods li:has(input:checked),
.gg-boutique .woocommerce .woocommerce-shipping-methods li:has(input[type="hidden"]) {
	border-color: var(--b-vert);
	background: var(--b-vert-pale);
	box-shadow: inset 0 0 0 1px var(--b-vert);
}

/* La marge intérieure est sur le libellé, pas sur la carte : le libellé couvre
   toute la carte à droite du rond, et un clic n'importe où y choisit le mode,
   plus seulement sur le texte. */
.gg-boutique .woocommerce #shipping_method li label,
.gg-boutique .woocommerce .woocommerce-shipping-methods li label {
	margin: 0;
	padding: 12px 14px 12px 0;
	color: var(--b-encre);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	flex: 1 1 auto;
}

.gg-boutique .woocommerce #shipping_method li:has(input:checked) label,
.gg-boutique .woocommerce #shipping_method li:has(input[type="hidden"]) label,
.gg-boutique .woocommerce .woocommerce-shipping-methods li:has(input:checked) label,
.gg-boutique .woocommerce .woocommerce-shipping-methods li:has(input[type="hidden"]) label {
	color: var(--b-vert-profond);
	font-weight: 600;
}

/* Un picto devant chaque mode : un camion pour un envoi, une boutique pour le
   retrait. Demandé le 01/10/2026. Même grille de 24 et même trait de 1,5 que
   le cadenas du paiement, en masque et non en image : la couleur suit l'état,
   grise au repos, verte sur le mode retenu.

   Le type se lit sur la valeur du bouton (`local_pickup:1`), que WooCommerce
   compose avec l'identifiant de la méthode : le libellé, lui, se renomme dans
   les réglages. Tout ce qui n'est pas un retrait prend le camion, transporteurs
   ajoutés plus tard compris. `pickup_location` est le retrait des tunnels en
   blocs, couvert d'avance. Le libellé suit son bouton (`input + label`) dans
   le panier comme dans la commande, et aussi quand le mode est seul et que le
   bouton est un champ caché.

   Le picto fait 20 px, la taille du rond (18 px) à l'œil près, suivi de 9 px.
   Ces 29 px sont un retrait suspendu du libellé : un libellé qui passe à la
   ligne (« Livraison à domicile: 15,00 € » sur un petit téléphone) repart sous
   le texte, pas sous le picto. */
.gg-boutique .woocommerce #shipping_method li input + label,
.gg-boutique .woocommerce .woocommerce-shipping-methods li input + label {
	padding-inline-start: 29px;
	text-indent: -29px;
	--gg-picto-livraison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 17h-1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H13a1 1 0 0 1 1 1v10M8.5 17h6.5M14 9.5h3.6a1 1 0 0 1 .8.4l2.4 3.2a1 1 0 0 1 .2.6V16a1 1 0 0 1-1 1h-1'/%3E%3Ccircle cx='6.5' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
}

.gg-boutique .woocommerce #shipping_method li input[value^="local_pickup"] + label,
.gg-boutique .woocommerce #shipping_method li input[value^="pickup_location"] + label,
.gg-boutique .woocommerce .woocommerce-shipping-methods li input[value^="local_pickup"] + label,
.gg-boutique .woocommerce .woocommerce-shipping-methods li input[value^="pickup_location"] + label {
	--gg-picto-livraison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 4.5 4h15L21 9.5M3 9.5a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0M9 9.5 10 4M15 9.5 14 4M4.5 12.1V20h15v-7.9M10 20v-4.5h4V20'/%3E%3C/svg%3E");
}

/* `-webkit-mask` pour Safari avant 15.4 et Chrome avant 120, qui ne
   connaissent pas `mask` sans préfixe. Le `vertical-align` pose le picto sur
   la ligne du texte (14,5 px, interligne 1,35), mesuré en page. */
.gg-boutique .woocommerce #shipping_method li input + label::before,
.gg-boutique .woocommerce .woocommerce-shipping-methods li input + label::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-inline-end: 9px;
	vertical-align: -5px;
	text-indent: 0;
	background-color: var(--b-gris);
	-webkit-mask: var(--gg-picto-livraison) center / contain no-repeat;
	mask: var(--gg-picto-livraison) center / contain no-repeat;
}

.gg-boutique .woocommerce #shipping_method li input:checked + label::before,
.gg-boutique .woocommerce #shipping_method li input[type="hidden"] + label::before,
.gg-boutique .woocommerce .woocommerce-shipping-methods li input:checked + label::before,
.gg-boutique .woocommerce .woocommerce-shipping-methods li input[type="hidden"] + label::before {
	background-color: var(--b-vert);
}

/* En contraste forcé, Windows ramène tout fond à la couleur du système : le
   masque, peint de la couleur de son fond, disparaissait. Une couleur système
   posée par la feuille survit au forçage. */
@media (forced-colors: active) {
	.gg-boutique .woocommerce #shipping_method li input + label::before,
	.gg-boutique .woocommerce .woocommerce-shipping-methods li input + label::before {
		background-color: CanvasText;
	}
}

.gg-boutique .woocommerce #shipping_method li input[type="radio"],
.gg-boutique .woocommerce .woocommerce-shipping-methods li input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	accent-color: var(--b-vert);
	flex: 0 0 auto;
}

.gg-boutique .woocommerce .wc-proceed-to-checkout {
	padding: 0;
}

.gg-boutique .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	min-height: 54px;
	font-size: 16.5px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   COMMANDE
   -------------------------------------------------------------------------- */

.gg-boutique .woocommerce form.checkout {
	display: block;
}

.gg-boutique .woocommerce #customer_details,
.gg-boutique .woocommerce .woocommerce-checkout-review-order {
	box-sizing: border-box;
}

/* Les deux colonnes de WooCommerce à l'intérieur des coordonnées : elles
   flottent, ce qui casse dès qu'un champ grandit. */
.gg-boutique .woocommerce #customer_details .col2-set,
.gg-boutique .woocommerce .col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	width: 100%;
}

.gg-boutique .woocommerce #customer_details .col-1,
.gg-boutique .woocommerce #customer_details .col-2 {
	float: none;
	width: 100%;
	padding: 0;
}

/* Le filet souligne le titre d'une section DANS une carte. Deux `h3` n'en
   sont pas : « Votre commande » titre une colonne et flottait au-dessus du
   vide, et « Expédier à une adresse différente ? » est en réalité une case à
   cocher, que le filet soulignait sur sa seule largeur de texte. */
.gg-boutique .woocommerce #customer_details h3:not(#ship-to-different-address) {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--b-filet);
	font-size: 17px;
	color: var(--b-encre);
}

/* « Votre commande » titre une colonne, pas une section de carte : il ne prend
   ni le filet ni la marge intérieure ci-dessus. Il était listé avec eux, puis
   tout lui était retiré quarante lignes plus bas. */
.gg-boutique .woocommerce #order_review_heading {
	margin: 0 0 16px;
}

/* Chaque bloc du tunnel devient une carte : les coordonnées, la livraison, les
   notes. Sans ça, tout se suit en une seule colonne sans respiration et on ne
   sait pas où une section commence. */
.gg-boutique .woocommerce #customer_details .col-1,
.gg-boutique .woocommerce #customer_details .col-2 {
	background: var(--b-carte);
	border: 1px solid var(--b-filet);
	border-radius: var(--b-rayon);
	box-shadow: var(--b-ombre);
	padding: 22px 24px;
	margin-bottom: 16px;
}

/* Les champs complémentaires sont mis à plat plus bas, dans le bloc des
   correctifs relevés sur la page servie : leur habillage en carte y est annulé,
   la colonne 2 en étant déjà une. Les déclarations qui vivaient ici étaient donc
   toutes écrasées. */


/* La grille des champs. WooCommerce marque déjà les demi-largeurs
   (`form-row-first` et `form-row-last`) mais les fait flotter. */
.gg-boutique .woocommerce .woocommerce-billing-fields__field-wrapper,
.gg-boutique .woocommerce .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
}

.gg-boutique .woocommerce .form-row {
	float: none !important;
	width: auto !important;
	margin: 0;
	padding: 0;
}

.gg-boutique .woocommerce .form-row-wide,
.gg-boutique .woocommerce #billing_address_1_field,
.gg-boutique .woocommerce #billing_address_2_field,
.gg-boutique .woocommerce #shipping_address_1_field,
.gg-boutique .woocommerce #shipping_address_2_field {
	grid-column: 1 / -1;
}

.gg-boutique .woocommerce .woocommerce-additional-fields .form-row {
	grid-column: 1 / -1;
}

/* Le récapitulatif de commande. C'est lui qui rassure : il reste sous les yeux
   pendant toute la saisie, sur grand écran. */
.gg-boutique .woocommerce .woocommerce-checkout-review-order {
	background: var(--b-carte);
	border: 1px solid var(--b-filet);
	border-radius: var(--b-rayon);
	box-shadow: var(--b-ombre);
	padding: 22px 24px;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-spacing: 0;
	margin: 0 0 6px;
	font-size: 15px;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table th,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--b-filet);
	background: transparent;
	vertical-align: top;
}

/* Les mêmes lignes en flex qu'au panier, pour la même ligne d'expédition.
   La première cellule prend la place qui reste, la dernière (le montant)
   garde sa largeur. L'écart entre elles est une marge intérieure et non un
   `gap`, qui couperait le filet du bas. */
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table thead,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tbody,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tfoot {
	display: block;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tr {
	display: flex;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tr > :first-child {
	flex: 1 1 0;
	min-width: 0;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tr:not(.woocommerce-shipping-totals) > :last-child:not(:first-child) {
	flex: 0 1 auto;
	padding-left: 16px;
}

/* Un plancher pour les libellés du pied (« Sous-total », « Total ») : le jour
   où la TVA est réglée, le total porte « (dont 75,83 € de TVA) », et sa
   cellule, plus large que la carte d'un téléphone, écrasait « Total » à 0 px.
   Avec lui, c'est le montant qui passe sur deux lignes. Pas sur les noms de
   gants du corps du tableau, qui doivent pouvoir passer à la ligne. */
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tfoot tr > :first-child {
	min-width: 5em;
}

/* La règle d'en-tête du tableau du panier (`table.shop_table thead th`, 16 px
   de chaque côté) s'applique aussi ici, et « Produit » comme « Sous-total » ne
   tombaient plus d'aplomb avec les lignes du dessous. Ses marges sont retirées ;
   « Sous-total » garde l'écart de 16 px des dernières cellules, posé plus haut. */
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table thead th {
	padding-right: 0;
	padding-bottom: 8px;
	padding-left: 0;
	color: var(--b-gris-clair);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table td.product-total,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table td.product-name {
	color: var(--b-encre);
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table td.product-total {
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* « Retirer » sous le prix d'un gant, discret comme le « [Enlever] » du code promo. */
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table td.product-total a.gg-retirer {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	color: var(--b-gris-clair);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table td.product-total a.gg-retirer:hover {
	color: #b4432f;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table dl.variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1px 8px;
	margin: 6px 0 0;
	font-size: 13px;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table dl.variation dt {
	margin: 0;
	color: var(--b-gris-clair);
	font-weight: 500;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table dl.variation dd {
	margin: 0;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table dl.variation dd p {
	margin: 0;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tfoot th {
	color: var(--b-gris);
	font-weight: 500;
	text-align: left;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	color: var(--b-encre);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-bottom: 0;
	padding-top: 15px;
	font-size: 17px;
	color: var(--b-vert-profond);
}

.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-size: 22px;
	font-weight: 700;
}

/* Les moyens de paiement : une liste à puces par défaut, ce qui n'inspire
   aucune confiance à l'endroit le plus sensible du parcours. */
.gg-boutique .woocommerce #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 18px;
}

.gg-boutique .woocommerce #payment ul.payment_methods {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gg-boutique .woocommerce #payment ul.payment_methods li {
	margin: 0;
	padding: 0;
	background: transparent;
}

.gg-boutique .woocommerce #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--b-filet-fort);
	border-radius: var(--b-rayon-petit);
	color: var(--b-encre);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gg-boutique .woocommerce #payment ul.payment_methods li > label:hover {
	border-color: var(--b-vert);
	background: var(--b-vert-pale);
}

.gg-boutique .woocommerce #payment ul.payment_methods li input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	accent-color: var(--b-vert);
	flex: 0 0 auto;
}

.gg-boutique .woocommerce #payment div.payment_box {
	margin: 8px 0 0;
	padding: 14px 16px;
	background: var(--b-or-pale);
	border: 1px solid #f0dfbc;
	border-radius: var(--b-rayon-petit);
	color: var(--b-texte);
	font-size: 14.5px;
}

/* La flèche du bloc de paiement pointe vers un fond qui n'existe plus. */
.gg-boutique .woocommerce #payment div.payment_box::before {
	display: none;
}

.gg-boutique .woocommerce #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* Les conditions générales. Une case à cocher perdue dans un paragraphe, alors
   que c'est un engagement contractuel. */
.gg-boutique .woocommerce .woocommerce-terms-and-conditions-wrapper {
	margin: 4px 0 16px;
}

.gg-boutique .woocommerce .woocommerce-privacy-policy-text {
	color: var(--b-gris);
	font-size: 13.5px;
}

.gg-boutique .woocommerce .validate-required.woocommerce-terms-and-conditions-checkbox-text,
.gg-boutique .woocommerce .form-row.validate-required > label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 15px;
	border: 1px solid var(--b-filet-fort);
	border-radius: var(--b-rayon-petit);
	color: var(--b-encre);
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
}

.gg-boutique .woocommerce .woocommerce-form__input-checkbox,
.gg-boutique .woocommerce input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 2px 0 0;
	accent-color: var(--b-vert);
	flex: 0 0 auto;
}

.gg-boutique .woocommerce #place_order {
	width: 100%;
	min-height: 56px;
	font-size: 17px;
	margin: 0;
}

/* WooCommerce enveloppe le bouton dans une `.form-row`, qui hérite de la marge
   intérieure des lignes de formulaire. Relevé en recette : 15,5 px de chaque
   côté, donc un bouton en retrait de 16 px par rapport au récapitulatif juste
   au-dessus, sur ordinateur comme sur téléphone. C'est le dernier élément que
   le visiteur regarde avant de payer : il doit être aligné.

   `!important` : la règle sans a été déployée puis mesurée sur la page servie,
   la marge intérieure valait toujours 15,5 px. Une feuille chargée après la
   nôtre la pose en forçant, et rien d'autre qu'un `!important` ne la reprend.
   Vérifié dans les deux sens avant d'écrire ceci. */
.gg-boutique .woocommerce .form-row.place-order {
	padding: 0 !important;
	margin: 0 !important;
}

/* La mention de réassurance, posée sous le bouton par GG_Marque_Paiement.

   Discrète par construction : elle rassure celui qui la cherche du regard, elle
   ne dispute pas la place au bouton de commande. Le cadenas est aligné sur la
   première ligne du texte, pas centré sur le bloc, pour rester lisible quand la
   phrase passe sur trois lignes en téléphone. */
.gg-boutique .woocommerce .gg-paiement-reassurance {
	display: flex;
	/* Sans cette largeur, le paragraphe sortait à 0 px de large dans la ligne du
	   bouton : le texte tombait en colonne, un mot par ligne, et le cadenas
	   disparaissait. Mesuré sur la page servie, conteneur à 424 px. */
	width: 100%;
	gap: 8px;
	align-items: flex-start;
	margin: 14px 0 0;
	color: var(--b-gris-clair);
	font-size: 13px;
	line-height: 1.5;
}

.gg-boutique .woocommerce .gg-paiement-reassurance strong {
	color: var(--b-texte);
	font-weight: 600;
}

.gg-boutique .woocommerce .gg-paiement-cadenas {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Correctifs relevés sur la page servie
   -------------------------------------------------------------------------- */

/* Carte dans la carte. Le gabarit classique imbrique les champs
   complémentaires DANS la colonne 2, qui est déjà une carte : on voyait deux
   filets arrondis concentriques autour des notes de commande. Le bloc
   intérieur redevient un simple groupe de champs. */
.gg-boutique .woocommerce .woocommerce-additional-fields {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.gg-boutique .woocommerce .woocommerce-additional-fields > h3 {
	margin-top: 18px;
}

/* « Expédier à une adresse différente ? » est un `h3` qui contient une case à
   cocher : la taille de titre écrasait le libellé et désalignait la case. */
.gg-boutique .woocommerce #ship-to-different-address {
	margin: 0;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 15px;
	font-weight: 500;
}

.gg-boutique .woocommerce #order_review_heading {
	color: var(--b-gris-clair);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.gg-boutique .woocommerce #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--b-encre);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

/* Aucune `margin` sur les cases à cocher ici, et c'est voulu : un bloc plus haut
   cale celle des conditions générales sur la première ligne de son libellé, avec
   `margin: 2px 0 0`, et ce sélecteur a exactement la même spécificité. Le
   remettre à zéro annulait cet alignement, sans que rien ne le signale.

   Les boutons radio, eux, gardent leur remise à zéro : ils vivent dans une ligne
   flexible où le navigateur leur donne par défaut des marges asymétriques. */
.gg-boutique .woocommerce input[type="checkbox"],
.gg-boutique .woocommerce input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	flex: 0 0 auto;
	accent-color: var(--b-vert);
}

.gg-boutique .woocommerce input[type="radio"] {
	margin: 0;
}

/* La description du moyen de paiement était un second encadré arrondi À
   L'INTÉRIEUR de la carte du récapitulatif : deux rayons concentriques, ce qui
   se voit et n'apporte rien. Elle devient une note, tenue par un filet à
   gauche, comme les autres avis de la boutique. */
/* Même arbitrage que pour le bouton : la version sans `!important` a été
   déployée et mesurée, l'encadré gardait ses 9 px de rayon et sa bordure. */
.gg-boutique .woocommerce .payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	border: 0 !important;
	border-left: 3px solid var(--b-or) !important;
	border-radius: 0 !important;
	background: var(--b-or-pale);
	color: var(--b-texte);
	font-size: 14px;
	line-height: 1.5;
}

.gg-boutique .woocommerce .payment_box::before,
.gg-boutique .woocommerce .payment_box::after {
	/* WooCommerce dessine une petite flèche en `::before` pour rattacher la
	   description au bouton radio. Sans encadré, elle pointe dans le vide. */
	display: none;
}

.gg-boutique .woocommerce .payment_box p:last-child {
	margin-bottom: 0;
}

/* Les liens du tunnel sortaient en rose #cc3366, la couleur que le `reset.css`
   du thème donne à tout lien. Sur un tunnel de commande, ce rose est le seul
   élément qui ne vienne pas de la marque, et il tombe sur les deux liens que le
   visiteur doit lire avant de payer : le code promo et les conditions de vente.
   La liste est nominative : styliser `a` en bloc atteindrait aussi les boutons,
   qui sont des `a.button` chez WooCommerce. */
.gg-boutique .woocommerce a.showcoupon,
.gg-boutique .woocommerce-terms-and-conditions-link,
.gg-boutique .woocommerce-privacy-policy-link,
.gg-boutique .woocommerce-info a:not(.button),
.gg-boutique .woocommerce-message a:not(.button),
.gg-boutique .woocommerce-form__label a,
.gg-boutique .woocommerce .woocommerce-form-login-toggle a,
.gg-boutique .woocommerce .lost_password a {
	color: var(--b-vert);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gg-boutique .woocommerce a.showcoupon:hover,
.gg-boutique .woocommerce-terms-and-conditions-link:hover,
.gg-boutique .woocommerce-privacy-policy-link:hover,
.gg-boutique .woocommerce-info a:not(.button):hover,
.gg-boutique .woocommerce-message a:not(.button):hover,
.gg-boutique .woocommerce-form__label a:hover,
.gg-boutique .woocommerce .woocommerce-form-login-toggle a:hover,
.gg-boutique .woocommerce .lost_password a:hover {
	color: var(--b-vert-profond);
}

/* --------------------------------------------------------------------------
   Deux colonnes, sur grand écran seulement
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Le piege du clearfix

   WooCommerce pose un clearfix sur ses conteneurs : `::before` et `::after`
   avec `content: " "` et `display: table`. Inoffensif tant que le conteneur
   coule normalement.

   Passé en grille, ce n'est plus le cas : un pseudo-élément qui produit une
   boîte DEVIENT un élément de la grille et consomme une case. Mesuré sur la
   page « Mon compte » d'un visiteur déconnecté : la case 1 était prise par le
   `::before`, le bloc de connexion se retrouvait en colonne de droite et la
   création de compte passait à la ligne suivante, à gauche. Deux formulaires
   en diagonale, dans une grille pourtant réglée sur deux colonnes égales.

   On les neutralise donc partout où l'on pose une grille, et seulement là.
   -------------------------------------------------------------------------- */

.gg-boutique.woocommerce-cart .woocommerce::before,
.gg-boutique.woocommerce-cart .woocommerce::after,
.gg-boutique .woocommerce form.checkout::before,
.gg-boutique .woocommerce form.checkout::after,
.gg-boutique .woocommerce #customer_details::before,
.gg-boutique .woocommerce #customer_details::after,
.gg-boutique .woocommerce .col2-set::before,
.gg-boutique .woocommerce .col2-set::after {
	display: none;
}

@media (min-width: 900px) {
	/* PANIER : les articles à gauche, la décision à droite. */
	.gg-boutique .woocommerce-cart-form {
		float: none;
		width: 100%;
	}

	.gg-boutique.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: 26px;
		align-items: start;
	}

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

	.gg-boutique .woocommerce .cart-collaterals {
		width: 100%;
		float: none;
		position: sticky;
		/* Sous l'en-tête, qui devient fixe au défilement et fait 86 px. */
		top: 100px;
	}

	.gg-boutique .woocommerce .cart-collaterals::before,
	.gg-boutique .woocommerce .cart-collaterals::after {
		display: none;
	}

	/* COMMANDE : le formulaire à gauche, le récapitulatif collant à droite. */
	.gg-boutique .woocommerce form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 26px;
		align-items: start;
	}

	.gg-boutique .woocommerce form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	.gg-boutique .woocommerce form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.gg-boutique .woocommerce form.checkout > .woocommerce-checkout-review-order {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: 100px;
	}

	.gg-boutique .woocommerce #customer_details .col2-set {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Téléphone : le tableau devient une pile de cartes
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
	.gg-boutique .woocommerce table.cart td.actions {
		flex-direction: column;
		align-items: stretch;
	}

	.gg-boutique .woocommerce table.cart td.actions .coupon input#coupon_code {
		flex: 1 1 auto;
		width: auto;
	}

	.gg-boutique .woocommerce .woocommerce-billing-fields__field-wrapper,
	.gg-boutique .woocommerce .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	/* `.woocommerce-additional-fields` n'est PAS dans cette liste : ce n'est plus
	   une carte, il vit à l'intérieur de la colonne 2 qui en est une. Lui donner
	   une marge intérieure ici rétrécissait le champ « Notes de commande » de
	   32 px par rapport à tous les autres champs, mesuré en recette à 375 px. */
	.gg-boutique .woocommerce #customer_details .col-1,
	.gg-boutique .woocommerce #customer_details .col-2,
	.gg-boutique .woocommerce .woocommerce-checkout-review-order {
		padding: 18px 16px;
	}
}

/* --------------------------------------------------------------------------
   Neutraliser la feuille responsive de WooCommerce

   WooCommerce charge `woocommerce-smallscreen.css`, active sous 768 px, qui
   dégroupe le tableau du panier à sa manière. Mesuré sur la préproduction à
   524 px de large, elle impose trois choses :

     - `td.product-thumbnail` en `display: none`, donc plus de photo ;
     - `text-align: right` sur chaque cellule ;
     - un libellé injecté en `::before` depuis l'attribut `data-title`, d'où le
       « Produit: » collé devant le nom du gant.

   C'était la bonne réponse quand la seule mise en page était un tableau de six
   colonnes. Notre carte fait déjà ce travail, à toutes les largeurs et sans
   libellé injecté : les trois décisions sont donc reprises, et seulement sur
   nos pages.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
	/* `!important` sur ces quatre règles, et seulement ici. Les nôtres sont déjà
	   plus spécifiques (quatre classes contre deux) et notre feuille est
	   imprimée en dernier : vérifié dans la page, la règle est bien présente, le
	   média est actif, le sélecteur correspond, et pourtant l'alignement calculé
	   reste `right` et la photo `none`. C'est donc que la feuille adverse force
	   en `!important`. Elle est servie depuis un domaine tiers et illisible
	   depuis la page, on ne peut pas la citer, mais la mesure suffit à conclure.
	   La seule réponse possible à un `!important` est un `!important`. */
	.gg-boutique .woocommerce table.cart tbody td::before {
		content: none !important;
		display: none !important;
	}

	.gg-boutique .woocommerce table.cart tbody td {
		text-align: left !important;
	}

	.gg-boutique .woocommerce table.cart td.product-thumbnail {
		display: block !important;
	}

	/* Le prix et le total sont alignés par la grille, pas par le texte. */
	.gg-boutique .woocommerce table.cart td.product-price,
	.gg-boutique .woocommerce table.cart td.product-subtotal {
		text-align: left !important;
	}

	/* La même feuille ajoute ces libellés au récapitulatif de commande, où ils
	   font double emploi avec l'en-tête que nous gardons visible. */
	.gg-boutique .woocommerce table.woocommerce-checkout-review-order-table td::before,
	.gg-boutique .woocommerce .cart_totals table.shop_table td::before {
		content: none !important;
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-boutique .woocommerce * {
		transition: none !important;
	}
}