/* ============================================================================
   Checkout V3 — reskin CLAIR néo-brutaliste éditorial du checkout WooCommerce
   (/commander). Chargé UNIQUEMENT via ?v3=1 (branchement non destructif dans
   functions.php). Purement visuel : aucune modification du flux de paiement
   (Stripe / BACS / abonnements / champs). Même structure de sélecteurs que
   checkout-v2.css, mais charte claire (papier crème, encre, orange), typo
   Anton / Fraunces / Hanken Grotesk, bordures encre épaisses, ombres dures,
   angles droits. Tout est scopé sous body.woocommerce-checkout.
   ========================================================================== */

body.woocommerce-checkout{
  --paper:#F2E7D0; --paper2:#FBF6EC; --card:#FFFFFF;
  --ink:#171310; --ink2:#5c5044;
  --orange:#FF5A1F; --orange2:#F0872E; --green:#1F5138; --amber:#E9A94A;
  --bd:2.5px solid var(--ink);
  --sh:7px 7px 0 var(--ink); --sh-sm:4px 4px 0 var(--ink);
  background:var(--paper);
}

/* --- Gabarit du thème : fond clair, on neutralise fonds/marges qui entourent
   le checkout (le fond papier prend le relais) --- */
body.woocommerce-checkout #footer{margin-top:0 !important}
body.woocommerce-checkout .bloc,
body.woocommerce-checkout .content,
body.woocommerce-checkout .container.first{background:transparent !important}

/* --- Typographie : corps en Hanken Grotesk (le thème impose 'Oswald'/'Muli'),
   titres en Anton MAJUSCULES. On neutralise casse/espacement forcés par
   WooCommerce/thème sur le tableau récap. Les icônes FontAwesome sont préservées. */
body.woocommerce-checkout .content,
body.woocommerce-checkout .content *:not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]){
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
body.woocommerce-checkout .content .shop_table th,
body.woocommerce-checkout .content .shop_table td{
  text-transform:none !important; letter-spacing:normal !important;
}

/* Titres de section en Anton (« Détails de facturation », « Votre commande ») */
body.woocommerce-checkout .content h1,
body.woocommerce-checkout .content h2,
body.woocommerce-checkout .content h3,
body.woocommerce-checkout .content #order_review_heading,
body.woocommerce-checkout .content .woocommerce-billing-fields > h3,
body.woocommerce-checkout .content .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .content .woocommerce-additional-fields > h3{
  font-family:"Anton",Impact,Haettenschweiler,sans-serif !important;
  font-weight:400 !important; text-transform:uppercase !important;
  letter-spacing:.01em !important; line-height:1 !important;
  color:var(--ink) !important; margin-bottom:16px !important;
}

/* --- Couleurs du texte : encre par défaut (le thème force du brun via .bloc p),
   accents orange, labels de formulaire en gris chaud --- */
body.woocommerce-checkout .content,
body.woocommerce-checkout .content p,
body.woocommerce-checkout .content li,
body.woocommerce-checkout .content td,
body.woocommerce-checkout .content th,
body.woocommerce-checkout .content span,
body.woocommerce-checkout .content small,
body.woocommerce-checkout .content strong,
body.woocommerce-checkout .content em,
body.woocommerce-checkout .content legend,
body.woocommerce-checkout .content h1,
body.woocommerce-checkout .content h2,
body.woocommerce-checkout .content h3,
body.woocommerce-checkout .content h4,
body.woocommerce-checkout #order_review_heading{color:var(--ink)}

body.woocommerce-checkout .content a,
body.woocommerce-checkout .content .required,
body.woocommerce-checkout .content .shop_table .order-total th,
body.woocommerce-checkout .content .shop_table .order-total td,
body.woocommerce-checkout .content .shop_table .order-total .amount{color:var(--orange)}
body.woocommerce-checkout .content a:hover{color:var(--ink)}

body.woocommerce-checkout .content .form-row label,
body.woocommerce-checkout .content .woocommerce-input-wrapper > label{
  color:var(--ink);font-weight:700;letter-spacing:.01em;
}

/* --- Colonnes (facturation / livraison) + récap = cartes claires bordées ombre
   dure --- */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2,
body.woocommerce-checkout #order_review{
  background:var(--card);border:var(--bd);border-radius:0;
  box-shadow:var(--sh);padding:26px 24px;margin-bottom:22px;
}

/* --- Champs de formulaire : blanc, bordure encre épaisse, angles droits,
   focus orange accentué --- */
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea,
body.woocommerce-checkout select,
body.woocommerce-checkout .select2-container--default .select2-selection--single{
  background:#fff !important;border:var(--bd) !important;color:var(--ink) !important;
  border-radius:0 !important;padding:12px 14px !important;height:auto !important;
  line-height:1.3 !important;box-shadow:none !important;font-weight:600;
}
body.woocommerce-checkout input.input-text::placeholder,
body.woocommerce-checkout textarea::placeholder{color:#9a8b78;font-weight:500}
body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus{
  border-color:var(--orange) !important;outline:none;
  box-shadow:var(--sh-sm) !important;
}
/* select2 (pays / canton) — le dropdown est rendu hors .content */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:normal;font-weight:600}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{top:8px}
.select2-dropdown{background:#fff;border:var(--bd);border-radius:0;color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--orange);color:#fff}
.select2-search--dropdown .select2-search__field{background:#fff;border:2px solid var(--ink);border-radius:0;color:var(--ink)}
/* Pays masqué : vente/livraison restreintes à la Suisse (le select CH reste soumis) */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field{display:none !important}

/* --- Tableau récap de commande --- */
body.woocommerce-checkout .shop_table{
  background:transparent;border:var(--bd);border-radius:0;overflow:hidden;
}
body.woocommerce-checkout .shop_table th,
body.woocommerce-checkout .shop_table td{border-top:2px solid var(--ink)}
body.woocommerce-checkout .cart_item td{background:var(--card)}
body.woocommerce-checkout .shop_table thead th{background:var(--ink);color:var(--paper)}
/* thead ("Produit"/"Total") + tfoot (totaux) : WooCommerce/thème imposent
   police/casse/style avec une forte spécificité -> normalisation agressive qui
   couvre aussi les descendants (débloque réellement l'affichage). thead en Anton
   sur fond encre, tfoot en corps clair. */
body.woocommerce-checkout .content .shop_table thead,
body.woocommerce-checkout .content .shop_table thead *{
  font-family:"Anton",Impact,sans-serif !important;
  text-transform:uppercase !important; letter-spacing:.02em !important; font-style:normal !important;
  color:var(--paper) !important;
}
body.woocommerce-checkout .content .shop_table tfoot,
body.woocommerce-checkout .content .shop_table tfoot *{
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  text-transform:none !important; letter-spacing:normal !important; font-style:normal !important;
  color:var(--ink) !important; font-weight:700;
}
body.woocommerce-checkout .content .shop_table tfoot th{background:var(--paper2)}
body.woocommerce-checkout .content .shop_table tfoot .order-total th,
body.woocommerce-checkout .content .shop_table tfoot .order-total td,
body.woocommerce-checkout .content .shop_table tfoot .order-total .amount{
  color:var(--orange) !important; font-family:"Anton",Impact,sans-serif !important;
  text-transform:uppercase !important;
}
body.woocommerce-checkout .content .shop_table tfoot .order-total{border-top:2.5px solid var(--ink)}

/* --- Zone paiement : trois tuiles cliquables (TWINT / carte / virement) ---
   La liste des moyens de paiement devient une grille de trois colonnes. Les
   <li> passent en display:contents pour que le <label> (la tuile) et la
   .payment_box deviennent directement des items de cette grille : la boîte de
   détails peut alors s'étaler sur toute la largeur SOUS la rangée, au lieu
   d'être enfermée dans un tiers de colonne — c'est elle qui reçoit le champ
   carte de Stripe (Payment Element). Le radio reste le champ que WooCommerce
   écoute : il est sorti du flux, jamais display:none. Aucun JS ajouté, l'état
   sélectionné est porté par input:checked + label. --- */
body.woocommerce-checkout #payment{
  background:var(--paper2) !important;border:var(--bd);border-radius:0;box-shadow:var(--sh-sm);
  padding:22px;
}
body.woocommerce-checkout #payment ul.payment_methods{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  list-style:none;margin:0 0 20px;padding:0;border:0;
}
/* Le nombre de passerelles varie : un abonnement au panier retire TWINT, qui
   ne gère pas le récurrent, et il n'en reste que deux. repeat(auto-fit) ne
   règle rien ici — la boîte de détails, en grid-column 1/-1, occupe toutes les
   colonnes, donc aucune n'est « vide » et aucune ne s'effondre. On compte donc
   les tuiles. Sans :has(), la grille garde ses trois colonnes. */
/* Enfermées dans un min-width : plus spécifiques que la règle d'empilement de
   la vue téléphone, elles la battraient jusque dans sa propre media query. */
@media (min-width:641px){
  body.woocommerce-checkout #payment ul.payment_methods:has(> li.wc_payment_method:nth-child(1):nth-last-child(1)){
    grid-template-columns:minmax(0,1fr);
  }
  body.woocommerce-checkout #payment ul.payment_methods:has(> li.wc_payment_method:nth-child(2):nth-last-child(1)){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.woocommerce-checkout #payment ul.payment_methods:has(> li.wc_payment_method:nth-child(4):nth-last-child(1)){
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method{display:contents}
/* Le clearfix du gabarit (::before/::after, content:" ";display:table) devient
   un item de grille : celui de la liste occupait deux cases de la première
   rangée, et ceux des <li> — que display:contents laisse en place — six cases
   de hauteur nulle, soit autant de gouttières vides avant la première tuile. */
body.woocommerce-checkout #payment ul.payment_methods::before,
body.woocommerce-checkout #payment ul.payment_methods::after,
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method::before,
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method::after{display:none}

/* Le radio : hors flux, mais focusable et lisible par les lecteurs d'écran. */
body.woocommerce-checkout #payment ul.payment_methods > li > input.input-radio{
  position:absolute;width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none;
}

/* La tuile */
body.woocommerce-checkout #payment ul.payment_methods > li > label{
  order:1;position:relative;
  /* !important : main.css impose width:275px et le plugin TWINT display:inline */
  display:flex !important;width:auto !important;max-width:none !important;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:104px;padding:18px 12px;margin:0;cursor:pointer;
  background:var(--card);border:var(--bd);border-radius:0;box-shadow:var(--sh-sm);
  color:var(--ink) !important;font-weight:800;font-size:15px;line-height:1.25;
  text-align:center;text-transform:none !important;letter-spacing:normal !important;
  transition:transform .12s,box-shadow .12s,background .12s;
}
/* Logos fournis par les passerelles (TWINT, carte Stripe) : WooCommerce les
   flotte à droite et main.css les masquait purement et simplement
   (display:none !important) — on les rétablit au-dessus du libellé. */
body.woocommerce-checkout #payment ul.payment_methods > li > label img{
  order:-1;display:block !important;float:none !important;
  height:32px;width:auto;max-width:100%;object-fit:contain;
  margin:0 !important;padding:0;border:0;box-shadow:none;
}
/* --- Visuels des tuiles ---
   TWINT et la carte se reconnaissent à leur logo : le libellé ferait doublon,
   on l'efface de l'affichage (font-size:0) sans le retirer du DOM — il reste
   le texte du <label>, donc ce que lit un lecteur d'écran. Le virement, lui,
   n'a pas de marque : il garde son libellé sous un pictogramme de QR. */
body.woocommerce-checkout #payment ul.payment_methods > li.payment_method_mame_twint > label,
body.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe > label{
  font-size:0;
}
/* Carte : l'icône générique de Stripe cède la place aux deux marques. */
body.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe > label img{
  display:none !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.payment_method_stripe > label::before{
  content:"";order:-1;display:block;width:96px;height:30px;
  background-image:url("../images/paiement/visa.svg"),url("../images/paiement/mastercard.svg");
  background-position:left center,right center;
  background-size:auto 28px;background-repeat:no-repeat;
}
/* Virement : pictogramme de QR (le paiement se fait au bulletin QR). */
body.woocommerce-checkout #payment ul.payment_methods > li.payment_method_bacs > label::before{
  content:"";order:-1;display:block;width:32px;height:32px;
  background:url("../images/paiement/qr.svg") center/contain no-repeat;
}
/* Pastille de sélection : l'état ne repose pas seulement sur la couleur. */
body.woocommerce-checkout #payment ul.payment_methods > li > label::after{
  content:"";position:absolute;top:8px;right:8px;width:18px;height:18px;
  background:#fff;border:2.5px solid var(--ink);border-radius:50%;
}
body.woocommerce-checkout #payment ul.payment_methods > li > label:hover{
  transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);
}
body.woocommerce-checkout #payment ul.payment_methods > li > input.input-radio:checked + label{
  background:#fff;transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--orange),inset 0 0 0 3px var(--orange);
}
body.woocommerce-checkout #payment ul.payment_methods > li > input.input-radio:checked + label::after{
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:var(--orange);
}
body.woocommerce-checkout #payment ul.payment_methods > li > input.input-radio:focus-visible + label{
  outline:3px solid var(--orange);outline-offset:3px;
}

/* La boîte de détails : pleine largeur, sous la rangée. */
body.woocommerce-checkout #payment ul.payment_methods > li > div.payment_box{
  order:2;grid-column:1/-1;
  margin:0;padding:18px 20px;
  background:#fff;color:var(--ink2);border:var(--bd);border-radius:0;box-shadow:var(--sh-sm);
  font-size:15px;line-height:1.5;
}
body.woocommerce-checkout #payment ul.payment_methods > li > div.payment_box p:last-child{margin-bottom:0}
/* Le triangle de WooCommerce pointait vers le radio : plus de radio visible. */
body.woocommerce-checkout #payment div.payment_box::before{display:none}

/* --- Virement bancaire : le QR et ce qu'il faut en faire ---------------------

   Le plugin nausikraft-qr-bill ajoute son bloc à la suite de la description de
   la passerelle, et le thème écrit le texte qui l'entoure — phrase
   d'introduction et marche à suivre (smartbeer_bacs_marche_a_suivre,
   functions.php). Empilés dans le flux, cela donnait un carré noir de 220 px
   posé en haut à gauche, deux valeurs en corps 11 sur son flanc, et les deux
   tiers de la boîte vides.

   La boîte devient une grille de trois colonnes — le code, ses valeurs, les
   trois gestes — sous la description, qui garde toute la largeur. `.nqb-block`
   passe en display:contents pour que le code et sa liste de valeurs deviennent
   des items de cette grille : c'est le seul moyen de les séparer sans toucher
   au balisage du plugin, qui vit hors de ce dépôt.

   Rien ici ne suppose que le QR est présent : plugin non configuré, la boîte
   ne contient qu'un paragraphe et la grille n'a qu'une ligne. --- */
body.woocommerce-checkout #payment div.payment_box.payment_method_bacs{
  display:grid;align-items:start;
  grid-template-columns:auto minmax(190px,0.9fr) minmax(230px,1.1fr);
  gap:24px 30px;padding:24px 24px 22px;
}
body.woocommerce-checkout #payment div.payment_box.payment_method_bacs > p{
  grid-column:1/-1;margin:0;max-width:74ch;font-size:15.5px;line-height:1.55;
}
body.woocommerce-checkout #payment div.payment_box.payment_method_bacs .nqb-block{display:contents}

/* Le code, encadré comme une vignette imprimée. wpautop laisse un <br> derrière
   la déclaration XML du SVG : il décalerait le code dans son cadre. */
body.woocommerce-checkout #payment .payment_method_bacs .nqb-qr{
  grid-column:1;width:190px;padding:10px;background:#fff;
  border:var(--bd);box-shadow:var(--sh-sm);line-height:0;
}
body.woocommerce-checkout #payment .payment_method_bacs .nqb-qr br{display:none}
body.woocommerce-checkout #payment .payment_method_bacs .nqb-qr svg{width:100%;height:auto;display:block}

/* Les deux valeurs du code. La référence est la seule donnée que le client
   pourrait avoir à recopier : elle passe en chasse fixe, à une taille qui se
   lit, et se coupe proprement plutôt que de déborder. */
body.woocommerce-checkout #payment .payment_method_bacs .nqb-details{
  grid-column:2;margin:0;display:block;
}
body.woocommerce-checkout #payment .payment_method_bacs .nqb-details dt{
  margin:0 0 5px;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.13em;color:#8a7c6c;
}
body.woocommerce-checkout #payment .payment_method_bacs .nqb-details dd{
  margin:0 0 18px;font-weight:700;color:var(--ink);
}
body.woocommerce-checkout #payment .payment_method_bacs .nqb-details dd:last-child{margin-bottom:0}
/* Repris avec `dd` dans le sélecteur : la règle générique ci-dessus en porte un
   et l'emporterait sur une simple classe. */
body.woocommerce-checkout #payment .payment_method_bacs .nqb-details dd.nqb-reference{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:14px;line-height:1.5;letter-spacing:.02em;word-break:break-word;
}
body.woocommerce-checkout #payment .payment_method_bacs .nqb-details dd.nqb-amount{
  font-size:26px;line-height:1.1;font-weight:800;color:var(--orange);
}

/* Les trois gestes. Numérotés à la main : le compteur CSS permet de poser le
   chiffre dans sa pastille, ce que les puces natives ne savent pas faire. */
body.woocommerce-checkout #payment .payment_method_bacs .sb-bacs-etapes{
  grid-column:3;margin:0;padding:0;list-style:none;counter-reset:sb-bacs;
  display:flex;flex-direction:column;gap:13px;
}
body.woocommerce-checkout #payment .payment_method_bacs .sb-bacs-etapes li{
  counter-increment:sb-bacs;position:relative;padding-left:40px;
  font-size:15px;line-height:1.4;color:var(--ink);font-weight:600;
}
body.woocommerce-checkout #payment .payment_method_bacs .sb-bacs-etapes li::before{
  content:counter(sb-bacs);position:absolute;left:0;top:-2px;
  width:27px;height:27px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper2);
  font-size:13px;font-weight:800;line-height:1;
}

@media (max-width:980px){
  body.woocommerce-checkout #payment div.payment_box.payment_method_bacs{
    grid-template-columns:auto minmax(180px,1fr);gap:20px 24px;
  }
  body.woocommerce-checkout #payment .payment_method_bacs .sb-bacs-etapes{
    grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:10px 26px;
  }
}
@media (max-width:640px){
  body.woocommerce-checkout #payment div.payment_box.payment_method_bacs{
    grid-template-columns:1fr;padding:18px;
  }
  body.woocommerce-checkout #payment .payment_method_bacs .nqb-qr{
    grid-column:1;width:100%;max-width:230px;
  }
  body.woocommerce-checkout #payment .payment_method_bacs .nqb-details{grid-column:1}
  body.woocommerce-checkout #payment .payment_method_bacs .sb-bacs-etapes{flex-direction:column;gap:12px}
}

body.woocommerce-checkout .wc-stripe-elements-field,
body.woocommerce-checkout .wc-card-fields,
body.woocommerce-checkout #wc-stripe-cc-form .form-row{
  background:#fff;border:var(--bd);border-radius:0;padding:12px;
}

/* Téléphone et petites tablettes : sous ce seuil les trois colonnes tombent
   à ~90px de large (le libellé de la carte y devient illisible), on empile,
   logo à gauche du libellé. */
@media (max-width:640px){
  body.woocommerce-checkout #payment{padding:16px}
  body.woocommerce-checkout #payment ul.payment_methods{grid-template-columns:1fr;gap:12px}
  body.woocommerce-checkout #payment ul.payment_methods > li > label{
    flex-direction:row;justify-content:center;gap:14px;
    min-height:0;padding:14px 46px;text-align:left;
  }
}

/* --- Bouton « Commander » + boutons façon .hv3-btn (orange, bordure encre,
   ombre dure décalée, hover translate) --- */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .button.alt,
body.woocommerce-checkout button.button{
  background:var(--orange) !important;color:#fff !important;border:var(--bd) !important;
  border-radius:0 !important;font-family:"Hanken Grotesk",sans-serif !important;
  font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.02em !important;
  padding:15px 26px !important;text-shadow:none !important;
  box-shadow:var(--sh-sm) !important;transition:transform .12s,box-shadow .12s !important;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout .button.alt:hover,
body.woocommerce-checkout button.button:hover{
  background:var(--orange) !important;
  transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink) !important;
}
body.woocommerce-checkout #place_order:active,
body.woocommerce-checkout .button.alt:active,
body.woocommerce-checkout button.button:active{
  transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink) !important;
}

/* --- Coupon / notices / cases à cocher --- */
/* Code promo : simple ligne (champ + bouton) à la hauteur des champs du
   formulaire. display:block !important annule le style inline « display:none »
   posé par le JS WC. */
body.woocommerce-checkout form.checkout_coupon{background:transparent;border:none;padding:0;margin:0 0 22px;display:block !important;line-height:1}
body.woocommerce-checkout form.checkout_coupon .coupon-fields{display:flex;gap:12px;align-items:center;height:auto}
body.woocommerce-checkout form.checkout_coupon .coupon-fields > *{align-self:center}
/* champ et bouton exactement à la même hauteur et alignés */
body.woocommerce-checkout form.checkout_coupon input.input-text{flex:1 1 auto;min-width:0;margin:0;height:48px !important;padding:0 14px !important;line-height:normal !important}
body.woocommerce-checkout form.checkout_coupon button{flex:0 0 auto;margin:0 !important;white-space:nowrap;height:48px !important;padding:0 22px !important;line-height:normal !important}

/* Notices (déjà client / code promo / erreurs) = blocs clairs bordés ombre dure,
   liseré orange à gauche */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error{
  background:var(--card);border:var(--bd);border-left:9px solid var(--orange);
  color:var(--ink);border-radius:0;box-shadow:var(--sh-sm);overflow:hidden;
}
body.woocommerce-checkout .woocommerce-message{border-left-color:var(--green)}
body.woocommerce-checkout .woocommerce-error{border-left-color:#c0392b}
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-error::before{color:var(--orange)}
body.woocommerce-checkout .woocommerce-message::before{color:var(--green)}
body.woocommerce-checkout .woocommerce-info a.button,
body.woocommerce-checkout .woocommerce-message a.button{
  background:var(--ink) !important;color:#fff !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{color:var(--ink2)}
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout input[type="radio"]{accent-color:var(--orange)}

/* --- Acceptation des conditions générales : même tuile que les moyens de
   paiement, en plus petit. La case reste une vraie checkbox, sortie du flux
   mais focusable. Le marqueur est porté par le <span> qui SUIT la case
   (input:checked + span::after) : l'état reste visible même là où :has() n'est
   pas connu, où seul le liseré orange de la boîte manquera. --- */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row{margin:0}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox{
  position:relative;display:block;
  padding:13px 46px 13px 16px;margin:0;cursor:pointer;
  background:var(--card);border:var(--bd);border-radius:0;box-shadow:var(--sh-sm);
  color:var(--ink);font-weight:700;font-size:15px;line-height:1.35;
  transition:transform .12s,box-shadow .12s;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox:hover{
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input.input-checkbox{
  position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox
  .woocommerce-terms-and-conditions-checkbox-text::after{
  content:"";position:absolute;top:50%;right:15px;transform:translateY(-50%);
  width:18px;height:18px;background:#fff;border:2.5px solid var(--ink);border-radius:50%;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox
  input.input-checkbox:checked + .woocommerce-terms-and-conditions-checkbox-text::after{
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:var(--orange);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox:has(input.input-checkbox:checked){
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--orange),inset 0 0 0 3px var(--orange);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox
  input.input-checkbox:focus-visible + .woocommerce-terms-and-conditions-checkbox-text::after{
  outline:3px solid var(--orange);outline-offset:2px;
}
/* La case native étant masquée, l'erreur de WooCommerce (form-row
   woocommerce-invalid quand la case n'est pas cochée) n'avait plus rien à
   colorer : la tuile passe au rouge. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid
  label.woocommerce-form__label-for-checkbox{
  border-color:#c0392b;box-shadow:4px 4px 0 #c0392b;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid
  label.woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text::after{
  border-color:#c0392b;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox a{
  color:var(--orange);text-decoration:underline;
}
/* L'astérisque que WooCommerce colle après le libellé ferait doublon avec celui
   qui ouvre la ligne des documents, en bas du bloc. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox
  abbr.required{display:none}

/* --- Liens vers les documents, en bas du bloc, après « Retour au shop » ---
   La phrase de la case reste en encre et sans lien : toute sa surface est une
   cible de clic sûre, un lien au milieu du texte s'attrapant par mégarde sur
   téléphone. clear:both parce que le bouton flotte à droite en vue bureau. */
/* !important : le thème cloue .checkout .form-row à margin:0 0 15px. */
body.woocommerce-checkout #payment .form-row.place-order{margin-bottom:0 !important}
body.woocommerce-checkout .sb-cgv-liens{
  /* La ligne remonte les deux paddings qui l'entourent — 14px sur la form-row,
     22px sur le bloc — pour venir se coller au bord inférieur du cadre, sur
     toute sa largeur, sous un filet. */
  clear:both;margin:22px -36px -36px;padding:12px 36px;
  border-top:2px solid var(--ink);
  font-size:13px;font-weight:600;line-height:1.4;color:var(--ink2);
}
body.woocommerce-checkout .sb-cgv-liens a{color:var(--orange);text-decoration:underline}
body.woocommerce-checkout .sb-cgv-etoile{color:var(--orange);font-weight:800}

/* --- « Commander » grisé tant que la case n'est pas cochée ---
   Le bouton reste cliquable : WooCommerce affiche alors son message d'erreur
   et marque la case en rouge, ce qu'un bouton inerte ne ferait pas. Sans
   :has(), le bouton garde simplement sa couleur — la validation, elle, ne
   dépend pas de cette règle. --- */
/* .form-row sans .place-order : sur « payer ma commande » (form-pay.php) le
   bouton vit dans une form-row nue, avec la même case d'acceptation. */
body.woocommerce-checkout .form-row:has(#terms:not(:checked)) #place_order,
body.woocommerce-checkout .form-row:has(#terms:not(:checked)) #place_order:hover{
  background:#776f66 !important;box-shadow:var(--sh-sm) !important;
  transform:none !important;cursor:not-allowed;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox abbr.required{
  border:0;text-decoration:none;color:var(--orange);
}

/* --- Colonnes facturation / destinataire : même largeur, hauteur au contenu ---
   flex + align-items:flex-start => cartes à leur hauteur naturelle (compactes).
   En « Offrir » les deux adresses remplissent les colonnes. Empilées <768px. --- */
body.woocommerce-checkout #customer_details{display:flex;gap:22px;align-items:flex-start}
/* le clearfix du gabarit (::before/::after) devient un item flex et ajoute des
   gaps parasites -> on le neutralise */
body.woocommerce-checkout #customer_details::before,
body.woocommerce-checkout #customer_details::after{display:none}
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2{float:none;width:auto;flex:1 1 0;margin:0 0 22px}
/* neutralise le min-height "colonnes égales" (posé par le plugin/thème) */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields{min-height:0 !important}
/* En mode « Offrir » (body.checkout-gift) : les deux adresses affichées ->
   colonnes à la même hauteur. */
body.woocommerce-checkout.checkout-gift #customer_details{align-items:stretch}
@media (max-width:768px){
  body.woocommerce-checkout #customer_details{flex-direction:column;gap:0}
}

/* --- Récap commande : ligne produit allégée (nom seul) ---
   masque le prix récurrent « 0.00 / mois », les détails d'abonnement (essai/durée)
   et les frais d'inscription (déjà affichés dans la colonne Total). Scopé aux
   lignes produits (.cart_item) pour ne pas toucher la section des totaux. */
body.woocommerce-checkout .cart_item .wcs-checkout-item-price,
body.woocommerce-checkout .cart_item .subscription-details,
body.woocommerce-checkout .cart_item .woocommerce-subscriptions-product-details__signup-fee{display:none}

/* --- Gabarit mobile : aligner la gouttière sur la home ---
   Sur téléphone les marges latérales s'empilaient : .container.page (15px),
   .bloc (20px), #order_review (24px) puis #payment (16px), soit 75px de chaque
   côté avant la première tuile — la home tient sur un seul padding de 26px
   (.hv3-wrap). On ramène la gouttière de page à ces 26px en la posant à un
   seul endroit, on resserre les cartes, et #payment rend son cadre : il est
   déjà dans celui du récapitulatif, deux bordures imbriquées ne coûtaient que
   de la largeur. --- */
@media (max-width:640px){
  body.woocommerce-checkout .container.page{padding-left:0;padding-right:0}
  body.woocommerce-checkout .container.page .bloc{padding-left:26px;padding-right:26px}
  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2,
  body.woocommerce-checkout #order_review{padding:20px 16px}
  body.woocommerce-checkout #payment{
    background:transparent !important;border:0;box-shadow:none;padding:0;
  }
  /* Le titre de page garde 30px de retrait pour ses chevrons décoratifs, que le
     gabarit masque déjà sur téléphone : il se retrouvait seul, décalé. */
  body.woocommerce-checkout .bloc-title{padding-left:0}

  /* Sur téléphone, « Retour au shop » passe SOUS « Commander » : l'action
     principale se lit avant l'échappatoire. Le clearfix du gabarit deviendrait
     deux items de flex, comme sur la grille des tuiles. */
  body.woocommerce-checkout .checkout_buttons{
    display:flex;flex-direction:column;align-items:stretch;gap:16px;
  }
  body.woocommerce-checkout .checkout_buttons::before,
  body.woocommerce-checkout .checkout_buttons::after{display:none}
  /* margin-top 30px (bouton) et 40px (lien) sont posés en !important par le
     thème : en colonne ils s'ajoutaient au gap et creusaient 72px. */
  body.woocommerce-checkout .checkout_buttons #place_order{
    order:1;width:100%;float:none !important;margin:0 !important;
  }
  /* deux ID dans le sélecteur du thème (#payment #back_to_shop) : il en faut
     autant pour passer devant. */
  body.woocommerce-checkout #payment .checkout_buttons #back_to_shop{
    order:2;float:none;margin:0 !important;text-align:center;
  }
  /* #payment y perd cadre et padding : rien à déborder, rien à souligner. */
  body.woocommerce-checkout .sb-cgv-liens{
    margin:18px 0 0;padding:0;border-top:0;text-align:center;
  }
  /* Le pied du paiement gardait les paddings de WooCommerce (1em sur la
     form-row, 3px sur celle des conditions) : case et boutons se retrouvaient
     17px en dedans des tuiles. */
  body.woocommerce-checkout #payment div.form-row.place-order{padding-left:0;padding-right:0}
  body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row{
    padding-left:0;padding-right:0;
  }
}