/* ============================================================================
   BIOMONDE — TUNNEL DE COMMANDE UNIFIÉ (panier + checkout)
   ----------------------------------------------------------------------------
   Source de vérité UNIQUE de toute la DA du tunnel. Remplace l'ancien CSS inline
   de ma-commande.php ET l'ancien bio-page-checkout.css (fusionnés ici v2.53.1).
   100 % piloté par les tokens --bio-* (bio-design-tokens.css).

   ARCHITECTURE :
   - Le STYLE DE BASE est scopé sous #bio-checkout-v1 → s'applique toujours
     (même si le JS de la machine d'étapes échoue = dégradation gracieuse :
      formulaire empilé, stylé et fonctionnel).
   - Le LAYOUT EN ÉTAPES est scopé sous .bio-tunnel-active (classe ajoutée au
     <form> par bio-checkout-tunnel.js) → grille + affichage étape par étape.
   ============================================================================ */

/* ============================================================
   1. STEPPER DE PROGRESSION · Panier · Coordonnées · Retrait · Paiement
   (partagé avec la page Panier)
   ============================================================ */
.bio-tunnel-stepper {
    max-width: 680px;
    margin: 4px auto 28px;
    padding: 0 6px;
    font-family: var(--bio-font, 'Quicksand', system-ui, sans-serif);
}
.bio-stepper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.bio-stepper-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}
.bio-stepper-item::before {
    content: '';
    position: absolute;
    top: 19px;
    left: -50%;
    width: 100%;
    height: 3px;
    background: var(--bio-border, #e5e5e5);
    z-index: 0;
    transition: background-color .3s var(--bio-ease, ease);
}
.bio-stepper-item:first-child::before { display: none; }
.bio-stepper-item.is-done::before,
.bio-stepper-item.is-active::before { background: var(--bio-green, #8CB93F); }
.bio-stepper-node {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2.5px solid var(--bio-border, #e5e5e5);
    color: #b8b3aa;
    font-size: 16px;
    line-height: 1;
    transition: background-color .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.bio-stepper-item.is-done .bio-stepper-node {
    background: var(--bio-green, #8CB93F);
    border-color: var(--bio-green, #8CB93F);
    color: #fff;
}
.bio-stepper-item.is-active .bio-stepper-node {
    background: #fff;
    border-color: var(--bio-green, #8CB93F);
    color: var(--bio-green-dark, #6BA032);
    box-shadow: 0 0 0 4px rgba(var(--bio-green-rgb), .16);
    transform: scale(1.06);
}
.bio-stepper-label {
    /* Taille FLUIDE (corrige le chevauchement quel que soit l'appareil, sans dépendre
       d'un breakpoint) : ~12.5px sur grand écran, rétrécit progressivement jusqu'à 10px
       sur petit viewport. Couplé au stepper pleine largeur ≤1100px → impossible que les
       labels (« Coordonnées ») se touchent. */
    font-size: 11px; /* repli statique : iOS Safari < 13.4 ignore clamp() → garde une taille compacte anti-chevauchement */
    font-size: clamp(10px, 1.1vw + 6px, 12.5px);
    font-weight: 700;
    color: #6b6258; /* contraste AA : #888 (3.54:1) → #6b6258 (5.98:1). done/active gardent le brun. */
    letter-spacing: .01em;
    line-height: 1.2;
    /* garde-fou ultime : un label ne peut pas déborder de son emplacement flex */
    max-width: 100%;
}
.bio-stepper-item.is-done .bio-stepper-label,
.bio-stepper-item.is-active .bio-stepper-label { color: var(--bio-brown, #5D4037); }
.bio-stepper-item.is-clickable { cursor: pointer; }
.bio-stepper-item.is-clickable:hover .bio-stepper-node {
    border-color: var(--bio-green, #8CB93F);
    color: var(--bio-green-dark, #6BA032);
}
/* a11y : focus CLAVIER visible sur les étapes franchies (désormais activables Entrée/Espace) */
.bio-stepper-item.is-clickable:focus-visible { outline: 2px solid var(--bio-green-dark, #6BA032); outline-offset: 4px; border-radius: 10px; }
.bio-stepper-item:focus:not(:focus-visible) { outline: none; }
/* cibles de focus PROGRAMMATIQUE des étapes (tabindex=-1 posé par le JS au changement
   d'étape, pour orienter clavier/lecteur d'écran) : pas de contour disgracieux. */
#bio-checkout-v1 #customer_details:focus, #bio-checkout-v1 #bio_pickup_fields:focus, #bio-checkout-v1 #order_review:focus { outline: none; }
/* région d'annonce lecteur d'écran (aria-live), visuellement masquée. */
#bio-checkout-v1 .bio-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============================================================
   2. ICÔNES MOYENS DE PAIEMENT (réassurance)
   ----------------------------------------------------------------------------
   Les badges du récap reprennent EXACTEMENT ceux du footer (SVG officiels colorés
   Visa/Mastercard/CB/Amex) via bio_render_payment_icons() → markup
   `.bio-payments-icons > .bio-pay-icon > svg`, stylé par bio-theme.css
   (`.bio-payments-icons .bio-pay-icon` : carte blanche 38×25, ombre, hover).
   → DA 100 % homogène avec le footer, aucun style à dupliquer ici.
   Seul ajustement propre au récap : on les centre (cf. section 12).
   ============================================================ */

/* ============================================================
   3. WRAPPER + RESET
   ============================================================ */
#bio-checkout-v1 {
    font-family: var(--bio-font, 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 40px;
    color: var(--bio-brown, #5D4037);
}
#bio-checkout-v1 * { box-sizing: border-box; }

/* ============================================================
   4. NOTICE « CONNEXION REQUISE » (affichée hors tunnel, si déconnecté)
   ============================================================ */
.bio-checkout-login-notice {
    max-width: 1000px;
    margin: 0 auto 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(245, 124, 0, 0.20);
    border-left: 4px solid #f57c00;
    border-radius: 14px;
    padding: 16px 20px;
    color: var(--bio-brown, #3e302b);
    font-family: var(--bio-font, 'Quicksand', sans-serif);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 14px rgba(60, 48, 43, 0.06);
    line-height: 1.45;
}
.bio-checkout-notice-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    background: #f57c00; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.bio-checkout-notice-icon i { font-size: 16px; }
.bio-checkout-notice-text { flex: 1; min-width: 0; }

/* ============================================================
   5. PURGE / RESTYLE DES NOTICES WOOCOMMERCE NATIVES
   ============================================================ */
#bio-checkout-v1 .woocommerce-error,
#bio-checkout-v1 .woocommerce-message { display: none !important; }
/* Le conteneur de notices d'erreur ajouté dynamiquement au submit : masqué (les erreurs
   sont gérées par le toast WooPayments / le bandeau du tunnel). Évite surtout qu'il
   devienne une 3e ligne de grille en colonne 1 → ce qui faisait « tout descendre »
   le bloc carte à l'étape paiement. */
#bio-checkout-v1 .woocommerce-NoticeGroup { display: none !important; }
#bio-checkout-v1 .woocommerce-info {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-left: 4px solid var(--bio-green, #8CB93F) !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    color: #555 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    font-size: 14px !important;
}
#bio-checkout-v1 .woocommerce-info svg,
#bio-checkout-v1 .woocommerce-info img { display: none !important; }
#bio-checkout-v1 .woocommerce-info::before {
    content: '\f007' !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important;
    color: var(--bio-green, #8CB93F) !important; margin-right: 12px !important; font-size: 16px !important;
    /* WooCommerce met ce ::before en position:absolute (top:1em;left:1.5em) → avec notre
       box en flex + petit padding gauche, l'icône se retrouvait PAR-DESSUS le texte.
       On le remet dans le flux normal pour qu'il soit le 1er élément flex, à gauche du texte. */
    position: static !important; top: auto !important; left: auto !important;
    flex-shrink: 0 !important; line-height: 1 !important;
}
#bio-checkout-v1 .woocommerce-form-coupon-toggle .woocommerce-info::before { content: '\f02b' !important; }
#bio-checkout-v1 .woocommerce-info a { color: var(--bio-green, #8CB93F) !important; text-decoration: underline !important; margin-left: 5px !important; font-weight: 800 !important; }

/* ============================================================
   6. COUPON
   ============================================================ */
#bio-checkout-v1 form.checkout_coupon {
    background: #fff !important; padding: 16px !important; border-radius: 14px !important;
    border: 1px solid rgba(var(--bio-brown-rgb),0.08) !important; margin-bottom: 22px !important;
}
#bio-checkout-v1 form.checkout_coupon input[type='text'] { border-radius: 999px !important; }
#bio-checkout-v1 form.checkout_coupon button[type='submit'] {
    background: var(--bio-cream, #f9f7f2) !important; color: var(--bio-brown, #5D4037) !important;
    border: 1px solid rgba(var(--bio-brown-rgb),0.10) !important; padding: 10px 18px !important; height: 42px !important;
    border-radius: 999px !important; font-weight: 700 !important; font-size: 13px !important;
    text-transform: uppercase !important; cursor: pointer !important;
    transition: background-color .2s, color .2s, border-color .2s !important; font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
}
#bio-checkout-v1 form.checkout_coupon button[type='submit']:hover { background: var(--bio-brown, #5D4037) !important; color: #fff !important; border-color: var(--bio-brown, #5D4037) !important; }

/* ============================================================
   7. BOX COMPACTE ADRESSE (déjà saisie)
   ============================================================ */
.bio-compact-card {
    background: #fff; border: 1px solid rgba(var(--bio-brown-rgb), 0.10); border-radius: 16px;
    padding: 22px; margin-bottom: 22px; box-shadow: 0 4px 14px rgba(60, 48, 43, 0.06);
    display: flex; flex-direction: column; align-items: flex-start;
}
.bio-compact-header {
    font-size: 11px; font-weight: 800; color: var(--bio-green, #8CB93F); text-transform: uppercase;
    margin-bottom: 14px; letter-spacing: 0.6px; display: inline-flex; align-items: center; gap: 6px;
}
.bio-compact-header i { color: var(--bio-green, #8CB93F); font-size: 13px; }
.bio-compact-body { font-size: 14px; color: var(--bio-brown, #3e302b); line-height: 1.55; margin-bottom: 18px; }
#bio-checkout-v1 .bio-edit-btn {
    background: rgba(var(--bio-brown-rgb), 0.06) !important; border: 1px solid rgba(var(--bio-brown-rgb), 0.12) !important;
    color: var(--bio-brown, #5D4037) !important; padding: 9px 18px !important; border-radius: 999px !important;
    font-size: 12.5px !important; font-weight: 700 !important; cursor: pointer !important;
    transition: background-color .2s, color .2s, border-color .2s !important;
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important; min-height: 38px !important; box-shadow: none !important;
}
#bio-checkout-v1 .bio-edit-btn:hover { background: var(--bio-brown, #5D4037) !important; color: #fff !important; border-color: var(--bio-brown, #5D4037) !important; }
#bio-checkout-v1 .bio-edit-btn i { font-size: 11px !important; }

/* ============================================================
   8. BLOC COORDONNÉES (#customer_details) — carte blanche
   ============================================================ */
#bio-checkout-v1 #customer_details {
    background: #fff; padding: 30px; border-radius: 16px;
    box-shadow: 0 2px 12px rgba(var(--bio-brown-rgb),0.06); border: 1px solid rgba(var(--bio-brown-rgb),0.08);
}
#bio-checkout-v1 #customer_details .col2-set,
#bio-checkout-v1 #customer_details .u-columns { display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 0 !important; }
#bio-checkout-v1 #customer_details .col-1,
#bio-checkout-v1 #customer_details .col-2 { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; }
#bio-checkout-v1 #customer_details h3 { font-size: 14px !important; margin: 0 0 10px 0 !important; text-transform: uppercase; letter-spacing: .5px; color: var(--bio-brown, #5D4037) !important; }
/* Masque l'intitulé « Détails de facturation » (redondant avec la carte adresse) */
#bio-checkout-v1 #customer_details .woocommerce-billing-fields > h3,
#bio-checkout-v1 #customer_details #billing_heading { display: none; }

/* ============================================================
   9. CHAMPS DE FORMULAIRE (inputs / labels / focus / erreurs)
   ============================================================ */
#bio-checkout-v1 .form-row { margin-bottom: 18px !important; padding: 0 !important; display: block !important; width: 100% !important; }
#bio-checkout-v1 label { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: var(--bio-brown) !important; margin-bottom: 8px !important; line-height: 1.2 !important; }
#bio-checkout-v1 input.input-text,
#bio-checkout-v1 input[type='text'],
#bio-checkout-v1 input[type='password'],
#bio-checkout-v1 input[type='email'],
#bio-checkout-v1 input[type='tel'],
#bio-checkout-v1 input[type='number'],
#bio-checkout-v1 select,
#bio-checkout-v1 textarea {
    width: 100% !important; height: 46px !important; padding: 0 15px !important;
    background-color: #fff !important; border: 1px solid #dcdcdc !important; border-radius: 10px !important;
    font-size: 16px !important; /* 16px = anti-zoom iOS */ color: var(--bio-brown, #5D4037) !important;
    transition: all .3s ease !important; outline: none !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.02) !important;
    -webkit-appearance: none !important;
}
#bio-checkout-v1 textarea { height: 100px !important; padding-top: 15px !important; }
#bio-checkout-v1 input:focus, #bio-checkout-v1 select:focus, #bio-checkout-v1 textarea:focus {
    border-color: var(--bio-green, #8CB93F) !important; box-shadow: 0 0 0 3px rgba(var(--bio-green-rgb),0.15) !important;
}
/* État invalide (classe ajoutée par WooCommerce) */
#bio-checkout-v1 .woocommerce-invalid input.input-text,
#bio-checkout-v1 .woocommerce-invalid input[type='email'],
#bio-checkout-v1 .woocommerce-invalid input[type='tel'],
#bio-checkout-v1 .woocommerce-invalid input[type='password'],
#bio-checkout-v1 .woocommerce-invalid select,
#bio-checkout-v1 .woocommerce-invalid textarea,
#bio-checkout-v1 .woocommerce-invalid .select2-selection {
    border: 2px solid var(--bio-red, #e74c3c) !important; background-color: #fff5f5 !important;
    box-shadow: 0 0 8px rgba(231,76,60,0.3) !important; animation: bio-shake 0.4s 1 linear !important;
}
#bio-checkout-v1 .woocommerce-invalid label { color: var(--bio-red, #e74c3c) !important; font-weight: 800 !important; }
@keyframes bio-shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 50%{transform:translateX(4px);} 75%{transform:translateX(-4px);} }

/* ============================================================
   10. BANNIÈRE D'ERREUR FLOTTANTE
   ============================================================ */
#bio-error-banner {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-150px);
    background: var(--bio-red, #e74c3c); color: #fff; padding: 13px 22px; border-radius: 999px;
    font-family: var(--bio-font, 'Quicksand', sans-serif); font-weight: 700; font-size: 14px;
    width: auto; max-width: 90vw; /* repli : iOS Safari < 13.4 ignore min() → borne au viewport pour éviter le débordement horizontal */ max-width: min(420px, calc(100vw - 40px)); box-sizing: border-box;
    z-index: var(--bio-z-toast, 10010); box-shadow: 0 8px 24px rgba(231,76,60,0.4);
    /* MASQUAGE À TOUTE ÉPREUVE : le transform translateY(-150px) seul ne suffisait PAS à
       cacher la bannière (sur certains contextes de positionnement elle se retrouvait à
       ~1px du haut → un « blob rouge » visible en haut sur mobile, planqué derrière
       l'admin bar uniquement en desktop). opacity+visibility garantissent l'invisibilité
       quel que soit le rendu, et restent transitionnés pour l'animation. */
    opacity: 0; visibility: hidden;
    transition: transform .4s cubic-bezier(0.175,0.885,0.32,1.275), opacity .35s ease, visibility .35s;
    white-space: normal; display: inline-flex; align-items: center; gap: 10px; pointer-events: none;
}
#bio-error-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }

/* ============================================================
   11. HEADER (lien retour + titre + badge sécurisé)
   ============================================================ */
.bio-checkout-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(var(--bio-brown-rgb),0.08); padding-bottom: 12px; flex-wrap: wrap; }
/* Le stepper occupe le centre, sur la MÊME ligne que Retour + SSL (mini-header compact). */
.bio-checkout-header .bio-tunnel-stepper { flex: 1 1 320px; max-width: 680px; margin: 0 auto; padding: 0; }
.bio-checkout-back-link {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    color: var(--bio-text-muted, #8a7a6e) !important; font-size: 13px !important; font-weight: 700 !important;
    line-height: 1 !important; text-decoration: none !important; padding: 9px 16px !important; border-radius: 999px !important;
    border: 1px solid rgba(var(--bio-brown-rgb),0.15) !important; background: rgba(255,255,255,0.7) !important;
    transition: background-color .2s, color .2s, border-color .2s; flex-shrink: 0;
}
.bio-checkout-back-link i { font-size: 11px; }
.bio-checkout-back-link:hover { background: rgba(var(--bio-brown-rgb),0.06) !important; color: var(--bio-brown, #5D4037) !important; border-color: rgba(var(--bio-brown-rgb),0.20) !important; }
.bio-checkout-back-link:focus-visible { outline: 2px solid var(--bio-green, #8CB93F); outline-offset: 2px; }
.bio-secure-badge { font-size: 11px; color: var(--bio-brown, #5D4037); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; background: rgba(255,255,255,0.96); padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(var(--bio-brown-rgb),0.10); display: inline-flex; align-items: center; gap: 6px; min-height: 32px; flex-shrink: 0; }

/* ============================================================
   12. LAYOUT MACHINE D'ÉTAPES (.bio-tunnel-active — JS actif)
   ============================================================ */
#bio-checkout-v1.bio-tunnel-active form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    column-gap: 34px;
    row-gap: 0;
    align-items: start;
}
#bio-checkout-v1.bio-tunnel-active form.checkout > * { grid-column: 1; min-width: 0; }
/* Coupon + notices = pleine largeur */
#bio-checkout-v1.bio-tunnel-active form.checkout > .woocommerce-form-coupon-toggle,
#bio-checkout-v1.bio-tunnel-active form.checkout > .checkout_coupon,
#bio-checkout-v1.bio-tunnel-active form.checkout > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* Récap = colonne 2, collant. NB : grid-row:1 (PAS « 1 / span 99 ») — le span créait
   ~99 pistes de lignes fantômes (≈300px de hauteur vide = scroll inutile). Comme une
   seule étape est visible à la fois, la colonne 1 n'a qu'une ligne → row 1 suffit. */
#bio-checkout-v1.bio-tunnel-active form.checkout > .bio-tunnel-summary {
    grid-column: 2; grid-row: 1; align-self: start;
    position: -webkit-sticky; position: sticky; top: 100px; margin: 0;
}
/* #order_review devient le CONTENEUR de l'étape Paiement (plus la sidebar) */
#bio-checkout-v1.bio-tunnel-active form.checkout > #order_review {
    grid-column: 1; background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; display: block;
}
#bio-checkout-v1.bio-tunnel-active #order_review_heading { display: none; }
/* Étapes : une seule visible */
#bio-checkout-v1.bio-tunnel-active .bio-step-hidden { display: none !important; }

/* Récap unifié (aside créé par le JS) */
.bio-tunnel-summary {
    background: #fff; border: 1px solid var(--bio-border-warm, #e8e3dc); border-radius: var(--bio-radius-lg, 20px);
    padding: 20px; box-shadow: var(--bio-shadow-card, 0 2px 8px rgba(var(--bio-brown-rgb),.05));
    font-family: var(--bio-font, 'Quicksand', sans-serif);
}
.bio-tunnel-summary-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #6b6258; margin: 0 0 14px; } /* contraste AA */
.bio-summary-count { color: var(--bio-green-dark, #6BA032); }
/* Récap COMPACT : on masque la liste des articles (le bouton CTA doit rester visible
   d'emblée même avec beaucoup d'articles) ; on garde les totaux (tfoot). Le nombre
   d'articles est affiché dans le titre par le JS. */
#bio-checkout-v1 .bio-tunnel-summary table.shop_table tbody { display: none !important; }
.bio-tunnel-summary-extras { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--bio-border-warm, #e8e3dc); text-align: center; }
.bio-tunnel-summary-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--bio-green-dark, #6BA032); margin-bottom: 12px; }
/* Badges paiement (mêmes SVG que le footer) : centrés dans le récap. */
.bio-tunnel-summary-extras .bio-payments-icons { justify-content: center; }

/* CTA dans le RÉCAP collant (façon La Fourche) : Continuer (étapes 1-2) puis
   Commander (PROXY, étape 3), sous le total.
   Le thème colore tout <button> en brun → on force le vert (background-color
   longhand + background-image:none + scope #bio-checkout-v1 + !important). */
.bio-tunnel-summary-cta { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
#bio-checkout-v1 .bio-summary-next,
#bio-checkout-v1 .bio-summary-commander {
    width: 100% !important; background-color: var(--bio-cta, #5E8A2A) !important; background-image: none !important; /* --bio-cta = accent du thème assombri → texte blanc lisible ET suit le thème (v2.59.4) */
    color: #fff !important; border: none !important; border-radius: 999px !important; padding: 16px 20px !important;
    font-weight: 900 !important; font-size: 15px !important; text-transform: uppercase !important; letter-spacing: .5px !important;
    cursor: pointer !important; min-height: 54px !important; float: none !important; margin: 0 !important;
    box-shadow: 0 8px 22px rgba(var(--bio-green-rgb), .30) !important; display: inline-flex !important; align-items: center;
    justify-content: center; gap: 9px; font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
    transition: background-color .2s, transform .15s, box-shadow .2s !important;
}
#bio-checkout-v1 .bio-summary-next:hover,
#bio-checkout-v1 .bio-summary-commander:hover { filter: brightness(0.9) !important; transform: translateY(-1px); }
/* Visibilité du CTA pilotée par l'état du slot (préfixe #bio-checkout-v1 pour battre
   la règle d'affichage). Par défaut : Continuer visible, Commander caché.
   À l'étape paiement : on inverse (Commander visible, Continuer caché). */
#bio-checkout-v1 .bio-summary-commander { display: none !important; }
#bio-checkout-v1 .bio-tunnel-summary-cta.is-paiement .bio-summary-next { display: none !important; }
#bio-checkout-v1 .bio-tunnel-summary-cta.is-paiement .bio-summary-commander { display: inline-flex !important; }
#bio-checkout-v1 .bio-tunnel-summary-cta.is-coordonnees .bio-summary-back { display: none !important; }
/* Le VRAI #place_order reste à sa place (jamais déplacé) mais on le masque visuellement
   en « sr-only » sur l'étape paiement : il reste cliquable par le proxy + soumet le form. */
#bio-checkout-v1 #order_review #place_order {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important; min-height: 0 !important; box-shadow: none !important;
}
/* Lien « Retour » discret sous le CTA */
#bio-checkout-v1 .bio-summary-back {
    background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important;
    display: block; width: 100%; text-align: center; color: #6b6258 !important; font-weight: 700; font-size: 13px;
    cursor: pointer; min-height: 0 !important; padding: 6px; text-transform: none !important; letter-spacing: 0 !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
}
#bio-checkout-v1 .bio-summary-back:hover { color: var(--bio-brown, #5D4037) !important; }

/* ============================================================
   13. TABLEAU RÉCAP COMMANDE (dans le récap)
   ============================================================ */
#bio-checkout-v1 .woocommerce-checkout-review-order-table { background: #fff; border-radius: 10px; border: 1px solid #eaeaeb; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); padding: 10px 12px; margin: 0; display: flex; flex-direction: column; }
#bio-checkout-v1 table.shop_table thead { display: none; }
#bio-checkout-v1 table.shop_table tbody { display: block; }
#bio-checkout-v1 table.shop_table tr { display: table; width: 100%; table-layout: fixed; }
#bio-checkout-v1 table.shop_table tfoot { display: block; width: 100%; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e0e0e0; }
#bio-checkout-v1 table.shop_table tr.cart_item { border-bottom: 1px dashed #f0f0f0; }
#bio-checkout-v1 table.shop_table tr.cart_item:last-child { border-bottom: none; }
#bio-checkout-v1 table.shop_table td, #bio-checkout-v1 table.shop_table th { padding: 6px 0; font-size: 12.5px; vertical-align: top; border: none; line-height: 1.3; }
#bio-checkout-v1 td.product-name { color: var(--bio-brown, #5D4037); font-weight: 700; width: 72%; padding-right: 8px; text-align: left; }
#bio-checkout-v1 .product-quantity { color: var(--bio-green, #8CB93F); font-weight: 900; margin-left: 3px; font-size: 11px; }
#bio-checkout-v1 td.product-total { text-align: right; font-weight: 800; color: var(--bio-brown, #5D4037); width: 28%; font-size: 12.5px; }
#bio-checkout-v1 dl.variation { margin: 2px 0 0 0; font-size: 10px; color: var(--bio-text-muted, #888); display: flex; flex-wrap: wrap; gap: 4px; font-weight: 600; }
#bio-checkout-v1 dl.variation dt, #bio-checkout-v1 dl.variation dd, #bio-checkout-v1 dl.variation p { margin: 0; padding: 0; display: inline; }
#bio-checkout-v1 table.shop_table tr.cart-subtotal th, #bio-checkout-v1 table.shop_table tr.cart-subtotal td { font-size: 12.5px; color: #777; padding: 4px 0; }
#bio-checkout-v1 table.shop_table tr.cart-subtotal th { text-align: left; }
#bio-checkout-v1 table.shop_table tr.cart-subtotal td { text-align: right; }
#bio-checkout-v1 table.shop_table tr.order-total th, #bio-checkout-v1 table.shop_table tr.order-total td { border-top: 1.5px solid var(--bio-brown, #5D4037); padding-top: 10px; font-size: 16px !important; font-weight: 900 !important; line-height: 1.3; }
#bio-checkout-v1 table.shop_table tr.order-total th { color: var(--bio-brown, #5D4037); text-align: left; }
#bio-checkout-v1 table.shop_table tr.order-total td { color: var(--bio-cta, #4D7C1A); text-align: right; } /* --bio-cta = accent assombri → lisible sur blanc ET suit le thème (v2.59.4) */

/* ============================================================
   14. MOYENS DE PAIEMENT + CHAMPS CARTE (UPE Stripe)
   ============================================================ */
#bio-checkout-v1 #payment { background: transparent !important; padding: 0; }
#bio-checkout-v1 #payment ul.wc_payment_methods,
#bio-checkout-v1 #payment ul.payment_methods {
    list-style: none !important; display: flex; flex-direction: column; gap: 12px;
    margin: 0 0 8px !important; padding: 0 !important; border: 0 !important;
}
#bio-checkout-v1 #payment li.wc_payment_method {
    background: #fff; border: 1.5px solid #e6e0d5; border-radius: 14px; overflow: hidden;
    padding: 0 !important; margin: 0 !important; list-style: none !important;
    display: flex; flex-wrap: wrap; align-items: center; /* radio + nom sur 1 ligne, box dessous */
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}
/* Radio INLINE et centré avec le nom (fini le rond collé en haut à gauche) */
#bio-checkout-v1 #payment li.wc_payment_method > input[type='radio'] {
    order: 0; margin: 0 0 0 18px !important; flex-shrink: 0;
}
#bio-checkout-v1 #payment li.wc_payment_method:hover { border-color: #cdd9b3; }
#bio-checkout-v1 #payment li.wc_payment_method:has(input[type='radio']:checked) {
    border-color: var(--bio-green, #8CB93F); box-shadow: 0 0 0 3px rgba(var(--bio-green-rgb),.14); background: #fcfdf9;
}
#bio-checkout-v1 #payment li.wc_payment_method > label {
    order: 1; flex: 1 1 auto; min-width: 0;
    display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 17px 18px 17px 12px !important;
    font-size: 15px !important; font-weight: 700 !important; color: var(--bio-brown, #5D4037) !important; cursor: pointer !important;
}
#bio-checkout-v1 #payment li.wc_payment_method > label img { max-height: 24px; width: auto; margin: 0 2px; }
/* Chevron d'accordéon : indique qu'on peut déplier la méthode ; tourne quand elle est ouverte. */
#bio-checkout-v1 #payment li.wc_payment_method > label::after {
    content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 12px;
    margin-left: auto; color: #b8b3aa; transition: transform .25s, color .25s; flex-shrink: 0;
}
#bio-checkout-v1 #payment li.wc_payment_method:has(input[type='radio']:checked) > label::after {
    transform: rotate(180deg); color: var(--bio-green-dark, #6BA032);
}
#bio-checkout-v1 #payment li.wc_payment_method input[type='radio'] { accent-color: var(--bio-green, #8CB93F); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
/* La .payment_box contient les VRAIS champs carte (UPE). On la STYLE mais on NE FORCE PAS
   display:block : WooCommerce n'affiche que la box du moyen SÉLECTIONNÉ (sinon la
   description du COD s'affichait sous la Carte + bloc paiement trop haut). L'ancien inline
   qui cachait les box sur mobile a été supprimé → plus besoin de forcer l'affichage. */
#bio-checkout-v1 #payment .payment_box {
    order: 2; flex: 0 0 100%; /* la box des modalités passe en pleine largeur sous l'en-tête */
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 18px 18px !important; margin: 0 !important; font-size: 13.5px !important; font-style: normal !important;
    color: var(--bio-text, #555) !important;
}
#bio-checkout-v1 #payment .payment_box::before, #bio-checkout-v1 #payment .payment_box::after { display: none !important; content: none !important; }
#bio-checkout-v1 #payment .payment_box p { margin: 0 0 6px !important; }
/* On retire la bordure « cramée » du fieldset WooPayments… */
#bio-checkout-v1 #payment .wcpay-upe-form fieldset.wc-payment-form { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
/* …et on met les champs carte (UPE Stripe) dans une carte blanche qui respire (premium). */
#bio-checkout-v1 #payment .wcpay-upe-element { background: #fff !important; border: 1px solid #e6e0d5 !important; border-radius: 12px !important; padding: 16px !important; }
#bio-checkout-v1 #payment .woocommerce-SavedPaymentMethods,
#bio-checkout-v1 #payment .wcpay-upe-form > p { margin-top: 12px !important; }

/* Apple/Google Pay « express » (WooPayments) : affiché UNIQUEMENT à l'étape paiement
   (tagué data-bio-step=paiement par le JS → masqué étapes 1-2). Sur la page checkout,
   le bouton express passe par le formulaire → le créneau de retrait (rempli étape 2)
   est inclus. WooPayments le masque tout seul si aucun wallet (canMakePayment) → 0px
   sur desktop sans portefeuille. Le récap utilise un grid-row adaptatif (cf. JS) pour
   ne pas créer de vide quand l'express occupe une 2e ligne en colonne 1. */
#bio-checkout-v1 .wcpay-express-checkout-wrapper { margin-bottom: 12px; }
/* ANTI-TROU : si Stripe ne monte AUCUN bouton wallet (canMakePayment=false), l'élément
   express reste vide → on le réduit à 0 et on annule la marge du wrapper. Évite tout
   « gros vide blanc » sous le header sur les appareils où l'express ne s'affiche pas. */
#bio-checkout-v1 #wcpay-express-checkout-element:empty { display: none !important; }
#bio-checkout-v1 .wcpay-express-checkout-wrapper:not(:has(#wcpay-express-checkout-element > *)) { margin: 0 !important; }
/* Quand l'express EST présent : compact (pas de hauteur démesurée sur mobile). */
#bio-checkout-v1 #wcpay-express-checkout-element { max-width: 100%; }

/* ============================================================
   15. BOUTON « COMMANDER » (#place_order)
   ============================================================ */
#bio-checkout-v1 #place_order,
#bio-checkout-v1 button#place_order {
    width: 100% !important; display: block !important; background: var(--bio-green, #8CB93F) !important; color: #fff !important;
    text-align: center !important; padding: 16px 28px !important; border-radius: 999px !important; font-weight: 900 !important;
    font-size: 16px !important; text-decoration: none !important; margin: 16px 0 0 !important; border: none !important;
    text-transform: uppercase !important; letter-spacing: 0.5px !important; min-height: 56px !important; cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(var(--bio-green-rgb),0.28) !important; transition: background-color .25s, transform .2s, box-shadow .25s !important;
    font-family: var(--bio-font, 'Quicksand', sans-serif) !important;
}
#bio-checkout-v1 #place_order:hover { background: var(--bio-brown, #5D4037) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(var(--bio-brown-rgb),0.22) !important; }
#bio-checkout-v1 #place_order:active { transform: translateY(0) !important; }
#bio-checkout-v1 #place_order:disabled, #bio-checkout-v1 #place_order.loading { opacity: 0.6 !important; cursor: wait !important; pointer-events: none !important; }
.blockUI.blockOverlay { background: rgba(255,255,255,0.8) !important; border-radius: 16px !important; }
/* WooCommerce flotte #place_order à droite → la ligne de réassurance qui suit se retrouve
   écrasée (width:0, texte vertical). On annule le float (le bouton est déjà block pleine largeur). */
#bio-checkout-v1 #place_order { float: none !important; }
#bio-checkout-v1 .bio-pay-secured-line { clear: both; width: 100%; margin-top: 12px; }

/* ============================================================
   16. TERMES & RGPD
   ============================================================ */
#bio-checkout-v1 .woocommerce-terms-and-conditions-wrapper label,
#bio-checkout-v1 .form-row.terms label { display: inline-flex !important; align-items: flex-start !important; gap: 10px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 13px !important; color: var(--bio-brown, #3e302b) !important; line-height: 1.5 !important; }
#bio-checkout-v1 input[type='checkbox'] { accent-color: var(--bio-green, #8CB93F) !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin-top: 1px !important; cursor: pointer !important; }
#bio-checkout-v1 .woocommerce-privacy-policy-text { font-size: 11px !important; color: var(--bio-text-cats, #999) !important; line-height: 1.5 !important; font-style: italic !important; margin: 6px 0 10px !important; }
#bio-checkout-v1 .woocommerce-privacy-policy-text a { color: var(--bio-green, #8CB93F) !important; text-decoration: underline !important; font-weight: 600 !important; }

/* ============================================================
   17. TRUST STRIP (bandeau garanties en bas)
   ============================================================ */
#bio-checkout-v1 .bio-trust-strip { margin: 26px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px 24px; background: var(--bio-cream, #f9f7f2); border-radius: 16px; border: 1px solid rgba(var(--bio-brown-rgb),0.06); }
#bio-checkout-v1.bio-tunnel-active form.checkout > .bio-trust-strip,
#bio-checkout-v1 .bio-trust-strip { grid-column: 1 / -1; }
#bio-checkout-v1 .bio-trust-item { display: flex; align-items: center; gap: 14px; padding: 8px 4px; }
#bio-checkout-v1 .bio-trust-item i { flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--bio-green, #8CB93F); border-radius: 50%; font-size: 16px; box-shadow: 0 2px 8px rgba(var(--bio-green-rgb),0.12); }
#bio-checkout-v1 .bio-trust-txt { display: flex; flex-direction: column; line-height: 1.3; }
#bio-checkout-v1 .bio-trust-txt strong { font-size: 13px; font-weight: 800; color: var(--bio-brown, #5D4037); text-transform: uppercase; letter-spacing: 0.3px; }
#bio-checkout-v1 .bio-trust-txt span { font-size: 12px; color: var(--bio-text-muted, #888); margin-top: 2px; }

/* ============================================================
   18. RESPONSIVE — mobile optimal
   ============================================================ */
@media (max-width: 1100px) {
    /* Colonne unique. Le récap (qui porte le CTA Continuer/Commander) passe EN BAS,
       sous le contenu de l'étape → le bouton suit naturellement les champs (UX mobile). */
    #bio-checkout-v1.bio-tunnel-active form.checkout { display: flex; flex-direction: column; }
    #bio-checkout-v1.bio-tunnel-active form.checkout > .bio-tunnel-summary { position: static; margin: 18px 0 0; width: 100%; }
    #bio-checkout-v1 #customer_details { padding: 22px; }
    /* MINI-HEADER NON-DESKTOP (sous la mise en page 2 colonnes) : on garde UNIQUEMENT le
       bouton Retour (seul moyen de revenir au panier en focused checkout, le header du
       site étant masqué), puis le STEPPER en pleine largeur sur sa propre ligne dessous.
       → Le badge SSL flottait seul à droite avec un grand vide (effet déséquilibré). On le
         retire ici : la réassurance « Paiement 100 % sécurisé » + logos cartes sont déjà
         dans le récap, et le navigateur affiche le cadenas. Header épuré, contenu remonté.
       → Stepper pleine largeur dédiée (flex:1 1 100%) : chaque étape a toute la place →
         « Coordonnées » & co. ne se chevauchent jamais, quel que soit l'appareil. */
    #bio-checkout-v1 .bio-checkout-header { row-gap: 10px; column-gap: 10px; padding-bottom: 10px; margin-bottom: 14px; }
    #bio-checkout-v1 .bio-secure-badge { display: none; }
    #bio-checkout-v1 .bio-checkout-back-link { order: 1; }
    #bio-checkout-v1 .bio-checkout-header .bio-tunnel-stepper {
        order: 2; flex: 1 1 100%; width: 100%; max-width: 100%; margin: 0; padding: 0;
    }
}
@media (max-width: 768px) {
    #bio-checkout-v1 { padding: 0 14px calc(var(--bio-bottom-bar-h, 0px) + 24px); }
    #bio-checkout-v1 input.input-text,
    #bio-checkout-v1 input[type='text'], #bio-checkout-v1 input[type='email'], #bio-checkout-v1 input[type='tel'],
    #bio-checkout-v1 input[type='number'], #bio-checkout-v1 input[type='password'], #bio-checkout-v1 select { height: 50px !important; min-height: 50px !important; }
    #bio-checkout-v1 #payment li.wc_payment_method > label { min-height: 46px; }
    #bio-checkout-v1 .bio-trust-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 18px; }
    .bio-checkout-back-link span { display: none; }
}
@media (max-width: 480px) {
    .bio-tunnel-stepper { margin-bottom: 20px; }
    .bio-stepper-node { width: 34px; height: 34px; font-size: 13.5px; border-width: 2px; }
    .bio-stepper-item::before { top: 16px; height: 2.5px; }
    .bio-stepper-label { font-weight: 600; } /* taille gérée par le clamp fluide (cf. règle de base) */
    #bio-checkout-v1 .bio-trust-strip { grid-template-columns: 1fr; gap: 10px; }
    #bio-checkout-v1 .bio-trust-item i { width: 36px; height: 36px; font-size: 14px; }
}

/* ============================================================
   19. ACCESSIBILITÉ — réduit les animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .bio-stepper-node, .bio-stepper-item::before,
    #bio-checkout-v1 #place_order, #bio-checkout-v1 .bio-summary-next { transition: none !important; }
    .bio-stepper-item.is-active .bio-stepper-node { transform: none; }
    #bio-checkout-v1 .woocommerce-invalid input { animation: none !important; }
}

/* ============================================================================
   20. FOCUSED CHECKOUT — header / nav / footer du site MASQUÉS pendant le tunnel
   ----------------------------------------------------------------------------
   Best practice de conversion : pendant le paiement, on retire les sorties et
   distractions (menu, recherche, footer, bottom-nav) pour focaliser sur la
   commande. Activé par la classe body « bio-focused-checkout », ajoutée
   côté serveur UNIQUEMENT quand le tunnel s'affiche (connecté + panier non vide,
   hors page de remerciement) → pas de FOUC, et le panier/login gardent le site.
   Le mini-header compact (#bio-checkout-v1 .bio-checkout-header : Retour + stepper
   + SSL sur une ligne) reste, lui, affiché.
   ============================================================================ */
body.bio-focused-checkout > header,
body.bio-focused-checkout > footer,
body.bio-focused-checkout .bio-app-nav,
body.bio-focused-checkout .bio-appnav { display: none !important; }
body.bio-focused-checkout #bio-theme-main,
body.bio-focused-checkout .biomonde-page-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
/* marge haute réduite (le header du site est masqué) + pas de réserve bottom-nav */
body.bio-focused-checkout #bio-checkout-v1 { padding-top: 10px; --bio-bottom-bar-h: 0px; }

/* ----------------------------------------------------------------------------
   ANTI-CLS : AVANT que le JS organise le tunnel (#bio-checkout-v1 pas encore
   .bio-tunnel-active), on masque d'emblée les étapes 2-3 + le récap brut +
   l'express-checkout (sélecteurs sur IDs stables présents au rendu serveur).
   → au refresh, on ne voit plus « tous les éléments » clignoter. Dès que le JS
   ajoute .bio-tunnel-active, c'est lui qui pilote la visibilité (classes d'étape).
   Garde-fou : si le JS ne tourne pas (rare), un <noscript> rétablit l'affichage.
   ---------------------------------------------------------------------------- */
#bio-checkout-v1:not(.bio-tunnel-active) #bio_pickup_fields,
#bio-checkout-v1:not(.bio-tunnel-active) #order_review,
#bio-checkout-v1:not(.bio-tunnel-active) #order_review_heading,
#bio-checkout-v1:not(.bio-tunnel-active) .wcpay-express-checkout-wrapper { display: none !important; }

/* FAILSAFE anti-crash JS : le <noscript> ne couvre QUE le JS désactivé, pas une ERREUR
   runtime du tunnel (où .bio-tunnel-active n'est jamais posée → étapes 2-3 + paiement
   resteraient masquées = checkout inutilisable). Un watchdog inline (ma-commande.php)
   pose .bio-tunnel-failsafe après ~4s si le tunnel ne s'est pas activé → on ré-affiche
   TOUT (dégradation gracieuse : formulaire WooCommerce empilé, stylé et fonctionnel).
   Même spécificité que la règle anti-CLS ci-dessus mais déclarée APRÈS → l'emporte. */
#bio-checkout-v1.bio-tunnel-failsafe:not(.bio-tunnel-active) #bio_pickup_fields,
#bio-checkout-v1.bio-tunnel-failsafe:not(.bio-tunnel-active) #order_review,
#bio-checkout-v1.bio-tunnel-failsafe:not(.bio-tunnel-active) #order_review_heading,
#bio-checkout-v1.bio-tunnel-failsafe:not(.bio-tunnel-active) .wcpay-express-checkout-wrapper { display: block !important; }

/* ----------------------------------------------------------------------------
   ÉCRAN DE CONFIRMATION (/commander/order-received/)
   Le client vient de commander : on lui donne les deux informations qui comptent,
   quand venir chercher et combien il paiera sur place. Le reste est secondaire.
   ---------------------------------------------------------------------------- */
.bio-merci {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 0 40px;
}
.bio-merci-head { text-align: center; margin-bottom: 26px; }
.bio-merci-check {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--bio-green, #A8C400);
    color: var(--bio-brown-dark, #332920);
}
.bio-merci-check svg { width: 30px; height: 30px; }
.bio-merci-titre {
    margin: 0 0 6px;
    font-size: clamp(21px, 3vw, 27px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--bio-brown-dark, #3E302B);
}
.bio-merci-num { margin: 0; font-size: 14px; color: var(--bio-text-muted, #6b6b6b); }

.bio-merci-retrait {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.bio-merci-bloc {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 20px;
    background: var(--bio-cream, #F9F7F2);
    border: 1px solid var(--bio-border-warm, #e8e3dc);
    border-radius: var(--bio-radius, 20px);
}
.bio-merci-bloc--total { background: #fff; }
.bio-merci-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bio-text-muted, #6b6b6b);
}
.bio-merci-creneau { font-size: 17px; font-weight: 700; color: var(--bio-brown-dark, #3E302B); line-height: 1.3; }
.bio-merci-adresse { font-size: 13.5px; color: var(--bio-text-muted, #6b6b6b); }
.bio-merci-tel { font-size: 14px; font-weight: 700; color: var(--bio-green-text, #5c6c00); text-decoration: none; }
.bio-merci-tel:hover { text-decoration: underline; }
.bio-merci-total { font-size: 26px; font-weight: 800; color: var(--bio-cta, #798D00); line-height: 1.1; }
.bio-merci-total .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.bio-merci-note { font-size: 12.5px; color: var(--bio-text-muted, #6b6b6b); }

.bio-merci-recap {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--bio-border-warm, #e8e3dc);
    border-radius: var(--bio-radius, 20px);
    margin-bottom: 22px;
}
.bio-merci-lignes { list-style: none; margin: 10px 0 0; padding: 0; }
.bio-merci-lignes li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bio-border-warm, #e8e3dc);
    font-size: 14px;
}
.bio-merci-lignes li:last-child { border-bottom: 0; }
.bio-merci-qte {
    justify-self: start;
    white-space: nowrap;
    min-width: 26px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #F1F7E6;
    color: var(--bio-green-text, #5c6c00);
    font-weight: 700;
    font-size: 12.5px;
    text-align: center;
}
.bio-merci-nom { color: var(--bio-brown-dark, #3E302B); }
.bio-merci-prix { font-weight: 700; color: var(--bio-brown-dark, #3E302B); white-space: nowrap; }

.bio-merci-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bio-merci-btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: 50px;
    border: 1.5px solid var(--bio-border-warm, #e8e3dc);
    background: #fff;
    color: var(--bio-brown-dark, #3E302B);
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
}
.bio-merci-btn:hover { border-color: var(--bio-brown, #3E302B); }
/* !important : une regle de bouton globale du site repeint sinon le libelle en brun
   sur fond brun, donc invisible. Cf. le meme piege sur le bouton du bandeau cookies. */
.bio-merci-btn--primaire {
    background: var(--bio-brown, #422E2D) !important;
    border-color: var(--bio-brown, #422E2D) !important;
    color: #fff !important;
}
.bio-merci-btn--primaire:hover { background: var(--bio-brown-hover, #3d2a29) !important; color: #fff !important; }


@media (max-width: 640px) {
    .bio-merci-retrait { grid-template-columns: 1fr; }
    .bio-merci-actions .bio-merci-btn { flex: 1 1 100%; text-align: center; }
}