/**
 * API Poker Isséenne — habillage de la boutique
 * (page Boutique + pages de catégories produit)
 *
 * À enregistrer dans : votre-theme-enfant/api-shop.css
 * Chargé uniquement sur les pages boutique via functions.php.
 */

:root{
	--api-green-900:#0f3327;
	--api-green-800:#173f2f;
	--api-cream:#fbf8f2;
	--api-ink:#1c2620;
	--api-brass:#c9963c;
	--api-brass-soft:rgba(201,150,60,.14);
	--api-muted:#6b7a72;
}

/* ---------- Mise en page générale de la page Boutique ---------- */
.api-shop{
	display:flex;
	gap:32px;
	align-items:flex-start;
	flex-wrap:wrap;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}
.api-shop__nav{
	flex:0 0 260px;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.api-shop__nav-link{
	display:block;
	background:var(--api-brass-soft);
	color:var(--api-green-800);
	text-decoration:none;
	font-weight:600;
	font-size:14.5px;
	text-align:center;
	border-radius:12px;
	padding:16px 18px;
	transition:background .15s ease,color .15s ease;
}
.api-shop__nav-link:hover,
.api-shop__nav-link:focus-visible{
	background:var(--api-brass);
	color:var(--api-cream);
	outline:none;
}
.api-shop__nav-link.is-active{
	background:var(--api-green-900);
	color:var(--api-cream);
}
.api-shop__nav-link--account{
	margin-top:10px;
	border:1.5px solid var(--api-brass);
	background:transparent;
}
.api-shop__nav-link--account:hover{
	background:var(--api-brass);
	color:var(--api-green-900);
}
.api-shop__nav-link--child{
	margin-left:16px;
	padding:11px 16px;
	font-size:13.5px;
	background:transparent;
	border:1px solid var(--api-brass-soft);
}
.api-shop__nav-link--child.is-active{
	background:var(--api-brass-soft);
	color:var(--api-green-900);
	border-color:var(--api-brass);
}
.api-shop__products{
	flex:1 1 600px;
	min-width:0;
}
.api-shop__products:empty{
	display:none;
}

/* ---------- Mise en grille de la page Boutique ----------
 * WooCommerce injecte le résultat/tri/grille de produits juste APRÈS
 * le contenu de la page (.page-description contenant notre nav), au
 * même niveau dans <article class="col-md-12">, pas à l'intérieur.
 * On transforme donc cet article en grille CSS à deux colonnes et on
 * place explicitement chaque élément, plutôt que de compter sur un
 * seul conteneur flex qui ne les engloberait pas tous.
 */
.woocommerce-page .page-area article.col-md-12{
	display:grid;
	grid-template-columns:260px 1fr;
	gap:24px 32px;
	align-items:start;
}
/* Empêche un conteneur parent du thème de centrer verticalement le
   contenu quand il est plus court que l'écran (ex. une seule sous-
   catégorie avec un seul produit) — le menu et le premier produit
   doivent toujours démarrer en haut, jamais au centre de la page. */
.woocommerce-page #site-content,
.woocommerce-page .page-area,
.woocommerce-page .page-area .row{
	display:block !important;
	align-items:flex-start !important;
	min-height:0 !important;
}
.woocommerce-page .page-area article.col-md-12 > .page-title{
	grid-column:1 / -1;
}
.woocommerce-page .page-area article.col-md-12 > .api-shop__nav{
	grid-column:1;
	grid-row:2 / 6;
}
.woocommerce-page .page-area article.col-md-12 > .page-description:empty{
	display:none;
}
.woocommerce-page .page-area article.col-md-12 > .woocommerce-notices-wrapper:empty{
	display:none;
}
.woocommerce-page .page-area article.col-md-12 > .woocommerce-notices-wrapper{
	grid-column:2;
	grid-row:1;
}

/* ---------- Notices (succès / info / erreur) sur la boutique ----------
 * Jamais stylées jusqu'ici : seule la page "Mon compte" avait cette règle.
 */
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info{
	border-top-color:var(--api-brass) !important;
	background:var(--api-brass-soft) !important;
	color:var(--api-ink) !important;
	border-radius:12px;
	padding:14px 18px 14px 48px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
}
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before{
	color:var(--api-brass) !important;
}
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-info .button{
	background:var(--api-green-900) !important;
	color:var(--api-cream) !important;
	border:1px solid var(--api-green-900) !important;
	border-radius:999px !important;
	padding:10px 20px !important;
	font-weight:600 !important;
	text-transform:none !important;
	box-shadow:none !important;
}
.woocommerce-page .woocommerce-message .button:hover,
.woocommerce-page .woocommerce-info .button:hover{
	background:var(--api-brass) !important;
	border-color:var(--api-brass) !important;
	color:var(--api-green-900) !important;
}
@media (max-width:768px){
	.woocommerce-page .page-area article.col-md-12{
		display:block;
	}
	.woocommerce-page .page-area article.col-md-12 > .api-shop__nav,
	.woocommerce-page .page-area article.col-md-12 > .woocommerce-ordering,
	.woocommerce-page .page-area article.col-md-12 > .woocommerce-result-count,
	.woocommerce-page .page-area article.col-md-12 > ul.products{
		margin-bottom:22px !important;
	}
}

/* ---------- Titre de page masqué ----------
 * Scopé à la boutique uniquement : n'affecte aucune autre page du site.
 */
.woocommerce-page .page-area .page-title{
	display:none;
}

/* ---------- Repositionnement : tri en haut à droite, nombre de
   résultats aligné avec la pagination en bas ---------- */
.woocommerce-page .page-area article.col-md-12 > .woocommerce-ordering{
	grid-column:2;
	grid-row:1;
	justify-self:end;
	align-self:start;
	margin:0;
}
.woocommerce-page .page-area article.col-md-12 > ul.products{
	grid-column:2;
	grid-row:2;
}
.woocommerce-page .page-area article.col-md-12 > .woocommerce-result-count{
	grid-column:2;
	grid-row:3;
	justify-self:start;
	align-self:center;
	margin:0;
}
.woocommerce-page .page-area article.col-md-12 > nav.woocommerce-pagination{
	grid-column:2;
	grid-row:3;
	justify-self:end;
	align-self:center;
	margin:0;
}

/* ---------- Cartes produit WooCommerce (boutique + catégories) ---------- */
.woocommerce ul.products{
	display:grid !important;
	grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important;
	gap:18px !important;
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{
	content:none !important;
	display:none !important;
}
.woocommerce ul.products li.product{
	float:none !important;
	width:auto !important;
	margin:0 !important;
	background:var(--api-cream);
	border-radius:16px;
	padding:16px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
	transition:transform .15s ease,box-shadow .15s ease;
	display:flex;
	flex-direction:column;
	min-height:190px;
}
.woocommerce ul.products li.product:hover{
	transform:translateY(-4px);
	box-shadow:0 14px 28px -12px rgba(15,51,39,.25);
}
.woocommerce ul.products li.product a{
	text-decoration:none;
	color:inherit;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
	display:grid;
	grid-template-columns:110px 1fr;
	column-gap:16px;
	align-items:start;
	text-align:left;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
	grid-column:1;
	grid-row:1 / span 4;
	height:130px;
	min-height:130px;
	max-height:130px;
	width:100%;
	object-fit:contain;
	object-position:center center;
	background:#fff;
	border-radius:12px;
	margin:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	grid-column:2;
	font-size:15px;
	font-weight:600;
	color:var(--api-ink);
	margin:0 0 4px;
	line-height:1.35;
}
.woocommerce ul.products li.product .star-rating{
	grid-column:2;
	color:var(--api-brass);
	margin:0 0 4px;
}
.woocommerce ul.products li.product .price{
	grid-column:2;
	color:var(--api-green-800) !important;
	font-weight:600;
	font-size:14px;
	margin:0 0 6px;
}
.woocommerce ul.products li.product .api-shop-excerpt{
	grid-column:2;
	font-size:13px;
	color:var(--api-muted);
	line-height:1.5;
	margin:0;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.woocommerce ul.products li.product .button{
	margin-top:14px;
	width:100%;
	background:var(--api-green-900) !important;
	color:var(--api-cream) !important;
	border:1px solid var(--api-green-900) !important;
	border-radius:999px !important;
	padding:10px 22px !important;
	font-weight:600 !important;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif !important;
	text-transform:none !important;
	letter-spacing:0 !important;
	box-shadow:none !important;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.woocommerce ul.products li.product .button:hover{
	background:var(--api-brass) !important;
	border-color:var(--api-brass) !important;
	color:var(--api-green-900) !important;
}

@media (max-width:768px){
	.api-shop{flex-direction:column;}
	.api-shop__nav{flex:0 0 auto;width:100%;}
}

/* ---------- Panier (shortcode [woocommerce_cart]) : habillage complet ----------
 * Objectif : faire ressembler la page Panier au reste de la boutique
 * (cartes crème arrondies, vert sapin, doré laiton, police Inter,
 * boutons pilule).
 *
 * Depuis le retrait d'Elementor de cette page (28/07/2026, cf. CLAUDE.md),
 * le panier est affiché via le shortcode classique [woocommerce_cart]
 * (balisage table.shop_table / cart_totals), plus via le bloc Panier
 * Gutenberg. Tout est scopé à .woocommerce-cart (body class de la page
 * Panier) pour ne jamais affecter les tableaux "shop_table" du compte/
 * des commandes, qui partagent les mêmes classes CSS.
 */

/* La grille 2 colonnes de la page Boutique (nav catégories + produits)
   ne doit pas s'appliquer au Panier, qui n'a pas cette nav : on repasse
   en bloc simple pour éviter que le tableau panier soit tronqué/décalé. */
.woocommerce-cart .page-area article.col-md-12{
	display:block !important;
}

.woocommerce-cart .entry-content{
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	color:var(--api-ink);
}

/* Ordre d'affichage : tableau produits > Crédit Wallet Poker > Total panier.
 * Le bandeau crédit ([poker_wallet_apply_credit]) est un shortcode à part,
 * placé AVANT [woocommerce_cart] dans le contenu de la page — donc avant
 * même le <div class="woocommerce"> qui contient le formulaire panier et
 * les totaux. On neutralise la boîte ".woocommerce" (display:contents,
 * elle n'a pas de style propre) pour que son contenu (formulaire +
 * totaux) rejoigne le même contexte flex que le bandeau crédit, puis on
 * réordonne avec "order" sans toucher au HTML ni au shortcode.
 */
.woocommerce-cart .entry-content{
	display:flex;
	flex-direction:column;
}
.woocommerce-cart .entry-content > .woocommerce{
	display:contents;
}
.woocommerce-cart .woocommerce-notices-wrapper{
	order:1;
}
.woocommerce-cart .woocommerce-cart-form{
	order:2;
}
.woocommerce-cart .pw-apply-credit{
	order:3;
}
.woocommerce-cart .cart-collaterals{
	order:4;
}

/* Zone produits : carte crème arrondie, comme les cartes produit boutique */
.woocommerce-cart .woocommerce-cart-form{
	display:block;
	background:var(--api-cream);
	border-radius:16px;
	padding:20px 24px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
	margin-bottom:24px;
	overflow-x:auto;
}
.woocommerce-cart table.shop_table.cart{
	border:none;
	border-collapse:collapse;
	table-layout:fixed;
	width:100%;
}
.woocommerce-cart table.shop_table.cart thead th{
	border:none !important;
	border-bottom:1px solid var(--api-brass-soft) !important;
	font-size:12.5px;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--api-muted);
	font-weight:600;
	padding:0 10px 10px;
}
.woocommerce-cart table.shop_table.cart tbody td{
	border:none !important;
	border-bottom:1px solid var(--api-brass-soft) !important;
	padding:14px 10px;
	vertical-align:middle;
	overflow-wrap:break-word;
	word-break:break-word;
}
.woocommerce-cart table.shop_table.cart tr:last-child td{
	border-bottom:none !important;
}
/* Largeurs fixes des colonnes techniques, le reste (nom produit) prend
   le reste de la place — sans table-layout:fixed + ces largeurs, la
   colonne "produit" (avec ses variations : taille, broderie...) forçait
   le tableau à s'étaler sur plusieurs milliers de pixels de large. */
.woocommerce-cart th.product-remove,
.woocommerce-cart td.product-remove{
	width:32px;
	padding-left:0 !important;
	padding-right:0 !important;
}
.woocommerce-cart th.product-thumbnail,
.woocommerce-cart td.product-thumbnail{
	width:80px;
}
.woocommerce-cart th.product-price,
.woocommerce-cart td.product-price,
.woocommerce-cart th.product-subtotal,
.woocommerce-cart td.product-subtotal{
	width:100px;
}
.woocommerce-cart th.product-quantity,
.woocommerce-cart td.product-quantity{
	width:120px;
}
.woocommerce-cart td.product-thumbnail img{
	border-radius:12px;
	background:#fff;
	max-width:100%;
	height:auto;
}
.woocommerce-cart td.product-name a{
	color:var(--api-green-800);
	font-weight:600;
	text-decoration:none;
}
.woocommerce-cart td.product-name a:hover{
	color:var(--api-brass);
}
.woocommerce-cart td.product-name dl.variation,
.woocommerce-cart td.product-name .wc-item-meta{
	color:var(--api-muted);
	font-size:13px;
}
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal{
	color:var(--api-green-800);
	font-weight:600;
}
.woocommerce-cart td.product-remove a.remove{
	color:var(--api-muted) !important;
	background:transparent !important;
	border-radius:999px;
}
.woocommerce-cart td.product-remove a.remove:hover{
	color:var(--api-cream) !important;
	background:var(--api-brass) !important;
}

/* Sélecteur de quantité en pilule au lieu du champ carré par défaut */
.woocommerce-cart .quantity .qty{
	border:1px solid var(--api-brass-soft);
	border-radius:999px;
	padding:8px 14px;
	width:64px;
	text-align:center;
	font-weight:600;
	color:var(--api-ink);
}

/* Ligne "Code promo" + "Mettre à jour le panier"
 * Important : NE PAS mettre display:flex directement sur ce <td>. Sous
 * Chrome, avec table-layout:fixed sur le tableau parent, un <td colspan>
 * qui devient display:flex perd le calcul de largeur normal des cellules
 * fusionnées (bug constaté le 28/07/2026 : la cellule se retrouvait
 * réduite à ~32px, texte du bouton empilé lettre par lettre). On garde
 * donc le <td> en display:table-cell (comportement par défaut) et on
 * fait flotter les deux blocs enfants (.coupon à gauche, bouton "Mettre
 * à jour" à droite) pour obtenir la même mise en page visuelle.
 */
.woocommerce-cart td.actions{
	display:table-cell;
	vertical-align:middle;
	overflow:hidden;
	border-bottom:none !important;
	padding:20px 24px !important;
}
.woocommerce-cart .coupon{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:nowrap;
	float:left;
	max-width:calc(100% - 210px);
}
.woocommerce-cart .coupon .input-text{
	border:1px solid var(--api-brass-soft);
	border-radius:999px;
	padding:10px 18px;
	font-family:inherit;
	flex:1 1 180px;
	min-width:140px;
	max-width:280px;
}
/* Bouton "Appliquer le code promo" : juste à côté du champ, jamais
 * repoussé sur une nouvelle ligne (demande utilisateur du 28/07/2026,
 * capture annotée montrant le bouton sous le champ au lieu d'à côté). */
.woocommerce-cart .coupon button[name="apply_coupon"]{
	flex:0 0 auto;
	white-space:nowrap;
}
.woocommerce-cart td.actions .button{
	background:transparent !important;
	color:var(--api-green-900) !important;
	border:1px solid var(--api-green-900) !important;
	border-radius:999px !important;
	padding:10px 20px !important;
	font-weight:600 !important;
	text-transform:none !important;
	box-shadow:none !important;
	transition:background .15s ease,color .15s ease;
}
.woocommerce-cart td.actions .button:hover{
	background:var(--api-green-900) !important;
	color:var(--api-cream) !important;
}
.woocommerce-cart td.actions .button[name="update_cart"]{
	background:var(--api-green-900) !important;
	color:var(--api-cream) !important;
	float:right;
	white-space:nowrap;
}
.woocommerce-cart td.actions .button[name="update_cart"]:hover{
	background:var(--api-brass) !important;
	border-color:var(--api-brass) !important;
	color:var(--api-green-900) !important;
}

/* Colonne "Total panier" : carte crème, même traitement que les cartes
   du tableau de bord "Mon compte" */
.woocommerce-cart .cart_totals{
	background:var(--api-cream);
	border-radius:16px;
	padding:22px 24px 26px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
	max-width:420px;
}
.woocommerce-cart .cart_totals h2{
	font-family:'Fraunces',serif;
	color:var(--api-green-900);
	margin-top:0;
}
.woocommerce-cart .cart_totals table.shop_table{
	border:none;
}
.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td{
	border:none !important;
	border-bottom:1px solid var(--api-brass-soft) !important;
	padding:12px 0;
	color:var(--api-ink);
}
.woocommerce-cart .cart_totals table.shop_table tr:last-child th,
.woocommerce-cart .cart_totals table.shop_table tr:last-child td{
	border-bottom:none !important;
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td{
	color:var(--api-green-900);
	font-weight:700;
	font-size:1.15em;
}

/* Bouton "Valider la commande" : pilule vert sapin, comme les boutons boutique */
.woocommerce-cart .wc-proceed-to-checkout{
	padding:0;
	margin-top:16px;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{
	display:block;
	width:100%;
	text-align:center;
	background:var(--api-green-900) !important;
	color:var(--api-cream) !important;
	border:1px solid var(--api-green-900) !important;
	border-radius:999px !important;
	padding:14px 22px !important;
	font-weight:600 !important;
	text-transform:none !important;
	box-shadow:none !important;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover{
	background:var(--api-brass) !important;
	border-color:var(--api-brass) !important;
	color:var(--api-green-900) !important;
}

@media (max-width:768px){
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart_totals{
		padding-left:16px;
		padding-right:16px;
	}
	.woocommerce-cart table.shop_table.cart{
		font-size:13px;
	}
	/* En dessous de 768px, WooCommerce bascule le tableau en mise en page
	   "responsive" (une carte empilée par produit, thead masqué) : nos
	   largeurs de colonnes fixes ne doivent s'appliquer qu'au tableau
	   desktop, sinon elles cassent cet empilement mobile. */
	.woocommerce-cart table.shop_table.cart{
		table-layout:auto;
	}
	.woocommerce-cart th.product-remove,
	.woocommerce-cart td.product-remove,
	.woocommerce-cart th.product-thumbnail,
	.woocommerce-cart td.product-thumbnail,
	.woocommerce-cart th.product-price,
	.woocommerce-cart td.product-price,
	.woocommerce-cart th.product-subtotal,
	.woocommerce-cart td.product-subtotal,
	.woocommerce-cart th.product-quantity,
	.woocommerce-cart td.product-quantity{
		width:auto;
	}

	/* Ligne "Code promo" / "Mettre à jour le panier" : tout centré et
	   empilé sur mobile, avec un espace plus généreux entre le bouton
	   "Appliquer le code promo" et le bouton "Mettre à jour le panier".
	   Ici le tableau repasse en table-layout:auto (cf. plus haut), donc
	   le bug de largeur des cellules flex+colspan ne s'applique plus :
	   on peut repasser .coupon et le bouton en display:block, sans les
	   flottants utilisés en version desktop. */
	.woocommerce-cart td.actions{
		display:block;
		text-align:center;
		padding:20px 16px !important;
	}
	.woocommerce-cart .coupon{
		display:flex;
		flex-direction:column;
		align-items:center;
		float:none;
		width:100%;
		max-width:none;
		gap:10px;
	}
	.woocommerce-cart .coupon .input-text{
		flex:1 1 auto;
		width:100%;
		max-width:280px;
	}
	.woocommerce-cart td.actions .button[name="update_cart"]{
		float:none;
		display:inline-block;
		margin-top:14px;
	}
}

/* ---------- Commande (shortcode [woocommerce_checkout]) : habillage complet ----------
 * Page "Validation de la commande" (post 8280), Elementor retiré le 28/07/2026
 * (contenu remplacé par le shortcode classique, même traitement que la page
 * Panier). Structure WooCommerce classique :
 *   form.checkout.woocommerce-checkout
 *     > div.col2-set          (col-1 = facturation, col-2 = livraison)
 *     > h3                    ("Votre commande")
 *     > div.woocommerce-checkout-review-order
 *         > table.woocommerce-checkout-review-order-table
 *         > div.woocommerce-checkout-payment (moyens de paiement + bouton)
 *
 * Important : comme sur le panier (cf. plus haut), ne jamais mettre
 * display:flex directement sur un <td>/<th> avec colspan à l'intérieur
 * d'un tableau — ce tableau n'utilise donc que padding/bordures, pas de
 * table-layout:fixed ni de flex sur les cellules.
 */
.woocommerce-checkout .page-area article.col-md-12{ display:block !important; }
.woocommerce-checkout .entry-content{
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	color:var(--api-ink);
}

/* Bloc facturation / livraison : empilé verticalement (facturation en
 * haut, livraison en dessous), chaque bloc dans son propre encadré. La
 * largeur max de 640px utilisée jusqu'en v1.3.20 rendait les encadrés
 * bien plus étroits que le reste de la page (récapitulatif, moyens de
 * paiement) — elle est retirée pour que les encadrés utilisent toute la
 * largeur disponible, comme demandé (capture de référence utilisateur). */
.woocommerce-checkout .col2-set{
	display:block;
	max-width:none;
	width:100%;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{
	width:100%;
}
.woocommerce-checkout h3{
	font-family:'Fraunces',serif;
	color:var(--api-green-900);
	margin:0 0 14px;
	font-size:1.2em;
}

/* Chaque groupe de champs (facturation / livraison / notes de commande)
 * dans son propre encadré crème, cohérent avec les autres cartes de la
 * page (récapitulatif, moyens de paiement). */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{
	background:var(--api-cream);
	border-radius:16px;
	padding:20px 24px;
	margin-bottom:18px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
}
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3{
	margin-top:0;
}

/* Champs organisés en grille 2 colonnes (prénom/nom, puis téléphone/
 * e-mail juste en dessous, puis code postal/ville) plutôt qu'empilés un
 * par ligne : plus compact et plus lisible d'un coup d'œil. Seuls les
 * champs qui ont besoin de toute la largeur (pays, adresse, complément —
 * WooCommerce les marque déjà "form-row-wide") restent sur une ligne
 * pleine ; les autres se placent 2 par 2 (le champ département/state,
 * masqué par défaut pour la France, n'occupe aucune cellule puisqu'il
 * reste display:none).
 *
 * L'ordre voulu (téléphone sous prénom, e-mail sous nom, avant pays/
 * adresse) ne correspond pas à l'ordre naturel des champs dans le
 * formulaire WooCommerce (prénom, nom, pays, adresse..., téléphone,
 * e-mail) : on le réécrit avec la propriété CSS "order" plutôt qu'en
 * plaçant chaque champ à une position de grille fixe (grid-row/grid-
 * column), pour que le même ordre fonctionne aussi bien en grille 2
 * colonnes (desktop) qu'en une seule colonne (mobile, cf. media query
 * plus bas) sans réglage séparé. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
	display:grid;
	grid-template-columns:1fr 1fr;
	column-gap:20px;
}
#billing_first_name_field{ order:1; }
#billing_last_name_field{ order:2; }
#billing_phone_field{ order:3; }
#billing_email_field{ order:4; }
#billing_country_field{ order:5; }
#billing_address_1_field{ order:6; }
#billing_address_2_field{ order:7; }
#billing_state_field{ order:8; }
#billing_postcode_field{ order:9; }
#billing_city_field{ order:10; }

/* Même logique côté livraison ("Expédier à une adresse différente ?") :
 * ce bloc n'a pas de champ e-mail, mais il a bien un champ Téléphone
 * (shipping_phone_field) qu'on remonte sous Prénom, comme en facturation. */
#shipping_first_name_field{ order:1; }
#shipping_last_name_field{ order:2; }
#shipping_phone_field{ order:3; }
#shipping_country_field{ order:4; }
#shipping_address_1_field{ order:5; }
#shipping_address_2_field{ order:6; }
#shipping_state_field{ order:7; }
#shipping_postcode_field{ order:8; }
#shipping_city_field{ order:9; }

/* WooCommerce pose width:47% en dur sur .form-row-first/.form-row-last
 * (pensé pour un layout flottant classique, pas pour une grille) : dans
 * notre grille, cette largeur se calculait sur la cellule (déjà 1 champ
 * de large) et rendait Prénom/Nom nettement plus étroits que les autres
 * champs (ex. Téléphone, Code postal) qui occupent, eux, toute leur
 * cellule. On force donc ces deux champs à remplir leur cellule comme
 * les autres. */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{
	float:none;
	width:100% !important;
}
#billing_country_field,
#billing_address_1_field,
#billing_address_2_field,
#shipping_country_field,
#shipping_address_1_field,
#shipping_address_2_field{
	grid-column:1 / -1;
}

/* Case à cocher "Expédier à une adresse différente ?" : traitée comme
 * une ligne de bascule compacte (pas un gros titre Fraunces), dans le
 * même encadré que les champs de livraison qu'elle révèle. Décochée par
 * défaut à l'arrivée sur la page (cf. api-checkout.js) : WooCommerce la
 * pré-coche parfois d'après l'adresse enregistrée du client, ce qui
 * n'est pas ce qu'on veut ici. */
.woocommerce-checkout h3#ship-to-different-address{
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	font-size:1em;
	font-weight:600;
	color:var(--api-green-800);
	margin:0;
}
.woocommerce-checkout h3#ship-to-different-address label{
	display:flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
}
.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"]{
	width:18px;
	height:18px;
	accent-color:var(--api-green-900);
	cursor:pointer;
}
.woocommerce-checkout .woocommerce-shipping-fields .shipping_address{
	margin-top:16px;
	padding-top:16px;
	border-top:1px solid var(--api-brass-soft);
}

/* Champs de formulaire, alignés sur le style "Mon compte", en version
 * compacte (espacement resserré pour rester lisible dans un encadré
 * plus étroit qu'avant). */
.woocommerce-checkout .form-row{
	margin-bottom:14px;
}
.woocommerce-checkout .form-row label{
	font-weight:600;
	color:var(--api-green-800);
	font-size:13px;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	margin-bottom:4px;
}
.woocommerce-checkout .form-row .required{
	color:var(--api-brass);
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single{
	border:1px solid rgba(23,63,47,.18) !important;
	border-radius:10px !important;
	padding:10px 14px !important;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	box-shadow:none !important;
	height:auto !important;
}
.woocommerce-checkout .select2-container .select2-selection--single{
	padding:6px 14px !important;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus{
	border-color:var(--api-brass) !important;
	outline:none;
	box-shadow:0 0 0 3px var(--api-brass-soft) !important;
}

/* Récapitulatif de commande : même carte crème que le panier */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{
	background:var(--api-cream);
	border-radius:16px;
	padding:22px 24px 26px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table{
	border:none;
	width:100%;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td{
	border:none !important;
	border-bottom:1px solid var(--api-brass-soft) !important;
	padding:12px 0;
	color:var(--api-ink);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr:last-child th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr:last-child td{
	border-bottom:none !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td{
	color:var(--api-green-900);
	font-weight:700;
	font-size:1.15em;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th{
	font-family:'Fraunces',serif;
	color:var(--api-green-900);
}

/* Moyens de paiement : un style volontairement un peu différent des
 * autres cartes du site (plus aéré, coins plus arrondis, accent de
 * couleur sur le côté plutôt qu'un contour complet) pour que cette zone
 * se distingue visuellement comme une zone de choix, pas juste une
 * carte de contenu de plus. Fond blanc (contraste avec la carte crème
 * du récapitulatif qui les entoure), espacement généreux entre les
 * options, radio agrandi. */
.woocommerce-checkout ul.wc_payment_methods{
	list-style:none !important;
	margin:22px 0 0 !important;
	padding:0 !important;
	display:flex;
	flex-direction:column;
	gap:14px;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method{
	background:#fff;
	border:1px solid rgba(23,63,47,.08);
	border-left:4px solid transparent;
	border-radius:18px;
	padding:18px 22px;
	margin-bottom:0;
	box-shadow:0 2px 8px rgba(15,51,39,.05);
	transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:hover{
	box-shadow:0 6px 16px rgba(15,51,39,.09);
	transform:translateY(-1px);
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked){
	border-left-color:var(--api-green-900);
	background:var(--api-brass-soft);
	box-shadow:0 2px 8px rgba(15,51,39,.08);
}
/* Le <label> n'enveloppe PAS le radio dans le HTML généré par
 * WooCommerce (<input>...<label for="...">) : les deux sont frères, pas
 * imbriqués. Mettre le label seul en display:flex (comme avant) le
 * transformait donc en bloc qui redescendait sous le radio au lieu de
 * rester sur la même ligne — piège constaté en test (capture utilisateur
 * du 28/07/2026 montrant le libellé sous le rond au lieu d'à côté). On
 * passe donc le <li> lui-même en flex pour aligner radio + libellé sur
 * une même ligne, et on fait passer le payment_box (détails de la
 * méthode choisie) sur sa propre ligne en dessous via flex-wrap. */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	column-gap:14px;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method input[type="radio"]{
	order:1;
	width:21px;
	height:21px;
	flex:0 0 auto;
	margin:0;
	accent-color:var(--api-green-900);
	cursor:pointer;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label{
	order:2;
	flex:1 1 auto;
	margin:0;
	font-weight:600;
	font-size:15px;
	color:var(--api-ink);
	cursor:pointer;
}

/* Détail de la méthode sélectionnée (ex. solde Wallet Poker) : sur sa
 * propre ligne pleine largeur sous radio + libellé (flex-basis:100%),
 * dans une carte blanche nette plutôt que le bloc gris/mauve par défaut
 * de WooCommerce (`#payment` et `.payment_box` ont tous les deux un
 * fond imposé par le thème parent, cf. woocommerce.css — surchargés ici
 * avec !important, sinon leur sélecteur plus spécifique l'emporte). */
.woocommerce-checkout .payment_box{
	order:3;
	flex:1 1 100%;
	background:#fff !important;
	border:1px solid rgba(23,63,47,.08) !important;
	border-radius:12px !important;
	margin:14px 0 0 !important;
	padding:14px 16px !important;
}
/* Triangle gris natif du thème parent (`#payment div.payment_box::before`
 * avec un id dans le sélecteur, donc plus spécifique que nos règles sans
 * id : repéré par l'utilisateur directement dans le CSS du thème parent
 * — `border:1em solid #dcd7e2`). On neutralise avec le même niveau de
 * spécificité (id inclus) + !important pour être sûr de gagner. */
.woocommerce-checkout .payment_box:before,
.woocommerce-checkout #payment div.payment_box::before{
	display:none !important;
	border:none !important;
}
.woocommerce-checkout .payment_box p{
	margin:0 0 8px;
	font-size:13.5px;
	color:var(--api-muted);
}
.woocommerce-checkout .payment_box p:last-child{
	margin-bottom:0;
}
/* Solde Wallet Poker : mis en avant façon badge plutôt qu'une ligne de
 * texte comme les autres, pour qu'il se voie au premier coup d'œil. */
.woocommerce-checkout .payment_box.payment_method_poker_wallet p:last-child{
	display:inline-flex;
	align-items:center;
	background:var(--api-brass-soft);
	color:var(--api-green-900);
	font-weight:700;
	font-size:14px;
	border-radius:999px;
	padding:8px 16px;
}

/* Le fond gris/mauve autour de toute la zone "moyens de paiement"
 * (#payment) vient du thème parent (woocommerce.css) — retiré pour
 * laisser les cartes blanches des méthodes se détacher directement sur
 * la carte crème du récapitulatif. */
.woocommerce-checkout #payment{
	background:transparent !important;
	border-radius:0 !important;
}

/* Conditions générales + bouton de validation */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
	margin:18px 0;
	font-size:13px;
	color:var(--api-muted);
}
.woocommerce-checkout #place_order{
	display:block;
	width:100%;
	text-align:center;
	background:var(--api-green-900) !important;
	color:var(--api-cream) !important;
	border:1px solid var(--api-green-900) !important;
	border-radius:999px !important;
	padding:16px 22px !important;
	font-weight:600 !important;
	font-size:1.05em !important;
	text-transform:none !important;
	box-shadow:none !important;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.woocommerce-checkout #place_order:hover{
	background:var(--api-brass) !important;
	border-color:var(--api-brass) !important;
	color:var(--api-green-900) !important;
}

@media (max-width:768px){
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields{
		padding:16px;
	}
	/* Sous 768px, la grille 2 colonnes des champs repasse en une seule
	   colonne : pas assez de largeur pour garder "Code postal"/"Ville" ou
	   "Téléphone"/"E-mail" côte à côte sans les écraser. */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
		grid-template-columns:1fr;
	}
	.woocommerce-checkout #order_review,
	.woocommerce-checkout .woocommerce-checkout-review-order{
		padding-left:16px;
		padding-right:16px;
	}
	.woocommerce-checkout table.woocommerce-checkout-review-order-table{
		font-size:13px;
	}
	.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method{
		padding:16px 18px;
	}
}

/* ---------- Commande en 2 étapes (Adresse -> Récapitulatif) ----------
 * Ajouté par assets/js/api-checkout.js : la page Commande scinde le
 * formulaire en deux étapes visuelles sans changer sa structure HTML
 * WooCommerce (form.woocommerce-checkout > #customer_details, puis
 * #order_review_heading + #order_review). Étape 1 = adresse de
 * facturation/livraison, étape 2 = récapitulatif produits + paiement.
 * Le bouton "Suivant" est un frère de #customer_details (pas un enfant),
 * pour ne jamais devenir un item du flex .col2-set — piège rencontré en
 * test : un bouton ajouté DANS #customer_details devient un 3e item flex
 * étiré en hauteur par align-items:stretch, avec une largeur écrasée.
 */
.api-checkout-stepper{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 24px;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	font-size:14px;
	font-weight:600;
	color:var(--api-muted);
}
.api-checkout-stepper .api-checkout-step-label.is-active{
	color:var(--api-green-900);
}
.api-checkout-stepper .api-checkout-step-sep{
	color:var(--api-brass);
}
.api-checkout-next-wrap{
	margin:8px 0 32px;
}
.woocommerce-checkout .api-checkout-next{
	display:block;
	width:100%;
	text-align:center;
	background:var(--api-green-900) !important;
	color:var(--api-cream) !important;
	border:1px solid var(--api-green-900) !important;
	border-radius:999px !important;
	padding:16px 22px !important;
	font-weight:600 !important;
	font-size:1.05em !important;
	text-transform:none !important;
	box-shadow:none !important;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.woocommerce-checkout .api-checkout-next:hover{
	background:var(--api-brass) !important;
	border-color:var(--api-brass) !important;
	color:var(--api-green-900) !important;
}
.api-checkout-back{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:none;
	border:none;
	padding:0;
	margin:0 0 18px;
	color:var(--api-green-800);
	font-weight:600;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	text-decoration:underline;
	cursor:pointer;
}
.api-checkout-back:hover{
	color:var(--api-brass);
}
.woocommerce-checkout .form-row.api-invalid input.input-text,
.woocommerce-checkout .form-row.api-invalid select,
.woocommerce-checkout .form-row.api-invalid textarea{
	border-color:#c0392b !important;
	box-shadow:0 0 0 3px rgba(192,57,43,.15) !important;
}
@media (max-width:768px){
	.api-checkout-stepper{
		font-size:12px;
	}
}

/* ---------- Page "Commande reçue" (order-received / merci) ----------
 * Ajoutée le 29/07/2026 : cette page (URL /commander/order-received/…)
 * n'avait reçu aucun habillage jusqu'ici — WooCommerce l'affiche avec son
 * style par défaut (liste à puces sans style, tableau brut), alors que
 * `body` porte à la fois les classes `woocommerce-checkout` ET
 * `woocommerce-order-received`, ce qui permet de la styler avec le même
 * système de cartes crème que le reste du tunnel d'achat. Structure
 * WooCommerce (constatée en direct, `.woocommerce-order` = conteneur) :
 *   .woocommerce-order
 *     > p.woocommerce-thankyou-order-received   (bandeau "Merci…")
 *     > ul.woocommerce-order-overview            (numéro/date/e-mail/total/paiement)
 *     > p                                        (note du mode de paiement, ex. "Payer en argent…")
 *     > section.woocommerce-order-details        (titre + tableau produits/totaux)
 *     > section.woocommerce-customer-details     (adresses facturation/livraison)
 */
.woocommerce-order-received .woocommerce-order{
	display:flex;
	flex-direction:column;
	gap:22px;
	max-width:none;
}

/* Bandeau "Merci. Votre commande a été reçue." : reprend le vert sapin de
   la marque plutôt que le vert générique WooCommerce, dans une carte
   arrondie avec une pastille de validation. */
.woocommerce-order-received .woocommerce-thankyou-order-received{
	display:flex;
	align-items:center;
	gap:14px;
	background:var(--api-cream);
	border-left:4px solid var(--api-green-900);
	border-radius:14px;
	padding:18px 22px;
	margin:0;
	font-size:1.05em;
	font-weight:600;
	color:var(--api-green-900);
	box-shadow:0 1px 2px rgba(15,51,39,.06);
}
.woocommerce-order-received .woocommerce-thankyou-order-received:before{
	content:'✓';
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	width:28px;
	height:28px;
	border-radius:999px;
	background:var(--api-green-900);
	color:var(--api-cream);
	font-size:15px;
	font-weight:700;
}

/* Bandeau récapitulatif numéro/date/e-mail/total/paiement : une carte
   crème unique, les informations réparties en ligne (colonne sur mobile).
   Le HTML WooCommerce ne fournit pas de <span> séparé pour le libellé
   (juste un nœud texte suivi d'un <strong>) : on stylise donc le <li>
   entier en petit texte discret, et on redonne du poids à la valeur via
   <strong> pour obtenir un effet libellé/valeur sans toucher au HTML. */
.woocommerce-order-received .woocommerce-order-overview{
	display:flex;
	flex-wrap:wrap;
	gap:20px 32px;
	list-style:none !important;
	margin:0 !important;
	padding:22px 24px !important;
	background:#fff;
	border-radius:16px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
}
.woocommerce-order-received .woocommerce-order-overview li{
	display:flex;
	flex-direction:column;
	gap:4px;
	font-size:11.5px;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--api-muted);
	font-weight:600;
}
.woocommerce-order-received .woocommerce-order-overview li strong{
	font-family:'Fraunces',serif;
	font-size:17px;
	text-transform:none;
	letter-spacing:normal;
	color:var(--api-green-900);
	font-weight:600;
}

/* Note libre sous le bandeau (ex. "Payer en argent à votre prochaine
   visite à l'API.") : légèrement mise en valeur pour ne pas passer pour
   un paragraphe perdu entre deux cartes. */
.woocommerce-order-received .woocommerce-order > p:not([class]){
	background:var(--api-brass-soft);
	color:var(--api-green-900);
	border-radius:12px;
	padding:12px 18px;
	margin:0;
	font-weight:600;
	font-size:14px;
}

/* Section "Détails de la commande" : même carte blanche + tableau que
   `.cart_totals` sur la page Panier, pour rester cohérent visuellement
   entre les deux récapitulatifs de commande du site. */
.woocommerce-order-received section.woocommerce-order-details{
	background:#fff;
	border-radius:16px;
	padding:24px 26px 26px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
}
.woocommerce-order-received section.woocommerce-order-details h2{
	font-family:'Fraunces',serif;
	color:var(--api-green-900);
	margin:0 0 18px;
}
.woocommerce-order-received table.woocommerce-table--order-details{
	width:100%;
	border:none;
	border-collapse:collapse;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th{
	text-align:left;
	padding:0 0 10px;
	border-bottom:2px solid var(--api-brass-soft);
	color:var(--api-muted);
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.04em;
	font-weight:700;
}
.woocommerce-order-received table.woocommerce-table--order-details tbody td,
.woocommerce-order-received table.woocommerce-table--order-details tfoot td,
.woocommerce-order-received table.woocommerce-table--order-details tfoot th{
	border:none !important;
	border-bottom:1px solid var(--api-brass-soft) !important;
	padding:14px 0;
	color:var(--api-ink);
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th{
	border-bottom:none !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td{
	color:var(--api-green-900);
	font-weight:700;
	font-size:1.1em;
}
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta{
	margin:6px 0 0;
	padding:0;
	list-style:none;
	font-size:13px;
	color:var(--api-muted);
}

/* Adresses de facturation/livraison : même carte crème + bordure laiton
   que les encadrés d'adresse de l'étape 1 du tunnel de commande. */
.woocommerce-order-received section.woocommerce-customer-details{
	display:flex;
	flex-direction:column;
	gap:18px;
}
.woocommerce-order-received .woocommerce-columns--addresses{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}
/* Décalage vertical entre "Adresse de facturation" et "Adresse de
 * livraison" constaté en direct (29/07/2026) : cette section porte aussi
 * la classe historique `col2-set` (utilisée par WooCommerce pour un
 * layout en flottants), et `.col-1`/`.col-2` héritent malgré tout d'un
 * placement automatique erratique dans notre grille (l'un se retrouvait
 * en colonne 2 ligne 1, l'autre en colonne 1 ligne 2, au lieu de
 * simplement côte à côte) — cause exacte non isolée avec certitude, mais
 * un placement de grille explicite règle le problème dans tous les cas. */
.woocommerce-order-received .woocommerce-columns--addresses .col-1{
	grid-column:1;
	grid-row:1;
}
.woocommerce-order-received .woocommerce-columns--addresses .col-2{
	grid-column:2;
	grid-row:1;
}
.woocommerce-order-received .woocommerce-column--billing-address,
.woocommerce-order-received .woocommerce-column--shipping-address{
	background:var(--api-cream);
	border-radius:16px;
	padding:20px 22px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
}
.woocommerce-order-received .woocommerce-column--billing-address h2,
.woocommerce-order-received .woocommerce-column--shipping-address h2{
	font-family:'Fraunces',serif;
	color:var(--api-green-900);
	margin:0 0 12px;
	font-size:1.15em;
}
.woocommerce-order-received .woocommerce-column--billing-address address,
.woocommerce-order-received .woocommerce-column--shipping-address address{
	font-style:normal;
	line-height:1.6;
	color:var(--api-ink);
	/* Le thème parent pose une bordure + un fond par défaut sur <address>
	 * (constaté en direct : border asymétrique 1px/2px, border-radius:5px,
	 * padding:6px 12px), ce qui créait une "boîte dans la boîte" avec la
	 * carte crème posée sur le conteneur — neutralisé pour ne garder que
	 * la carte unique. */
	border:none !important;
	background:transparent !important;
	padding:0 !important;
	border-radius:0 !important;
}

/* Cas "adresse de facturation seule" (ex. commande en retrait à l'API,
 * sans adresse de livraison) : constaté en direct le 29/07/2026 que
 * WooCommerce ne génère alors AUCUN conteneur `.woocommerce-columns--
 * addresses`/`.col2-set`/`.col-1` — le titre `h2.woocommerce-column__title`
 * et l'`<address>` deviennent des enfants DIRECTS de
 * `section.woocommerce-customer-details`, donc invisibles pour toutes les
 * règles ci-dessus qui ciblaient `.woocommerce-column--billing-address`.
 * On stylise ici directement la section elle-même en carte crème, mais
 * UNIQUEMENT quand elle ne contient pas la grille à 2 adresses (sinon on
 * dupliquerait le fond posé sur chaque colonne individuelle). */
.woocommerce-order-received section.woocommerce-customer-details:not(:has(.woocommerce-columns--addresses)){
	background:var(--api-cream);
	border-radius:16px;
	padding:20px 22px;
	box-shadow:0 1px 2px rgba(15,51,39,.06);
}
.woocommerce-order-received section.woocommerce-customer-details:not(:has(.woocommerce-columns--addresses)) > h2.woocommerce-column__title{
	font-family:'Fraunces',serif;
	color:var(--api-green-900);
	margin:0 0 12px;
	font-size:1.15em;
}
.woocommerce-order-received section.woocommerce-customer-details:not(:has(.woocommerce-columns--addresses)) > address{
	font-style:normal;
	line-height:1.6;
	color:var(--api-ink);
	border:none !important;
	background:transparent !important;
	padding:0 !important;
	border-radius:0 !important;
}

@media (max-width:768px){
	.woocommerce-order-received .woocommerce-order-overview{
		padding:18px 16px !important;
		gap:16px 24px;
	}
	.woocommerce-order-received section.woocommerce-order-details{
		padding:18px 16px 20px;
	}
	.woocommerce-order-received table.woocommerce-table--order-details{
		font-size:13px;
	}
	.woocommerce-order-received .woocommerce-columns--addresses{
		grid-template-columns:1fr;
	}
	/* En 1 colonne, les deux cartes doivent s'empiler l'une sous l'autre :
	   sans ça, le placement explicite col-2{grid-column:2} du desktop
	   tenterait de viser une 2e colonne inexistante. */
	.woocommerce-order-received .woocommerce-columns--addresses .col-1{
		grid-column:1;
		grid-row:1;
	}
	.woocommerce-order-received .woocommerce-columns--addresses .col-2{
		grid-column:1;
		grid-row:2;
	}
}