/* ============================================================
   CHECKOUT CUSTOM — Multi-Step
   ============================================================ */

/* Cacher header/footer/newsletter du site sur la page checkout */
body.woocommerce-checkout header.container-fluid,
body.woocommerce-checkout .sticky-cta {
  display: none !important;
}
body.woocommerce-checkout footer.container-fluid {
  display: none !important;
}
body.woocommerce-checkout .section-newsletter {
  display: none !important;
}
body.woocommerce-checkout main {
  padding: 0 !important;
  margin: 0 !important;
}

/* Cacher le fil d'ariane + titre (global-banner de page.php) */
body.woocommerce-checkout .global-banner {
  display: none !important;
}

/* Neutraliser le .container qui entoure the_content() dans page.php */
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .container:has(.co-header),
body.woocommerce-checkout .container:has(#checkout),
body.woocommerce-checkout > main > .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- Page fond ---- */
body.woocommerce-checkout {
  background-color: #f4f6f8;
}

/* ============================================================
   PAGE « PAYER LA COMMANDE » (order-pay) — réintégration au site
   Le checkout masque en-tête/pied et colle le contenu bord à bord pour un
   tunnel distraction-free. Mais l'order-pay (repaiement après une annulation
   ou un échec carte) doit ressembler à une page normale du site : navigable,
   rassurante, avec en-tête + pied de page. On réactive donc ces éléments
   uniquement quand la classe .pdc-order-pay est présente (ajoutée en PHP via
   is_checkout_pay_page()).
   ============================================================ */
body.woocommerce-checkout.pdc-order-pay header.container-fluid,
body.woocommerce-checkout.pdc-order-pay footer.container-fluid {
  display: block !important;
}

/* On redonne de l'air au contenu (le checkout le mettait à padding/margin 0) */
body.woocommerce-checkout.pdc-order-pay main {
  padding: 40px 0 !important;
  margin: 0 !important;
}

/* Mise en page classique et centrée pour le récap + formulaire de paiement */
body.woocommerce-checkout.pdc-order-pay .entry-content,
body.woocommerce-checkout.pdc-order-pay > main > .container {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* ============================================================
   CO-HEADER
   ============================================================ */
.co-header {
  background: #fff;
  border-bottom: 1px solid #e8eaec;
  position: sticky;
  top: 0;
  z-index: 100;
}

.co-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
}

.co-header__logo {
  flex-shrink: 0;
}

.co-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}

.co-header__badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 12px;
  flex-wrap: wrap;
}

.co-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
}

.co-badge svg {
  width: 17px;
  height: 17px;
  color: #888;
  flex-shrink: 0;
}

/* Badge SSL mis en valeur en vert */
.co-badge--highlight {
  color: var(--wp--preset--color--color-1, #2d7a3c);
  font-weight: 700;
}

.co-badge--highlight svg {
  color: var(--wp--preset--color--color-1, #2d7a3c);
}

/* ============================================================
   NOTICES
   ============================================================ */
.co-notices {
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0 24px;
}

.co-notices .woocommerce-error,
.co-notices .woocommerce-message,
.co-notices .woocommerce-info {
  border-radius: 8px;
  margin-bottom: 12px;
}

/* ============================================================
   LAYOUT 2/3 + 1/3
   ============================================================ */
.co-layout {
  max-width: 1200px;
  margin: 24px auto 48px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}

/* ============================================================
   STEPS — LEFT COLUMN
   ============================================================ */
.co-layout__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Step card ---- */
.co-step {
  background: #fff;
  border: 1.5px solid #e0e3e8;
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.co-step.is-active {
  border-color: var(--wp--preset--color--color-1, #2d7a3c);
  box-shadow: 0 2px 16px rgba(45, 122, 60, 0.08);
}

.co-step.is-complete {
  border-color: #d0d5db;
}

.co-step.is-locked {
  border-color: #e0e3e8;
  opacity: 0.7;
  pointer-events: none;
}

/* ---- Step header ---- */
.co-step__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}

.co-step.is-locked .co-step__header {
  cursor: default;
}

.co-step.is-complete .co-step__header {
  padding: 14px 20px;
}

.co-step.is-complete .co-step__header:hover {
  background: #f9fafb;
}

/* ---- Step number circle ---- */
.co-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.9rem;
  background: #f0f2f4;
  color: #aaa;
  position: relative;
}

.co-step.is-active .co-step__num {
  background: var(--wp--preset--color--color-1, #2d7a3c);
  color: #fff;
}

.co-step.is-complete .co-step__num {
  background: var(--wp--preset--color--color-1, #2d7a3c);
  color: #fff;
}

.co-step__num-digit {
  display: block;
}

.co-step__num-check {
  display: none;
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.co-step.is-complete .co-step__num-digit {
  display: none;
}

.co-step.is-complete .co-step__num-check {
  display: block;
}

/* ---- Step title ---- */
.co-step__title {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wp--preset--color--color-text, #1a1a1a);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.co-step.is-locked .co-step__title {
  color: #aaa;
}

.co-step__subtitle {
  font-weight: 400;
  font-size: 0.82rem;
  color: #888;
}

/* ---- Edit button ---- */
.co-step__edit {
  display: none;
  background: none;
  border: none;
  color: var(--wp--preset--color--color-1, #2d7a3c);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.co-step.is-complete .co-step__edit {
  display: inline-block;
}

.co-step__edit:hover {
  background: #f0f8f0;
}

/* ---- Step body ---- */
.co-step__body {
  padding: 0 20px 20px;
  display: none;
}

.co-step.is-active .co-step__body {
  display: block;
}

/* ============================================================
   CART ITEMS (Step 1)
   ============================================================ */
.co-step-cart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.co-step-cart__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #f9fafb;
  border-radius: 8px;
}

.co-step-cart__thumb {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.co-step-cart__thumb-img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
}

.co-step-cart__thumb-img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
}

.co-step-cart__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp--preset--color--color-1, #2d7a3c);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-step-cart__name {
  font-weight: 500;
  font-size: 0.88rem;
  margin: 0 0 4px;
  color: var(--wp--preset--color--color-text, #1a1a1a);
}

.co-step-cart__reg-price {
  font-size: 0.8rem;
  color: #999;
  text-decoration: line-through;
  margin: 0;
}

.co-step-cart__price {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
  color: var(--wp--preset--color--color-1, #2d7a3c);
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.co-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.co-form-group label {
  font-size: 0.83rem;
  font-weight: 500;
  color: #555;
}

.co-form-group label abbr {
  text-decoration: none;
  color: var(--wp--preset--color--color-1, #2d7a3c);
  margin-left: 2px;
}

.co-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d8dce2;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  color: var(--wp--preset--color--color-text, #1a1a1a);
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.co-input:focus {
  border-color: var(--wp--preset--color--color-1, #2d7a3c);
  box-shadow: 0 0 0 3px rgba(45, 122, 60, 0.12);
}

.co-input.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.co-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

.co-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.co-field-error {
  font-size: 0.78rem;
  color: #dc2626;
  min-height: 16px;
}

/* ---- Login link ---- */
.co-login-link {
  font-size: 0.84rem;
  color: #777;
  margin: 0 0 18px;
}

.co-login-link a {
  color: var(--wp--preset--color--color-1, #2d7a3c);
  font-weight: 500;
}

/* ---- Checkbox même adresse ---- */
.co-form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
}

.co-form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--wp--preset--color--color-1, #2d7a3c);
  cursor: pointer;
  flex-shrink: 0;
}

.co-form-check label {
  font-size: 0.87rem;
  color: #555;
  cursor: pointer;
  margin: 0;
}

/* ---- Section facturation ---- */
.co-billing-section {
  margin-top: 8px;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e0e3e8;
  border-radius: 8px;
  margin-bottom: 16px;
}

.co-billing-section__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wp--preset--color--color-text, #1a1a1a);
  margin: 0 0 14px;
}

/* ---- Continue button ---- */
.co-btn-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 24px;
  background: var(--wp--preset--color--color-1, #2d7a3c);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
}

.co-btn-continue:hover {
  background: color-mix(
    in srgb,
    var(--wp--preset--color--color-1, #2d7a3c) 85%,
    #000
  );
  transform: translateY(-1px);
}

.co-btn-continue svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ============================================================
   SHIPPING OPTIONS (Step 4)
   ============================================================ */
.co-shipping-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.co-shipping-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #d8dce2;
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.co-shipping-option:hover,
.co-shipping-option.is-selected {
  border-color: var(--wp--preset--color--color-1, #2d7a3c);
  background: #f0f8f0;
}

.co-shipping-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--wp--preset--color--color-1, #2d7a3c);
  flex-shrink: 0;
}

.co-shipping-option__name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wp--preset--color--color-text, #1a1a1a);
}

.co-shipping-option__price {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--wp--preset--color--color-text, #1a1a1a);
}

.co-shipping-none {
  font-size: 0.87rem;
  color: #888;
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* ---- Boxtal / sélecteur point relais ---- */
.co-shipping-option-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Bloc injecté par Boxtal dans le label (bw-extra-label > bw-parcel-point) */
.co-shipping-option__name .bw-extra-label {
  display: block;
  margin-top: 6px;
}

.co-shipping-option__name .bw-parcel-point {
  display: block;
  font-size: 0.82rem;
  color: #555;
  font-weight: 400;
}

.co-shipping-option__name .bw-parcel-address-0 {
  display: block;
  font-size: 0.78rem;
  color: #888;
  margin-top: 2px;
}

/* Bouton "Choisir un autre point relais" */
.co-shipping-option__name .bw-select-parcel {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--wp--preset--color--color-1, #2d7a3c);
  text-decoration: underline;
  cursor: pointer;
}

.co-shipping-option__name .bw-select-parcel:hover {
  opacity: 0.75;
}

/* ============================================================
   EXPRESS PAYMENT (PayPal PPCP classic hook)
   ============================================================ */
.co-express-payment {
  margin-bottom: 20px;
}
.co-express-payment__label {
  font-size: 0.83rem;
  color: #666;
  margin-bottom: 10px;
  font-weight: 600;
}
.co-express-payment__separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  color: #bbb;
  font-size: 0.78rem;
}
.co-express-payment__separator::before,
.co-express-payment__separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}
/* Ensure PPCP button container fills width */
.co-express-payment #ppc-button-ppcp-gateway,
.co-express-payment [id^="ppc-button"],
.co-express-payment .wc-block-components-express-payment,
.co-express-payment .paypal-button-container {
  width: 100% !important;
}

/* ============================================================
   PAYMENT (Step 5)
   ============================================================ */
.co-payment-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f9fafb;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.83rem;
  color: #666;
  flex-wrap: wrap;
}

.co-payment-cards {
  display: flex;
  align-items: center;
  gap: 8px;
}

.co-card-icon {
  width: 50px;
  height: 32px;
  border-radius: 4px;
  display: block;
}

/* ---- Gateways WC — conteneur principal ---- */
#co-payment-gateways #payment {
  background: transparent;
  padding: 0;
  border: none;
}

/* ---- Liste des méthodes de paiement ---- */
#co-payment-gateways #payment ul.payment_methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  border: none;
  list-style: none;
}

/* ---- Card de méthode de paiement ---- */
#co-payment-gateways #payment ul.payment_methods li.wc_payment_method {
  border: 1.5px solid #d8dce2;
  border-radius: 10px;
  padding: 10px 0px 10px 0px;
  overflow: hidden;
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
/* État sélectionné */
#co-payment-gateways
  #payment
  ul.payment_methods
  li.wc_payment_method.is-selected {
  border-color: #1a1a1a;
  box-shadow: none;
}

/* ---- Label = toute la ligne cliquable (radio inclus) ---- */
#co-payment-gateways
  #payment
  ul.payment_methods
  li.wc_payment_method
  .co-payment-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  cursor: pointer;
  margin: 0;
  width: 100%;
}

/* ---- Chevron droit ---- */
#co-payment-gateways .co-payment-chevron {
  flex-shrink: 0;
  color: #c0c6cf;
  margin-left: 4px;
  transition: color 0.15s;
}

#co-payment-gateways .wc_payment_method.is-selected .co-payment-chevron {
  color: #1a1a1a;
}

/* ---- Radio custom ---- */
#co-payment-gateways #payment ul.payment_methods li input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #bcc0c7;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  background: #fff;
  margin: 0px 0px 0px 10px;
  transition:
    border-color 0.15s,
    background 0.15s;
}

#co-payment-gateways
  #payment
  ul.payment_methods
  li
  input[type="radio"]:checked {
  border-color: #1a1a1a;
  background: #1a1a1a;
}

#co-payment-gateways
  #payment
  ul.payment_methods
  li
  input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

/* ---- Nom de la méthode ---- */
#co-payment-gateways .co-payment-title {
  flex: 1;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--wp--preset--color--color-text, #1a1a1a);
}

/* ---- Icône gateway ---- */
#co-payment-gateways .co-payment-icon {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

#co-payment-gateways .co-payment-icon img {
  height: 22px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
}

/* ---- Badges marque (Visa, MC, CB, PayPal) ---- */
.co-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: 3px;
  font-size: 0px;
  line-height: 1;
}

.co-brand--visa {
  background: #1a1f71;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  font-style: italic;
  font-family: Arial, sans-serif;
  padding: 0 5px;
  letter-spacing: 0.5px;
}

.co-brand--cb {
  background: #005098;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  padding: 0 6px;
}

.co-brand--paypal {
  font-size: 15px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  line-height: 1;
}

.co-brand--applepay {
  gap: 2px;
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  padding: 0 7px 0 5px;
}

/* ---- Fenetre de paiement par carte (LCL Sherlock's) ----
   Le formulaire de la banque dans une iframe, par-dessus la page de commande.
   A gauche le rappel de la transaction et les gages de securite, a droite le
   cadre. Sur mobile la fenetre prend tout l'ecran et le rappel se reduit a
   une bande en haut. */
.co-lcl-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.co-lcl-modal[hidden] {
  display: none;
}

body.co-lcl-modal-open {
  overflow: hidden;
}

.co-lcl-modal__fond {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 31, 0.62);
  backdrop-filter: blur(2px);
}

.co-lcl-modal__boite {
  position: relative;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  width: 100%;
  max-width: 820px;
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.co-lcl-modal__fermer {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f0f2f4;
  color: #444;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.co-lcl-modal__fermer:hover {
  background: #e2e5e9;
  color: #000;
}

.co-lcl-modal__infos {
  padding: 26px 22px;
  background: #f6f7f9;
  border-right: 1px solid #e8eaec;
  font-size: 0.82rem;
  color: #555;
}

.co-lcl-modal__logo-wrap {
  margin: 0 0 18px;
}

.co-lcl-modal__logo {
  display: block;
  width: auto;
  max-width: 170px;
  height: auto;
  max-height: 44px;
}

.co-lcl-modal__titre {
  margin: 0 0 16px;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1c1c1c;
}

.co-lcl-modal__liste {
  margin: 0 0 18px;
}

.co-lcl-modal__liste dt {
  font-size: 0.74rem;
  color: #888;
  margin-top: 10px;
}

.co-lcl-modal__liste dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: #1c1c1c;
}

.co-lcl-modal__montant {
  font-size: 1.05rem;
}

.co-lcl-modal__officine {
  font-size: 0.7rem;
  font-weight: 400;
  color: #888;
}

.co-lcl-modal__securise {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-weight: 700;
  color: #1c1c1c;
}

.co-lcl-modal__note {
  margin: 0 0 16px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #777;
}

.co-lcl-modal__marques {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
}

.co-lcl-modal__banque {
  margin: 0;
  font-size: 0.74rem;
  color: #888;
}

.co-lcl-modal__cadre {
  position: relative;
  min-height: 560px;
  background: #fff;
  /* Safari iOS ignore la hauteur d'une iframe et l'etire a son contenu : le
     defilement se fait donc ici, dans le conteneur, et l'iframe garde une
     largeur minimale pour ne pas deborder. */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.co-lcl-modal__iframe {
  display: block;
  width: 1px;
  min-width: 100%;
  height: 100%;
  min-height: 560px;
  border: none;
}

.co-lcl-modal__attente {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff;
  font-size: 0.9rem;
  color: #666;
}

.co-lcl-modal__spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #e8eaec;
  border-top-color: var(--wp--preset--color--color-1, #2d7a3c);
  border-radius: 50%;
  animation: co-lcl-tourne 0.8s linear infinite;
}

@keyframes co-lcl-tourne {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 767px) {
  .co-lcl-modal {
    padding: 0;
  }

  .co-lcl-modal__boite {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .co-lcl-modal__infos {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 52px 10px 16px;
    border-right: none;
    border-bottom: 1px solid #e8eaec;
  }

  /* Bande mobile : logo, montant, cadenas, croix. Les logos CB / Visa /
     Mastercard sont deja dans la page de la banque juste en dessous. */
  .co-lcl-modal__titre,
  .co-lcl-modal__note,
  .co-lcl-modal__banque,
  .co-lcl-modal__marques,
  .co-lcl-modal__liste dt,
  .co-lcl-modal__liste dd:not(.co-lcl-modal__montant) {
    display: none;
  }

  .co-lcl-modal__logo-wrap {
    margin: 0;
    flex: 0 0 auto;
  }

  .co-lcl-modal__logo {
    max-width: 150px;
    max-height: 28px;
  }

  .co-lcl-modal__liste,
  .co-lcl-modal__securise,
  .co-lcl-modal__marques {
    margin: 0;
  }

  .co-lcl-modal__montant {
    font-size: 1rem;
    white-space: nowrap;
  }

  .co-lcl-modal__marques {
    gap: 4px;
  }

  .co-lcl-modal__marques .co-brand {
    height: 18px;
  }

  .co-lcl-modal__marques .co-brand--mc {
    width: 28px;
  }

  .co-lcl-modal__securise {
    order: 3; /* pousse a droite */
    margin-left: auto;
    font-size: 0;  /* seul le cadenas reste, le texte ne tient pas */
    gap: 0;
  }

  .co-lcl-modal__securise svg {
    width: 18px;
    height: 18px;
  }

  .co-lcl-modal__cadre,
  .co-lcl-modal__iframe {
    min-height: 0;
    height: 100%;
  }
}

/* La ligne Apple Pay est masquee par le CSS du plugin LCL (sur le li) et
   reaffichee par checkout.js une fois l'appareil verifie par Sherlock's. */
#co-payment-gateways .wc_payment_method.is-applepay-ok {
  display: list-item;
}

/* ---- Payment box (champs carte, description...) ---- */
#co-payment-gateways .payment_box {
  padding: 12px 16px 16px;
  font-size: 0.85rem;
  color: #666;
  border-top: 1px solid #e8eaec;
  animation: coPayFadeIn 0.2s ease;
  /* Écraser les fonds injectés par les plugins (ex: PPCP violet) */
  background: transparent !important;
  background-color: transparent !important;
}

/* Masquer la description PayPal/PPCP — le CTA gère la redirection */
#co-payment-gateways .payment_method_ppcp-gateway .payment_box,
#co-payment-gateways .payment_method_ppcp .payment_box {
  display: none !important;
}

/* Masquer les boutons PayPal SDK dans le payment_box */
#co-payment-gateways .payment_box [id^="ppc-button"],
#co-payment-gateways .payment_box .paypal-button-container,
#co-payment-gateways .payment_box .zoid-outlet,
#co-payment-gateways .payment_box iframe[name^="zoid"] {
  display: none !important;
}

@keyframes coPayFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#co-payment-gateways .payment_box p {
  margin: 0 0 10px;
}

/* Champs Stripe */
#co-payment-gateways .wc-stripe-elements-field,
#co-payment-gateways .StripeElement {
  padding: 10px 14px;
  border: 1.5px solid #d8dce2;
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
}

#co-payment-gateways .StripeElement--focus {
  border-color: var(--wp--preset--color--color-1, #2d7a3c);
  box-shadow: 0 0 0 3px rgba(45, 122, 60, 0.12);
}

/* Champs génériques dans payment_box */
#co-payment-gateways .payment_box .form-row input,
#co-payment-gateways .payment_box .form-row select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #d8dce2;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 0.88rem;
  outline: none;
}

#co-payment-gateways .payment_box .form-row input:focus {
  border-color: var(--wp--preset--color--color-1, #2d7a3c);
  box-shadow: 0 0 0 3px rgba(45, 122, 60, 0.12);
}

/* Aucun gateway disponible */
#co-payment-gateways .co-payment-none {
  font-size: 0.88rem;
  color: #888;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  text-align: center;
}

/* Séparateur Stripe Google/Apple Pay */
#co-payment-gateways .wc-stripe-payment-request-button-separator {
  text-align: center;
  color: #bbb;
  font-size: 0.75rem;
  margin: 14px 0;
  position: relative;
}

#co-payment-gateways .wc-stripe-payment-request-button-separator::before,
#co-payment-gateways .wc-stripe-payment-request-button-separator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: #e0e3e8;
}

#co-payment-gateways .wc-stripe-payment-request-button-separator::before {
  left: 0;
}
#co-payment-gateways .wc-stripe-payment-request-button-separator::after {
  right: 0;
}

/* ---- Bouton place_order WC — caché sur le TUNNEL custom uniquement ----
   Le checkout custom utilise son propre bouton « Payer », donc on masque le
   bouton natif #place_order. MAIS l'order-pay (.pdc-order-pay) s'appuie sur le
   formulaire de paiement NATIF de WooCommerce avec ce même bouton : il ne faut
   surtout pas l'y masquer, sinon le client ne peut pas valider son paiement.
   D'où le :not(.pdc-order-pay) sur la règle globale #payment #place_order. */
#co-payment-gateways #place_order,
#co-payment-gateways .place-order,
body.woocommerce-checkout:not(.pdc-order-pay) #payment #place_order {
  display: none !important;
}

/* Terms */
.co-terms {
  margin-top: 12px;
}

.co-terms .woocommerce-form__label-for-checkbox {
  font-size: 0.82rem;
  color: #777;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.co-terms .woocommerce-form__label-for-checkbox input {
  margin-top: 2px;
  accent-color: var(--wp--preset--color--color-1, #2d7a3c);
  flex-shrink: 0;
}

/* ============================================================
   ORDER SUMMARY — RIGHT COLUMN
   ============================================================ */
.co-layout__summary {
  position: sticky;
  top: 80px;
}

.co-summary {
  background: #fff;
  border: 1.5px solid #e0e3e8;
  border-radius: 12px;
  overflow: hidden;
}

.co-summary__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wp--preset--color--color-text, #1a1a1a);
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f2f4;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- Products list ---- */
.co-summary__products {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid #f0f2f4;
}

.co-summary__product {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  /* Les controles de quantite forment la troisieme colonne. Au besoin ils
     passent a la ligne plutot que d'ecraser le nom du produit. */
  flex-wrap: wrap;
}

.co-summary__product-img {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid #e8eaec;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-summary__product-img img {
  width: auto !important;
  height: auto !important;
  max-width: 60px !important;
  max-height: 60px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 6px;
}

.co-summary__product-qty {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--wp--preset--color--color-1, #2d7a3c);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.co-summary__product-info {
  flex: 1;
  min-width: 0;
}

.co-summary__product-brand {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin: 0 0 2px;
}

.co-summary__product-name {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--wp--preset--color--color-text, #1a1a1a);
  margin: 0 0 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.co-summary__product-prices {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.co-summary__product-reg {
  font-size: 0.8rem;
  color: #bbb;
  text-decoration: line-through;
}

.co-summary__product-price {
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--wp--preset--color--color-text, #1a1a1a);
}

.co-summary__product-savings {
  font-size: 0.76rem;
  color: #e05b00;
  font-weight: 500;
  margin: 3px 0 0;
}

/* ---- Coupon ---- */
.co-summary__coupon {
  padding: 14px 20px;
  border-bottom: 1px solid #f0f2f4;
}

.co-coupon-form {
  display: flex;
  gap: 8px;
}

.co-coupon-form .co-input {
  flex: 1;
  padding: 9px 12px;
  font-size: 0.85rem;
}

.co-coupon-form button {
  padding: 9px 16px;
  background: #f0f2f4;
  border: 1.5px solid #d8dce2;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--wp--preset--color--color-text, #1a1a1a);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.co-coupon-form button:hover {
  background: #e4e7ea;
}

.co-coupon-message {
  margin-top: 6px;
  font-size: 0.8rem;
  min-height: 16px;
}

.co-coupon-message.is-success {
  color: var(--wp--preset--color--color-1, #2d7a3c);
}
.co-coupon-message.is-error {
  color: #dc2626;
}

.co-applied-coupons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.co-coupon-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #edf7ee;
  color: var(--wp--preset--color--color-1, #2d7a3c);
  border: 1px solid #b7debb;
  border-radius: 20px;
  padding: 4px 8px 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.co-coupon-tag__code {
  letter-spacing: 0.5px;
}

.co-coupon-tag__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wp--preset--color--color-1, #2d7a3c);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.co-coupon-tag__remove:hover {
  color: #dc2626;
}

/* ---- Totaux ---- */
.co-summary__totals {
  padding: 14px 20px;
  border-bottom: 1px solid #f0f2f4;
}

.co-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 0.88rem;
  color: #555;
}

/* Ce qui manque quand un bouton refuse d'avancer (checkout.js,
   montrerCeQuiManque) : un halo bref, sans secouer la page. */
.co-attention {
  outline: 3px solid #dc2626;
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-color 0.3s;
}

.co-totals-row--discount {
  color: #e05b00;
}

.co-totals-row--total {
  padding: 10px 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wp--preset--color--color-text, #1a1a1a);
  border-top: 1px solid #f0f2f4;
  margin-top: 6px;
}

.co-totals-tax {
  font-size: 0.76rem;
  color: #aaa;
  margin: 2px 0 0;
  text-align: right;
}

/* ---- CTA ---- */
.co-summary__cta {
  padding: 16px 20px 20px;
}

.co-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s,
    box-shadow 0.15s;
  text-align: center;
}

.co-cta-btn--next {
  background: var(--wp--preset--color--color-1, #2d7a3c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(45, 122, 60, 0.3);
}

.co-cta-btn--next:hover {
  background: color-mix(
    in srgb,
    var(--wp--preset--color--color-1, #2d7a3c) 85%,
    #000
  );
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45, 122, 60, 0.35);
}

.co-cta-btn--pay {
  background: var(--wp--preset--color--color-1, #2d7a3c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(45, 122, 60, 0.3);
}

.co-cta-btn--pay:hover {
  background: color-mix(
    in srgb,
    var(--wp--preset--color--color-1, #2d7a3c) 85%,
    #000
  );
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45, 122, 60, 0.35);
}

.co-cta-btn--pay.is-loading {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

/* Variante PayPal */
.co-cta-btn--pay.is-paypal {
  background: #0070ba;
  box-shadow: 0 4px 14px rgba(0, 112, 186, 0.35);
}

.co-cta-btn--pay.is-paypal:hover {
  background: #005ea6;
  box-shadow: 0 6px 18px rgba(0, 112, 186, 0.45);
}

.co-cta-btn__icon svg {
  width: 18px;
  height: 18px;
}

.co-cta-legal {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #aaa;
  text-align: center;
  line-height: 1.5;
}

.co-cta-legal a {
  color: #888;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   WOOCOMMERCE OVERRIDES CHECKOUT
   ============================================================ */

/* Cacher le header WooCommerce de la page checkout standard */
.woocommerce-checkout .entry-header,
.woocommerce-checkout .page-header {
  display: none;
}

/* Contenu WooCommerce: supprimer les paddings */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .page-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   THANK YOU PAGE STYLES (conservé)
   ============================================================ */
.woocommerce-order-success {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.woocommerce-order-success .success-icon svg {
  width: 80px;
  height: 80px;
  color: var(--wp--preset--color--color-1);
}

.woocommerce-thankyou-order-received {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--wp--preset--color--color-text);
}

.woocommerce-order-overview {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 3rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

.woocommerce-order-overview__order {
  border-right: 1px solid #eee;
}

.woocommerce-order-overview li {
  padding: 1.5rem;
  flex: 1;
  min-width: 150px;
  text-align: center;
}

.woocommerce-order-overview li:last-child {
  border-right: none;
}

.woocommerce-order-overview span {
  display: block;
  text-transform: uppercase;
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.woocommerce-order-overview strong {
  display: block;
  font-size: 1.25rem;
  color: var(--wp--preset--color--color-text);
  font-weight: 600;
  white-space: nowrap; /* garde "0,00 €" sur une seule ligne */
}

/* Le TOTAL (et les montants du tableau) sont des éléments "prix" WooCommerce.
   Bootstrap les met en bleu via .text-primary (!important) → pas dans la DA : on
   neutralise sur toute la page. Et le symbole € passe parfois en bloc → on force
   le montant + le € en inline pour qu'ils restent sur une seule ligne. */
.woocommerce-order .text-primary {
  color: var(--wp--preset--color--color-text) !important;
}
.woocommerce-order-overview .woocommerce-Price-amount,
.woocommerce-order-overview .woocommerce-Price-amount bdi {
  display: inline;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.woocommerce-order-overview .woocommerce-Price-currencySymbol {
  display: inline;
  font-size: inherit;
  color: inherit;
  vertical-align: baseline;
}

.order-details-container h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  margin-top: 2rem;
  text-align: center;
}

.woocommerce-table--order-details {
  width: 100%;
  margin-bottom: 2rem;
  border-collapse: collapse;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.woocommerce-table--order-details th {
  font-weight: 600;
  text-align: left;
}

.woocommerce-table--order-details tfoot th {
  text-align: right;
}

.woocommerce-customer-details address {
  border: 1px solid #eee;
  padding: 1.5rem;
  border-radius: 5px;
  font-style: normal;
  background-color: #f9f9f9;
}

.woocommerce-column__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.woocommerce-order-details {
  margin-top: 4rem;
}

.woocommerce-order-details__title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--wp--preset--color--color-text);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.woocommerce-table--order-details {
  border-collapse: separate;
  border-spacing: 0;
}

.woocommerce-table--order-details th {
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.woocommerce-table--order-details td {
  vertical-align: middle;
  color: var(--wp--preset--color--color-text);
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.woocommerce-table--order-details td a {
  color: var(--wp--preset--color--color-text);
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

.woocommerce-table--order-details td a:hover {
  color: var(--wp--preset--color--color-1);
}

.product-thumbnail-wrapper {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-color: #eee !important;
}

.product-thumbnail-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.woocommerce-table--order-details tfoot tr th {
  font-weight: 500;
  color: #555;
  text-transform: none;
  font-size: 0.9rem;
  letter-spacing: normal;
}

.woocommerce-table--order-details tfoot tr td {
  font-weight: 600;
  color: var(--wp--preset--color--color-text);
}

.woocommerce-table--order-details tfoot tr:last-child th {
  font-size: 1.1rem;
  color: var(--wp--preset--color--color-text);
  font-weight: 700;
  text-transform: uppercase;
}

.woocommerce-table--order-details tfoot tr:nth-last-child(2) th,
.woocommerce-table--order-details tfoot tr:nth-last-child(2) td {
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
}

.woocommerce-customer-details {
  margin-top: 4rem;
}

.woocommerce-customer-details h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.woocommerce-customer-details address {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
  font-style: normal;
  line-height: 1.8;
  color: #555;
}

/* ── Page "commande reçue" : resserrer la largeur ──
   Sans .container Bootstrap parent, les .row/.col s'étalaient sur tout l'écran
   → aspect vide et étiré. On borne et on centre toute la page. */
.woocommerce-order {
  max-width: 920px;
  margin: 2.5rem auto 3rem;
  padding: 0 20px;
}
.woocommerce-order .row {
  margin-left: 0;
  margin-right: 0;
}
/* Les colonnes d'enrobage de thankyou.php passent en pleine largeur du conteneur
   (on ne touche PAS aux colonnes d'adresses col-1/col-2 qui restent côte à côte). */
.woocommerce-order .col-md-8,
.woocommerce-order .col-md-10 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Bloc point relais (Boxtal) : horaires rendus en monospace brut → présentation propre */
.woocommerce-order pre {
  font-family: inherit;
  background: #f7f7f9;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.7;
  white-space: pre-wrap;
  margin: 8px 0 0;
  color: #555;
}

/* ── Point relais Boxtal sur la page commande : mise en card propre ──
   (classes du plugin : .bw-parcel-point / -title / -address / -schedule) */
.woocommerce-order .bw-parcel-point {
  display: block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
  margin: 0.5rem 0 1rem;
  color: #555;
  line-height: 1.6;
}
/* Boxtal tronque le nom à 180px → on le montre en entier */
.woocommerce-order .bw-parcel-point-title {
  display: block;
  width: auto;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-weight: 700;
  font-size: 1rem;
  color: var(--wp--preset--color--color-text);
  margin-bottom: 0.25rem;
}
.woocommerce-order .bw-parcel-address {
  display: block;
  margin-bottom: 0.75rem;
}
/* Horaires : on sort du rendu "monospace brut" */
.woocommerce-order .bw-parcel-point-schedule,
.woocommerce-order .bw-parcel-point-schedule pre {
  font-family: inherit;
  white-space: pre-wrap;
  background: #f7f7f9;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.9;
  margin: 0.25rem 0 0;
  color: #555;
}
/* Bouton Boxtal en bleu (#5bc0de) → couleur de la charte (pas de bleu) */
.bw-parcel-point-button {
  background-color: var(--wp--preset--color--color-1) !important;
  border-color: var(--wp--preset--color--color-1) !important;
  color: #fff !important;
}

/* ============================================================
   MOBILE STICKY BAR — masqué sur desktop
   ============================================================ */
.co-sticky-bar {
  display: none;
}

/* ============================================================
   RESPONSIVE — TABLETTE (768px – 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* ---- Header : badges en grille 2x2 ---- */
  .co-header__inner {
    height: auto;
    min-height: 64px;
    padding: 10px 24px;
    gap: 12px 24px;
    align-items: center;
  }

  .co-header__badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 20px;
    flex: none;
    justify-items: end;
  }

  .co-badge {
    font-size: 0.76rem;
    white-space: nowrap;
  }

  /* ---- Layout : réduire la sidebar ---- */
  .co-layout {
    grid-template-columns: 1fr 300px;
    gap: 20px;
    padding: 0 20px;
  }

  /* ---- Sidebar : ajuster les paddings internes ---- */
  .co-summary__products,
  .co-summary__coupon,
  .co-summary__totals,
  .co-summary__cta {
    padding-left: 16px;
    padding-right: 16px;
  }

  .co-summary__title {
    padding: 14px 16px;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* ---- Header : logo + SSL seulement ---- */
  .co-header__inner {
    height: 52px;
    padding: 0 16px;
    flex-wrap: nowrap;
    gap: 0;
  }

  /* Masquer tous les badges sauf le SSL (co-badge--highlight) */
  .co-badge:not(.co-badge--highlight) {
    display: none;
  }

  .co-header__badges {
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  /* Badge SSL compact */
  .co-badge--highlight {
    font-size: 0.75rem;
    gap: 5px;
    border: 1px solid
      color-mix(
        in srgb,
        var(--wp--preset--color--color-1, #2d7a3c) 25%,
        transparent
      );
    background: color-mix(
      in srgb,
      var(--wp--preset--color--color-1, #2d7a3c) 6%,
      transparent
    );
    padding: 5px 9px;
    border-radius: 20px;
  }

  .co-badge--highlight svg {
    width: 13px;
    height: 13px;
  }

  /* ---- Layout ---- */
  .co-layout {
    grid-template-columns: 1fr;
    padding: 0 12px;
    margin: 16px auto;
    margin-bottom: 16px;
    gap: 12px;
  }

  /* Masquer le panneau résumé sur mobile — SAUF la carte « conseil pharmacien »,
     qui doit rester visible sur les deux affichages. On réaffiche le conteneur
     et on masque son contenu, plutôt que de dupliquer le bloc dans le DOM. */
  .co-layout__summary {
    display: block;
    padding: 0 16px;
  }

  .co-layout__summary > *:not(.co-pharmacist) {
    display: none;
  }

  .co-layout__summary .co-pharmacist {
    margin: 18px 0 24px;
  }

  /* ---- Steps ---- */
  .co-step__header {
    padding: 14px 16px;
  }

  .co-step__body {
    padding: 0 16px 16px;
  }

  .co-step__num {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .co-step__title {
    font-size: 0.95rem;
  }

  /* ---- Formulaires ---- */
  .co-field-row {
    grid-template-columns: 1fr;
  }

  /* ---- Boutons continuer dans chaque étape ---- */
  .co-btn-continue {
    width: 100%;
  }

  /* ---- Sticky bar mobile ---- */
  .co-sticky-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: #fff;
    border-top: 1px solid #e0e3e8;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  }

  /* Récap totaux (étape paiement uniquement) */
  .co-sticky-recap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid #f0f2f4;
    padding-bottom: 8px;
  }

  .co-sticky-recap__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #555;
  }

  .co-sticky-recap__row--total {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wp--preset--color--color-text, #1a1a1a);
    margin-top: 3px;
  }

  .co-sticky-recap__tax {
    font-size: 0.72rem;
    color: #aaa;
    text-align: right;
    margin: 2px 0 0;
  }

  /* Repliee par defaut : seul le total reste, la reduction se lit a cote.
     « Detail » deplie sous-total, reduction, livraison et TVA. */
  .co-sticky-recap:not(.is-ouvert) .co-sticky-recap__row:not(.co-sticky-recap__row--total),
  .co-sticky-recap:not(.is-ouvert) .co-sticky-recap__tax,
  .co-sticky-recap__row.is-vide {
    display: none;
  }

  .co-sticky-recap:not(.is-ouvert) .co-sticky-recap__row--total {
    margin-top: 0;
  }

  .co-sticky-recap.is-ouvert .co-sticky-recap__remise {
    display: none;
  }

  .co-sticky-recap__remise {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: #2d7a3c;
    text-align: right;
  }

  .co-sticky-recap__detail {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Bouton CTA pleine largeur */
  .co-sticky-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 20px;
    background: var(--wp--preset--color--color-1, #2d7a3c);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition:
      opacity 0.15s,
      transform 0.1s;
  }

  .co-sticky-bar__btn:active {
    opacity: 0.85;
    transform: scale(0.98);
  }

  .co-sticky-bar__btn.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
  }

  /* Texte légal sous le bouton */
  .co-sticky-bar__legal {
    font-size: 0.68rem;
    color: #aaa;
    text-align: center;
    line-height: 1.4;
    margin: 0;
  }

  .co-sticky-bar__legal a {
    color: #888;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Notices */
  .co-notices {
    padding: 0 12px;
    margin-top: 10px;
  }
}

/* ============================================================
   CHECKOUT v2 — port offert, économies, code promo, pharmacien
   ============================================================ */

/* Note sur l'étape Email */
.co-step-note {
  font-size: 0.8rem;
  color: #666;
  background: #f9fafb;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
}

/* ---- Barre port offert ---- */
.co-freeship {
  background: #fdf3f9;
  border: 1px solid #f6d5e9;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.co-freeship__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.co-freeship__msg {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
}

.co-freeship__target {
  font-size: 0.78rem;
  color: #888;
  white-space: nowrap;
}

.co-freeship__track {
  height: 7px;
  border-radius: 99px;
  background: #f6d5e9;
  overflow: hidden;
}

.co-freeship__fill {
  height: 7px;
  border-radius: 99px;
  background: var(--wp--preset--color--color-1);
  transition: width 0.3s ease;
}

.co-freeship__suggest {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #f0c7de;
}

.co-freeship__suggest img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  flex-shrink: 0;
}

.co-freeship__suggest span {
  flex: 1;
  font-size: 0.81rem;
  color: #555;
}

.co-freeship__add {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--wp--preset--color--color-1);
  color: #fff;
  border: 0;
  border-radius: 99px;
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.co-freeship.is-reached .co-freeship__suggest {
  display: none;
}

/* ---- Date de livraison estimée ---- */
.co-shipping-option__eta {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1a7a4c;
}

/* ---- Avertissement retrait ---- */
.co-pickup-warning {
  font-size: 0.8rem;
  color: #8a5a00;
  background: #fff8e6;
  border: 1px solid #ffe0a3;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 0;
}

/* ---- Code promo replié ---- */
.co-coupon-link {
  background: none;
  border: 0;
  padding: 0;
  color: #888;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.co-coupon-link:hover {
  color: var(--wp--preset--color--color-1);
}

/* ---- Vous avez économisé ---- */
.co-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #edf7ee;
  border: 1px solid #b7debb;
  border-radius: 8px;
}

.co-saved svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #1a7a4c;
}

.co-saved span {
  font-size: 0.83rem;
  font-weight: 700;
  color: #1a7a4c;
}

/* ---- Conseil pharmacien ---- */
.co-pharmacist {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  background: #fff;
  border: 1.5px solid #e0e3e8;
  border-radius: 12px;
}

.co-pharmacist img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.co-pharmacist__kicker {
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--color-2);
  margin: 0 0 3px;
}

.co-pharmacist__phone {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.co-pharmacist__phone a {
  color: #1a1a1a;
  text-decoration: none;
}

.co-pharmacist__hours {
  font-size: 0.75rem;
  color: #888;
  margin: 2px 0 0;
}

/* ============================================================
   SÉLECTEUR DE POINT RELAIS BOXTAL (#bw-map)
   C'est une MODALE, pas un bloc inline. Structure réelle :
     #bw-map > #bw-map-inner > [ .bw-close, #bw-map-container, #bw-pp-container ]
   La carte (#bw-map-container, MapLibre GL) et la liste (#bw-pp-container)
   sont déjà SŒURS : deux colonnes s'obtiennent en flex, sans toucher au DOM.
   ============================================================ */
/* MISE EN DEUX COLONNES RETIRÉE.
   Le passage de #bw-map-inner en flex faisait sortir la liste hors de la
   modale (Boxtal positionne ses conteneurs lui-même, en absolu). On laisse
   donc SA mise en page intacte et on ne garde que l'habillage ci-dessous —
   c'est aussi ce qui rend le bloc insensible aux mises à jour du plugin. */

/* Lisibilité de la liste, à toutes les tailles */
#bw-map #bw-pp-container table {
  width: 100%;
  border-collapse: collapse;
}

#bw-map #bw-pp-container td {
  padding: 12px 14px;
  border-bottom: 1px solid #f0f2f4;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #555;
  vertical-align: top;
}

#bw-map #bw-pp-container .bw-parcel-point-title {
  display: inline-block;
  margin-bottom: 2px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1a1a;
}

/* Pastille numérotée : elle correspond au marqueur de la carte */
#bw-map #bw-pp-container .bw-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--color-1);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: top;
}

#bw-map #bw-pp-container .bw-parcel-point-button {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--wp--preset--color--color-1);
  color: #fff !important;
  font-size: 0.76rem;
  text-decoration: none !important;
}

#bw-map #bw-pp-container .bw-parcel-point-button b {
  font-weight: 700;
}

/* Horaires rendus en <pre> par Boxtal */
#bw-map pre {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.78rem;
  margin: 6px 0 0;
}

/* ---- Mini-panier mobile : masqué sur desktop (le récap suffit) ----
   Même seuil que la colonne de droite (masquée sous 768 px) : entre 768 et
   991 px, le panier apparaissait deux fois, en haut et dans une colonne de
   300 px aux noms coupés (2026-10-15). */
.co-minicart {
  display: none;
}

@media (max-width: 767px) {
  .co-minicart {
    display: block;
    position: sticky;
    top: 52px; /* hauteur de .co-header en mobile */
    z-index: 90;
    background: #f9fafb;
    border-bottom: 1px solid #e8eaec;
  }

  .co-minicart__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: 0;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    text-align: left;
  }

  .co-minicart__toggle svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--wp--preset--color--color-1);
  }

  .co-minicart__label {
    flex: 1;
    font-size: 0.83rem;
    font-weight: 600;
    color: #1a1a1a;
  }

  .co-minicart__total {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
  }

  .co-minicart__more {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wp--preset--color--color-1);
    text-decoration: underline;
  }

  .co-minicart__body {
    padding: 4px 16px 14px;
    border-top: 1px solid #f0f2f4;
    max-height: 46vh;
    overflow-y: auto;
  }

  .co-minicart__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
  }

  .co-minicart__thumb {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid #e8eaec;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .co-minicart__thumb img {
    max-width: 40px;
    max-height: 40px;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }

  .co-minicart__qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--wp--preset--color--color-1);
    color: #fff;
    font-size: 0.63rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
  }

  .co-minicart__name {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    color: #1a1a1a;
    line-height: 1.35;
  }

  .co-minicart__price {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a1a1a;
  }

  .co-minicart__edit {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--wp--preset--color--color-1);
    text-decoration: underline;
  }
}

/* ============================================================
   POINT RELAIS — carte du point retenu + bascule Liste/Carte mobile
   ============================================================ */

/* ---- Le point relais choisi, présenté en carte ---- */
.co-shipping-option-wrap .bw-parcel-point {
  display: block;
  margin-top: 10px;
  padding: 14px 16px;
  border: 2px solid var(--wp--preset--color--color-1);
  border-radius: 10px;
  background: #fffafd;
}

.co-shipping-option-wrap .bw-parcel-name-0 {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
}

.co-shipping-option-wrap .bw-parcel-client-0 {
  font-size: 0.78rem;
  color: #888;
}

.co-shipping-option-wrap .bw-parcel-address-0 {
  display: block;
  font-size: 0.82rem;
  color: #666;
  margin-top: 2px;
}

/* Le lien Boxtal devient un bouton de bascule explicite */
.co-shipping-option-wrap .bw-select-parcel {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  border: 1.5px solid var(--wp--preset--color--color-1);
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--wp--preset--color--color-1);
  text-decoration: none;
  cursor: pointer;
}

/* ---- Bascule Liste / Carte (injectée en JS, mobile uniquement) ---- */
.pdc-relay-tabs {
  display: none;
}

@media screen and (max-width: 991px) {
  /* La modale prend tout l'écran : la carte de Boxtal est inutilisable
     dans une fenêtre étroite partagée avec la liste. */
  #bw-map.bw-modal-show {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    z-index: 10000;
    overflow-y: auto;
    background: #fff;
  }

  #bw-map #bw-map-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pdc-relay-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 8;
    background: #fff;
    border-bottom: 1px solid #eceff2;
  }

  .pdc-relay-tab {
    flex: 1 1 50%;
    padding: 11px 10px;
    border: 1.5px solid #e0e3e8;
    border-radius: 10px;
    background: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #666;
    cursor: pointer;
  }

  .pdc-relay-tab.is-active {
    border-color: var(--wp--preset--color--color-1);
    background: #fdf3f9;
    color: var(--wp--preset--color--color-1);
  }

  /* Une seule vue à la fois */
  #bw-map.pdc-show-list #bw-map-container {
    display: none !important;
  }

  #bw-map.pdc-show-map #bw-pp-container {
    display: none !important;
  }

  /* Boxtal positionne ces conteneurs en absolu : sans neutraliser aussi
     top/left/right, ils restent calés sous la barre d'onglets et la
     recouvrent. D'où les `auto !important` en plus de `position: static`. */
  #bw-map.pdc-show-map #bw-map-container {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 100% !important;
    height: 68vh !important;
  }

  /* #bw-map-canvas est la RACINE MapLibre : elle doit rester `relative`.
     Je l'avais passée en `static` avec son parent — or son enfant
     .maplibregl-canvas-container est en absolu et se calait alors sur un
     ancêtre plus haut, d'où la bande blanche en bas de la carte. */
  #bw-map.pdc-show-map #bw-map-canvas {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 100% !important;
    height: 68vh !important;
  }

  #bw-map.pdc-show-map .maplibregl-canvas-container {
    position: absolute !important;
    inset: 0 !important;
  }

  /* Le canevas garde en dur la taille calculée à l'initialisation (attributs
     width/height + styles inline). Sans le forcer, la zone rendue ne couvre
     pas tout le conteneur → bande blanche. Le resize JS met ensuite le tampon
     de dessin à jour. */
  #bw-map.pdc-show-map .maplibregl-canvas-container,
  #bw-map.pdc-show-map .maplibregl-canvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* Liste : une carte par point, comme sur la maquette.
     `display: block !important` est indispensable — Boxtal masque sa liste
     sur petit écran au profit de sa propre bascule, et c'est ce qui donnait
     un panneau blanc vide. */
  #bw-map.pdc-show-list #bw-pp-container {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px 14px 24px;
  }

  #bw-map.pdc-show-list #bw-pp-container table,
  #bw-map.pdc-show-list #bw-pp-container tbody,
  #bw-map.pdc-show-list #bw-pp-container tr {
    display: block !important;
    width: 100% !important;
  }

  #bw-map #bw-pp-container td {
    display: block;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid #e8eaec;
    border-radius: 12px;
    background: #fff;
  }

  #bw-map #bw-pp-container .bw-parcel-point-button {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 11px 14px;
    font-size: 0.82rem;
  }

  /* La croix est déplacée en JS DANS la barre d'onglets : elle devient le
     troisième élément de la rangée (Liste · Carte · ✕) au lieu de flotter
     par-dessus la modale et d'en déborder. */
  .pdc-relay-tabs .bw-close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border: 1.5px solid #e0e3e8 !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    background-position: center !important;
    /* Croix nettement agrandie : c'est la sortie de la modale, elle doit se
       repérer d'un coup d'œil. */
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
  }

  /* Certaines versions dessinent la croix en ::before plutôt qu'en fond */
  .pdc-relay-tabs .bw-close::before,
  .pdc-relay-tabs .bw-close::after {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  .pdc-relay-tabs .bw-close svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ---- Badges d'en-tête : dimensionnement continu, jamais sur deux lignes ---- */
.co-header__badges {
  flex-wrap: nowrap;
  gap: clamp(6px, 1.4vw, 22px);
  min-width: 0;
}

.co-header .co-badge {
  min-width: 0;
  flex: 0 1 auto;
}

.co-header .co-badge span {
  /* Le libellé se réduit avec l'écran au lieu de passer à la ligne ; en
     dernier recours il se tronque plutôt que de casser la rangée. */
  font-size: clamp(0.62rem, 1.05vw, 0.85rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.co-header .co-badge svg {
  flex: 0 0 auto;
  width: clamp(13px, 1.5vw, 18px);
  height: clamp(13px, 1.5vw, 18px);
}

/* ============================================================
   ÉTAPES 2 / 3 / 4 — PETITS ET MOYENS TÉLÉPHONES
   L'étape email ne posait pas de problème parce qu'elle n'a qu'un champ
   pleine largeur. Les suivantes empilent des grilles à deux colonnes, des
   champs et des blocs tiers (Boxtal, passerelles) qui gardent tous
   `min-width: auto` : rien ne pouvait se réduire, d'où les débordements.
   ============================================================ */

/* Le `min-width: 0` appliqué à TOUS les descendants a été retiré : trop
   large, il laissait aussi s'effondrer les libellés et les prix des modes de
   livraison. Il est réservé aux conteneurs de mise en page. */
.co-layout__steps .co-step__body {
  min-width: 0;
}

/* `break-word` et NON `anywhere` : ce dernier ramène la largeur minimale
   intrinsèque à un seul caractère. Associé au `min-width: 0` ci-dessus, il
   faisait s'effondrer les libellés en colonnes d'une lettre. `break-word`
   casse les mots trop longs sans toucher au calcul de taille. */
.co-layout__steps .co-step__body {
  overflow-wrap: break-word;
}

/* Champs de SAISIE en pleine largeur — mais surtout PAS les cases à cocher ni
   les boutons radio : un radio en width:100% occupait toute la ligne du mode
   de livraison et éjectait le libellé hors de la carte. */
.co-step__body input:not([type="radio"]):not([type="checkbox"]),
.co-step__body select,
.co-step__body textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 430px) {
  /* Les deux colonnes sont CONSERVÉES : c'était `min-width: auto` qui causait
     le débordement, pas la grille elle-même. Tout empiler transformait le
     formulaire en colonne interminable, bien pire à remplir.
     On resserre simplement l'écart et la typographie. */
  .co-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .co-form-row label,
  .co-form-group label {
    font-size: 0.78rem;
  }

  .co-form-row input,
  .co-form-row select {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.88rem;
  }

  .co-step__body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .co-step__header {
    padding: 12px 12px;
  }

  /* Récapitulatif de commande : la largeur mini de 150px par colonne
     provoquait un débordement horizontal. */
  .woocommerce-order-overview li {
    min-width: 0;
    flex: 1 1 100%;
    padding: 1rem;
  }
}

/* Passerelles de paiement : libellé qui se réduit, logos qui ne s'écrasent pas */
.co-payment-list .co-payment-label {
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 10px);
  flex-wrap: wrap;
  min-width: 0;
}

.co-payment-list .co-payment-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(0.78rem, 3vw, 0.9rem);
  overflow-wrap: break-word;
}

.co-payment-list .co-payment-icon {
  flex: 0 0 auto;
}

.co-payment-list .co-payment-icon img,
.co-payment-list .co-payment-icon svg {
  max-width: 100%;
  height: auto;
}

/* Aucun débordement horizontal de la page, quelle que soit la largeur */
.co-layout,
.co-layout__steps {
  min-width: 0;
  max-width: 100%;
}

/* Transporteur retenu, affiché sous le libellé « Livraison » du récapitulatif */
.co-totals-ship-label {
  display: block;
  margin-top: 1px;
  font-size: 0.72rem;
  font-weight: 400;
  color: #9aa1a9;
  line-height: 1.3;
}

#co-shipping-price em {
  font-style: normal;
  font-size: 0.85em;
  color: #6b7480;
}

/* Détail du total dans le mini-panier mobile — compact, 3 lignes */
@media (max-width: 767px) {
  .co-minicart__recap {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f2f4;
  }

  .co-minicart__recap-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    font-size: 0.78rem;
    color: #6b7480;
  }

  .co-minicart__recap-line--discount {
    color: #1a7a4c;
  }

  .co-minicart__recap-line--total {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #f0f2f4;
    font-size: 0.86rem;
    font-weight: 700;
    color: #1a1a1a;
  }
}

/* Pastille icône du bloc « conseil pharmacien » (remplace la photo d'équipe) */
.co-pharmacist__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Même vert que le libellé « Un doute sur un produit ? » (color-2) */
  background: color-mix(in srgb, var(--wp--preset--color--color-2) 12%, #fff);
  color: var(--wp--preset--color--color-2);
}

.pdc-notices-commande {
    margin: 1.25rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.pdc-notices-commande__liste {
    margin: 0 0 0.85rem;
    padding-left: 1.15rem;
}

.pdc-notices-commande__acquittement {
    margin: 0;
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
   Mentions réglementaires pdc-sante, en bas de colonne de droite
   ────────────────────────────────────────────────────────────── */

.pdc-checkout-notice {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}

/* Les mentions de la colonne de droite se collaient au recapitulatif, sans
   rien pour les en detacher : elles se lisaient comme sa derniere ligne. */
.co-layout__summary > .pdc-checkout-notice,
.co-layout__summary > .woocommerce-info,
.co-layout__summary > .woocommerce-message {
  margin-top: 16px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/*
 * On ne touche pas a la marge interieure de WooCommerce.
 *
 * Son icone de coche est positionnee en absolu par rapport a ce bloc, et
 * l'espace a gauche lui est reserve. La redefinir ramenait le texte sous
 * l'icone, qui se retrouvait posee dessus.
 */

.pdc-checkout-notice__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Le lien d'actualisation du questionnaire doit se voir comme une action,
   pas comme la suite de la phrase qui le précède. */
.pdc-checkout-notice__lien {
  color: #e62ca1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdc-checkout-notice__lien:hover,
.pdc-checkout-notice__lien:focus {
  color: #b81f7f;
}

@media (max-width: 767px) {
  /* La colonne de droite est masquée en mobile sauf le bloc pharmacien ;
     les mentions doivent rester visibles, juste au-dessus de lui. */
  .co-layout__summary > .pdc-checkout-notice,
  .co-layout__summary > .woocommerce-info,
  .co-layout__summary > .woocommerce-message {
    display: block;
  }

  /*
   * Dégagement pour la barre collante.
   *
   * Elle est en position fixe et recouvrait la fin du contenu : le numéro de
   * téléphone du pharmacien, dernier élément de la page, se retrouvait coupé.
   * La hauteur retenue couvre la barre dépliée à l'étape paiement, récapitulatif
   * des totaux compris.
   */
  .co-layout {
    padding-bottom: calc(190px + env(safe-area-inset-bottom));
  }
}

/* Acquittement de lecture des notices, à côté des conditions générales. */
.pdc-notices-commande {
  margin: 12px 0 0;
}

.pdc-notices-commande__acquittement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.pdc-notices-commande__acquittement input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.pdc-notices-commande__rappel {
  margin: 4px 0 0 26px;
  font-size: 13px;
  color: #6b7280;
}

/* Quantites modifiables dans le recapitulatif du tunnel. */

.co-minicart__qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}

.co-minicart__qty-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.co-minicart__qty-btn:hover {
    background: #f3f4f6;
}

/* Le champ se fond dans le groupe : les fleches natives rendraient le chiffre
   illisible a cette largeur. */
.co-minicart__qty-input {
    width: 30px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    color: #111827;
    -moz-appearance: textfield;
    appearance: textfield;
}

.co-minicart__qty-input::-webkit-outer-spin-button,
.co-minicart__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.co-minicart__item.is-updating {
    opacity: 0.55;
    pointer-events: none;
}

/* Bouton de repli du recapitulatif.
   Il etait un lien souligne de 0.76rem, invisible en pratique : c'est la
   raison pour laquelle les clients restaient coinces entre le panier deploye
   et la barre collante. Devenu la sortie principale du panneau, il se presente
   comme un bouton, sans pour autant concurrencer le bouton de paiement. */
.co-minicart__hide {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border: 1px solid #d8dae0;
  border-radius: 24px;
  background: #fff;
  color: #374151;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.co-minicart__hide:hover {
  border-color: #9ca3af;
  color: #111827;
}

.co-minicart__hide:focus-visible {
  outline: 2px solid var(--wp--preset--color--color-1);
  outline-offset: 2px;
}

/* Quantites dans la colonne de droite, sur ordinateur et tablette.
   Le mini-panier qui portait ces controles est masque au-dela du telephone :
   cette colonne etait la seule vue du panier sur grand ecran, et elle etait en
   lecture seule. */
/* Controles de quantite du recapitulatif.
   -----------------------------------------------------------------
   Ils portaient « co-summary__product-qty », deja prise par la pastille
   de la vignette qui est en position absolue. Ils en heritaient et se
   retrouvaient dans le coin du recapitulatif, hors de leur ligne et
   hors d'atteinte : d'ou l'impossibilite de changer la quantite. */
.co-summary__product-qte {
  position: static;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  align-self: center;
  flex: 0 0 auto;
}

.co-summary__product-qte .co-minicart__qty-controls {
  border-color: #e5e7eb;
}

.co-summary__product-qte.is-updating {
  opacity: 0.55;
  pointer-events: none;
}


/* Code promo deplace dans le panier sur telephone, sous les produits.
   Le noeud est le meme qu'au bureau, simplement deplace : le dupliquer aurait
   mis deux fois les memes identifiants dans la page, et le second champ
   n'aurait repondu a rien. */
.co-minicart__body .co-summary__coupon {
  margin: 4px 0 12px;
  padding: 12px 0 0;
  border-top: 1px solid #f0f0f0;
}