/*
 * Tunnel d'achat (chantier C5) - DA2 « L'Écurie »
 * Panier vide, panier rempli, commande, confirmation, échec ou annulation.
 *
 * Consomme les tokens et les composants gelés de la Vague 1 (tokens.css,
 * base.css, components.css : .empty, .notice, .table, .field/.input/.select,
 * .qty, .crumb, .btn) sans les redéfinir. Ne dépend PAS de shop.css : ce
 * fichier appartient au chantier boutique (C3), encore en reprise DA2 au
 * moment où ce chantier avance en parallèle, et les deux chantiers ne
 * partagent aucun gabarit (shop.css ne touche jamais /panier/, /commande/,
 * ni la page de confirmation).
 *
 * Le panier et la page de commande affichent des marquages coeur WooCommerce
 * non renommables (.shop_table, .cart_item, .form-row, #place_order...) :
 * toutes les règles ci-dessous les stylent par sélecteur natif plutôt que
 * d'exiger une classe supplémentaire, pour rester robuste aux mises à jour
 * du plugin (même doctrine que le reste du thème).
 */

/* -------------------------------------------------------------------
 * SOCLE DE PAGE
 * ------------------------------------------------------------------- */

.tunnel {
	padding-block: clamp(2rem, 5vw, var(--sec-y)) var(--sec-y);
}

.tunnel__head {
	margin-bottom: clamp(1.75rem, 4vw, var(--sp-8));
}

.tunnel__head .crumb {
	margin-bottom: var(--sp-5);
}

.tunnel__head h1 {
	margin-bottom: var(--sp-2);
}

.tunnel__head p {
	color: var(--c-ink-soft);
	max-width: var(--measure);
}

/* -------------------------------------------------------------------
 * D1 - PANIER VIDE
 * Le composant .empty (components.css) est repris tel quel. On ne pose ici
 * que le point de rattachement avec l'en-tête de page : jamais un trou dans
 * la page, une sortie de secours toujours visible au premier écran.
 * ------------------------------------------------------------------- */

.tunnel .empty {
	margin-top: var(--sp-2);
}

/* -------------------------------------------------------------------
 * D2 - PANIER REMPLI
 * ------------------------------------------------------------------- */

.tunnel-cart {
	display: grid;
	gap: clamp(2rem, 5vw, var(--sp-9));
	align-items: start;
}

@media (min-width: 61rem) {
	.tunnel-cart {
		grid-template-columns: minmax(0, 1fr) 21rem;
	}
}

.tunnel-cart__form {
	min-width: 0;
}

/* Table produits : classes coeur WooCommerce (.shop_table, .cart_item,
 * .product-thumbnail...) conservées, présentation seule redéfinie. Rythme en
 * lignes filetées plutôt qu'en cartes à coins arrondis : la DA2 travaille au
 * filet (cf. tokens.css). */
.tunnel-cart table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--c-line);
}

.tunnel-cart table.shop_table thead th {
	padding: var(--sp-4) var(--sp-3);
	text-align: left;
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	border-bottom: 1px solid var(--c-line);
}

.tunnel-cart table.shop_table .cart_item td {
	padding: var(--sp-5) var(--sp-3);
	border-bottom: 1px solid var(--c-line);
	vertical-align: middle;
}

.tunnel-cart .product-remove {
	width: 2.5rem;
}

.tunnel-cart .product-remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 44px;
	min-height: 44px;
	margin: -.6875rem;
	border-radius: var(--r-pill);
	font-size: 1.15rem;
	line-height: 1;
	color: var(--c-ink-faint);
	transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.tunnel-cart .product-remove .remove:hover,
.tunnel-cart .product-remove .remove:focus-visible {
	color: var(--c-danger);
	background: var(--c-muted);
}

.tunnel-cart .product-thumbnail {
	width: 4.5rem;
}

/* Même recette que .card__plate (components.css) : la plaque reste claire
 * dans les deux thèmes, ce qui unifie des packshots fournisseurs très
 * inégaux sans jamais poser un blanc franc sur fond sombre. */
.tunnel-cart .product-thumbnail a,
.tunnel-cart .product-thumbnail > img {
	display: block;
	width: 4rem;
	height: 4rem;
	padding: var(--sp-1);
	background: var(--c-plate);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
}
.tunnel-cart .product-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	border-radius: 0;
	border: 0;
	padding: 0;
	background: none;
}

.tunnel-cart .product-name a {
	font-weight: 500;
	color: var(--c-ink);
}
.tunnel-cart .product-name a:hover,
.tunnel-cart .product-name a:focus-visible {
	color: var(--c-accent);
}
.tunnel-cart .product-name dl.variation {
	margin-top: var(--sp-1);
	font-size: var(--t-small);
	color: var(--c-ink-soft);
}
.tunnel-cart .product-name dl.variation dt,
.tunnel-cart .product-name dl.variation dd {
	display: inline;
	margin: 0;
}
/* Le gabarit coeur (cart/cart-item-data.php) écrit déjà ":" à la fin du
 * <dt> - ne pas en ajouter un second ici (défaut constaté en QA visuelle,
 * "Coloris : :"). Un espace insécable avant le <dd> suivant suffit. */
.tunnel-cart .product-name dl.variation dd { margin-left: var(--sp-1); }
.tunnel-cart .product-name dl.variation p:last-child { margin: 0; }

.tunnel-cart .product-price,
.tunnel-cart .product-subtotal {
	font-weight: 500;
	white-space: nowrap;
}
.tunnel-cart .product-subtotal { font-weight: 500; }

.tunnel-cart table.shop_table .actions {
	padding: var(--sp-6) var(--sp-3) var(--sp-2);
	border-bottom: 0;
}

.tunnel-cart .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-3);
}
.tunnel-cart .coupon label {
	flex-basis: 100%;
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
}
.tunnel-cart .coupon .input-text {
	min-height: 44px;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg);
	color: var(--c-ink);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	font-size: var(--t-small);
	width: 12rem;
	max-width: 100%;
}
/* Le coeur WooCommerce impose ".woocommerce table.cart td.actions .input-text
 * { width:80px }" (4 classes + 2 elements), plus specifique que la regle
 * ci-dessus (3 classes) : elle gagne quel que soit l'ordre de chargement des
 * feuilles de style et tronque le placeholder ("Code promo" -> "Code pro").
 * Cible directe par id pour depasser cette specificite sans !important. */
.tunnel-cart .coupon #coupon_code {
	width: 12rem;
	max-width: 100%;
}
.tunnel-cart .coupon .input-text:focus {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
	outline: none;
}

/* Actions du panier : "Mettre à jour" reste secondaire (contour), l'unique
 * orange de la vue est réservé au bouton de validation dans le résumé. */
.tunnel-cart .coupon button,
.tunnel-cart button[name="update_cart"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-sm);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	background: transparent;
	color: var(--c-ink);
	border: 1px solid var(--c-line-strong);
	transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tunnel-cart .coupon button:hover,
.tunnel-cart button[name="update_cart"]:hover {
	border-color: var(--c-ink);
}

/* Sélecteur de quantité : marquage produit par woocommerce/global/quantity-input.php (.qty) */
.tunnel-cart .product-quantity .qty {
	margin: 0;
}

/* Résumé et validation */
.cart-summary {
	padding: var(--sp-6);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-bg-elev);
}
@media (min-width: 61rem) {
	.cart-summary { position: sticky; top: calc(var(--header-h, 4.125rem) + var(--sp-5)); }
}

.cart-summary h2 { margin-bottom: var(--sp-5); }

.cart-summary table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sp-6);
}
.cart-summary table.shop_table th,
.cart-summary table.shop_table td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); text-align: left; font-size: var(--t-small); vertical-align: top; }
.cart-summary table.shop_table th { font-weight: 400; color: var(--c-ink-soft); white-space: nowrap; padding-right: var(--sp-4); }
.cart-summary table.shop_table td { text-align: right; width: 100%; }
/* Ligne de remise : le libelle "Code promo : <code>" n'a pas de longueur
 * bornee (le code vient du client). En nowrap comme Sous-total/Total, un
 * code un peu long forcait le tableau (table-layout auto) a deborder de la
 * carte .cart-summary au lieu de respecter son width:100%. Seule cette
 * ligne autorise le retour a la ligne. */
.cart-summary table.shop_table .cart-discount th { white-space: normal; }

.cart-summary table.shop_table .order-total th,
.cart-summary table.shop_table .order-total td {
	border-bottom: 0;
	padding-top: var(--sp-4);
}
.cart-summary table.shop_table .order-total th {
	font-family: var(--od-serif);
	font-size: var(--t-h4);
	color: var(--c-ink);
}
.cart-summary table.shop_table .order-total td {
	font-family: var(--od-serif);
	font-weight: 300;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: lining-nums tabular-nums;
}

.wc-proceed-to-checkout { text-align: center; }

/* Bouton "Valider la commande" - proceed-to-checkout-button.php (coeur),
 * unique orange de la vue panier, même recette visuelle que .btn. */
.wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--r-sm);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	background: var(--c-cta);
	color: var(--c-cta-ink);
	transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--c-cta-hover);
	transform: translateY(-2px);
	box-shadow: var(--c-shadow-md);
}
.wc-proceed-to-checkout a.checkout-button:active { transform: translateY(0); }

/* -------------------------------------------------------------------
 * D3 - PAGE DE COMMANDE (checkout)
 * Gabarit coeur WooCommerce (woocommerce/checkout/form-checkout.php), non
 * surchargé - décision documentée du thème : les totaux, la TVA et le
 * paiement restent sur la logique coeur, seule la présentation change ici.
 * ------------------------------------------------------------------- */

.woocommerce-checkout .tunnel { padding-top: clamp(1.75rem, 4vw, var(--sp-8)); }

.checkout-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8) 0;
	align-items: start;
}
@media (min-width: 61rem) {
	.checkout-columns {
		grid-template-columns: 1.2fr 1fr;
		grid-template-rows: auto auto;
		gap: 0 var(--sp-9);
	}
	.checkout-columns #customer_details { grid-column: 1; grid-row: 1 / 3; }
	.checkout-columns #order_review_heading { grid-column: 2; grid-row: 1; }
	.checkout-columns #order_review { grid-column: 2; grid-row: 2; }
}

#customer_details h3 { margin-bottom: var(--sp-5); }
#customer_details .col2-set { display: grid; gap: var(--sp-7); }
@media (min-width: 40rem) {
	#customer_details .col2-set { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
#customer_details .col-1 { min-width: 0; }
#customer_details .col-2 { min-width: 0; }

#order_review_heading { margin-bottom: var(--sp-5); }
#order_review_heading + p.notice,
#order_review_heading ~ .checkout-columns { margin: 0; }

/* Champs de formulaire : même recette visuelle que .field/.input/.select
 * (components.css), écrite ici contre les sélecteurs natifs WooCommerce -
 * le gabarit checkout n'est pas surchargé, on ne peut donc pas poser la
 * classe .field elle-même sur son marquage. */
.woocommerce-checkout .form-row {
	margin-bottom: var(--sp-5);
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	display: inline-block;
	width: 48%;
	vertical-align: top;
}
.woocommerce-checkout .form-row-first { margin-right: 4%; }
.woocommerce-checkout .form-row-wide { clear: both; }
@media (max-width: 30rem) {
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		display: block;
		width: 100%;
		margin-right: 0;
	}
}

.woocommerce-checkout label {
	display: block;
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	margin-bottom: var(--sp-2);
}
.woocommerce-checkout label .required {
	color: var(--c-cta);
	text-decoration: none;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.select2-container .select2-selection--single {
	width: 100%;
	min-height: 44px;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg);
	color: var(--c-ink);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	font-size: var(--t-body);
	font-weight: 300;
	font-family: var(--od-sans);
	transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.woocommerce-checkout textarea { min-height: 6rem; resize: vertical; }
.woocommerce-checkout input.input-text:hover,
.woocommerce-checkout select:hover,
.woocommerce-checkout textarea:hover { border-color: var(--c-ink-soft); }
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
	outline: none;
}
.woocommerce-checkout .select2-container { width: 100% !important; }
.select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	padding-inline: var(--sp-4);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--c-ink);
	line-height: normal;
}
.select2-dropdown {
	background: var(--c-bg);
	border-color: var(--c-line-strong);
	color: var(--c-ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--c-accent);
	color: var(--c-accent-ink);
}

.woocommerce-checkout .woocommerce-additional-fields { margin-top: var(--sp-7); }
.woocommerce-checkout .woocommerce-additional-fields h3 { margin-bottom: var(--sp-5); }

.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-privacy-policy-text {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--t-small);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--c-ink-soft);
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: .2rem;
	accent-color: var(--c-accent);
	flex: 0 0 auto;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
	margin-top: var(--sp-5);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0; }
.woocommerce-checkout .woocommerce-privacy-policy-text a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Récapitulatif de commande - même classes coeur (.shop_table, .cart_item)
 * que le panier, mais structure à 2 colonnes (product-name/product-total),
 * conservée en tableau standard (pas de conversion en grille de carte). */
#order_review {
	padding: var(--sp-6);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-bg-elev);
}
#order_review table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	margin-bottom: var(--sp-5);
}
#order_review table.shop_table th,
#order_review table.shop_table td {
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--t-small);
	text-align: left;
}
#order_review table.shop_table thead th {
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
}
#order_review table.shop_table .product-total,
#order_review table.shop_table td.product-total { text-align: right; white-space: nowrap; }
#order_review table.shop_table .cart-subtotal td,
#order_review table.shop_table .order-total td { text-align: right; font-weight: 500; }
#order_review table.shop_table .order-total th,
#order_review table.shop_table .order-total td {
	border-bottom: 0;
	padding-top: var(--sp-4);
	font-family: var(--od-serif);
	font-size: var(--t-h4);
}

.woocommerce-checkout-payment {
	margin-top: var(--sp-6);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}
ul.wc_payment_methods { margin-bottom: var(--sp-5); }
ul.wc_payment_methods li.wc_payment_method {
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--t-small);
}
ul.wc_payment_methods li.wc_payment_method:last-of-type { border-bottom: 0; }
ul.wc_payment_methods input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--c-accent);
	vertical-align: middle;
	margin-right: var(--sp-2);
}
ul.wc_payment_methods label {
	display: inline;
	font-size: var(--t-small);
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: var(--c-ink);
}
.payment_box {
	margin-top: var(--sp-3);
	padding: var(--sp-4);
	background: var(--c-muted);
	border-radius: var(--r-sm);
	font-size: var(--t-small);
	color: var(--c-ink-soft);
	line-height: var(--lh-body);
}
.payment_box p:last-child { margin-bottom: 0; }

/* Bouton de validation - unique orange de la vue, même recette que .btn */
#place_order {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--sp-3) var(--sp-6);
	border: 0;
	border-radius: var(--r-sm);
	font-family: var(--od-sans);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	background: var(--c-cta);
	color: var(--c-cta-ink);
	cursor: pointer;
	transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
#place_order:hover { background: var(--c-cta-hover); transform: translateY(-2px); box-shadow: var(--c-shadow-md); }
#place_order:active { transform: translateY(0); }

/* -------------------------------------------------------------------
 * MESSAGES SYSTÈME WOOCOMMERCE
 * Surcharges woocommerce/notices/{error,success,notice}.php : chaque
 * message coeur passe par le composant .notice (components.css) plutôt que
 * le HTML natif <ul class="woocommerce-error">. Voir aussi les alias de
 * classes coeur ci-dessous, filet de sécurité si une extension imprime ses
 * propres notices sans passer par ces gabarits.
 * ------------------------------------------------------------------- */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	padding: var(--sp-4) var(--sp-5);
	margin: 0 0 var(--sp-4);
	border: 1px solid var(--c-line-strong);
	border-left-width: 3px;
	border-radius: var(--r-sm);
	background: var(--c-bg-elev);
	font-size: var(--t-small);
	list-style: none;
}
.woocommerce-error { border-left-color: var(--c-danger); }
.woocommerce-message { border-left-color: var(--c-success); }
.woocommerce-info { border-left-color: var(--c-accent); }
.woocommerce-message a.button,
.woocommerce-error a.button {
	margin-left: auto;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------
 * D4 / D5 - CONFIRMATION, ÉCHEC OU ANNULATION
 * woocommerce/checkout/thankyou.php (surchargé) : trois états possibles,
 * jamais le même écran neutre pour les trois - la couleur et le texte
 * portent l'information avant même la lecture.
 * ------------------------------------------------------------------- */

.order-confirm {
	max-width: 42rem;
}

.order-confirm__status {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	padding: var(--sp-6);
	margin-bottom: var(--sp-7);
	border: 1px solid var(--c-line-strong);
	border-left-width: 3px;
	border-radius: var(--r-md);
	background: var(--c-bg-elev);
}
.order-confirm__status .emblem {
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	margin-top: var(--sp-1);
}
.order-confirm__status p { color: var(--c-ink-soft); }
.order-confirm__status p:first-child { margin-bottom: var(--sp-2); }

.order-confirm__status--ok { border-left-color: var(--c-success); }
.order-confirm__status--ok .emblem { color: var(--c-success); }

.order-confirm__status--err { border-left-color: var(--c-danger); }
.order-confirm__status--err .emblem { color: var(--c-danger); }

.order-confirm__status--cancelled { border-left-color: var(--c-ink-faint); }
.order-confirm__status--cancelled .emblem { color: var(--c-ink-faint); }

.order-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-top: var(--sp-5);
}

.order-confirm .woocommerce-order-overview {
	display: grid;
	gap: 0;
	margin-bottom: var(--sp-7);
	border-top: 1px solid var(--c-line);
}
.order-confirm .woocommerce-order-overview li {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--t-small);
	color: var(--c-ink-soft);
}
.order-confirm .woocommerce-order-overview li strong {
	color: var(--c-ink);
	font-weight: 500;
	text-align: right;
}

.order-confirm .woocommerce-order-details,
.order-confirm .woocommerce-order-downloads,
.order-confirm .woocommerce-customer-details {
	margin-bottom: var(--sp-7);
}
/* Titres de section compacts (reçu de commande) : le h2 de page (jusqu'à
 * 3rem) ferait tenir "Adresse de facturation" sur 3 lignes dans une colonne
 * étroite - défaut constaté en QA visuelle. Registre volontairement plus
 * discret que les titres éditoriaux. */
.order-confirm h2 {
	font-family: var(--od-serif);
	font-weight: 400;
	font-size: var(--t-h4);
	letter-spacing: -.012em;
	margin-bottom: var(--sp-5);
}
.order-confirm .woocommerce-customer-details {
	display: grid;
	gap: var(--sp-7);
}
@media (min-width: 30rem) {
	.order-confirm .woocommerce-customer-details.has-2 { grid-template-columns: 1fr 1fr; }
}
.order-confirm table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); }
.order-confirm table.shop_table th,
.order-confirm table.shop_table td {
	padding: var(--sp-3) var(--sp-2);
	text-align: left;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--t-small);
}
.order-confirm table.shop_table thead th {
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
}
.order-confirm table.shop_table tfoot th,
.order-confirm table.shop_table tfoot td { font-weight: 500; }
.order-confirm address { font-style: normal; line-height: var(--lh-body); color: var(--c-ink-soft); }

/* -------------------------------------------------------------------
 * RESPONSIVE - PANIER ET RÉCAPITULATIF EN LISTE DE FICHES
 * En dessous de 48rem, le tableau .shop_table du panier perd son en-tête et
 * chaque ligne devient une fiche empilée. Le récapitulatif de commande
 * (#order_review), structurellement différent (2 colonnes, pas 6), garde un
 * tableau standard.
 * ------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
	.tunnel-cart table.shop_table thead { display: none; }
	.tunnel-cart table.shop_table .cart_item {
		display: grid;
		grid-template-columns: 4.5rem 1fr;
		grid-template-areas:
			"thumb name"
			"thumb price"
			"thumb qty"
			"thumb subtotal";
		row-gap: var(--sp-2);
		padding: var(--sp-5) 0;
		position: relative;
	}
	.tunnel-cart .product-remove {
		position: absolute;
		top: var(--sp-5);
		right: 0;
		width: auto;
	}
	.tunnel-cart .product-thumbnail { grid-area: thumb; }
	.tunnel-cart .product-name { grid-area: name; padding-right: 2.5rem; }
	.tunnel-cart .product-price { grid-area: price; }
	.tunnel-cart .product-quantity { grid-area: qty; }
	.tunnel-cart .product-subtotal { grid-area: subtotal; font-weight: 500; }
	.tunnel-cart table.shop_table .cart_item td { padding: 0 var(--sp-3); border-bottom: 0; }
	.tunnel-cart .product-price::before,
	.tunnel-cart .product-subtotal::before {
		content: attr(data-title) " : ";
		font-size: var(--t-micro);
		color: var(--c-ink-faint);
		font-weight: 400;
	}
	.tunnel-cart table.shop_table .actions { padding-inline: 0; }

	#order_review table.shop_table thead { display: table-header-group; }
	#order_review table.shop_table .cart_item { display: table-row; }
	#order_review table.shop_table .cart_item td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
}