/**
 * Styles WooCommerce - Pixel Fleurs V2
 *
 * Personnalisation des styles WooCommerce
 *
 * ⚠️ Nom versionné (`.1.css`) : LiteSpeed retire `?ver=` des CSS/JS — toute modification exige de
 * renommer le fichier et sa référence dans functions.php.
 */

/* ===== HEADER FIXES (WooCommerce peut interferer) ===== */

.site-header {
	height: 80px !important;
}

.site-header-inner {
	height: 80px !important;
}

.custom-logo {
	max-height: 50px !important;
	height: 50px !important;
}

.custom-logo-link {
	height: 50px !important;
}

/* ===== PRIX ET ÉVALUATIONS ===== */

.woocommerce-price-amount {
	color: var(--primary-color);
	font-weight: 600;
}

.woocommerce-currency-symbol {
	color: var(--text-secondary);
}

.price {
	font-size: var(--font-size-lg);
}

.woocommerce-review-link {
	color: var(--text-secondary);
	text-decoration: none;
	margin-left: var(--spacing-md);
}

/* Rating stars */
.star-rating {
	color: var(--color-gold); /* Gold pour les étoiles */
}

.star-rating span::before {
	color: var(--primary-color);
}

/* ===== BOUTONS WOOCOMMERCE ===== */

.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--primary-color);
	color: var(--white);
	padding: var(--spacing-md) var(--spacing-lg);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	font-weight: 600;
	transition: all var(--transition-base);
	min-height: 44px;
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.woocommerce button.button.alt {
	background-color: var(--action-color);
}

.woocommerce button.button.alt:hover {
	background-color: var(--action-hover);
}

/* ===== BADGES ===== */

.woocommerce .badge {
	background-color: var(--action-color);
	color: var(--white);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--font-size-xs);
}

.woocommerce .featured-badge {
	background-color: var(--primary-color);
}

/* ===== MESSAGES =====
   Préouverture : sur la fiche produit, l'icône « ! » des notices (pseudo-élément ::before posé en
   absolu par la feuille de WooCommerce, chargée par une extension) chevauchait les premières lettres
   du message : notre `padding` uniforme écrasait la marge gauche qui lui est réservée. On réserve
   donc explicitement la place de l'icône et on la positionne nous-mêmes — sans icône, seule reste
   une légère marge. Même règle sur mobile. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	position: relative;
	list-style: none;
	padding-left: calc(var(--spacing-lg) + 1.75em) !important;
	overflow-wrap: anywhere;
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	position: absolute;
	left: var(--spacing-md);
	top: var(--spacing-lg);
	margin: 0;
	line-height: 1;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0;
	padding: 0;
}

.woocommerce-message {
	background-color: rgba(76, 175, 80, 0.1);
	border-color: var(--success);
	color: var(--text-primary);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	border-radius: var(--radius-md);
}

.woocommerce-error {
	background-color: rgba(244, 67, 54, 0.1);
	border-color: var(--error);
	color: var(--error);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	border-radius: var(--radius-md);
}

/* ===== FORMULAIRES WOOCOMMERCE ===== */

.woocommerce form input,
.woocommerce form textarea,
.woocommerce form select {
	border-color: var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	font-family: var(--font-family);
}

.woocommerce form input:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
	border-color: var(--primary-color);
	outline: none;
	box-shadow: 0 0 0 3px rgba(91, 126, 140, 0.1);
}

.form-row label {
	color: var(--text-primary);
	font-weight: 500;
	margin-bottom: var(--spacing-sm);
	display: block;
}

.form-row .required {
	color: var(--error);
}

/* ===== QUANTITÉ ===== */

.woocommerce .quantity {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.woocommerce .quantity input.qty {
	width: 60px;
	text-align: center;
	padding: var(--spacing-sm);
}

.woocommerce .quantity .qty-button {
	background-color: var(--background);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

.woocommerce .quantity .qty-button:hover {
	background-color: var(--primary-light);
	border-color: var(--primary-color);
	color: var(--primary-color);
}

/* ===== CASES D'ENGAGEMENT AU CHECKOUT (CGV + saison) =====
   Style partagé par la case CGV (.pf-cgv-checkbox) et la case de substitution
   saisonnière (.pf-seasonal-checkbox, Story 17.3). 18.3 affinera le rendu. */

.pf-cgv-checkbox,
.pf-seasonal-checkbox {
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-md);
	background-color: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
}

.pf-cgv-checkbox label,
.pf-seasonal-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	cursor: pointer;
	margin-bottom: 0;
}

.pf-cgv-checkbox input[type="checkbox"],
.pf-seasonal-checkbox input[type="checkbox"] {
	margin-top: 4px;
	width: 20px;
	height: 20px;
	min-width: 20px;
	cursor: pointer;
	accent-color: var(--primary-color);
}

.pf-cgv-checkbox span,
.pf-seasonal-checkbox span {
	color: var(--text-primary);
	font-size: var(--font-size-base);
	line-height: 1.6;
}

.pf-cgv-checkbox a {
	color: var(--primary-color);
	text-decoration: underline;
	font-weight: 600;
	transition: color var(--transition-base);
}

.pf-cgv-checkbox a:hover {
	color: var(--action-color);
}

.pf-cgv-checkbox .required,
.pf-seasonal-checkbox .required {
	color: var(--error);
	font-weight: 700;
}

/* Mobile : texte plus lisible */
@media (max-width: 767px) {
	.pf-cgv-checkbox,
	.pf-seasonal-checkbox {
		padding: var(--spacing-sm);
	}

	.pf-cgv-checkbox span,
	.pf-seasonal-checkbox span {
		font-size: var(--font-size-sm);
	}
}

/* Desktop : espacement plus généreux */
@media (min-width: 768px) {
	.pf-cgv-checkbox,
	.pf-seasonal-checkbox {
		padding: var(--spacing-lg);
	}
}

/* ===== STORY 1.2 : MASQUER LES COMPOSANTS DE BUNDLES ===== */

/* Masquer les lignes de composants de bundles dans le checkout */
.woocommerce-checkout-review-order-table .bundled_table_item {
	display: none !important;
}

/* ===== STORY 11.1 : ADRESSE DE LIVRAISON ÉDITABLE AU PANIER ===== */

.cart-shipping-address {
	margin-top: var(--spacing-lg);
	padding: var(--spacing-md);
	background-color: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
}

.cart-shipping-address__toggle {
	cursor: pointer;
	font-weight: 600;
	color: var(--primary-color);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Masquer le marqueur natif et afficher un chevron maison */
.cart-shipping-address__toggle::-webkit-details-marker {
	display: none;
}

.cart-shipping-address__toggle::after {
	content: '›';
	font-size: var(--font-size-lg);
	transition: transform var(--transition-base);
}

.cart-shipping-address[open] .cart-shipping-address__toggle::after {
	transform: rotate(90deg);
}

.cart-shipping-address__body {
	margin-top: var(--spacing-md);
}

.cart-shipping-address__hint {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--spacing-md);
}

.cart-shipping-address .form-row {
	margin-bottom: var(--spacing-md);
}

.cart-shipping-address input[type="text"] {
	width: 100%;
}

.cart-shipping-address__status {
	font-size: var(--font-size-sm);
	margin: 0;
	min-height: 1.2em;
}

.cart-shipping-address__status.is-success {
	color: var(--success);
}

.cart-shipping-address__status.is-error {
	color: var(--error);
}

.cart-shipping-address__status.is-pending {
	color: var(--text-secondary);
}

/* Story 11.2 — retour live d'éligibilité/tarif (zones WC). min-height réserve la
   place pour éviter le saut de mise en page quand le message apparaît (revue L3). */
.cart-shipping-address__zone {
	font-size: var(--font-size-sm);
	margin: 0 0 var(--spacing-md);
	min-height: 1.2em;
}

.cart-shipping-address__zone.is-eligible {
	color: var(--success);
}

.cart-shipping-address__zone.is-out,
.cart-shipping-address__zone.is-error {
	color: var(--error);
}

.cart-shipping-address__zone.is-pending {
	color: var(--text-secondary);
}

/* ===== STORY 12.6 : TUNNEL DE PAIEMENT CLAIR ===== */

/* -- Titres de section injectés par hook -- */
.pf-checkout-section-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: 600;
	color: var(--primary-color);
	margin: 0 0 var(--spacing-lg) 0;
	padding-bottom: var(--spacing-sm);
	border-bottom: 2px solid var(--primary-light);
}

/* Masquer le titre natif WC « Adresse de facturation » (remplacé par hook) */
.woocommerce-checkout .woocommerce-billing-fields > h3 {
	display: none;
}

/* -- Section coordonnées : apparence carte -- */
.woocommerce-checkout #customer_details {
	overflow: hidden; /* BFC : contient les flottants .col-1/.col-2 de WC */
	background-color: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-xl);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--spacing-2xl);
}

/* -- Section récap commande : apparence carte -- */
.woocommerce-checkout #order_review {
	background-color: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-xl);
	box-shadow: var(--shadow-sm);
}

/* Titre natif WC du récap (h3#order_review_heading) */
.woocommerce-checkout #order_review_heading {
	font-family: var(--font-family-heading);
	color: var(--text-primary);
	margin-top: 0;
	margin-bottom: var(--spacing-lg);
}
/* Story 18.3 : « Votre commande » (frère de #order_review) est collé au bord (x=0) alors que
   le contenu de la carte #order_review est en retrait de son padding → le titre « dépasse » à
   gauche en desktop. On l'aligne sur le contenu de la carte (mobile OK, padding plus petit). */
@media (min-width: 768px) {
	.woocommerce-checkout #order_review_heading {
		padding-left: var(--spacing-2xl);
	}
}

/* Ménage avant ouverture : les <select> et les champs date du tunnel restaient à leur largeur
   « contenu » (54 px pour « Pays/région », un « — Choi… » tronqué pour l'occasion) pendant que
   les champs texte voisins occupaient 242 px. Une colonne de champs qui ne s'alignent pas donne
   un formulaire bancal — et un champ tronqué se remplit mal au doigt. */
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row input[type="date"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row .select2-container {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* La zone de notes tenait sur 2 lignes (57 px) alors que son propre texte d'exemple en demande
   3 : le placeholder était coupé net au milieu d'un mot. */
.woocommerce-checkout #order_comments {
	min-height: 96px;
}

/* Le lien « Modifier » de l'encart de rappel ne mesurait que 25 px de haut : on l'amène à la
   cible tactile du thème sans décaler la ligne qui l'entoure. */
.pf-checkout-delivery__edit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--spacing-xs);
	margin: -10px calc(var(--spacing-xs) * -1) -10px 0;
}

/* -- Champs occasion + date (12.3) : flex pour layout confortable -- */
.pf-checkout-occasion-date {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
	margin-top: var(--spacing-md);
}

.woocommerce-checkout .pf-checkout-occasion-date .form-row,
.woocommerce-checkout .pf-checkout-occasion-date .form-row-first,
.woocommerce-checkout .pf-checkout-occasion-date .form-row-last {
	/* La largeur de 47 % posée par WooCommerce vient de `.woocommerce form .form-row-first`
	   (spécificité 0-2-1) : une règle en `.pf-checkout-occasion-date .form-row` (0-2-0) ne la
	   battait pas, et les champs occasion/date restaient à 117 px au lieu de la pleine largeur.
	   D'où le préfixe `.woocommerce-checkout` — il fait passer devant. */
	flex: 1 1 200px;
	min-width: 200px;
	width: auto;
	float: none;
	margin-right: 0;
}

/* -- Tableau récap : hiérarchie renforcée -- */
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: var(--spacing-sm) 0;
	vertical-align: middle;
}

/* Ligne total : mise en valeur */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--primary-color);
	border-top: 2px solid var(--border-color);
	padding-top: var(--spacing-md);
}

/* -- Méthodes de paiement : encadrement visible -- */
#payment .payment_methods {
	background-color: var(--background);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

/* -- Bouton « Valider la commande » : sans ambiguïté (AC#2) -- */
#place_order {
	width: 100%;
	background-color: var(--action-color) !important;
	font-size: var(--font-size-lg) !important;
	padding: var(--spacing-lg) var(--spacing-xl) !important;
	min-height: 52px !important;
	letter-spacing: 0.03em;
	margin-top: var(--spacing-md);
}

#place_order:hover {
	background-color: var(--action-hover) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md) !important;
}

/* ===== RESPONSIVE CHECKOUT (Story 12.6) ===== */

/* Mobile (≤ 767 px) : champs pleine largeur, spacings réduits, bouton confortable */
@media (max-width: 767px) {
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review {
		padding: var(--spacing-md);
		margin-bottom: var(--spacing-xl);
	}

	.pf-checkout-section-title {
		font-size: var(--font-size-lg);
	}

	.pf-checkout-occasion-date {
		flex-direction: column;
		gap: 0;
	}

	.woocommerce-checkout .pf-checkout-occasion-date .form-row,
	.woocommerce-checkout .pf-checkout-occasion-date .form-row-first,
	.woocommerce-checkout .pf-checkout-occasion-date .form-row-last {
		min-width: unset;
		width: 100%;
		flex-basis: 100%;
		margin-bottom: var(--spacing-md);
	}

	#place_order {
		font-size: var(--font-size-base) !important;
		padding: var(--spacing-md) var(--spacing-lg) !important;
		min-height: 48px !important;
	}
}

/* Desktop (≥ 768 px) : espacements plus généreux + colonnes alignées */
@media (min-width: 768px) {
	/* Story 12.6 — Débrider la largeur du contenu sur la page checkout.
	   Le thème enferme .page-article / .page-body dans une largeur de lecture
	   (~782 px), trop étroite pour un checkout 2 colonnes confortable.
	   :has(form.woocommerce-checkout) cible la page checkout UNIQUEMENT (le
	   panier porte form.woocommerce-cart, pas .woocommerce-checkout) → aucune
	   autre page WC n'est affectée. Le checkout récupère la largeur du
	   .container (jusqu'à --container-width: 1200 px sur grand écran). */
	.page-article:has(form.woocommerce-checkout),
	.page-body:has(form.woocommerce-checkout) {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review {
		padding: var(--spacing-2xl);
	}

	/* Story 12.6 — Facturation (.col-1) et livraison (.col-2) côte à côte,
	   séparées par un trait vertical. WooCommerce les flotte à 47 % (décalage
	   haut/bas + vide) → on passe en grid 2 colonnes égales. align-items par
	   défaut (stretch) → les deux colonnes prennent la même hauteur, si bien
	   que le trait (border-right de .col-1) court sur toute la hauteur. Le gap
	   est mis à 0 : l'espacement autour du trait est géré par les padding
	   symétriques des colonnes (billing | 40px | trait | 40px | shipping).
	   ⚠️ Desktop UNIQUEMENT : sous 768 px WC empile les colonnes (rendu mobile
	   conservé tel quel, validé commanditaire 2026-06-24). */
	.woocommerce-checkout #customer_details {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		/* Un ancêtre/thème inverse l'ordre des colonnes grid (constaté :
		   .col-1 facturation rendue à DROITE, left=471 ; .col-2 livraison à
		   GAUCHE, left=81). On rétablit l'ordre LTR. */
		direction: ltr;
	}

	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 {
		float: none;
		width: auto;
		max-width: none;
	}

	/* Placement explicite et déterministe : facturation (.col-1) à GAUCHE,
	   livraison (.col-2) à DROITE — force l'ordre même si le thème pose un
	   order/grid-column inversé sur .col2-set. */
	.woocommerce-checkout #customer_details .col-1 {
		grid-column: 1;
		padding-right: var(--spacing-2xl);
		border-right: 1px solid var(--border-color);
	}

	.woocommerce-checkout #customer_details .col-2 {
		grid-column: 2;
		padding-left: var(--spacing-2xl);
	}
}

/* ===== Saisonnalité des bouquets — Story 17.2 ===== */

/* Encart sur la fiche produit (bundle), près du prix / du bouton */
.pf-seasonal-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: var(--spacing-md) 0;
	padding: 12px 14px;
	background: var(--action-light);
	border: 1px solid rgba(181, 120, 120, 0.25);
	border-radius: var(--radius-md);
	color: #7c4b49;
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.pf-seasonal-notice__icon {
	flex: none;
	font-size: 1.15rem;
	color: var(--action-hover);
	margin-top: 1px;
}

.pf-seasonal-notice__text strong {
	display: block;
	color: var(--action-hover);
	font-weight: 600;
	margin-bottom: 2px;
}

/* Rappel concis au panier */
.pf-cart-seasonal-reminder {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--spacing-md);
	padding: 10px 14px;
	background: var(--action-light);
	border-radius: var(--radius-md);
	color: #7c4b49;
	font-size: var(--font-size-sm);
	line-height: 1.4;
}

.pf-cart-seasonal-reminder__icon {
	flex: none;
	font-size: 1.05rem;
	color: var(--action-hover);
}

/* ===== Composition du bundle sur la fiche produit — Story 17.4 =====
   Compacter la liste des composants : les figures d'image des composants
   partagent la classe .woocommerce-product-gallery__image (galerie principale,
   min-height:250px + width:100% !important) et gonflaient chaque ligne à ~490px.
   Scope strict au formulaire bundle → n'affecte NI la galerie principale NI le
   récap panier (.bundled_table_item). */
.single-product-page .bundle_form .bundled_products {
	margin-top: var(--spacing-md);
}

.single-product-page .bundle_form .bundled_product {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	padding: 8px 0 !important;
	border-bottom: 1px solid var(--border-color);
}

.single-product-page .bundle_form .bundled_product:last-child {
	border-bottom: none;
}

.single-product-page .bundle_form .bundled_product_images {
	flex: none;
	width: 56px !important;
	min-height: 0 !important;
	margin: 0 !important;
}

.single-product-page .bundle_form .bundled_product_image {
	min-height: 0 !important;
	margin: 0 !important;
	border-radius: var(--radius-sm);
}

.single-product-page .bundle_form .bundled_product_image img {
	width: 56px !important;
	height: 56px !important;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.single-product-page .bundle_form .bundled_product .details {
	flex: 1;
	min-width: 0;
	margin: 0 !important;
}

/* Retirer le bruit par composant : l'extrait (répète le nom) et le message de
   stock par fleur (« Plus que X en stock » — inutile et anxiogène pour un bouquet
   tout prêt). On garde le titre « Nom × quantité ». */
.single-product-page .bundle_form .bundled_product_excerpt,
.single-product-page .bundle_form .bundled_product .stock {
	display: none !important;
}

.single-product-page .bundle_form .bundled_product_title {
	margin: 0 !important;
	font-size: var(--font-size-sm);
	line-height: 1.35;
}

/* ===== STORY 18.2 : RESTYLE PAGE PANIER (maquette 18.1) =====
   CSS pur + hooks EXISTANTS (cart.php mort). Scope strict body.woocommerce-cart
   → n'affecte JAMAIS le checkout (body.woocommerce-checkout, Story 12.6). Le
   tableau reste le shop_table_responsive natif : l'empilement mobile est fourni
   par woocommerce-smallscreen.css (WC) — on ne le réécrit pas. */

/* -- Layout desktop : 2 colonnes (articles + adresse | totaux en aside) --
   Les 5 enfants directs de .woocommerce sont, dans l'ordre : encart saison (17.2,
   optionnel), notices, form articles, bloc adresse (11.1), collaterals (totaux).
   grid-auto-flow dense place les totaux en colonne 2 à hauteur des articles,
   robuste à l'absence de l'encart saison (panier sans bundle). */
@media (min-width: 769px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(320px, 34%, 400px);
		grid-auto-flow: row dense;
		gap: var(--spacing-lg) var(--spacing-xl);
		align-items: start;
	}
	.woocommerce-cart .woocommerce > .pf-cart-seasonal-reminder,
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}
	.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
	.woocommerce-cart .cart-shipping-address { grid-column: 1; margin-top: 0; }
	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: span 2;
		align-self: start;
		position: sticky;
		top: var(--spacing-lg);
		width: auto;
		margin: 0;
	}
}

/* -- Carte « articles » -- */
.woocommerce-cart .woocommerce-cart-form {
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--spacing-lg);
}
.woocommerce-cart table.cart {
	border: 0;
	margin: 0;
	background: transparent;
}
.woocommerce-cart table.cart th {
	background: transparent;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	font-weight: 600;
}

/* Mise en tableau soignée (desktop uniquement — mobile = empilement natif WC) */
@media (min-width: 769px) {
	.woocommerce-cart table.cart thead th {
		/* Une règle globale .product-price { display:flex } (plugin/WC) fait sortir
		   l'en-tête « Prix » de la grille du tableau (hauteur 32 vs 52 → décalage).
		   On réimpose table-cell sur tous les en-têtes. thead masqué en mobile. */
		display: table-cell;
		border: 0;
		border-bottom: 1px solid var(--border-color);
		padding: 0 var(--spacing-sm) var(--spacing-sm);
		text-align: left;
	}
	.woocommerce-cart table.cart td {
		border: 0;
		border-top: 1px solid var(--border-color);
		padding: var(--spacing-md) var(--spacing-sm);
		vertical-align: middle;
		background: transparent;
	}
	.woocommerce-cart table.cart tbody tr:first-child td { border-top: 0; }
}

/* Vignette produit cadrée */
.woocommerce-cart td.product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
}

/* Nom / prix / sous-total : hiérarchie lisible (AC#1) */
.woocommerce-cart td.product-name a {
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;
}
.woocommerce-cart td.product-name a:hover { color: var(--primary-color); }
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal { font-variant-numeric: tabular-nums; }
.woocommerce-cart td.product-subtotal { font-weight: 700; color: var(--text-primary); }

/* Quantité compacte */
.woocommerce-cart td.product-quantity .quantity input.qty {
	width: 64px;
	padding: 8px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	text-align: center;
}

/* Bouton « supprimer » discret jusqu'au survol.
   Ménage avant ouverture : il ne mesurait que 18 px — impossible à viser au pouce sans
   toucher la ligne d'à côté. Porté à 44 px, la cible minimale du thème, sans le rendre
   plus voyant (il reste gris tant qu'on ne le survole pas). */
.woocommerce-cart td.product-remove a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--text-light) !important;
	/* ⚠️ Story 24.19 — DEUX FEUILLES DU THÈME SE CONTREDISAIENT ICI.
	   shop.css (.product-remove a) peint un DISQUE ROUGE avec une croix BLANCHE ; cette règle-ci,
	   plus récente, veut une croix GRISE et discrète — et l'imposait en `!important` SANS effacer
	   le disque. Résultat rendu : une croix grise sur un disque rouge, mesurée à 1,86:1, sur le
	   bouton qui retire un article du panier. Le fond est donc explicitement rendu au blanc de la
	   page ; le survol, lui, garde sa croix rouge (4,63:1). */
	background: transparent !important;
	font-size: var(--font-size-lg);
	line-height: 1;
}
.woocommerce-cart td.product-remove a.remove:hover {
	color: var(--error) !important;
	background: transparent !important;
}

/* Ligne d'actions (code promo + mise à jour du panier) */
.woocommerce-cart td.actions {
	border-top: 1px solid var(--border-color);
	padding: var(--spacing-md) 0 0 !important;
}
.woocommerce-cart td.actions .coupon {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

/* -- Bloc adresse (11.1) : cohérence « carte » avec le reste du panier -- */
.woocommerce-cart .cart-shipping-address {
	box-shadow: var(--shadow-card);
	padding: var(--spacing-lg);
}

/* -- Carte des totaux (aside) -- */
.woocommerce-cart .cart-collaterals .cart_totals {
	/* WooCommerce flotte .cart_totals à droite (règle .woocommerce-page
	   .cart-collaterals .cart_totals = 3 classes, width:48%) → dans notre aside il
	   se rétrécit et le bouton pleine largeur ne fait plus que ~124px. On neutralise
	   à spécificité égale (3 classes) + chargement postérieur du CSS thème. */
	float: none;
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--spacing-lg);
}
.woocommerce-cart .cart_totals h2 {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-md);
}
/* Totaux en FLEX (et non en table) : chaque ligne = label à gauche / montant à droite,
   sur toute la largeur de l'aside. Évite les colonnes étroites du rendu <table> (une
   cellule block dans une table-row se rétrécit) et neutralise le rendu smallscreen. */
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals tbody { display: block; width: 100%; border: 0; margin: 0; }
.woocommerce-cart .cart_totals table tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-md);
	padding: var(--spacing-sm) 0;
}
.woocommerce-cart .cart_totals table tr th,
.woocommerce-cart .cart_totals table tr td {
	display: block; /* contre woocommerce-smallscreen qui masque les <th> en mobile */
	border: 0;
	padding: 0;
}
/* woocommerce-smallscreen force th{display:none} en mobile (spéc. 0,2,3) → on garde
   nos libellés (« Sous-total », « Total »…) visibles. */
.woocommerce-cart .cart_totals table tr th { display: block !important; }
.woocommerce-cart .cart_totals table th { color: var(--text-secondary); font-weight: 500; text-align: left; }
.woocommerce-cart .cart_totals table td { color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
/* Mobile : woocommerce-smallscreen injecte des libellés ::before (data-title) qui
   doublonnent les <th> (« Sous-total: », « Total: »…) → neutralisés partout. */
.woocommerce-cart .cart_totals table td::before {
	content: none !important;
	display: none !important;
}

/* Total mis en valeur + mention « dont TVA » (AC#4 — native WC includes_tax) */
.woocommerce-cart .cart_totals .order-total {
	border-top: 2px solid var(--border-color);
	margin-top: var(--spacing-xs);
	padding-top: var(--spacing-md);
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--primary-color);
}
.woocommerce-cart .cart_totals .includes_tax {
	display: block;
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	font-weight: 400;
	color: var(--text-light);
	margin-top: 4px;
}

/* -- Bouton « Valider ma commande » : sans ambiguïté (AC#3, aligné sur #place_order) -- */
.woocommerce-cart .wc-proceed-to-checkout { margin-top: var(--spacing-md); padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background-color: var(--action-color) !important;
	color: #fff !important;
	font-size: var(--font-size-lg) !important;
	font-weight: 600;
	padding: var(--spacing-md) var(--spacing-lg) !important;
	min-height: 52px;
	border-radius: var(--radius-md);
	letter-spacing: 0.02em;
	transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--action-hover) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

/* -- Réassurance sous le bouton (hook woocommerce_proceed_to_checkout @20) -- */
.pf-cart-reassurance {
	list-style: none;
	margin: var(--spacing-md) 0 0;
	padding: var(--spacing-md) 0 0;
	border-top: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.pf-cart-reassurance li {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}
.pf-cart-reassurance__ic { font-size: 1rem; line-height: 1; }

/* ===== STORY 18.6 : BLOC ADRESSE PANIER (déplié, pré-remplissage, gating) ===== */

/* Titre du bloc (remplace l'ancien <summary> repliable de 11.1) */
.cart-shipping-address__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	color: var(--primary-color);
	margin: 0 0 var(--spacing-xs);
}

/* Barre des 3 modes de réception — MOBILE FIRST : empilés par défaut, en ligne ≥ 600 px. */
.cart-shipping-address__modes {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin: 0 0 var(--spacing-md);
}
@media (min-width: 600px) {
	.cart-shipping-address__modes {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.cart-shipping-address__mode {
		flex: 1 1 auto;
		min-width: 140px;
	}
}
.cart-shipping-address__mode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--surface);
	color: var(--primary-color);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.cart-shipping-address__mode:hover {
	background: var(--primary-light);
	border-color: var(--primary-light);
}
.cart-shipping-address__mode.is-active {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

/* Effet d'effacement des champs (clic « autre adresse » / « retrait ») */
.cart-shipping-address__fields.is-erasing {
	animation: pf-erase 0.26s ease;
}
@keyframes pf-erase {
	0% { opacity: 1; }
	45% { opacity: 0.15; }
	100% { opacity: 1; }
}

/* Bouton « Valider ma commande » bloqué tant que la destination est invalide (AC#7).
   pointer-events:none neutralise le clic (double sécurité avec le garde JS delegated). */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.is-disabled {
	background-color: var(--text-light) !important;
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none !important;
	transform: none !important;
}
.pf-cart-gate-note {
	margin: 0 0 var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-align: center;
}

/* ----- Vague B : méthodes d'expédition (livraison / retrait) dans le récap ----- */

/* La ligne « Expédition » : colonne (libellé « Expédition » puis la méthode en dessous,
   PLEINE largeur, alignée à gauche) — surcharge la ligne flex par défaut (label/montant). */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
	width: 100%;
	text-align: left;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
	margin-bottom: var(--spacing-xs);
}

/* LECTURE SEULE (Story 18.6) : le choix livraison/retrait se fait dans le bloc de
   gauche (3 boutons). Ici on n'affiche QUE la méthode retenue, en texte — plus de
   radios ni de liste de choix (fin de la double information). */
.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left; /* contre le text-align:right hérité de woocommerce-smallscreen sur mobile */
	pointer-events: none; /* purement informatif */
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
	display: none;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li.pf-chosen,
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li:has(input.shipping_method:checked) {
	display: block;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input.shipping_method {
	display: none; /* radio masqué : le choix est fait à gauche */
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label {
	margin: 0;
	line-height: 1.4;
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--text-primary);
}
/* Ligne « Livraison à <adresse> » : celle de WooCommerce est conditionnée à is_cart()
   (absente en AJAX → ne se mettait à jour qu'au refresh). On la masque et on rend la
   nôtre (.pf-ship-dest), pilotée en direct par cart-shipping.js depuis les champs. */
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	display: none;
}
.woocommerce-cart .cart_totals .pf-ship-dest {
	margin: var(--spacing-sm) 0 0;
	font-size: var(--font-size-xs);
	color: var(--text-light);
	line-height: 1.4;
}

/* Mode retrait (.is-pickup, posé par cart-shipping.js) : on masque UNIQUEMENT les champs
   d'adresse — le titre et les 3 boutons restent visibles (Alexis) pour rebasculer à tout
   moment. Une note confirme le retrait. */
.cart-shipping-address__pickup-note { display: none; }
.cart-shipping-address.is-pickup .cart-shipping-address__fields {
	display: none;
}
.cart-shipping-address.is-pickup .cart-shipping-address__pickup-note {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin: var(--spacing-xs) 0 0;
	color: var(--text-secondary);
	font-size: var(--font-size-base);
}
.cart-shipping-address.is-pickup .cart-shipping-address__pickup-note::before {
	content: '🏵️';
	font-size: 1.1rem;
}

/* ===== STORY 18.3 : CHECKOUT — RAPPEL LIVRAISON (décision A) =====
   La livraison (adresse ou retrait) est choisie au PANIER (18.6). Au checkout on la
   rappelle en lecture seule (.pf-checkout-delivery) + lien « Modifier » → panier. On masque
   la bascule « livrer à une autre adresse » et les champs de livraison éditables ; les inputs
   restent dans le DOM (display:none) pré-remplis depuis la session → intégrité du POST. */
.woocommerce-checkout #ship-to-different-address {
	display: none !important;
}
/* Masquer TOUT le formulaire de livraison éditable — seul le rappel .pf-checkout-delivery
   (frère, dans .shipping_address) reste visible. #customer_details + !important pour battre
   les règles WC/12.6 qui remettent .form-row en display:block (spécificité). Les inputs
   restent dans le DOM (pré-remplis depuis le panier) → intégrité du POST. */
.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper {
	display: none !important;
}

.woocommerce-checkout .pf-checkout-delivery {
	background: var(--background);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
}
.pf-checkout-delivery__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-xs);
}
.pf-checkout-delivery__label {
	font-weight: 600;
	color: var(--primary-color);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.pf-checkout-delivery__edit {
	font-size: var(--font-size-sm);
	color: var(--primary-color);
	text-decoration: underline;
	white-space: nowrap;
}
.pf-checkout-delivery__value {
	margin: 0;
	color: var(--text-primary);
	font-weight: 500;
}
.pf-checkout-delivery__value--pickup::before {
	content: '🏵️ ';
}

/* Récap checkout : « Expédition » en LECTURE SEULE aussi (le choix livraison/retrait est
   fait au panier — décision A). N'affiche que la méthode retenue, sans radios. */
.woocommerce-checkout #order_review .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
.woocommerce-checkout #order_review .woocommerce-shipping-methods li { display: none; }
.woocommerce-checkout #order_review .woocommerce-shipping-methods li:has(input.shipping_method:checked) { display: block; }
.woocommerce-checkout #order_review .woocommerce-shipping-methods li input.shipping_method { display: none; }
.woocommerce-checkout #order_review .woocommerce-shipping-methods li label { margin: 0; font-weight: 500; }

/* Réassurance paiement (au-dessus des moyens de paiement) */
.pf-payment-reassurance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	flex-wrap: wrap;
	margin-bottom: var(--spacing-md);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--action-light);
	border-radius: var(--radius-sm);
}
.pf-payment-reassurance__secure {
	font-size: var(--font-size-sm);
	color: var(--success);
	font-weight: 600;
}
.pf-payment-reassurance__cards {
	display: flex;
	gap: 6px;
}
.pf-payment-reassurance__cards i {
	font-style: normal;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--text-secondary);
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	width: 34px;
	height: 22px;
	display: grid;
	place-items: center;
}

/* ----- Moyens de paiement (WooPayments / BACS) : intégration charte -----
   ⚠️ WooPayments = iframe/prod (16.6). Le rendu BACS est vérifiable en local (même structure
   #payment). Le champ carte lui-même (numéro/expiration/CVC) est dans l'iframe WooPayments et
   n'est pas restylable ; on habille son ENVIRONNEMENT (radio, boîte, sous-blocs). */

/* Radio du moyen de paiement à GAUCHE du libellé (au lieu d'être centré), et la boîte de
   contenu (.payment_box) en pleine largeur dessous. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-sm);
	background: var(--surface);
	border: 1px solid var(--border-color);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
	background: var(--surface);
	border-color: var(--primary-light);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	flex: none;
	width: auto; /* le thème force input{width:100%} → radio étiré à 1002px, point centré. On corrige. */
	margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	flex: 1;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	font-weight: 600;
	color: var(--text-primary);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > .payment_box {
	flex: 1 0 100%;
	margin-top: var(--spacing-md);
}

/* Boîte de contenu du moyen de paiement : TRANSPARENTE (le fond gris WooCommerce/WooPayments
   et la flèche pointeur créaient un effet « boîte dans une boîte »). Le contenu s'affiche
   directement dans la carte du moyen (li.wc_payment_method). `div.payment_box` pour battre
   la spécificité de WC core (#payment div.payment_box, 1,2,1). */
.woocommerce-checkout #payment div.payment_box {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--text-primary);
	padding: 0;
	margin: var(--spacing-md) 0 0;
	box-shadow: none;
}
.woocommerce-checkout #payment div.payment_box::before {
	display: none; /* flèche pointeur retirée */
}

/* Moyen de paiement CARTE : titre soigné (charte) + carte un peu plus chaleureuse. */
.woocommerce-checkout #payment li.payment_method_woocommerce_payments {
	box-shadow: var(--shadow-card);
}
.woocommerce-checkout #payment li.payment_method_woocommerce_payments > label {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	color: var(--primary-color);
}
/* Champ carte WooPayments présenté comme une CARTE BANCAIRE — Story 18.3.
   Les champs (numéro pleine largeur, puis expiration + CVC côte à côte) sont dans l'iframe
   Stripe (cross-origin, NON repositionnables), mais Stripe les dispose déjà comme une carte à
   cette largeur (≈658px). On habille le conteneur .wcpay-upe-element : fond dégradé CLAIR (les
   libellés Stripe sont sombres → fond clair obligatoire), coins arrondis, puce dorée + « Pixel
   Fleurs » en émetteur. Le padding-top loge la puce sans chevaucher les libellés.
   NB : styliser ce conteneur est SÛR — la « boîte vide » de juillet venait de jquery-migrate,
   pas du CSS (cf. [[jquery-migrate-woopayments]]). Mis au point en direct sur la prod (accès
   temporaire), WooPayments n'existant pas en local. */
.woocommerce-checkout #payment .wcpay-upe-element.StripeElement {
	position: relative;
	/* Largeur bornée pour respecter le RATIO d'une carte bleue (~1,586) même en plein écran.
	   Nuance : Stripe met expiration + CVC côte à côte seulement au-dessus de ~650px d'iframe ;
	   sous ce seuil ils s'empilent. À 530px, avec les 3 champs empilés (hauteur ~334px),
	   le ratio ≈ 1,59 = carte bleue. L'empilement est assumé (validé Alexis). En mobile la
	   carte remplit la colonne (plus étroite) : toujours l'esprit carte. */
	max-width: 530px;
	background: linear-gradient(135deg, var(--primary-light), var(--action-light));
	border-radius: var(--radius-lg);
	padding: 70px 22px 22px;
	box-shadow: var(--shadow-hover);
}
.woocommerce-checkout #payment .wcpay-upe-element.StripeElement::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 24px;
	width: 46px;
	height: 34px;
	border-radius: 6px;
	background: linear-gradient(135deg, #F0D48A, #C9A24E);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.woocommerce-checkout #payment .wcpay-upe-element.StripeElement::after {
	content: "Pixel Fleurs";
	position: absolute;
	top: 27px;
	right: 24px;
	font-family: var(--font-family-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--primary-hover);
	opacity: 0.85;
}

/* Note « autre moyen de paiement → nous contacter » */
.woocommerce-checkout .pf-payment-contact {
	margin: var(--spacing-md) 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-align: center;
}
.woocommerce-checkout .pf-payment-contact a {
	color: var(--primary-color);
	text-decoration: underline;
}

/* Sous-blocs WooPayments (cartes enregistrées, nouveau moyen, « enregistrer ») :
   neutraliser les fonds gris, aligner sur la charte. */
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods,
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods li,
.woocommerce-checkout #payment .woocommerce-PaymentMethods,
.woocommerce-checkout #payment .woocommerce-PaymentMethod,
.woocommerce-checkout #payment .wc-saved-payment-methods,
.woocommerce-checkout #payment .wcpay-card-selector {
	list-style: none;
	background: transparent;
	box-shadow: none;
}
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-token,
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-new {
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	margin-bottom: var(--spacing-sm);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

/* ===== STORY 18.4 : EN-TÊTE DE TUNNEL (logo + fil fléché) + PAGE « COMMANDE REÇUE » =====
   Réf. maquette 18.1. En-tête transverse rendu en haut du panier, du checkout et de la
   confirmation (hooks woocommerce_before_cart / before_checkout_form / before_thankyou).
   Écran 4 « Confirmation » curé : sceau, remerciement, n° commande, prochaines étapes. */

/* -- En-tête : logo « ✿ Pixel Fleurs » + fil d'étapes fléché -- */
.pf-tunnel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md) var(--spacing-lg);
	flex-wrap: wrap;
	padding-bottom: var(--spacing-md);
	margin-bottom: var(--spacing-xl);
	border-bottom: 1px solid var(--border-color);
}
.pf-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1;
}
.pf-brand-mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-full);
	background: var(--action-light);
	color: var(--action-color);
	font-size: 1rem;
}
.pf-stepper {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	font-size: var(--font-size-xs);
}
.pf-step-pill {
	padding: 5px 13px;
	border-radius: 999px;
	white-space: nowrap;
	color: var(--text-light);
	background: var(--surface);
	border: 1px solid var(--border-color);
}
.pf-step-pill.is-done {
	/* Story 24.19 : le bleu de marque sur le bleu PÂLE ne donne que 3,97:1 — deux tons d'une même
	   teinte se ressemblent trop. Un cran plus sombre suffit : 4,65:1, sans changer la couleur. */
	color: #496772;
	background: var(--primary-light);
	border-color: transparent;
}
.pf-step-pill.is-current {
	color: #fff;
	font-weight: 600;
	background: var(--action-color);
	border-color: transparent;
	box-shadow: var(--shadow-sm);
}
.pf-step-arrow {
	color: var(--text-light);
	font-size: var(--font-size-sm);
}

/* -- Page « Commande reçue » : masquer le récap natif résiduel -- */
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order .woocommerce-thankyou-order-received {
	display: none !important;
}

/* -- Bloc de confirmation curé -- */
.pf-confirm {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--spacing-md) 0 var(--spacing-lg);
	text-align: center;
}
.pf-confirm-seal {
	width: 74px;
	height: 74px;
	margin: 0 auto var(--spacing-lg);
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	background: rgba(91, 140, 126, 0.12);
	border: 1px solid rgba(91, 140, 126, 0.30);
	color: var(--success);
	font-size: 2rem;
}
.pf-confirm-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-2xl);
	color: var(--primary-hover);
	margin: 0;
}
.pf-confirm-sub {
	color: var(--text-secondary);
	margin: var(--spacing-sm) 0 0;
}
.pf-confirm-ordno {
	display: inline-block;
	margin: var(--spacing-md) 0 0;
	padding: 8px 18px;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	color: var(--text-primary);
	background: rgba(255, 255, 255, 0.55);
	border: 1px dashed var(--border-color);
	border-radius: var(--radius-md);
}
.pf-confirm-steps {
	margin-top: var(--spacing-xl);
	text-align: left;
}
.pf-confirm-step {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 14px;
	align-items: start;
	padding: var(--spacing-md) 0;
}
.pf-confirm-step + .pf-confirm-step {
	border-top: 1px solid var(--border-color);
}
.pf-confirm-ic {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	background: var(--primary-light);
	font-size: 1.1rem;
}
.pf-confirm-st {
	font-weight: 600;
	color: var(--text-primary);
}
.pf-confirm-sd {
	margin-top: 2px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}
.pf-confirm-actions {
	margin-top: var(--spacing-lg);
}
.woocommerce .pf-confirm-actions .pf-confirm-back {
	display: inline-block;
	background: transparent;
	color: var(--primary-color);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	padding: 12px 24px;
	font-weight: 600;
}
.woocommerce .pf-confirm-actions .pf-confirm-back:hover {
	background: var(--primary-light);
	border-color: var(--primary-hover);
}

/* -- Mobile : en-tête empilé, stepper centré -- */
@media (max-width: 600px) {
	.pf-tunnel-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}
	.pf-stepper {
		width: 100%;
		justify-content: flex-start;
	}
}

/* ===== STORY 18.7 : DESTINATAIRE NOMMÉ AU PANIER + RÉCAP ===== */

/* Prénom + nom du destinataire : côte à côte ≥ 520px, empilés en mobile. */
.cart-shipping-address__names {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--spacing-md);
}
@media (min-width: 520px) {
	.cart-shipping-address__names {
		grid-template-columns: 1fr 1fr;
	}
}

/* Nom du destinataire dans le rappel « Livraison » du checkout (au-dessus de l'adresse). */
.pf-checkout-delivery__value--name {
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 2px;
}

/* ⚠️ Story 24.14 — LA VIGNETTE DU PANIER REDEVIENT VISIBLE SUR MOBILE.
   `woocommerce-smallscreen.css` (feuille native de WooCommerce) masque purement et simplement la
   colonne `product-thumbnail` sous 769 px. Mesuré : `display: none`, image à 0 × 0. Résultat, sur
   le téléphone — d'où viennent 90 % des visites — le panier n'affichait AUCUNE photo, ni pour un
   bouquet de la boutique ni pour une composition sur mesure. La cliente ne voyait plus ce qu'elle
   achetait au moment de payer.
   On la remet, posée en tête de la ligne empilée. */
@media screen and (max-width: 768px) {
	.woocommerce-cart table.cart td.product-thumbnail,
	.woocommerce-cart table.shop_table_responsive tr td.product-thumbnail {
		display: block !important;
		text-align: left !important;
		padding-bottom: var(--spacing-sm) !important;
	}

	/* WooCommerce injecte un libellé `::before` sur chaque cellule empilée : sur la vignette il
	   afficherait une étiquette vide au-dessus de l'image. */
	.woocommerce-cart table.cart td.product-thumbnail::before {
		content: none !important;
		display: none !important;
	}

	.woocommerce-cart td.product-thumbnail img {
		width: 88px;
		height: 88px;
	}
}

/* Le croquis validé par la cliente, à la place de la photo générique du produit épinglé
   (Story 24.14). `contain` et non `cover` : un croquis recadré perdrait ses fleurs du bord. */
.woocommerce-cart td.product-thumbnail img.pf-cart-sketch {
	object-fit: contain;
	background: var(--white, #FFFFFF);
}