/**
 * Cartes de lignes du panier Jokoani (blocs WooCommerce 10.8).
 *
 * Même langage que la carte de réservation de la confirmation de commande
 * (`confirmation-commande.css`, `.jk-resa`) et que l'espace Mon compte
 * (`src/mon-compte/mon-compte.css`) : carte blanche, radius 20, bordure fine,
 * bleu Jokoani, badges de type.
 *
 * Trois règles tirées du markup réel, chacune après une régression constatée :
 *
 * 1. On ne touche pas au `display` du `<tr>` ni à celui des `<td>`. Le bloc
 *    Panier est une vraie `<table>` avec un `<thead>` de trois colonnes
 *    (image 80 px, produit, total 100 px) : passer la ligne en grid la sort du
 *    modèle tabulaire et l'enferme dans une cellule anonyme large d'une seule
 *    colonne ; masquer une cellule en `display: none` décale toutes les
 *    suivantes d'une colonne. Le décor de la carte est donc porté par les
 *    cellules elles-mêmes, en `border-collapse: separate`.
 * 2. La vignette et le prix restent dans leurs cellules natives, simplement
 *    restylés : rien à cloner, aucun doublon possible.
 * 3. Le masquage des éléments natifs passe par la classe `.jk-panier-masque`
 *    posée par le JS, jamais par une liste de sélecteurs : WooCommerce cible
 *    ses éléments en `table.wc-block-cart-items .wc-block-cart-items__row X`
 *    (spécificité 0-3-1), au-dessus d'une règle à deux classes.
 *
 * La bascule entre les deux présentations n'est PAS une media query ni une
 * container query : le JS lit l'état réel de la ligne (`display: grid` ou non)
 * et la largeur réelle du tableau, puis pose les classes de mode sur la table.
 * WooCommerce décide d'empiler d'après la largeur de `.wp-block-woocommerce-cart`
 * — un bloc contraint par le thème peut donc basculer en empilé à 1000 px de
 * fenêtre. Se caler sur un point de rupture à soi désynchronisait les deux et
 * faisait déborder la vignette sur le titre.
 *
 *   `.jk-panier-table--tableau` / `--grille`  : structure imposée par WooCommerce
 *   `.jk-panier-table--large`   / `--compact` : densité, d'après la largeur réelle
 */

.jk-panier-ligne,
table.wc-block-cart-items .wc-block-cart-items__row.jk-ligne-montee {
	--jk-bleu: #004291;
	--jk-bleu-clair: #e9f1fa;
	--jk-texte: #17324d;
	--jk-muted: #5f6f83;
	--jk-bordure: #dce4ec;
	--jk-teal: #e2f4f5;
	--jk-orange-clair: #fff0e6;
	--jk-orange-fonce: #b24d09;
	--jk-vert-clair: #e7f4e9;
	--jk-vert-fonce: #0a7231;
}

/* Le marqueur de données ne doit rien occuper : DOMPurify retire son attribut
   `style` côté blocs, seule la classe survit. */
.jk-panier-marqueur {
	display: none !important;
}

/* Masquage défensif : tout enfant natif de la ligne que la carte remplace. */
.jk-panier-masque {
	display: none !important;
}

/* Le bouton natif de suppression reste dans le DOM et cliquable : c'est lui qui
   parle au Store API. On le réduit à rien sans le retirer de l'accessibilité. */
.jk-panier-relais {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* ---------------------------------------------------------------------------
 * La ligne devient une carte, sans quitter le modèle tabulaire
 * ------------------------------------------------------------------------ */

table.wc-block-cart-items.jk-panier-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 14px;
	border-bottom: 0;
}

.wc-block-cart__main table.wc-block-cart-items.jk-panier-table {
	border-bottom: 0;
}

table.wc-block-cart-items.jk-panier-table--tableau {
	table-layout: fixed;
}

table.wc-block-cart-items.jk-panier-table--tableau .wc-block-cart-items__header-image {
	width: 134px;
}

table.wc-block-cart-items.jk-panier-table--tableau .wc-block-cart-items__header-total {
	width: 130px;
}

/* Colonne étroite tout en restant un tableau : on rend de la place au contenu. */
table.wc-block-cart-items.jk-panier-table--tableau.jk-panier-table--compact .wc-block-cart-items__header-image {
	width: 84px;
}

table.wc-block-cart-items.jk-panier-table--tableau.jk-panier-table--compact .wc-block-cart-items__header-total {
	width: 96px;
}

table.jk-panier-table--tableau.jk-panier-table--compact .wc-block-cart-items__row.jk-ligne-montee > td:first-child {
	padding-left: 14px;
	padding-right: 12px;
}

table.jk-panier-table--tableau.jk-panier-table--compact .wc-block-cart-items__row.jk-ligne-montee > td:last-child {
	padding-right: 14px;
}

/* Fond et filets de la carte, portés par les cellules. */
.jk-panier-table--tableau .wc-block-cart-items__row.jk-ligne-montee > td,
.wc-block-cart__main table.jk-panier-table--tableau .wc-block-cart-items__row.jk-ligne-montee > td {
	/* WooCommerce passe la cellule de total en `display: flex` : elle cesserait
	   d'être une cellule et la carte se décrocherait de son filet. */
	display: table-cell;
	padding: 18px 0;
	border-top: 1px solid var(--jk-bordure);
	border-bottom: 1px solid var(--jk-bordure);
	background: #fff;
	vertical-align: top;
}

.jk-panier-table--tableau .wc-block-cart-items__row.jk-ligne-montee > td:first-child,
.wc-block-cart__main table.jk-panier-table--tableau .wc-block-cart-items__row.jk-ligne-montee > td:first-child {
	padding-left: 20px;
	padding-right: 18px;
	border-left: 1px solid var(--jk-bordure);
	border-radius: 20px 0 0 20px;
}

.jk-panier-table--tableau .wc-block-cart-items__row.jk-ligne-montee > td:last-child,
.wc-block-cart__main table.jk-panier-table--tableau .wc-block-cart-items__row.jk-ligne-montee > td:last-child {
	padding-right: 20px;
	border-right: 1px solid var(--jk-bordure);
	border-radius: 0 20px 20px 0;
}

/* Vignette : cellule native restylée, rien n'est déplacé.
   La cellule borne et rogne, l'image ne peut donc jamais mordre sur le titre,
   même si la colonne est plus étroite que prévu ; `aspect-ratio` + `object-fit`
   recadrent en carré une image source portrait. */
table.wc-block-cart-items .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__image {
	box-sizing: content-box;
	overflow: hidden;
}

table.wc-block-cart-items .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__image img {
	display: block;
	width: 96px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	border-radius: 14px;
	object-fit: cover;
}

/* Prix : cellule native restylée, en haut à droite de la carte. */
table.wc-block-cart-items .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__total {
	color: var(--jk-bleu);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
	white-space: nowrap;
}

table.wc-block-cart-items .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__total .wc-block-components-product-price,
table.wc-block-cart-items .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__total .wc-block-components-product-price__value,
table.wc-block-cart-items .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__total .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Le corps de la carte
 * ------------------------------------------------------------------------ */

.jk-panier-ligne {
	min-width: 0;
	color: var(--jk-texte);
	text-align: left;
}

/* ---------------------------------------------------------------------------
 * En-tête : badge de type
 * ------------------------------------------------------------------------ */

.jk-panier-ligne__entete {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.jk-panier-ligne__badge {
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--jk-bleu-clair);
	color: var(--jk-bleu);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.jk-panier-ligne--atelier .jk-panier-ligne__badge {
	background: var(--jk-teal);
	color: var(--jk-bleu);
}

.jk-panier-ligne--anniversaire .jk-panier-ligne__badge {
	background: var(--jk-orange-clair);
	color: var(--jk-orange-fonce);
}

.jk-panier-ligne--jokopass .jk-panier-ligne__badge {
	background: var(--jk-vert-clair);
	color: var(--jk-vert-fonce);
}

.jk-panier-ligne__titre {
	margin: 0 0 10px;
	color: var(--jk-bleu);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * Pastilles : date, horaire, lieu, effectif
 * ------------------------------------------------------------------------ */

.jk-panier-ligne__pastilles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0 0 12px;
	padding: 0;
	font-size: 0.92rem;
	line-height: 1.35;
}

.jk-panier-ligne__pastille {
	padding: 3px 11px;
	border: 1px solid var(--jk-bordure);
	border-radius: 999px;
	background: #fff;
	color: var(--jk-texte);
	font-weight: 600;
	white-space: nowrap;
}

/* Le lieu est ce que le client cherche en premier : il porte la couleur Jokoani. */
.jk-panier-ligne__pastille--lieu {
	border-color: transparent;
	background: var(--jk-bleu-clair);
	color: var(--jk-bleu);
	font-weight: 700;
}

.jk-panier-ligne__pastille--effectif {
	border-color: transparent;
	background: #f2f5f9;
	color: var(--jk-muted);
}

/* ---------------------------------------------------------------------------
 * Lignes de reçu
 * ------------------------------------------------------------------------ */

.jk-panier-ligne__lignes {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--jk-bordure);
}

.jk-panier-ligne__lignes li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 66, 145, 0.09);
	font-size: 0.94rem;
	line-height: 1.4;
	list-style: none;
}

.jk-panier-ligne__lignes li::before,
.jk-panier-ligne__lignes li::marker {
	content: none;
}

.jk-panier-ligne__lignes li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.jk-panier-ligne__lignes span {
	color: var(--jk-muted);
}

.jk-panier-ligne__lignes strong {
	color: var(--jk-texte);
	font-weight: 600;
	text-align: right;
}

.jk-panier-ligne__lignes .woocommerce-Price-amount,
.jk-panier-ligne__lignes bdi {
	color: inherit;
	white-space: nowrap;
}

.jk-panier-ligne__pied {
	margin-top: 4px;
}

.jk-panier-ligne__total {
	font-size: 1.02rem;
}

.jk-panier-ligne__total span {
	color: var(--jk-texte);
	font-weight: 700;
}

.jk-panier-ligne__total strong,
.jk-panier-ligne__total strong .woocommerce-Price-amount,
.jk-panier-ligne__total strong .woocommerce-Price-currencySymbol,
.jk-panier-ligne__total strong span {
	color: var(--jk-bleu);
	font-size: 1.12rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Actions
 * ------------------------------------------------------------------------ */

.jk-panier-ligne__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-top: 14px;
}

.jk-panier-ligne__bouton {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 9px 20px;
	border: 1.5px solid var(--jk-bleu);
	border-radius: 999px;
	background: transparent;
	color: var(--jk-bleu) !important;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.jk-panier-ligne__bouton:hover,
.jk-panier-ligne__bouton:focus-visible {
	background: var(--jk-bleu);
	color: #fff !important;
	text-decoration: none;
}

.jk-panier-ligne__supprimer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--jk-muted);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.18s ease;
}

.jk-panier-ligne__supprimer:hover,
.jk-panier-ligne__supprimer:focus-visible {
	color: #b42318;
	background: none;
}

.jk-panier-ligne__poubelle {
	display: inline-flex;
	align-items: center;
}

.jk-panier-ligne__poubelle svg {
	fill: none;
}

/* ---------------------------------------------------------------------------
 * Petit écran : WooCommerce passe déjà la ligne en grid et masque son en-tête.
 * On reprend sa grille avec une vignette de 64 px à côté du titre, le prix en
 * haut à droite, le reste de la carte en pleine largeur.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Mode grille : WooCommerce a lui-même empilé la ligne (bloc étroit). On reprend
 * sa grille pour placer vignette, prix et carte, et c'est la ligne qui porte le
 * décor.
 * ------------------------------------------------------------------------ */

table.jk-panier-table--grille {
	border-spacing: 0 14px;
}

table.jk-panier-table--grille .wc-block-cart-items__row.jk-ligne-montee {
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 8px 18px;
	padding: 18px 20px;
	border: 1px solid var(--jk-bordure);
	border-radius: 20px;
	background: #fff;
}

table.jk-panier-table--grille .wc-block-cart-items__row.jk-ligne-montee > td,
table.jk-panier-table--grille .wc-block-cart-items__row.jk-ligne-montee > td:first-child,
table.jk-panier-table--grille .wc-block-cart-items__row.jk-ligne-montee > td:last-child {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Vignette à gauche du titre et du prix, le reste de la carte à sa droite. */
table.jk-panier-table--grille .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__image {
	grid-column: 1;
	grid-row: 1 / 3;
}

table.jk-panier-table--grille .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__total {
	grid-column: 2;
	grid-row: 1;
}

table.jk-panier-table--grille .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__product {
	grid-column: 2;
	grid-row: 2;
}

/* ---------------------------------------------------------------------------
 * Mode compact : colonne étroite, tout s'empile et la vignette passe à 64 px.
 * ------------------------------------------------------------------------ */

table.jk-panier-table--compact.jk-panier-table--grille .wc-block-cart-items__row.jk-ligne-montee {
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 8px 14px;
	padding: 16px;
}

table.jk-panier-table--compact .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__image img {
	width: 64px;
	border-radius: 12px;
}

table.jk-panier-table--compact .wc-block-cart-items__row.jk-ligne-montee .wc-block-cart-item__total {
	font-size: 1.02rem;
}

.jk-panier-table--compact .jk-panier-ligne__titre {
	font-size: 1.06rem;
}

.jk-panier-table--compact .jk-panier-ligne__pastilles {
	font-size: 0.86rem;
}

.jk-panier-table--compact .jk-panier-ligne__pastille {
	white-space: normal;
}

.jk-panier-table--compact .jk-panier-ligne__lignes li {
	flex-direction: column;
	gap: 2px;
}

.jk-panier-table--compact .jk-panier-ligne__lignes strong {
	text-align: left;
}

/* `align-items: stretch` suffit à occuper toute la largeur : un `width: 100%`
   ici imposerait sa largeur minimale au tableau du bloc. */
.jk-panier-table--compact .jk-panier-ligne__actions {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin-top: 16px;
}

.jk-panier-table--compact .jk-panier-ligne__bouton,
.jk-panier-table--compact .jk-panier-ligne__supprimer {
	justify-content: center;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * « Continuer mes achats » : sous le bouton de validation, dans le récapitulatif
 * ------------------------------------------------------------------------ */

.jk-panier-continuer {
	position: relative;
	margin: 12px 0 0;
	text-align: center;
}

.jk-panier-continuer__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	border: 0;
	background: none;
	color: #004291;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.jk-panier-continuer__bouton:hover,
.jk-panier-continuer__bouton:focus-visible {
	background: none;
	color: #004291;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jk-panier-continuer__fleche {
	font-size: 1.05em;
	line-height: 1;
}

/* Menu de destinations, ancré sous le bouton. */
.jk-panier-menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 50%;
	width: max-content;
	min-width: 210px;
	max-width: 100%;
	padding: 8px;
	transform: translateX(-50%);
	border: 1px solid #dce4ec;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 66, 145, 0.14);
	text-align: left;
}

.jk-panier-menu__titre {
	margin: 4px 8px 8px;
	color: #5f6f83;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.jk-panier-menu__item {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	color: #004291 !important;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.jk-panier-menu__item:hover,
.jk-panier-menu__item:focus-visible {
	background: #e9f1fa;
	color: #004291 !important;
	text-decoration: none;
	outline: none;
}

.jk-panier-menu__item:focus-visible {
	box-shadow: inset 0 0 0 2px #004291;
}

/* ---------------------------------------------------------------------------
 * Écran « Payer la commande » (order-pay)
 *
 * Les cartes y sont autonomes : pas de tableau WooCommerce à habiller, le
 * décor est porté par la carte elle-même. Tout le reste — badges, pastilles,
 * lignes de reçu — est repris tel quel de la section panier ci-dessus.
 * ------------------------------------------------------------------------ */

.jk-paiement {
	--jk-bleu: #004291;
	--jk-bleu-clair: #e9f1fa;
	--jk-texte: #17324d;
	--jk-muted: #5f6f83;
	--jk-bordure: #dce4ec;
	--jk-creme: #fdfbf4;
	--jk-rouge: #b42318;

	max-width: 880px;
	margin: 0 auto 64px;
	color: var(--jk-texte);
}

.jk-paiement__section {
	margin: 0 0 14px;
	color: var(--jk-bleu);
	font-size: 1.15rem;
	line-height: 1.3;
	text-transform: none;
}

.jk-paiement__section--carte {
	margin-bottom: 12px;
}

.jk-paiement__lignes {
	display: grid;
	gap: 14px;
}

/* La carte autonome : même contenu que dans le panier, décor en propre. */
.jk-panier-ligne--carte {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: start;
	gap: 20px;
	box-sizing: border-box;
	padding: 18px 20px;
	border: 1px solid var(--jk-bordure);
	border-radius: 20px;
	background: #fff;
}

.jk-panier-ligne--carte:not(:has(.jk-panier-ligne__vignette)) {
	grid-template-columns: minmax(0, 1fr);
}

.jk-panier-ligne--carte.is-annulee {
	background: #f7f7f5;
	opacity: 0.72;
}

.jk-panier-ligne--carte.is-annulee .jk-panier-ligne__titre {
	text-decoration: line-through;
}

.jk-panier-ligne__vignette {
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 14px;
	background: #eef7f8;
}

.jk-panier-ligne__vignette img {
	display: block;
	width: 96px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	border-radius: 14px;
	object-fit: cover;
}

.jk-panier-ligne--carte .jk-panier-ligne__corps {
	min-width: 0;
}

/* Le prix de la ligne, à droite de l'en-tête (le panier le laisse à sa colonne
   native, cet écran n'a pas de colonne : la carte le porte). */
.jk-panier-ligne--carte .jk-panier-ligne__prix {
	margin-left: auto;
	color: var(--jk-bleu);
	font-size: 1.1rem;
	font-weight: 700;
	white-space: nowrap;
}

.jk-panier-ligne--carte .jk-panier-ligne__prix .woocommerce-Price-amount,
.jk-panier-ligne--carte .jk-panier-ligne__prix bdi {
	color: inherit;
	font-size: inherit;
	font-weight: 700;
}

.jk-panier-ligne__annulee {
	padding: 3px 9px;
	border-radius: 999px;
	background: #fbe4e4;
	color: var(--jk-rouge, #b42318);
	font-size: 0.74rem;
	font-weight: 700;
}

.jk-panier-ligne__sous-libelle {
	display: block;
	color: #8494a6;
	font-size: 0.85em;
	line-height: 1.35;
}

.jk-panier-ligne__participants {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}

.jk-panier-ligne__participant.is-annule {
	color: #8494a6;
}

/* Le barré porte sur le nom seul : appliqué au conteneur, il déteindrait sur la
   mention d'annulation, qu'aucun `text-decoration: none` ne peut annuler. */
.jk-panier-ligne__participant.is-annule .jk-panier-ligne__participant-nom {
	text-decoration: line-through;
}

.jk-panier-ligne__participant small {
	display: block;
	font-size: 0.82em;
	font-weight: 500;
}

/* Récapitulatif des totaux : même reçu que « Votre réservation » du panier. */
.jk-paiement__recap {
	margin: 26px 0 0;
	padding: 22px 24px;
	border: 1px solid var(--jk-bordure);
	border-radius: 20px;
	background: var(--jk-creme);
}

.jk-paiement__recap ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jk-paiement__recap li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid rgba(0, 66, 145, 0.09);
	font-size: 0.98rem;
	list-style: none;
}

.jk-paiement__recap li:last-child {
	border-bottom: 0;
}

.jk-paiement__recap span {
	color: var(--jk-muted);
}

.jk-paiement__recap strong {
	color: var(--jk-bleu);
	white-space: nowrap;
}

.jk-paiement__total {
	font-size: 1.08rem;
}

.jk-paiement__total span {
	color: var(--jk-texte);
	font-weight: 700;
}

.jk-paiement__total strong {
	font-size: 1.22rem;
	font-weight: 700;
}

/* Bloc de paiement : habillage seulement, le formulaire Square est intact. */
.jk-paiement__paiement {
	margin: 26px 0 0;
	padding: 22px 24px;
	border: 1px solid var(--jk-bordure);
	border-radius: 20px;
	background: #fff;
}

.jk-paiement__paiement .payment_methods,
.jk-paiement__paiement .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	background: none;
}

.jk-paiement__paiement .wc_payment_methods > li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

/* L'encadré gris-lavande du module Square reprend le fond de la carte. */
.jk-paiement__paiement .payment_box,
.jk-paiement__paiement .wc_payment_method .payment_box {
	margin: 12px 0 0;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--jk-bordure);
	border-radius: 0;
	background: transparent;
	color: var(--jk-texte);
}

.jk-paiement__paiement .payment_box::before {
	display: none;
}

.jk-paiement__paiement label {
	color: var(--jk-texte);
	font-weight: 600;
}

.jk-paiement__paiement .form-row {
	margin: 18px 0 0;
	padding: 0;
}

/* Bouton de paiement : la pilule bleue de « Valider la commande ». */
.jk-paiement__paiement #place_order {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--jk-bleu);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.jk-paiement__paiement #place_order:hover,
.jk-paiement__paiement #place_order:focus-visible {
	background: #07366d;
	color: #fff;
}

.jk-paiement__securise {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 14px 0 0;
	color: var(--jk-muted);
	font-size: 0.86rem;
	line-height: 1.4;
}

.jk-paiement__cadenas {
	font-size: 0.95em;
	line-height: 1;
}

@media (max-width: 600px) {
	.jk-panier-ligne--carte {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 14px;
		padding: 16px;
	}

	.jk-panier-ligne__vignette,
	.jk-panier-ligne__vignette img {
		width: 64px;
		height: 64px;
		border-radius: 12px;
	}

	.jk-panier-ligne--carte .jk-panier-ligne__lignes li {
		flex-direction: column;
		gap: 2px;
	}

	.jk-panier-ligne--carte .jk-panier-ligne__lignes strong {
		text-align: left;
	}

	.jk-panier-ligne__participants {
		align-items: flex-start;
	}

	.jk-paiement__recap,
	.jk-paiement__paiement {
		padding: 18px 16px;
	}

	.jk-paiement__recap li {
		flex-direction: column;
		gap: 2px;
	}
}