/* checkout.css — peau Highland sur la caisse et le panier WooCommerce.
   Chargée en priorité 9999 : elle passe APRÈS le CSS des passerelles (PPCP) et de Storefront.
   La mise en page vit dans woocommerce/checkout/*.php ; cette feuille ne fait que raccorder
   le balisage WooCommerce (form-row, wc_payment_methods, shop_table) aux classes Highland. */

/* ============================ 1. CADRE DE PAGE ============================ */
body.woocommerce-checkout main.ll-page .ll-page__head { display: none; }
body.woocommerce-checkout main.ll-page .entry-content {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  background: transparent; color: var(--ink);
}
body.woocommerce-checkout .woocommerce { background: transparent; }
.ll-checkout, .ll-checkout .woocommerce-checkout { background: transparent; color: var(--ink); font-family: var(--text); }
.ll-checkout__title { font-family: var(--display); font-weight: 600; margin: 0; }
.ll-checkout .ll-checkout__summary-head h2 {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-md); margin: 0; line-height: 1.2;
}

/* Deux colonnes desktop : le formulaire porte la grille (il enveloppe champs + récapitulatif). */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout { display: block; padding: var(--s7) 0 var(--s9); }
  body.woocommerce-checkout .ll-checkout form.checkout {
    display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--s9); align-items: start;
  }
  body.woocommerce-checkout .ll-checkout #customer_details { grid-column: 1; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary {
    grid-column: 2; margin-top: 0; position: sticky; top: calc(var(--header-h) + var(--s5));
  }
}
/* Storefront fait flotter les colonnes du checkout : sans ça le récap tombe à 179 px de large
   et « PLACE ORDER » s'écrit une lettre par ligne. */
.ll-checkout #customer_details, .ll-checkout .col-1, .ll-checkout .col-2,
.ll-checkout #order_review, .ll-checkout #order_review_heading { float: none; width: 100%; }
.ll-checkout .col-2:empty { display: none; }

/* ============================ 2. CHAMPS ============================ */
/* Woo sort <label> PUIS <input> : le libellé flottant de la maquette (input:not(:placeholder-shown) + label)
   est impossible tel quel. On reproduit l'état « rempli » : libellé petit en capitales dans la boîte. */
.ll-fieldset__legend {
  display: flex; align-items: center; gap: var(--s3); font-family: var(--text); font-weight: 500;
  font-size: var(--fs-2xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--accent); margin: var(--s6) 0 var(--s4);
}
.ll-fieldset__legend::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .2; }
.ll-fieldset--contact .ll-fieldset__legend { margin-top: 0; }
.ll-checkout .woocommerce-billing-fields > h3,
.ll-checkout .woocommerce-additional-fields > h3 { display: none; }

.ll-checkout .ll-fieldset__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.ll-checkout .ll-fieldset__fields > .form-row { grid-column: 1 / -1; }
.ll-checkout .ll-fieldset__fields > .form-row-first { grid-column: 1; }
.ll-checkout .ll-fieldset__fields > .form-row-last { grid-column: 2; }
@media (max-width: 599px) { .ll-checkout .ll-fieldset__fields { grid-template-columns: 1fr; }
  .ll-checkout .ll-fieldset__fields > .form-row-first,
  .ll-checkout .ll-fieldset__fields > .form-row-last { grid-column: 1; } }

.ll-checkout .form-row {
  position: relative; float: none; width: auto; margin: 0 0 var(--s3); padding: 8px var(--s4) 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent;
  min-height: 56px; display: block;
}
.ll-checkout .form-row label {
  display: block; font: 500 11px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 2px; padding: 0;
}
.ll-checkout .form-row abbr.required, .ll-checkout .form-row .required { display: none; }
.ll-checkout .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
.ll-checkout .form-row input.input-text,
.ll-checkout .form-row textarea,
.ll-checkout .form-row select,
.ll-checkout .form-row .select2-selection {
  width: 100%; border: 0; background: transparent; box-shadow: none; outline: 0;
  padding: 0; margin: 0; min-height: 26px; height: auto; border-radius: 0;
  font: var(--fs-base)/1.4 var(--text); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.ll-checkout .form-row select { background-image: none; padding-right: 20px; }
.ll-checkout .form-row textarea { min-height: 72px; resize: vertical; }
.ll-checkout .form-row input::placeholder, .ll-checkout .form-row textarea::placeholder { color: rgba(74, 81, 101, .6); }
.ll-checkout .form-row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ll-checkout .form-row.woocommerce-invalid { border-color: var(--action); }
/* Chevron du pays, le select natif étant dépouillé de sa flèche. */
.ll-checkout .form-row select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23121A2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; }
.ll-checkout .ll-field__hint { font-size: var(--fs-xs); color: var(--muted); margin: -4px 0 var(--s4); }

/* Cases à cocher : pas de boîte, la case ne doit pas ressembler à un champ. */
.ll-checkout .form-row.ll-checkbox-row,
.ll-checkout .woocommerce-shipping-fields > h3,
.ll-checkout .woocommerce-form__label-for-checkbox {
  border: 0; padding: 0; min-height: 0; background: transparent;
}
.ll-checkout .woocommerce-shipping-fields > h3 {
  font: 500 var(--fs-sm)/1.4 var(--text); text-transform: none; letter-spacing: 0;
  color: var(--ink); margin: var(--s5) 0 var(--s3);
}
.ll-checkout .woocommerce-shipping-fields > h3 label { display: inline-flex; align-items: center; gap: var(--s2); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--ink); }
.ll-checkout input[type="checkbox"], .ll-checkout input[type="radio"] { accent-color: var(--action); width: 18px; height: 18px; }

/* ============================ 3. LIVRAISON ET PAIEMENT ============================ */
.ll-checkout #shipping_method li, .ll-checkout .wc_payment_methods li.wc_payment_method {
  list-style: none; display: block; padding: var(--s4); margin: 0 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent;
}
.ll-checkout .wc_payment_methods { margin: 0; padding: 0; border: 0; }
.ll-checkout .wc_payment_methods li.wc_payment_method > label {
  display: inline-flex; align-items: center; gap: var(--s3); margin: 0;
  font: 500 var(--fs-sm)/1.3 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.ll-checkout .wc_payment_methods li.wc_payment_method > input:checked + label { color: var(--ink); }
.ll-checkout .wc_payment_methods li.wc_payment_method:has(> input:checked) { background: var(--soft); border-color: var(--ink); }
.ll-checkout .wc_payment_methods li.wc_payment_method img { max-height: 24px; width: auto; margin-left: var(--s2); }
.ll-checkout .payment_box, .ll-checkout .wc_payment_methods .payment_box {
  background: transparent; border: 0; border-radius: 0; margin: var(--s3) 0 0; padding: 0;
  font: var(--fs-xs)/1.6 var(--text); color: var(--muted);
}
.ll-checkout .payment_box::before { display: none !important; }
/* Champs carte de la passerelle : même boîte que nos champs, fond ivoire au lieu du blanc. */
.ll-checkout .payment_box .wc-block-components-text-input,
.ll-checkout .payment_box > div[class*="ppcp"],
.ll-checkout .payment_box .ppcp-card-fields { background: transparent; }

/* ============================ 4. RÉCAPITULATIF ============================ */
.ll-checkout .ll-checkout__summary { background: var(--soft); padding: var(--s5); margin-top: var(--s6); border-radius: var(--radius); }
.ll-checkout #order_review { background: transparent; border: 0; padding: 0; }
.ll-checkout table.ll-review {
  width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent;
  font-family: var(--text); font-size: var(--fs-sm); color: var(--ink);
}
.ll-checkout table.ll-review thead { display: none; }
.ll-checkout table.ll-review tr, .ll-checkout table.ll-review tbody, .ll-checkout table.ll-review tfoot { background: transparent; border: 0; }
.ll-checkout table.ll-review td, .ll-checkout table.ll-review th {
  background: transparent; border: 0; padding: 0; color: var(--ink); font-weight: inherit; text-align: left;
}
/* Lignes article : la grille Highland vit dans le td. */
.ll-checkout .ll-lineitem {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s3); align-items: center;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.ll-checkout .ll-lineitem__thumb { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg); }
.ll-checkout .ll-lineitem__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.ll-checkout .ll-lineitem__name { display: block; line-height: 1.35; }
.ll-checkout .ll-lineitem__meta { display: block; font-size: var(--fs-xs); margin-top: 2px; color: var(--muted); }
.ll-checkout .ll-lineitem__price { white-space: nowrap; }
.ll-checkout .ll-lineitem dl.variation { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.ll-checkout .ll-lineitem dl.variation dt, .ll-checkout .ll-lineitem dl.variation dd { display: inline; margin: 0; font-weight: inherit; }
/* Totaux : ligne libellé / montant, comme .ll-summary__row. */
.ll-checkout table.ll-review tfoot tr { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; }
.ll-checkout table.ll-review tfoot tr.cart-subtotal { margin-top: var(--s2); }
.ll-checkout table.ll-review tfoot tr td { text-align: right; }
.ll-checkout table.ll-review tfoot tr.order-total {
  font-size: var(--fs-lg); padding-top: var(--s4); margin-top: var(--s2);
  border-top: 1px solid var(--line-strong); color: var(--ink);
}
.ll-checkout table.ll-review tfoot tr.order-total .amount { font-family: var(--display); font-weight: 600; color: var(--ink); }
.ll-checkout table.ll-review tfoot ul#shipping_method { margin: 0; padding: 0; }
.ll-checkout table.ll-review tfoot ul#shipping_method li { list-style: none; border: 0; padding: 0; margin: 0; background: transparent; }
.ll-checkout table.ll-review tfoot .woocommerce-shipping-destination { display: none; }

/* ============================ 5. BOUTON ET MENTIONS ============================ */
.ll-checkout #payment { background: transparent; border-radius: 0; padding: var(--s5) 0 0; }
.ll-checkout #payment .place-order { padding: var(--s4) 0 0; margin: 0; float: none; width: 100%; }
.ll-checkout #place_order, .ll-checkout button#place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; height: 56px; padding: 0 var(--s5); white-space: nowrap; cursor: pointer;
  background: var(--action) !important; color: var(--onaction) !important; border: 0; border-radius: var(--radius);
  font: 500 var(--fs-sm)/1 var(--text); letter-spacing: var(--track); text-transform: uppercase;
  transition: background var(--t-fast) var(--ease);
}
.ll-checkout #place_order:hover { background: var(--action-hover) !important; }
.ll-checkout .woocommerce-privacy-policy-text { font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }
.ll-checkout .woocommerce-privacy-policy-text p { margin: 0 0 var(--s2); }
.ll-checkout__security { display: grid; grid-template-columns: 20px 1fr; gap: var(--s2); align-items: start;
  font-size: var(--fs-xs); line-height: 1.6; margin-top: var(--s4); color: var(--muted); }
.ll-checkout__security svg { color: var(--accent); margin-top: 2px; flex: 0 0 auto; }
.ll-checkout__legal { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-xs); margin-top: var(--s4); }
.ll-checkout__legal a { color: var(--ink); border-bottom: 1px solid var(--line-strong); text-decoration: none; }
.ll-checkout__legal a:hover { color: var(--action); }

/* Bandeaux d'information Woo (connexion, code promo) au ton Highland. */
.ll-checkout .woocommerce-info, .ll-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-info {
  background: var(--soft); border-top: 2px solid var(--accent); color: var(--ink);
  font-family: var(--text); font-size: var(--fs-sm);
}

/* ============================ 6. PANIER ============================ */
/* Panier mobile : Storefront place la croix de suppression a right:-0.618em, elle debordait a droite
   et etirait le document a 404 px pour un ecran de 390. Selecteur plus specifique pour la rentrer. */
.woocommerce-cart-form table.cart td.product-remove { position: relative; overflow: hidden; }
.woocommerce-cart-form table.cart td.product-remove a.remove { right: 0; top: 0; }

body.woocommerce-cart main.ll-page .ll-page__head { display: none; }
body.woocommerce-cart main.ll-page .entry-content { max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter) 0; }

/* Bouton commander du panier : le style de lien des pages (souligne, bleu nuit) gagnait en specificite. */
body.woocommerce-cart .entry-content .ll-summary .checkout-button,
body.woocommerce-cart .entry-content .ll-summary .wc-proceed-to-checkout a.button { color: var(--onaction); text-decoration: none; border: 0; }
body.woocommerce-cart .entry-content .ll-summary .checkout-button:hover { color: var(--onaction); text-decoration: none; }
/* Le style de lien du contenu de page soulignait titre, collection et prix des cartes « You may also like ». */
body.woocommerce-cart .entry-content a.ll-card,
body.woocommerce-cart .entry-content a.ll-card:hover { text-decoration: none; }
/* Prix unitaire de la ligne panier : le soulignement du titre avalait le signe livre. */
.ll-cart__meta .product-price { white-space: nowrap; text-decoration: none; }
.ll-cart__name a { text-decoration: none; }
.ll-cart__name a:hover { text-decoration: underline; }

/* Lien de suppression du panier : WooCommerce impose .woocommerce a.remove{width:1em;height:1em;font-size:1.5em}
   depuis une feuille chargee APRES app.css, le mot Remove restait enferme dans un carre de 44 px. */
.ll-cart__actions a.remove, .woocommerce .ll-cart__actions a.remove {
  display: inline-flex; align-items: center; width: auto; height: auto; min-height: 44px;
  font-size: 13px; line-height: 1.4; white-space: nowrap; border-bottom: 0; text-indent: 0;
  text-decoration: underline; text-underline-offset: 3px; color: #4A5165; background: none; border-radius: 0;
}
.ll-cart__actions a.remove:hover, .woocommerce .ll-cart__actions a.remove:hover { color: var(--action); background: none; }

/* ============ 7. PASSE 2 : specificite face a Storefront et a PPCP ============ */
/* Storefront habille .entry-content h2 en Playfair 24 px : nos legendes de bloc sortaient
   en serif capitales geantes au lieu du petit label Jost de la maquette. */
body.woocommerce-checkout .ll-checkout h2.ll-fieldset__legend {
  font-family: var(--text) !important; font-weight: 500 !important; font-size: var(--fs-2xs) !important;
  letter-spacing: var(--track-wide) !important; text-transform: uppercase; color: var(--accent) !important;
  margin: var(--s6) 0 var(--s4) !important; line-height: 1.4;
}
body.woocommerce-checkout .ll-checkout .ll-fieldset--contact h2.ll-fieldset__legend { margin-top: 0 !important; }
body.woocommerce-checkout .ll-checkout .ll-checkout__summary-head h2 {
  font-family: var(--text) !important; font-weight: 500 !important; font-size: var(--fs-md) !important;
  letter-spacing: 0 !important; text-transform: none; margin: 0 !important;
}

/* Rayures et fonds gris de la table Woo : le 2e article prenait un fond blanc dans le recapitulatif. */
body.woocommerce-checkout .ll-checkout table.ll-review tbody tr td,
body.woocommerce-checkout .ll-checkout table.ll-review tbody tr:nth-child(2n) td,
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr th,
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr td { background: transparent !important; border: 0 !important; }
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr.order-total { border-top: 1px solid var(--line-strong) !important; }

/* PPCP + Storefront peignent les cartes de paiement en gris clair (#f5f5f5 / #fafafa) : hors palette. */
body.woocommerce-checkout #payment, body.woocommerce-checkout #payment ul.payment_methods { background: transparent !important; }
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  background: transparent !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important;
  padding: var(--s4) !important; margin: 0 0 var(--s3) !important;
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
  background: var(--soft) !important; border-color: var(--ink) !important;
}
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment .payment_box > div { background: transparent !important; }
body.woocommerce-checkout #payment .payment_box { border: 0 !important; box-shadow: none !important; }
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  font-family: var(--text) !important; font-size: var(--fs-sm) !important; font-weight: 500 !important;
  color: var(--ink) !important; letter-spacing: 0 !important; text-transform: none !important;
}

/* ============ 8. PASSE 3 ============ */
/* .place-order est un .form-row : il heritait de la boite a bord des champs (et d un fond gris PPCP). */
body.woocommerce-checkout .ll-checkout #payment .form-row.place-order {
  border: 0 !important; background: transparent !important; padding: var(--s3) 0 0 !important; min-height: 0;
}
/* Le formulaire carte de PPCP arrive sur un gris #fbfbfb, hors palette. */
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form,
body.woocommerce-checkout .ll-checkout #payment fieldset {
  background: transparent !important; border: 0 !important; margin: 0; padding: var(--s2) 0 0;
}
/* « Deliver to a different address ? » : Woo en fait un h3, Storefront l habille en Playfair 18
   et pousse la case a l extreme droite. Ligne de case a cocher normale. */
body.woocommerce-checkout .ll-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .ll-checkout #ship-to-different-address {
  font-family: var(--text) !important; font-size: var(--fs-sm) !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important;
  margin: var(--s5) 0 var(--s3) !important; border: 0; padding: 0;
}
body.woocommerce-checkout .ll-checkout #ship-to-different-address label {
  display: inline-flex !important; align-items: center; gap: var(--s2); width: auto !important; float: none;
}
body.woocommerce-checkout .ll-checkout #ship-to-different-address input { float: none !important; margin: 0; }
/* Le bloc paiement collait trop bas sous le total. */
body.woocommerce-checkout .ll-checkout #payment { padding-top: var(--s4) !important; }

/* ============ 9. PASSE 4 ============ */
/* Bouton Checkout du panier : Storefront le sort en 20 px et wc-forward lui colle une fleche
   que la maquette n a pas. Meme typo que les autres boutons Highland. */
body.woocommerce-cart .entry-content .ll-summary .checkout-button {
  font: 500 var(--fs-sm)/1 var(--text) !important; letter-spacing: var(--track) !important;
  text-transform: uppercase; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 0 var(--s5); background: var(--action); border-radius: var(--radius);
}
body.woocommerce-cart .entry-content .ll-summary .checkout-button::after,
body.woocommerce-cart .entry-content .ll-summary .checkout-button::before { display: none !important; content: none !important; }
/* Titre de ligne du panier : le style de lien du contenu de page le soulignait au repos. */
body.woocommerce-cart .entry-content .ll-cart__name a { text-decoration: none; }
body.woocommerce-cart .entry-content .ll-cart__name a:hover { text-decoration: underline; }

/* Boutons radio des passerelles : PPCP impose son violet, Woo un noir plein. Palette Lanora. */
body.woocommerce-checkout .ll-checkout #payment input[type="radio"],
body.woocommerce-checkout .ll-checkout #payment input.input-radio {
  accent-color: var(--action) !important; width: 18px; height: 18px; filter: none;
}

/* ============ 10. PASSE 5 ============ */
/* « Total to pay » : le montant etait en Playfair 19 px et son libelle en Jost 13. Meme typo. */
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr.order-total th {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-lg); line-height: 1.2;
}

/* ============ 11. DNVB 10/09 — caisse au standard des grandes marques ============ */

/* --- paiement express, au-dessus du formulaire --- */
.ll-checkout .ll-express { display: none; margin: 0 0 var(--s6); }
.ll-checkout .ll-express.is-on { display: block; }
.ll-checkout .ll-express__slot { display: grid; gap: var(--s3); }
.ll-checkout .ll-express__slot iframe { max-width: 100%; }
.ll-checkout .ll-express__rule {
  display: flex; align-items: center; gap: var(--s4); margin: var(--s5) 0 0;
  font: 500 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.ll-checkout .ll-express__rule::before, .ll-checkout .ll-express__rule::after {
  content: ''; flex: 1; height: 1px; background: var(--line-strong); opacity: .5;
}

/* --- entête du récapitulatif : bouton replier (mobile) --- */
.ll-checkout .ll-checkout__summary-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  margin: 0 0 var(--s4);
}
.ll-checkout .ll-summary-toggle {
  display: none; align-items: center; gap: var(--s2); background: none; border: 0; padding: 0;
  font: 500 var(--fs-sm)/1.2 var(--text); color: var(--ink); cursor: pointer;
}
.ll-checkout .ll-summary-toggle__total { font-family: var(--display); font-size: var(--fs-md); }
.ll-checkout .ll-summary-toggle svg { flex: 0 0 auto; transition: transform .2s ease; }
.ll-checkout .ll-checkout__summary.is-collapsed .ll-summary-toggle svg { transform: rotate(-90deg); }

/* --- champs secondaires repliés --- */
.ll-checkout .form-row.ll-folded { display: none !important; }
.ll-checkout .form-row.ll-folded.is-open { display: block !important; }
.ll-checkout .ll-foldbtn {
  grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 0;
  margin: 0 0 var(--s4); cursor: pointer; color: var(--ink);
  font: 500 var(--fs-sm)/1.3 var(--text); border-bottom: 1px solid var(--line-strong);
}
.ll-checkout .ll-foldbtn:hover { color: var(--action); border-color: var(--action); }
.ll-checkout .ll-foldbtn[hidden] { display: none; }
.ll-checkout .form-row .description,
.ll-checkout .form-row span.description { display: block; font: var(--fs-xs)/1.5 var(--text); color: var(--muted); margin-top: 2px; }

/* --- réassurance factuelle sous le bouton de paiement --- */
.ll-checkout .ll-checkout__reassure { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.ll-checkout .ll-checkout__reassure li {
  display: grid; grid-template-columns: 16px 1fr; gap: var(--s3); align-items: start;
  font: var(--fs-xs)/1.55 var(--text); color: var(--muted); margin: 0;
}
.ll-checkout .ll-checkout__reassure svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

/* --- desktop : carte de résumé collante, ombrée, alignée en haut --- */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary {
    align-self: start; max-height: calc(100vh - var(--header-h) - var(--s8));
    overflow: auto; scrollbar-width: thin;
  }
  .ll-checkout .ll-checkout__summary { box-shadow: 0 1px 2px rgba(18, 26, 46, .06); }
  .ll-checkout .ll-checkout__payslot { display: none; }
}

/* --- mobile : express, résumé replié, adresse, puis paiement --- */
@media (max-width: 1023px) {
  .ll-checkout form.checkout { display: flex; flex-direction: column; }
  .ll-checkout .ll-express { order: -3; }
  .ll-checkout .ll-checkout__summary { order: -2; margin-top: 0; margin-bottom: var(--s6); }
  .ll-checkout #customer_details { order: 0; }
  .ll-checkout .ll-checkout__payslot { order: 1; }
  .ll-checkout .ll-summary-toggle { display: inline-flex; }
  .ll-checkout .ll-checkout__summary-head h2 { font-size: var(--fs-sm); font-family: var(--text); font-weight: 500; text-transform: none; color: var(--muted); }
  .ll-checkout .ll-checkout__summary.is-collapsed .woocommerce-checkout-review-order-table { display: none; }
  .ll-checkout .ll-checkout__summary.is-collapsed .ll-checkout__summary-head { margin-bottom: 0; }
  .ll-checkout .ll-checkout__payslot #payment { margin-top: var(--s6); }
  .ll-checkout .ll-checkout__payslot .ll-checkout__security,
  .ll-checkout .ll-checkout__payslot .ll-checkout__reassure,
  .ll-checkout .ll-checkout__payslot .ll-checkout__legal { margin-top: var(--s4); }
}

/* --- puces radio et cases : couleur de marque partout, y compris celles des passerelles --- */
.ll-checkout input[type="radio"], .ll-checkout input[type="checkbox"],
.ll-checkout .payment_box input, .ll-checkout .wc_payment_method input {
  accent-color: var(--action);
}

/* ============ 12. DNVB 10/09 (suite) — finitions du récapitulatif ============ */
/* Une seule famille pour les titres du récapitulatif. */
.ll-checkout .ll-checkout__summary-head h2 { font-family: var(--display); font-size: var(--fs-lg); }
.ll-checkout .order-total th, .ll-checkout .order-total td,
.ll-checkout .order-total .amount { font-family: var(--display); font-size: var(--fs-lg); }
/* Vignette d'article au même ratio que partout ailleurs. */
.ll-checkout .ll-lineitem { grid-template-columns: 64px 1fr auto; }
.ll-checkout .ll-lineitem__thumb { width: 64px; aspect-ratio: 3 / 4; }
/* « Deliver to a different address ? » : la case reste contre son libellé. */
.ll-checkout .woocommerce-shipping-fields > h3 { display: flex; justify-content: flex-start; }
.ll-checkout .woocommerce-shipping-fields > h3 label { justify-content: flex-start; width: auto; }
.ll-checkout .woocommerce-shipping-fields > h3 label input { order: -1; margin: 0 var(--s3) 0 0; }
/* Le bloc de paiement n'a pas besoin d'un troisième encadré autour des champs de carte. */
.ll-checkout .wc_payment_methods li.wc_payment_method .payment_box { border: 0; background: transparent; }

/* ============ 13. DNVB 10/09 — le paiement vit dans la colonne de gauche ============ */
.ll-checkout .ll-checkout__payslot { display: block; }
.ll-checkout .ll-checkout__payslot #payment { margin-top: var(--s6); }
.ll-checkout .ll-checkout__payslot .ll-checkout__security { margin-top: var(--s4); }
.ll-checkout .ll-checkout__payslot .ll-checkout__legal { margin-top: var(--s5); }
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout form.checkout { grid-template-columns: minmax(0, 1fr) 400px; }
  body.woocommerce-checkout .ll-checkout #customer_details { grid-column: 1; grid-row: 2; }
  body.woocommerce-checkout .ll-checkout .ll-express { grid-column: 1; grid-row: 1; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__payslot { grid-column: 1; grid-row: 3; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary {
    grid-column: 2; grid-row: 1 / 4; max-height: none; overflow: visible;
  }
  /* La carte de droite ne porte plus que le récapitulatif : elle reste courte et collante. */
  .ll-checkout .ll-checkout__summary { padding: var(--s5); }
}

/* ============ 14. rythme vertical de la caisse ============ */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout form.checkout { gap: 0 var(--s9); }
  body.woocommerce-checkout .ll-checkout #customer_details { margin-top: 0; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__payslot { margin-top: var(--s7); }
  body.woocommerce-checkout .ll-checkout .ll-express.is-on { margin-bottom: var(--s7); }
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary { margin-bottom: var(--s7); }
}
.ll-checkout .ll-checkout__head { margin-bottom: var(--s6); }
.ll-checkout .ll-checkout__guest { margin-top: var(--s2); }
/* La case « livrer à une autre adresse » reste contre son libellé (Storefront la fait flotter à droite). */
.ll-checkout .woocommerce-shipping-fields > h3 label input[type="checkbox"] { float: none !important; margin-left: 0 !important; }
.ll-checkout .woocommerce-shipping-fields > h3 label { display: inline-flex !important; width: auto !important; gap: var(--s3); }

/* ============ 15. mobile : fil d'étapes sur une ligne, barre de résumé compacte ============ */
@media (max-width: 640px) {
  .ll-checkout .ll-steps { font-size: 10px; letter-spacing: .08em; gap: var(--s2); flex-wrap: nowrap; }
  .ll-checkout .ll-steps__step { gap: 6px; white-space: nowrap; }
  .ll-checkout .ll-steps__n { width: 20px; height: 20px; font-size: 10px; }
  .ll-checkout .ll-summary-toggle { gap: 6px; white-space: nowrap; }
  .ll-checkout .ll-summary-toggle__label { font-size: 12px; }
  .ll-checkout .ll-summary-toggle__total { font-size: var(--fs-md); }
  .ll-checkout .ll-checkout__summary-head { gap: var(--s3); align-items: center; }
  .ll-checkout .ll-checkout__summary-head h2 { font-size: var(--fs-sm); }
}

/* ============ 16. nettoyage : pas de puces de page de service dans la caisse ============ */
.ll-checkout ul > li::before,
.ll-checkout .wc_payment_methods > li::before,
.ll-checkout .ll-checkout__reassure > li::before,
.ll-cart ul > li::before, .ll-summary ul > li::before { content: none !important; display: none !important; }
.ll-checkout ul > li, .ll-cart ul > li { padding-left: 0; }
.ll-checkout .ll-checkout__reassure > li { padding-left: 0; }
/* Champs de carte : numéro pleine largeur, date et cryptogramme côte à côte. */
.ll-checkout .wc-credit-card-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.ll-checkout .wc-credit-card-form > .form-row { grid-column: 1 / -1; }
.ll-checkout .wc-credit-card-form > .form-row-first { grid-column: 1; }
.ll-checkout .wc-credit-card-form > .form-row-last { grid-column: 2; }

/* ============ 17. un seul ratio d'image : 4/5 (11/09) ============ */
.ll-checkout .ll-lineitem__thumb, .ll-cart__thumb { aspect-ratio: 4 / 5; }

/* ============ JUGE 10/09 (passe 2) — radio de paiement encore violet + case a 535px de son libelle ============ */
/* Le rond visible N'EST PAS le vrai <input> (accent-color inoperant) : Storefront peint un
   ::before sur le <label> qui suit le radio coche, colore en #7F54B3 (violet Woo) via une regle
   generique partagee avec les etoiles d'avis et le stepper de quantite. On la reprend a l'identique
   (meme selecteur, mesure au CDP) pour forcer notre couleur d'action, en dernier (checkout.css = prio 9999). */
#payment .payment_methods li input[type="radio"]:first-child:checked + label::before,
#payment .payment_methods li.woocommerce-PaymentMethod > input[type="radio"]:first-child:checked + label::before,
#payment .payment_methods li.wc_payment_method > input[type="radio"]:first-child:checked + label::before {
  color: var(--action) !important;
}
/* La case "Deliver to a different address?" est un vrai <input> en position:absolute (mesure au DOM :
   x=818 alors que son libelle est a x=108-283, ~535px de vide en ordinateur). On le rejoint au flux
   flex de son label (deja inline-flex, deja dans le bon ordre dans le HTML : input avant le texte). */
body.woocommerce-checkout .ll-checkout .woocommerce-shipping-fields > h3 label input[type="checkbox"] {
  position: static !important; float: none !important; margin: 0 !important; inset: auto !important;
}
/* Champs de carte PayPal (iframes hebergees) : hauteur trop basse (35px mesures) dans le grand cadre ivoire. */
.ll-checkout #payment [id^="zoid-paypal-"] { height: 52px !important; }
.ll-checkout #payment [id^="zoid-paypal-"] iframe { height: 52px !important; }

/* ============ 18. PASSE FINALE 10/09 — rythme et paires de champs ============ */

/* a) Le paiement decrochait de l'adresse : mesure au DOM en 1440 px, 122 px de creme vide
   entre le bas de « + Add a delivery note » (1021) et le haut de #payment (1143), puis encore
   48 px avant le mot PAYMENT. Deux marges se cumulaient (payslot margin-top s7 + #payment
   margin-top s6). Une seule suffit : une caisse Shopify laisse ~56 px entre deux sections. */
.ll-checkout .ll-checkout__payslot #payment { margin-top: 0; }
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout .ll-checkout__payslot { margin-top: var(--s5); }
  body.woocommerce-checkout .ll-checkout .ll-checkout__payslot #payment { margin-top: 0; }
}
@media (max-width: 1023px) {
  .ll-checkout .ll-checkout__payslot #payment { margin-top: var(--s5); }
}

/* b) Champs par paires jusqu'en 390 px, comme une caisse Shopify (Toteme, Aligne) :
   prenom/nom et ville/code postal restaient l'un sous l'autre sous 600 px, ce qui ajoutait
   150 px de defilement au formulaire mobile. Deux colonnes de 173 px tiennent a 390 px. */
@media (min-width: 360px) and (max-width: 599px) {
  .ll-checkout .ll-fieldset__fields { grid-template-columns: 1fr 1fr; }
  .ll-checkout .ll-fieldset__fields > .form-row-first { grid-column: 1; }
  .ll-checkout .ll-fieldset__fields > .form-row-last { grid-column: 2; }
  .ll-checkout .ll-fieldset__fields > .form-row-first,
  .ll-checkout .ll-fieldset__fields > .form-row-last { padding-left: var(--s3); padding-right: var(--s3); }
}

/* ============ 19. PASSE FINALE 10/09 — juge de la caisse (mesures au DOM) ============ */

/* 19.1 Les trois moyens de paiement avaient l'air TOUS choisis : la puce visible n'est pas le
   <input> (1x1 px) mais un glyphe Font Awesome sur label::before — un DISQUE PLEIN aussi bien
   coche que decoche, seule la couleur changeait. On remet un vrai anneau. */
.ll-checkout #payment .wc_payment_methods > li > label::before,
#payment .payment_methods > li > label::before {
  content: "" !important; font-family: inherit !important; font-size: 0 !important;
  display: inline-block; width: 16px; height: 16px; margin-right: 12px; box-sizing: border-box;
  border: 1px solid rgba(18, 26, 46, .45); border-radius: 50%; background: none;
  vertical-align: -3px; box-shadow: none; color: transparent !important;
}
.ll-checkout #payment .wc_payment_methods > li > input:checked + label::before,
#payment .payment_methods > li > input[type="radio"]:checked + label::before {
  border-color: var(--action) !important;
  box-shadow: inset 0 0 0 3px var(--soft), inset 0 0 0 8px var(--action) !important;
}

/* 19.2 Lignes de paiement de 92 px pour une ligne de texte de 17 px : le <label> ajoutait
   19,8 px de padding en haut et en bas par-dessus les 16 px du <li>. Reference : 49-56 px. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods li.wc_payment_method > label {
  padding: 0 !important; display: flex; align-items: center; min-height: 20px;
}

/* 19.3 Champs de carte : 93 px de boite pour une iframe utile de 52 px (reference Toteme : 49). */
.ll-checkout .wc-credit-card-form .form-row { padding: 6px 12px; min-height: 0; }
.ll-checkout .wc-credit-card-form .form-row label {
  font-size: 10px; line-height: 12px; margin-bottom: 2px; white-space: nowrap; letter-spacing: .04em;
}
/* EXPIRY (MM/YY) passait sur 2 lignes en mobile : son champ descendait de 15 px sous celui du CVV. */
.ll-checkout .wc-credit-card-form .form-row { display: flex; flex-direction: column; }
.ll-checkout .wc-credit-card-form .form-row > .woocommerce-input-wrapper,
.ll-checkout .wc-credit-card-form .form-row > div:last-child { margin-top: auto; }

/* 19.4 Champs du formulaire : 62 px contre 45-52 px chez Aligne et Toteme. La cible tactile
   reste au-dessus de 44 px. */
.ll-checkout #customer_details .form-row { padding-top: 6px; padding-bottom: 6px; min-height: 54px; }

/* 19.5 L'aide du champ telephone vivait DANS le cadre (82 px contre 62), celle de l'e-mail
   dessous. Une seule facon de poser une aide. */
.ll-checkout .form-row { position: relative; }
.ll-checkout #customer_details .form-row .description {
  position: absolute; top: calc(100% + 6px); left: 0; margin: 0;
}
.ll-checkout #billing_phone_field, .ll-checkout #shipping_phone_field { margin-bottom: 34px; }

/* 19.6 Les icones de reassurance n'etaient pas sur la meme verticale que celle de la securite
   (x=130 contre x=108). */
.ll-checkout .ll-checkout__reassure { padding-left: 0 !important; margin-left: 0 !important; list-style: none; }
.ll-checkout .ll-checkout__reassure > li { padding-left: 0 !important; margin-left: 0 !important; }

/* 19.7 Liens legaux soulignes DEUX fois : un `text-decoration` olive et un `border-bottom`
   marine 10 px plus bas (la boite fait 44 px pour la cible tactile). */
.ll-checkout .ll-checkout__legal a {
  border-bottom: 0 !important; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* 19.8 Le titre PAYMENT restait a 66 px du dernier champ d'adresse (les autres titres sont a 32). */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout .ll-checkout__payslot { margin-top: var(--s4); }
}

/* 19.9 La case « Deliver to a different address ? » etait 8 px plus haut que son libelle. */
.ll-checkout #ship-to-different-address label,
.ll-checkout .woocommerce-shipping-fields > h3 label {
  display: inline-flex !important; align-items: center !important; gap: 12px;
}

/* ============ 20. PASSE 3 (10/09) — juge de la caisse, passe 2 ============ */

/* 20.1 Le trou avant PAYMENT restait a 90 px (ordinateur) et 120 px (mobile) : la marge du
   payslot etait bien reduite, mais son padding-top ne l'etait pas. Aligne : 35-47 px. */
.ll-checkout .ll-checkout__payslot { padding-top: var(--s4); }
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout .ll-checkout__payslot { margin-top: var(--s4); padding-top: var(--s4); }
}
@media (max-width: 1023px) {
  .ll-checkout .ll-checkout__payslot { padding-top: var(--s3); }
  .ll-checkout .ll-checkout__payslot #payment { margin-top: var(--s3); }
}

/* 20.2 Le bouton final sortait en 22,6 px : c'est la feuille PayPal qui gagnait. Tous les autres
   boutons du site sont en 12-14 px capitales espacees (Toteme « PAY NOW » ~14 px). */
.ll-checkout #payment .ppcp-dcc-order-button,
.ll-checkout #place_order, .ll-checkout button#place_order {
  font-size: 12px !important; letter-spacing: var(--track-wide) !important; text-transform: uppercase;
}

/* 20.3 Les champs de carte n'etaient pas du meme systeme que le formulaire d'adresse :
   10,5 px de corps contre 15-16, fond plus fonce, et 34 px d'indentation en mobile
   (li 16 -> payment_box 33 -> form-row 50). Chez Aligne et Toteme ils sont identiques. */
.ll-checkout #payment .payment_box { padding-inline: 12px !important; background: transparent !important; }
.ll-checkout .wc-credit-card-form { font-size: 14px; padding: 0; }
.ll-checkout .wc-credit-card-form label { font-size: 11px; line-height: 13px; }

/* 20.4 Le fil d'etapes tombait a 10 px en mobile (plancher du site : 11 px) : on resserre les
   connecteurs en meme temps, sinon les 3 etapes debordent des 358 px disponibles. */
@media (max-width: 640px) {
  .ll-checkout .ll-steps { font-size: 11px; gap: 6px; }
  .ll-checkout .ll-steps__step { gap: 5px; }
  .ll-checkout .ll-steps__sep, .ll-checkout .ll-steps__step + .ll-checkout .ll-steps__step { margin-left: 0; }
}

/* 20.5 Les deux colonnes ne demarraient pas a la meme hauteur (recapitulatif 310, CONTACT 286). */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary-head { margin-top: -2px; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary { padding-top: var(--s4); }
}

/* 20.6 Le recapitulatif de caisse sortait en 11 px alors que les memes lignes du panier sont en 14. */
.ll-checkout table.ll-review tfoot tr th,
.ll-checkout table.ll-review tfoot tr td { font-size: 14px; }
.ll-checkout table.ll-review tfoot tr.order-total th,
.ll-checkout table.ll-review tfoot tr.order-total td,
.ll-checkout table.ll-review tfoot tr.order-total .amount { font-size: var(--fs-lg); }

/* 20.7 Rythme casse sous le bouton : 23 px entre la ligne de securite et la 1re ligne de
   reassurance, puis 38 px entre les suivantes. */
.ll-checkout .ll-checkout__security { margin-bottom: 0; }
.ll-checkout .ll-checkout__reassure { gap: var(--s3); margin-top: var(--s3); }

/* 20.8 Le rail de droite s'arretait a 674 px pour une page de 1881 : 1 207 px de creme vide.
   Chez Aligne le panneau de recapitulatif couvre toute la hauteur de la caisse. */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout { position: relative; }
  body.woocommerce-checkout .ll-checkout::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 400px;
    background: var(--soft); z-index: 0; pointer-events: none;
  }
  body.woocommerce-checkout .ll-checkout > * { position: relative; z-index: 1; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary { background: transparent; box-shadow: none; }
}

/* ============ 21. PASSE 3 (suite) — deux réglages tombés à côté ============ */

/* 21.1 Le trou avant PAYMENT restait a 122 px : ce n'etait pas le payslot mais la marge haute du
   libelle de section (`--s6`) qui s'ajoutait au padding de #payment. Les autres libelles gardent
   leur marge, celui du bloc paiement n'en a plus besoin puisque le bloc en porte deja une. */
.ll-checkout .ll-checkout__payslot .ll-fieldset__legend,
body.woocommerce-checkout .ll-checkout .ll-checkout__payslot h2.ll-fieldset__legend {
  margin-top: 0 !important;
}
body.woocommerce-checkout .ll-checkout .ll-checkout__payslot #payment { padding-top: 0 !important; }

/* 21.2 Les champs de carte restaient en 10,5 px : la feuille de la passerelle impose sa taille
   sur le fieldset, notre regle sans `!important` perdait. */
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form { font-size: 14px !important; }
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form label { font-size: 11px !important; line-height: 13px; }

/* 21.3 Derniers pixels : 74 px avant PAYMENT (Aligne : 35-47) et champs de carte a 81 px
   (Toteme : 49, cible retenue 70-72 avec le libelle integre au cadre). */
.ll-checkout .ll-checkout__payslot { padding-top: 0; }
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout .ll-checkout__payslot { margin-top: var(--s3); padding-top: 0; }
}
@media (max-width: 1023px) { .ll-checkout .ll-checkout__payslot #payment { margin-top: var(--s3); } }
.ll-checkout .wc-credit-card-form .form-row { padding-top: 5px; padding-bottom: 5px; }
.ll-checkout #payment [id^="zoid-paypal-"],
.ll-checkout #payment [id^="zoid-paypal-"] iframe { height: 48px !important; }

/* ============ 22. PASSE 4 (10/09) — CORRECTIF BLOQUANT + finitions ============ */

/* 22.1 🚨 La bande de fond posee en 20.8 RECOUVRAIT tout le recapitulatif en ordinateur :
   `form.checkout` reste en `position:static`, donc le `z-index:1` cense proteger les enfants
   etait inerte et le ::after (z-index:0) peignait par-dessus. Mesure : 400 x 1803 px d'une
   seule couleur, ZERO pixel d'encre — le client ne voyait ni l'article, ni la livraison, ni le
   total avant de payer. La bande passe sur le formulaire, derriere lui (z-index:-1). */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout::after { content: none !important; }
  body.woocommerce-checkout .ll-checkout > * { position: static; z-index: auto; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__head { position: relative; }
  body.woocommerce-checkout .ll-checkout form.checkout { position: relative; }
  body.woocommerce-checkout .ll-checkout form.checkout::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 400px;
    background: var(--soft); z-index: -1; pointer-events: none;
  }
}

/* 22.2 Champs de carte rentres de 42 px de chaque cote par rapport aux champs d'adresse
   (x=150 largeur 644 contre x=108 largeur 728). Chez Aligne ils font la meme largeur. */
.ll-checkout #payment .payment_box { padding-inline: 0 !important; }
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods li.wc_payment_method { padding-inline: 0 !important; }

/* 22.3 Deux systemes de champ cote a cote : 48 px pour les iframes de carte, 58 px pour les
   champs natifs. Un seul. */
.ll-checkout #payment [id^="zoid-paypal-"],
.ll-checkout #payment [id^="zoid-paypal-"] iframe { height: 58px !important; }

/* ============ 23. FINITIONS DE CLÔTURE (10/09) ============ */

/* 23.1 Deux systemes de champ cote a cote : la rangee de carte faisait 85 px quand un champ
   d'adresse en fait 57. Le libelle vit dans le cadre des deux cotes, la hauteur doit suivre. */
.ll-checkout #payment .wc-credit-card-form .form-row { padding-block: 0; min-height: 0; }
.ll-checkout #payment [id^="zoid-paypal-"],
.ll-checkout #payment [id^="zoid-paypal-"] iframe { height: 44px !important; }

/* 23.2 Bande vide de 49 px sous Expiry/CVV : une rangee sans contenu gardait sa marge. */
.ll-checkout #payment .wc-credit-card-form .form-row:empty,
.ll-checkout #payment .form-row:empty { display: none !important; }

/* 23.3 Interlignes inegaux sous le bouton (23 px puis 38). */
.ll-checkout .ll-checkout__reassure { gap: var(--s3) !important; }
.ll-checkout .ll-checkout__reassure > li { margin: 0 !important; }

/* 23.4 La bande de fond de la colonne de droite ne se deployait pas sur toute la hauteur :
   `form.checkout` est une grille, l'ancrage top/bottom d'un enfant absolu y reste sur.
   On force la hauteur et on s'assure du contexte de positionnement. */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout form.checkout { position: relative !important; }
  body.woocommerce-checkout .ll-checkout form.checkout::after {
    top: 0; bottom: 0; height: auto; min-height: 100%;
  }
}

/* ============ 24. BLOC PAIEMENT — liste sobre, un seul cadre (11/09, retour Mamadou) ============
   Constat mesuré au DOM avant correction (390 px) :
     li « Debit & Credit Cards » = fond --soft PLEIN + bordure 1px marine opaque (258 px de haut),
     dedans .payment_box (padding 17), dedans fieldset, dedans 3 .form-row bordées 1px,
     dedans les iframes PayPal — QUATRE cadres emboîtés, et 48 px de beige vide sous EXPIRY/CVV
     (padding du payment_box + marge de rangée + padding du li, tous peints en beige).
   Cible Toteme / Arket : une LISTE. Une ligne par moyen de paiement, filet 1 px entre les lignes,
   aucun fond plein, aucun cadre. Les champs de carte apparaissent sous la ligne choisie, en UN
   groupe : libellé en petites capitales AU-DESSUS, champ à bordure 1 px --line sur fond crème. */

/* 24.1 La liste : un filet en haut, un filet sous chaque ligne. Plus de boîtes. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods {
  margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line);
}
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li.wc_payment_method {
  display: block; list-style: none;
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: transparent !important;
  margin: 0 !important; padding: 0 !important; box-shadow: none !important;
}
/* La règle §3 peignait la ligne choisie en --soft : c'est elle qui faisait la boîte beige. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li.wc_payment_method:has(> input:checked) {
  background: transparent !important; border-color: var(--line) !important;
}

/* 24.2 Une ligne = puce + libellé, 56 px, le logo du moyen de paiement poussé à droite. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li.wc_payment_method > label {
  display: flex !important; align-items: center; gap: var(--s3);
  min-height: 56px !important; margin: 0 !important; padding: 0 !important;
  font: 500 var(--fs-sm)/1.3 var(--text); letter-spacing: 0; text-transform: none;
  color: var(--ink); cursor: pointer;
}
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li.wc_payment_method > label img {
  margin: 0 0 0 auto !important; max-height: 20px; width: auto; flex: 0 0 auto;
}
/* La puce (§19.1) vit dans un flex : sa marge droite doublerait le gap. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li.wc_payment_method > label::before {
  margin-right: 0 !important; flex: 0 0 16px; vertical-align: baseline;
}

/* 24.3 Le groupe de champs sous la ligne choisie : aucun cadre, aucun fond, juste de l'air. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li .payment_box {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 0 var(--s5) !important;
  font: var(--fs-xs)/1.6 var(--text); color: var(--muted);
}
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li .payment_box > p { margin: 0 0 var(--s3); }
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li .payment_box > p:last-child { margin-bottom: 0; }

/* 24.4 Les trois champs : numéro sur toute la largeur, expiration et cryptogramme côte à côte. */
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3);
  border: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important;
}
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form > .form-row-wide { grid-column: 1 / -1; }
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form > .form-row-first { grid-column: 1; }
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form > .form-row-last  { grid-column: 2; }
/* `div.clear` de WooCommerce : rangée fantôme de la grille, c'est la « boîte vide » du bas. */
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form > .clear,
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form > .form-row:empty { display: none !important; }

/* 24.5 Une rangée de champ ne porte plus de cadre : elle ne fait que poser le libellé au-dessus. */
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form .form-row {
  display: block !important; position: relative;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important;
  float: none; width: auto;
}
/* Les libellés de carte sont RETIRÉS DE L'ŒIL, pas du DOM. Le texte indicatif que PayPal impose
   dans ses champs (« Card number », « MM / YY », « CVV ») n'est pas modifiable : garder en plus un
   libellé au-dessus écrivait deux fois le même mot à 8 px d'écart. Le <label> reste lisible par les
   lecteurs d'écran. (Voir inc/ll-payment.php pour le détail de ce qui traverse l'iframe.) */
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form .form-row > label {
  position: absolute !important; width: 1px !important; height: 1px !important; max-width: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 24.6 LE cadre unique : celui que PayPal dessine lui-même.
   Mesure faite dans l'iframe (Playwright, accès au document hébergé) : le champ PayPal est un
   <input> à 6 px du bord de l'iframe, haut de 26 px, fond BLANC, bordure 1 px #909697, rayon 4 px.
   Sondage propriété par propriété : seuls `font-family`, `font-size`, `font-weight`, `color` et
   `letter-spacing` traversent l'iframe. `background`, `border`, `border-radius`, `box-shadow`,
   `padding`, `line-height`, `appearance` ne traversent PAS (vérifié, valeurs inchangées côté PayPal).
   Conséquence : tout cadre que NOUS dessinons autour vient s'ajouter au sien — c'est exactement la
   double bordure de la capture. Notre conteneur devient donc transparent et se contente d'épouser
   la boîte PayPal (6 + 26 + 6 = 38 px). Un seul cadre par champ, plus aucun emboîtement. */
body.woocommerce-checkout .ll-checkout #payment [id^="zoid-paypal-"] {
  display: block !important; width: 100% !important; box-sizing: border-box !important;
  height: 38px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
body.woocommerce-checkout .ll-checkout #payment [id^="zoid-paypal-"] > iframe {
  height: 38px !important; width: 100% !important; display: block; border: 0; background: transparent;
}
body.woocommerce-checkout .ll-checkout #payment [id^="zoid-paypal-"] > iframe[name^="__detect_close"] {
  height: 0 !important; display: none !important;
}

/* 24.7 Texte À L'INTÉRIEUR des iframes PayPal.
   PPCP 4.1.3 (chemin HostedFields v5) lit `window.getComputedStyle('#ppcp-credit-card-gateway-card-number')`
   et recopie ce style dans `paypal.HostedFields.render({styles:{input:...}})` : le seul moyen d'agir
   sur le texte hébergé est donc de styler CET input natif (masqué), ici en CSS.
   Mesuré avant : 19,82 px — d'où le rendu « champ système » que Mamadou a vu.
   Limite : la police Jost n'existe pas dans l'iframe PayPal (autre origine, pas de @font-face
   transmissible) ; on donne donc une pile de repli grotesque proche, jamais « Jost » seul. */
body.woocommerce-checkout .ll-checkout #payment input#ppcp-credit-card-gateway-card-number,
body.woocommerce-checkout .ll-checkout #payment input#ppcp-credit-card-gateway-card-expiry,
body.woocommerce-checkout .ll-checkout #payment input#ppcp-credit-card-gateway-card-cvc {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important; font-weight: 400 !important; font-style: normal !important;
  line-height: 24px !important; letter-spacing: .01em !important;
  color: #121A2E !important; padding: 0 !important; text-align: left !important;
  /* `appearance` fait partie de la liste blanche HostedFields : laissée sur `auto`, elle était
     recopiée dans le champ hébergé et le navigateur y peignait sa boîte d'input par défaut —
     rectangle BLANC à coins arrondis et bordure sombre, dans notre cadre crème. C'était ça,
     « les champs blancs » de la capture de Mamadou, pas une couleur de PayPal. */
  -webkit-appearance: none !important; appearance: none !important;
  background-color: transparent !important; outline: 0 !important;
  margin: 0 !important; text-shadow: none !important;
}

/* 24.8 Le bouton final et ses mentions : filet de la liste au-dessus, rien d'autre. */
body.woocommerce-checkout .ll-checkout #payment .form-row.place-order {
  border: 0 !important; background: transparent !important;
  margin: 0 !important; padding: var(--s5) 0 0 !important; min-height: 0 !important;
}
body.woocommerce-checkout .ll-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 0 0 var(--s4); }
body.woocommerce-checkout .ll-checkout #payment .woocommerce-privacy-policy-text p {
  font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); margin: 0;
}
body.woocommerce-checkout .ll-checkout #payment #ppcp-hosted-fields { margin: 0; }
body.woocommerce-checkout .ll-checkout #payment button#place_order,
body.woocommerce-checkout .ll-checkout #payment .ppcp-dcc-order-button {
  display: block; width: 100%; min-height: 56px; border-radius: var(--radius);
}

/* 24.9 Rythme mesuré après coup (DOM, 390 et 1440) : le groupe de champs collait au libellé
   « Debit & Credit Cards » (0 px) et gardait 25 px sous le CVV — respiration asymétrique. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li .payment_box {
  padding: 20px 0 !important;
}
/* 24.10 Écart entre « + Add a delivery note » et PAYMENT : 60 px en mobile, 54 en ordinateur.
   Cible tenue par Aligne et Toteme entre deux sections : 40-56 px. */
@media (max-width: 1023px) {
  body.woocommerce-checkout .ll-checkout .ll-checkout__payslot #payment { margin-top: var(--s1) !important; }
}

/* ============ 25. RÉCAPITULATIF — échelle typographique (11/09, retour Mamadou) ============
   « SUBTOTAL », « DELIVERY, STANDARD UK », « TOTAL TO PAY » sortaient en 14 px capitales Jost avec
   1,96 px d'interlettrage (.14em) : mesuré, « DELIVERY, STANDARD UK » mangeait les deux tiers de la
   colonne et pesait plus lourd que le nom du manteau. Chez Toteme et Aligne ces libellés sont des
   petites capitales discrètes ; seul le TOTAL est traité, et il l'est en display, pas en capitales.
   Deuxième défaut mesuré : la rangée est un flex sans `align-items`, donc le montant retombait 4 à
   5 px sous son libellé. */

/* 25.1 Libellés intermédiaires : petites capitales sobres. */
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr th {
  font-family: var(--text) !important; font-weight: 500 !important;
  font-size: 11px !important; line-height: 1.4 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: var(--muted) !important;
}
/* 25.2 Montants : même corps que le reste du récapitulatif, jamais en capitales. */
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr td,
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr td .amount {
  font-family: var(--text) !important; font-size: var(--fs-sm) !important;
  letter-spacing: normal !important; text-transform: none !important;
  color: var(--ink) !important; font-weight: 500 !important;
}
/* 25.3 Libellé et montant sur la même ligne de base. */
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr {
  align-items: baseline !important;
}
/* 25.4 Le total : Playfair, pas de capitales, pas d'interlettrage — le seul accent de la colonne. */
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr.order-total th,
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr.order-total td,
body.woocommerce-checkout .ll-checkout table.ll-review tfoot tr.order-total td .amount {
  font-family: var(--display) !important; font-weight: 600 !important;
  font-size: var(--fs-lg) !important; line-height: 1.25 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important;
}
/* La livraison sort dans un <ul id="shipping_method"> : même traitement que les autres montants. */
body.woocommerce-checkout .ll-checkout table.ll-review tfoot ul#shipping_method li,
body.woocommerce-checkout .ll-checkout table.ll-review tfoot ul#shipping_method label {
  font-family: var(--text) !important; font-size: var(--fs-sm) !important;
  letter-spacing: normal !important; text-transform: none !important; color: var(--ink) !important;
}

/* 25.5 L'en-tête du récapitulatif : « Your order, 1 coat » en Playfair sur LES DEUX écrans (il
   sortait en Jost gris 13 px en mobile), et la ligne « Show summary £221.95 ⌄ » remise d'aplomb :
   trois typographies et trois lignes de base différentes sur 161 px de large. */
body.woocommerce-checkout .ll-checkout .ll-checkout__summary-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
}
body.woocommerce-checkout .ll-checkout .ll-checkout__summary-head h2 {
  font-family: var(--display) !important; font-weight: 600 !important;
  font-size: var(--fs-md) !important; text-transform: none !important;
  letter-spacing: 0 !important; color: var(--ink) !important; line-height: 1.25;
}
body.woocommerce-checkout .ll-checkout .ll-summary-toggle {
  align-items: baseline !important; gap: var(--s2);
}
body.woocommerce-checkout .ll-checkout .ll-summary-toggle__label {
  font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
body.woocommerce-checkout .ll-checkout .ll-summary-toggle__total {
  font-family: var(--text); font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
  letter-spacing: normal;
}
body.woocommerce-checkout .ll-checkout .ll-summary-toggle svg {
  color: var(--muted); align-self: center; margin-bottom: -2px;
}

/* 25.6 Vignette de l'article : la source est passée de `woocommerce_thumbnail` (carré 324x324,
   déjà recadré au col et aux genoux par WordPress) à `medium` (242x300, NON recadrée, ratio 4:5).
   Le cadrage part du haut : la tête du modèle reste dans l'image. */
body.woocommerce-checkout .ll-checkout .ll-lineitem__thumb { aspect-ratio: 4 / 5; background: var(--bg); }
body.woocommerce-checkout .ll-checkout .ll-lineitem__thumb img { object-position: 50% 0; }

/* ============ 26. ORDINATEUR — le récapitulatif redevient un panneau (11/09) ============
   Reprise du piège du 10/09, deuxième couche : la bande de fond de la colonne de droite a été
   déplacée sur `form.checkout::after` en `z-index:-1` pour ne plus recouvrir le récapitulatif.
   Mais `form.checkout` est en `position:relative` SANS `z-index`, donc il ne crée pas de contexte
   d'empilement : un enfant en `z-index:-1` passe derrière le fond OPAQUE de l'ancêtre qui, lui, en
   crée un. Résultat mesuré aujourd'hui : la bande n'existe plus à l'écran, le récapitulatif flotte
   sans fond, et toute la moitié droite de la page est du crème vide sous « Total to pay ».
   On abandonne la bande — un décor qui dépend d'un z-index négatif est fragile par nature — et on
   rend au récapitulatif son propre panneau, comme sur la page panier. Un seul signalement :
   fond beige, pas de bordure, pas d'ombre. */
@media (min-width: 1024px) {
  body.woocommerce-checkout .ll-checkout form.checkout::after { content: none !important; }
  body.woocommerce-checkout .ll-checkout::after { content: none !important; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary {
    background: var(--soft) !important; border: 0 !important; box-shadow: none !important;
    border-radius: var(--radius); padding: var(--s6) var(--s5) var(--s5);
  }
}
/* Le panneau du panier portait lui aussi fond ET bordure : un seul des deux suffit. */
body.woocommerce-cart .entry-content .ll-summary { border: 0 !important; }

/* ============ 27. JUGE 11/09 (bloc paiement) — trois mesures reprises ============
   Le juge a mesuré ce que le DOM ne dit pas : la boîte BLANCHE que PayPal dessine ne commence pas
   là où commence notre conteneur. Le document dans l'iframe porte `body { padding: 6px }`, donc le
   champ visible est rentré de 6 px à gauche et 7 px à droite — deux bords gauches dans la même
   colonne (22 px pour les champs de carte, 16 px pour les filets et le bouton).
   Non corrigeable : la HAUTEUR. Sondé aujourd'hui en forçant l'iframe à 60 px — zoid la redimensionne
   à 38 px et l'input reste à 26 px quoi qu'on fasse. Le champ de carte restera donc plus plat que
   les champs d'adresse tant que la passerelle est sur HostedFields v5. */

/* 27.1 On décale le conteneur de la marge interne de l'iframe pour que la boîte blanche tombe
   exactement sur le bord des filets et du bouton. */
body.woocommerce-checkout .ll-checkout #payment [id^="zoid-paypal-"] {
  margin-left: -6px !important; width: calc(100% + 13px) !important;
}

/* 27.2 La police : la PROPRIÉTÉ traverse l'iframe, le FICHIER de police non (autre origine, pas de
   @font-face transmissible). « Jost » y retombait donc sur l'Arial système. On nomme d'abord des
   grotesques géométriques réellement présentes sur iPhone et Mac — la clientèle de cette boutique —
   avant le repli générique, et on cale le corps sur celui des champs d'adresse (15 px). */
body.woocommerce-checkout .ll-checkout #payment input#ppcp-credit-card-gateway-card-number,
body.woocommerce-checkout .ll-checkout #payment input#ppcp-credit-card-gateway-card-expiry,
body.woocommerce-checkout .ll-checkout #payment input#ppcp-credit-card-gateway-card-cvc {
  font-family: "Jost", "Avenir Next", "Avenir", "Century Gothic", system-ui, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
}

/* 27.3 Libellés des moyens de paiement : ils sortaient plus gras et plus criards que le titre
   PAYMENT lui-même. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li.wc_payment_method > label {
  font-weight: 500 !important; font-size: 15px !important; letter-spacing: .02em !important;
  color: var(--ink) !important;
}
/* 27.4 Puces : un gris froid hors palette. On reprend le marine des filets, en plus dense. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods > li > label::before {
  border-color: rgba(18, 26, 46, .35) !important;
}
/* 27.5 Réassurance : les icônes n'avaient pas la même taille optique (13 / 10,5 / 12 / 12 px) et la
   ligne de sécurité ne vivait pas dans la même grille que les trois autres. Une seule grille. */
body.woocommerce-checkout .ll-checkout .ll-checkout__security {
  grid-template-columns: 16px 1fr !important; gap: var(--s3) !important; margin-top: var(--s4) !important;
}
body.woocommerce-checkout .ll-checkout .ll-checkout__security svg,
body.woocommerce-checkout .ll-checkout .ll-checkout__reassure svg {
  width: 16px !important; height: 16px !important; margin-top: 1px !important;
}

/* ============ 28. PAGE PANIER — même langue que le tiroir et que la caisse (11/09) ============
   Les trois surfaces du panier (tiroir, page /cart/, récapitulatif de caisse) montrent les mêmes
   informations et ne les écrivaient pas de la même façon : sélecteur de quantité encadré ici et
   nu là, « Remove » en minuscules ici et en petites capitales là, libellés de totaux en casse de
   phrase ici et en petites capitales là. On aligne tout sur le tiroir. */

/* 28.1 Double soulignement des liens : `.ll-link` porte DÉJÀ un `border-bottom`, et le style de
   lien du contenu de page ajoute un `text-decoration: underline`. Résultat : deux traits, celui du
   bas plus long (il court sous le chevron) et 10 px plus bas (la boîte fait 44 px pour la cible
   tactile). On garde le soulignement qui épouse le texte, on retire le filet de boîte. */
body.woocommerce-cart .ll-link,
body.woocommerce-cart a.ll-link,
body.woocommerce-cart .ll-cart__back,
body.woocommerce-cart a.ll-cart__back {
  border-bottom: 0 !important;
  text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
body.woocommerce-cart .ll-link svg { text-decoration: none; }

/* 28.2 Quantité : trois signes, pas un formulaire (même traitement que le tiroir). */
body.woocommerce-cart .ll-cart__foot .ll-qty { border: 0 !important; border-radius: 0; }
body.woocommerce-cart .ll-cart__foot .ll-qty button { width: 28px; height: 28px; color: var(--muted); }
body.woocommerce-cart .ll-cart__foot .ll-qty button:hover { background: none; color: var(--ink); }
body.woocommerce-cart .ll-cart__foot .ll-qty > span { width: 26px; font-size: var(--fs-sm); font-weight: 500; }

/* 28.3 « Remove » : le mot en petites capitales souligné, comme dans le tiroir. */
body.woocommerce-cart .ll-cart__actions a.remove {
  font-size: var(--fs-xs) !important; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted) !important; text-decoration: underline; text-underline-offset: 4px;
  border: 0 !important; background: none !important;
}
body.woocommerce-cart .ll-cart__actions a.remove:hover { color: var(--ink) !important; background: none !important; }

/* 28.4 Libellés du récapitulatif : petites capitales, comme en caisse (§25). */
body.woocommerce-cart .ll-summary .ll-summary__row > span:first-child {
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
body.woocommerce-cart .ll-summary .ll-summary__row > span:first-child small {
  letter-spacing: normal; text-transform: none; font-size: var(--fs-xs); font-weight: 400;
}
body.woocommerce-cart .ll-summary .ll-summary__row > span:last-child { font-weight: 500; color: var(--ink); }
body.woocommerce-cart .ll-summary .ll-summary__row { align-items: baseline; }
/* Le total garde son traitement display, sans capitales. */
body.woocommerce-cart .ll-summary .ll-summary__row--total > span:first-child,
body.woocommerce-cart .ll-summary .ll-summary__row--total > span:last-child {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-lg);
  letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* 28.5 Le titre et sa phrase se touchaient (2 px) sous 90 px de vide, et la phrase courait sur
   toute la largeur de l'écran alors que le titre s'arrêtait à mi-page. */
body.woocommerce-cart .ll-cart__title { margin-bottom: var(--s2); }
body.woocommerce-cart .ll-cart__sub { max-width: 46ch; }

/* ============ 29. MOBILE — la barre de récapitulatif repliée tient sur une ligne (11/09) ============
   « Your order, 1 coat » en Playfair 17 px et « SHOW SUMMARY £221.95 › » ne tiennent pas ensemble
   dans 358 px : le titre passait sur deux lignes et poussait le bouton. Toteme, Aligne et la caisse
   Shopify font toutes la même chose ici — UNE ligne : le libellé à gauche, le montant à droite.
   Le titre reste dans le DOM pour les lecteurs d'écran (il est la cible de aria-controls). */
@media (max-width: 1023px) {
  /* `width:1px` sans `!important` perdait : le titre restait large de 390 px en position absolue et
     étirait le document à 430 px (débordement horizontal mesuré sur la capture pleine page). */
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary-head h2 {
    position: absolute !important; width: 1px !important; height: 1px !important;
    max-width: 1px !important; margin: -1px !important; padding: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary-head { margin-bottom: 0; }
  body.woocommerce-checkout .ll-checkout .ll-summary-toggle {
    display: flex !important; width: 100%; justify-content: space-between; align-items: baseline;
    min-height: 44px;
  }
  body.woocommerce-checkout .ll-checkout .ll-summary-toggle__label { margin-right: auto; }
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary:not(.is-collapsed) .ll-checkout__summary-head {
    margin-bottom: var(--s3);
  }
  /* La carte repliée n'est plus qu'une barre : elle n'a pas besoin de 24 px de marge intérieure. */
  body.woocommerce-checkout .ll-checkout .ll-checkout__summary.is-collapsed { padding: var(--s2) var(--s5); }
}
/* 29.1 Le chevron retombait 14 px sous le montant : la ligne est alignée sur les lignes de base et
   il portait en plus un décalage de -2 px. Sur cette barre, tout est centré. */
@media (max-width: 1023px) {
  body.woocommerce-checkout .ll-checkout .ll-summary-toggle { align-items: center !important; flex-wrap: nowrap; }
  body.woocommerce-checkout .ll-checkout .ll-summary-toggle svg { align-self: center !important; margin: 0 !important; }
}

/* ============ 30. Cases à cocher — la seule surface blanche du formulaire (11/09) ============
   « Deliver to a different address ? » et les cases de la caisse sortaient en blanc pur à bordure
   système sur du crème : elles sautaient aux yeux comme un élément non stylé au milieu de champs
   crème à angle droit. `accent-color` ne peint que l'état coché, pas la case vide. */
body.woocommerce-checkout .ll-checkout input[type="checkbox"],
body.woocommerce-cart .ll-cart input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
  display: inline-block; position: relative; cursor: pointer;
}
body.woocommerce-checkout .ll-checkout input[type="checkbox"]:checked {
  background: var(--action); border-color: var(--action);
}
body.woocommerce-checkout .ll-checkout input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--onaction); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
body.woocommerce-checkout .ll-checkout input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

/* ============ 31. JUGE FINAL 11/09 — reste à niveau ============ */

/* 31.1 Page panier en ordinateur : le panneau « Summary » démarrait 24 px au-dessus du filet qui
   ouvre la liste des articles. Les deux colonnes partent maintenant de la même ligne. */
@media (min-width: 1024px) {
  body.woocommerce-cart .entry-content .ll-summary { margin-top: 24px; }
}

/* 31.2 Double filet sous le titre PAYMENT : le libellé de section trace déjà sa ligne
   (`.ll-fieldset__legend::after`), et la liste des moyens de paiement en ajoutait une seconde
   20 px plus bas. CONTACT et DELIVERY ADDRESS n'en ont qu'une. */
body.woocommerce-checkout .ll-checkout #payment ul.payment_methods { border-top: 0; }

/* 31.3 Rythme vertical du bloc carte : une rangée de champ de carte faisait 38 px quand une rangée
   d'adresse en fait 58 — le bloc paiement respirait au double du reste du formulaire. La boîte que
   PayPal dessine reste à 26 px (non négociable), mais sa RANGÉE reprend la hauteur d'un champ
   d'adresse et le champ s'y centre : le rythme du formulaire redevient le même du haut en bas. */
/* La rangée porte déjà son remplissage : un espace de grille en plus donnerait 30 px entre deux
   champs de carte pour 14 entre deux champs d'adresse. Espace horizontal seulement. */
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form { gap: 0 var(--s3); }
/* En `display:flex`, la rangée reprenait la main sur la largeur du conteneur et décalait la boîte
   PayPal de 3 px : on garde une rangée en bloc et on centre le champ avec du remplissage. */
body.woocommerce-checkout .ll-checkout #payment fieldset.wc-credit-card-form .form-row {
  display: block !important; min-height: 56px !important; padding: 9px 0 !important;
}