/*
 * Page panier (WooCommerce classique) — même situation que la page de
 * commande (voir checkout.css) : WooCommerce ne charge aucune CSS ici,
 * cette feuille reprend les mêmes tokens/traitements que le reste du thème.
 * Mobile d'abord : le tableau devient une pile de "cartes" sous 768px
 * (WooCommerce fournit déjà les attributs data-title pour ça, voir
 * cart/cart.php), remis en vraie table à partir de 768px.
 */

/* Notices (mêmes règles que checkout.css — feuilles chargées indépendamment, page différente). */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 14px;
	border: 1.5px solid var(--wp--preset--color--rule);
	border-left-width: 6px;
	font-size: 14.5px;
	line-height: 1.5;
}

.woocommerce-error {
	background: #fbecea;
	border-color: var(--wp--preset--color--error);
	color: #8a2313;
}

.woocommerce-message {
	background: #e9f7ef;
	border-color: var(--wp--preset--color--ok);
	color: #155a36;
}

.woocommerce-info {
	background: var(--wp--preset--color--chaux);
	border-color: var(--wp--preset--color--brand-indigo);
	color: var(--wp--preset--color--ink);
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	list-style: none;
	margin: 0;
}

.return-to-shop {
	margin: 0;
}

/* Enveloppe de notices toujours présente dans le balisage (même vide) —
 * masquée si vide, sur toute la largeur sinon (voir la grille ≥1024px plus
 * bas : sans ça, elle prendrait la place de la colonne panier/récap). */
.woocommerce-notices-wrapper:empty {
	display: none;
}

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

/* Boutons génériques (Appliquer le code promo, Mettre à jour le panier…). */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
}

.button:hover {
	background: var(--wp--preset--color--chaux);
}

.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: transparent;
}

/* CTA fort (Passer la commande) — même traitement que #place_order en checkout. */
.checkout-button.button,
a.checkout-button {
	display: flex;
	width: 100%;
	min-height: 56px;
	background: var(--wp--preset--color--terracotta);
	color: #fff;
	border: none;
	font-size: 16px;
	box-shadow: 0 10px 24px rgba(184, 75, 58, 0.28);
}

.checkout-button.button:hover {
	background: #9c4031;
}

/* Champs texte (coupon, code postal du calculateur de livraison). */
.input-text {
	min-height: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	font-family: inherit;
	font-size: 16px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.input-text:focus {
	border-color: var(--wp--preset--color--brand-indigo);
}

/* Fil d'Ariane + sous-titre (voir templates/page-panier.html). */
.mt3d-fil-ariane {
	font-size: 13px;
	color: #667085;
	margin-bottom: 14px;
}

.mt3d-fil-ariane a {
	color: #667085;
}

.mt3d-fil-ariane strong {
	color: var(--wp--preset--color--ink);
}

.mt3d-panier-soustitre {
	color: #667085;
	font-size: 15px;
	margin: 4px 0 28px;
}

/* Mise en page générale : tableau du panier / récap + passage de commande. */
.woocommerce {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* La carte est portée par le formulaire (table + réassurance + lien retour
 * y tiennent tous), pas par la table elle-même : voir mt3d_panier_reassurance()
 * et mt3d_panier_lien_retour() dans inc/panier.php, accrochés à l'intérieur
 * et juste après ce formulaire. */
.woocommerce-cart-form {
	display: block;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(24, 33, 59, 0.08);
	overflow: hidden;
}

.mt3d-panier-retour {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--wp--preset--color--brand-indigo);
}

.cart-collaterals {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 18px 50px rgba(24, 33, 59, 0.08);
}

.cart_totals h2 {
	font-size: 19px;
	margin: 0 0 16px;
}

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
}

.cart_totals th,
.cart_totals td {
	padding: 12px 4px;
	text-align: left;
	font-size: 14.5px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.cart_totals td {
	text-align: right;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-bottom: none;
	border-top: 1.5px solid var(--wp--preset--color--ink);
	padding-top: 16px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Le sous-total générique est remplacé par le détail (voir .mt3d-ligne-prix
 * ci-dessous, injecté par inc/panier.php juste avant la ligne "Total"). */
.cart_totals .cart-subtotal {
	display: none;
}

/* Moyens de livraison (wc_cart_totals_shipping_html(), voir aussi
 * checkout.css pour le même traitement). */
.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

.woocommerce-shipping-methods li + li {
	margin-top: 8px;
}

.woocommerce-shipping-methods label {
	font-weight: 700;
	margin: 0;
	cursor: pointer;
}

.mt3d-ligne-prix th {
	font-weight: 500;
	color: #555f76;
}

.mt3d-ligne-prix td {
	font-weight: 700;
}

.mt3d-ligne-prix--remise th,
.mt3d-ligne-prix--remise td {
	color: var(--wp--preset--color--ok);
}

.wc-proceed-to-checkout {
	margin-top: 20px;
}

/* Réassurance + livraison sous le CTA (voir
 * mt3d_panier_reassurance_recapitulatif() dans inc/panier.php). */
.mt3d-recap-reassurance {
	margin-top: 16px;
	padding: 14px 15px;
	border-radius: 12px;
	background: var(--wp--preset--color--chaux);
	font-size: 12.5px;
	line-height: 1.6;
	color: #4e5870;
}

.mt3d-recap-reassurance div {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.mt3d-recap-reassurance div + div {
	margin-top: 10px;
}

.mt3d-recap-reassurance strong {
	color: var(--wp--preset--color--ink);
}

/* Icônes SVG ligne — même style que la page d'accueil (viewBox 24, stroke
 * currentColor) : la couleur vient du texte environnant, pas d'une classe
 * dédiée par icône. */
.mt3d-recap-icone {
	flex: none;
	display: inline-flex;
	color: var(--wp--preset--color--brand-indigo);
}

.mt3d-recap-icone svg {
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.mt3d-recap-livraison {
	margin-top: 18px;
	padding-top: 17px;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.mt3d-recap-livraison__titre {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 8px;
}

.mt3d-recap-livraison p {
	margin: 4px 0;
	font-size: 12px;
	color: #667085;
}

/* Coupon (toujours visible sur le panier, contrairement au checkout). */
.woocommerce-cart-form .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 16px;
	margin-bottom: 16px;
	background: var(--wp--preset--color--chaux);
	border-radius: 16px;
}

.woocommerce-cart-form .coupon .input-text {
	flex: 1 1 220px;
}

.woocommerce-cart-form table.cart .actions {
	padding: 16px 16px 20px;
}

/* Réassurance (voir mt3d_panier_reassurance() dans inc/panier.php) — à
 * l'intérieur du formulaire, juste après le tableau : même carte visuelle. */
.mt3d-panier-avantages {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 20px 16px;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.mt3d-panier-avantage {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.mt3d-panier-avantage__icone {
	width: 31px;
	height: 31px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: var(--wp--preset--color--chaux);
	color: var(--wp--preset--color--brand-indigo);
}

.mt3d-panier-avantage__icone svg {
	width: 16px;
	height: 16px;
}

.mt3d-panier-avantage strong {
	display: block;
	font-size: 13px;
	margin-bottom: 2px;
}

.mt3d-panier-avantage span {
	display: block;
	font-size: 11.5px;
	color: #667085;
	line-height: 1.4;
}

/* En-tête de carte "Votre création · N article(s)" (voir mt3d_panier_entete()
 * dans inc/panier.php), juste avant le tableau. */
.mt3d-panier-entete {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 16px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mt3d-panier-entete h2 {
	font-size: 18px;
	margin: 0;
}

.mt3d-panier-entete__compte {
	font-size: 13px;
	color: #667085;
}

/* Tableau du panier — restylé en carte via CSS grid (une grille par ligne
 * produit) plutôt que laissé en vraie table à partir d'un certain palier :
 * le calcul de largeur des colonnes d'une <table> (auto comme fixed) s'est
 * révélé imprévisible dès que la colonne produit devient haute (tags +
 * détails + plusieurs lignes) — la grille définit des zones nommées, donc
 * un résultat fixe et prévisible à toutes les tailles d'écran. */
table.cart,
table.cart tbody {
	display: block;
	width: 100%;
}

table.cart {
	margin: 0;
}

/* thead masqué visuellement (remplacé par l'en-tête de carte ci-dessus pour
 * les yeux) mais gardé accessible : les libellés de colonnes restent dans
 * l'arbre d'accessibilité pour les technologies d'assistance. */
table.cart thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

table.cart tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 92px 1fr;
	grid-template-areas:
		"thumb name"
		"thumb price"
		"thumb actions";
	column-gap: 16px;
	row-gap: 10px;
	padding: 20px 16px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

table.cart td {
	padding: 0;
	border: none;
}

table.cart td.product-remove {
	grid-area: actions;
	align-self: center;
	justify-self: start;
}

table.cart td.product-remove .remove {
	font-size: 13px;
	color: #747d91;
	text-decoration: underline;
}

table.cart td.product-remove .remove:hover {
	color: var(--wp--preset--color--error);
}

table.cart td.product-thumbnail {
	grid-area: thumb;
}

table.cart td.product-thumbnail img {
	display: block;
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: 14px;
	background: var(--wp--preset--color--chaux);
}

table.cart td.product-name {
	grid-area: name;
}

/* Le prix unitaire ("product-price") fait doublon avec le sous-total dès
 * que la quantité est fixée à 1 (le cas courant ici) — un seul montant
 * affiché, le sous-total (juste, y compris si la quantité change). */
table.cart td.product-price {
	display: none;
}

table.cart td.product-subtotal {
	grid-area: price;
	font-weight: 800;
	font-size: 17px;
}

table.cart td.product-quantity {
	grid-area: actions;
	align-self: center;
	justify-self: end;
}

/* Pastilles sous le nom (voir mt3d_panier_tags_produit() dans inc/panier.php). */
.mt3d-panier-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 6px 0;
}

.mt3d-panier-tag {
	background: var(--wp--preset--color--chaux);
	color: var(--wp--preset--color--brand-indigo);
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
}

table.cart td.product-name {
	font-weight: 700;
	font-size: 15px;
}

table.cart td.product-name a {
	font-weight: 700;
}

/* Détails du tableau (format, style, cadre, support, remise) sous le nom du
 * produit — sans ça, le <dl> natif s'affiche avec l'indentation par défaut
 * du navigateur (dd décalé de 40px), difficile à lire. */
table.cart .variation {
	margin: 8px 0 0;
	font-weight: 400;
	font-size: 13px;
	color: #667085;
	line-height: 1.7;
}

table.cart .variation dt,
table.cart .variation dd {
	display: inline;
	margin: 0;
}

table.cart .variation dt::after {
	content: " ";
}

table.cart .variation dd {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

table.cart .variation dd p {
	display: inline;
	margin: 0;
}

table.cart .variation dd::after {
	content: "";
	display: block;
}

/* Sélecteur de quantité — boutons −/+ ajoutés par assets/js/cart.js autour
 * du champ number natif (qui reste utilisable seul si le script échoue). */
.quantity {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	padding: 5px;
}

.quantity .qty {
	width: 40px;
	min-height: 34px;
	padding: 0 4px;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: var(--wp--preset--color--ink);
	/* Cache les flèches natives du champ number : les boutons −/+ les remplacent. */
	appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.mt3d-qty-btn {
	width: 28px;
	height: 28px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 7px;
	background: var(--wp--preset--color--chaux);
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.mt3d-qty-btn:hover {
	background: #e5e7ef;
}

/* ≥768px — la grille par ligne prend une 3ᵉ colonne (le prix, aligné à
 * droite du nom) et l'image grandit ; la ligne coupon/mise à jour, elle,
 * n'a jamais quitté un flux normal (elle n'est pas concernée par la grille
 * ci-dessus, qui ne s'applique qu'aux lignes produit). */
@media (min-width: 768px) {
	table.cart tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 132px 1fr 110px;
		grid-template-areas:
			"thumb name price"
			"thumb actions actions";
		padding: 24px;
	}

	table.cart td.product-thumbnail img {
		width: 132px;
		height: 132px;
	}

	table.cart td.product-name {
		font-size: 16px;
	}

	table.cart td.product-subtotal {
		align-self: start;
		text-align: right;
		font-size: 20px;
	}

	table.cart td.product-remove,
	table.cart td.product-quantity {
		align-self: end;
	}

	table.cart tr td.actions {
		padding: 20px 24px 24px;
	}

	table.cart tr td.actions .coupon {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		vertical-align: middle;
		margin: 0 12px 0 0;
	}

	.mt3d-panier-avantages {
		grid-template-columns: 1fr 1fr;
		padding: 22px 24px;
	}

	.mt3d-panier-entete {
		padding: 22px 24px;
	}
}

/* ≥1024px — panier / récap-paiement côte à côte, récap collant. */
@media (min-width: 1024px) {
	.woocommerce {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		align-items: start;
		gap: 40px;
	}

	.cart-collaterals {
		position: sticky;
		top: 96px;
	}
}