/* Pay4All Form — Public styles */
/* color:inherit so the .p4all-form-wrap merchant-configured text color
   cascades down to every label / field text inside the form. */
.p4all-form{max-width:920px;margin:0 auto;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:inherit}
.p4all-form *{box-sizing:border-box}
.p4all-form-wrap .p4all-field label,
.p4all-form-wrap .p4all-field fieldset legend,
.p4all-form-wrap .p4all-step h3{color:inherit}

/* Override Elementor kit's input padding so fields don't get the theme's
   horizontal padding (which leaves the value way off from the left edge
   and breaks the layout). Scoped to .p4all-form-wrap with !important so
   it outranks `.elementor-kit-NNNN` rules regardless of kit ID.
   Checkboxes / radios are excluded — they have their own dimensions and
   should sit inline with their label text. */
.p4all-form-wrap input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.p4all-form-wrap textarea,
.p4all-form-wrap .elementor-field-textual{padding:20px 2px 20px 2px !important}

/* Keep checkbox / radio inline with their label text. Elementor kits
   often turn every input into `display:block;width:100%`, which makes
   the input render on its own line and the text appear to follow a
   line break. We force inline + native size + zero padding so the
   markup renders as a tight inline group: [☐] My label text. */
.p4all-form-wrap input[type="checkbox"],
.p4all-form-wrap input[type="radio"]{display:inline-block !important;width:auto !important;height:auto !important;margin:0 8px 0 0 !important;padding:0 !important;vertical-align:middle}
.p4all-form-wrap .p4all-field label > input[type="checkbox"],
.p4all-form-wrap .p4all-field label > input[type="radio"]{margin-right:8px}
.p4all-form-wrap .p4all-field-checkbox label,
.p4all-form-wrap .p4all-field fieldset label{display:inline-flex !important;align-items:center;gap:8px;font-weight:400}

/* « Se souvenir de moi » standalone checkbox that sits below the field grid
   on the customer step. Same inline-flex trick as the checkbox fields so the
   box aligns vertically-centered with its label (defensive against themes
   that force `display:block` on inputs). */
.p4all-form-wrap .p4all-remember-me{margin:16px 0 8px}
.p4all-form-wrap .p4all-remember-me label{display:inline-flex !important;align-items:center;gap:8px;font-weight:400;cursor:pointer}
.p4all-error{padding:12px;background:#fee;border:1px solid #f99;color:#900;border-radius:4px}

.p4all-steps{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 24px;gap:8px}
.p4all-steps li{flex:1;min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;background:var(--p4all-step-bg,#f5f5f5) !important;color:var(--p4all-step-text,#665665) !important;border-radius:6px;font-size:13px;user-select:none;cursor:default;transition:background .15s,color .15s}
.p4all-steps li.is-active{background:var(--p4all-step-active-bg,var(--p4all-primary,#2271b1)) !important;color:var(--p4all-step-active-text,#fff) !important;font-weight:600}
.p4all-steps li.is-done{background:var(--p4all-step-done-bg,#dceddc) !important;color:var(--p4all-step-done-text,#0a4b78) !important}
.p4all-steps li.is-clickable{cursor:pointer}
.p4all-steps li.is-clickable:hover{filter:brightness(.96)}
.p4all-step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.08);font-weight:600;font-size:12px;flex:0 0 auto;line-height:1}
.p4all-steps li.is-active .p4all-step-num{background:rgba(255,255,255,.25);color:#fff}
.p4all-steps li.is-done .p4all-step-num{background:rgba(10,75,120,.15)}
.p4all-step-label{white-space:nowrap}

.p4all-step{margin-top:8px}
.p4all-step h3{margin:0 0 16px;font-size:18px}

.p4all-products{display:grid;gap:16px}
/* Grid layout : columns come from the CSS variable `--p4all-grid-cols`
   emitted by the shortcode (default 2, valid range 1-4, enforced in
   Form::display_settings). Kept as `var(..., 2)` fallback so a stray
   pre-2.6 form with the variable missing still renders sanely. */
.p4all-products.p4all-grid{grid-template-columns:repeat(var(--p4all-grid-cols,2),1fr)}
/* Mobile : always drop to 1 column, whatever the merchant picked.
   Applies below 640px (typical smartphone portrait breakpoint).
   `!important` overrides both the base rule above AND any inline style
   the wrapper carries — the merchant's fixed column pick belongs on
   tablets + desktops only. */
@media (max-width: 640px){
	.p4all-products.p4all-grid{grid-template-columns:1fr !important}
}
.p4all-products.p4all-list{grid-template-columns:1fr}
/* Section heading inserted between groups of products — spans the full
   width of the grid so it visually separates the rows below it. */
.p4all-product-section{grid-column:1 / -1;margin:8px 0 0;font-size:18px;line-height:1.3;border-bottom:1px solid currentColor;padding-bottom:6px;opacity:.9}
/* Product card uses the merchant-configured field colors so the entire
   "inside the form" surface (inputs, products, cart, delivery/payment)
   shares a single coherent look. */
.p4all-product{border:0;border-radius:8px;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important;overflow:hidden;display:flex;flex-direction:column}
.p4all-products.p4all-list .p4all-product{flex-direction:row;align-items:stretch}
.p4all-product-thumb{background:transparent;display:flex;align-items:center;justify-content:center}
/* Grid: cap the thumbnail at 280x280 so tall photos don't break the card
   layout while preserving aspect ratio (no object-fit cropping). 15px of
   margin around the image so it doesn't touch the card edges. */
/* !important on margin because themes / Elementor kits frequently
   target <img> with higher-specificity selectors (e.g. .elementor-kit-NNNN
   img, .elementor-widget img) that also use !important. To beat those
   we both pin !important AND raise specificity by anchoring to
   .p4all-form-wrap (added once on every product card via the wrapper). */
.p4all-form-wrap .p4all-product-thumb img{display:block;max-width:280px;max-height:280px;width:auto;height:auto;margin:15px !important}
.p4all-form-wrap .p4all-products.p4all-grid .p4all-product-thumb img{margin:15px auto !important}
/* List: smaller fixed slot, image scales to 130px keeping its aspect
   ratio (no object-fit cover, so the full image is always visible). */
.p4all-form-wrap .p4all-products.p4all-list .p4all-product-thumb{flex:0 0 130px}
.p4all-form-wrap .p4all-products.p4all-list .p4all-product-thumb img{max-width:130px;max-height:130px;width:auto;height:auto;margin:15px !important}

/* Per-form photo size override (Form editor › Affichage › Taille des photos).
   The wrapper sets --p4all-photo-w and --p4all-photo-h as CSS custom
   properties via its inline style attribute. When unset (merchant left
   « Par défaut »), the vars fall back to `auto` and the rules above win.
   Grid layout scales by height, list layout scales by width — see the
   PHP side (templates/shortcode.php) for the width/height selection logic. */
.p4all-form-wrap[style*="--p4all-photo-w"] .p4all-products.p4all-list .p4all-product-thumb,
.p4all-form-wrap[style*="--p4all-photo-w"] .p4all-products.p4all-list .p4all-product-thumb img{
    flex-basis:var(--p4all-photo-w,auto);
    max-width:var(--p4all-photo-w,none) !important;
    max-height:none !important;
    width:var(--p4all-photo-w,auto) !important;
    height:var(--p4all-photo-h,auto) !important;
}
.p4all-form-wrap[style*="--p4all-photo-h"] .p4all-products.p4all-grid .p4all-product-thumb img{
    max-width:none !important;
    max-height:var(--p4all-photo-h,none) !important;
    width:var(--p4all-photo-w,auto) !important;
    height:var(--p4all-photo-h,auto) !important;
    object-fit:contain;
}
.p4all-product-body{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.p4all-product-head{display:flex;flex-direction:column;gap:4px}
.p4all-product-trail{display:flex;flex-direction:column;gap:8px;margin-top:auto}
/* Title / desc / price all inherit the product card color so they share
   the merchant-configured "Couleur du formulaire" text colour. We force
   it with !important because themes and Elementor kits typically style
   headings (h3 / h4) directly with higher specificity, which would
   otherwise override our color:inherit. */
.p4all-product-title{margin:0;font-size:15px;line-height:1.3;color:inherit !important}
.p4all-product-desc{margin:0;color:inherit;opacity:.85;font-size:13px}
.p4all-product-price{font-size:15px;color:inherit}
.p4all-product-price strong{color:inherit}
.p4all-product-price del{color:inherit;opacity:.55;margin-right:6px}

/* Out-of-stock badge + greyed quantity input. */
.p4all-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.p4all-badge-oos{background:#fee;color:#a00;border:1px solid #f5a7a7}
.p4all-product.is-out-of-stock{opacity:.65}
.p4all-product.is-out-of-stock .p4all-qty-input,
.p4all-product.is-out-of-stock .p4all-qty button{cursor:not-allowed;pointer-events:none;opacity:.6}

/* Running total row at the bottom of step 1. Reuses .p4all-product so
   it inherits the merchant-configured field colors, but lays itself out
   as a single flat bar (no thumbnail, no quantity column). The total
   value is pulled hard to the right with margin-left:auto so it stays
   right-aligned regardless of list/grid mode or any other flex rule. */
.p4all-product.p4all-product-total{flex-direction:row !important;align-items:center;padding:12px 16px;margin-top:12px;font-weight:600;font-size:16px}
.p4all-product.p4all-product-total .p4all-product-total-label{flex:0 0 auto}
.p4all-product.p4all-product-total .p4all-product-total-value{margin-left:auto;text-align:right;font-size:18px}

/* Step 1 sticky footer : keeps the running total + « Suivant » button
   pinned to the bottom of the viewport while the shopper scrolls the
   product list. Sticky (not fixed) so it detaches from the viewport once
   the shopper scrolls past the products step - non-intrusive on short
   forms that already fit the screen. Opaque background + shadow to
   separate visually from the product cards behind. High z-index so it
   overlays any product tooltip / dropdown that may extend below its card.
   The `.is-stuck` class is toggled from form.js via IntersectionObserver
   and drives the top border + shadow : both hidden at natural bottom
   position (`.is-stuck` absent) for a seamless landing, then re-drawn
   the moment the footer floats up. */
.p4all-step-products .p4all-products-footer{
  position:sticky;
  bottom:0;
  z-index:100;
  background:var(--p4all-form-bg,#fff);
  padding:12px 12px 16px;
  margin-top:12px;
  border-top:0;
  box-shadow:none;
  transition:border-top-color .15s ease, box-shadow .15s ease;
}
.p4all-step-products .p4all-products-footer.is-stuck{
  border-top:1px solid var(--p4all-border,#e0e0e0);
  box-shadow:0 -4px 12px rgba(0,0,0,.06);
}
.p4all-step-products .p4all-products-footer .p4all-product-total{
  margin-top:0;
  margin-bottom:8px;
}
.p4all-step-products .p4all-products-footer .p4all-actions{
  margin-top:12px;
}

/* Grid layout : price sits on the right edge of the card (merchant
   preference). The trail is a column flex, so text-align:right on the
   price container is enough — no reflow of the qty row below. */
.p4all-products.p4all-grid .p4all-product-price{text-align:right}

/* List layout: body becomes [head | right-aligned price+qty block]. */
.p4all-products.p4all-list .p4all-product-body{flex-direction:row;align-items:center;gap:18px}
.p4all-products.p4all-list .p4all-product-head{flex:1;min-width:0}
.p4all-products.p4all-list .p4all-product-trail{flex:0 0 auto;margin-top:0;align-items:flex-end;text-align:right;gap:6px}
.p4all-products.p4all-list .p4all-product-trail .p4all-qty{justify-content:flex-end}

.p4all-qty{display:flex;align-items:center;gap:6px}
/* +/- buttons and the quantity input sit inside the product card, so
   they inherit the field colors with a slightly darker bg for contrast. */
.p4all-qty button{width:32px;height:32px;border:0;background:rgba(0,0,0,.08);color:inherit;border-radius:4px;cursor:pointer;font-size:18px;line-height:1}
.p4all-qty button:hover{background:rgba(0,0,0,.15)}
.p4all-qty-input{width:80px !important;height:32px;text-align:center;border:0;background:rgba(0,0,0,.08);color:inherit;border-radius:4px;font-size:14px}
.p4all-line-total{margin-left:auto;font-weight:600;font-size:14px;min-width:80px;text-align:right}
.p4all-products.p4all-list .p4all-line-total,
.p4all-products.p4all-grid .p4all-line-total{display:none}

/* Grid wrapper for the customer-step fields — flex-wrap picks up the
 * per-field CSS custom property (--p4all-fw) set on each .p4all-field.
 * Merchant configures the width per field in the builder modal (25/33/50/
 * 66/75/100 %). Smartphones collapse everything to a single column via the
 * @media rule at the bottom of this file, no matter what the merchant
 * chose. Gap approximates the historical 14 px margin-bottom used when
 * fields were stacked block-level. */
.p4all-fields-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:14px}
.p4all-fields-grid > .p4all-field{flex:0 0 calc(var(--p4all-fw,100%) - 14px);max-width:calc(var(--p4all-fw,100%) - 14px);margin-bottom:0;box-sizing:border-box}

.p4all-field{margin-bottom:14px;display:block}
.p4all-field label{display:block;font-weight:500;margin-bottom:4px}
/* Text fields, selects and textareas share the merchant-configured
   field colors. Border is removed in favour of a flat coloured surface
   for a cleaner look that matches the products + delivery rows. */
/* Background/text colors are forced with !important + the .p4all-form-wrap
   prefix because Elementor kits and many themes ship `input { background:#fff;
   color:#000 }` at a specificity that beats a plain `.p4all-field input` rule,
   making the merchant's chosen colors silently disappear on the Coordonnées
   step. Same defensive pattern as the padding rule at the top of this file. */
.p4all-form-wrap .p4all-field input[type=text],
.p4all-form-wrap .p4all-field input[type=email],
.p4all-form-wrap .p4all-field input[type=tel],
.p4all-form-wrap .p4all-field input[type=date],
.p4all-form-wrap .p4all-field select,
.p4all-form-wrap .p4all-field textarea{width:100%;padding:8px 10px;border:1px solid transparent;border-radius:4px;font-size:14px;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important}
.p4all-form-wrap .p4all-field input[type=number]{width:80px;padding:8px 10px;border:1px solid transparent;border-radius:4px;font-size:14px;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important}
.p4all-field textarea{font-family:inherit}
/* Placeholders pick up the field text color too, just dimmed so they
   stay distinguishable from real values. */
.p4all-form-wrap .p4all-field input::placeholder,.p4all-form-wrap .p4all-field textarea::placeholder{color:var(--p4all-field-text,#333) !important;opacity:.55}
.p4all-field small{display:block;color:inherit;opacity:.7;margin-top:3px;font-size:12px}
.p4all-req{color:#d63638}
.p4all-field fieldset{border:0;padding:0;margin:0 0 12px}
.p4all-field fieldset label{display:inline-flex;align-items:center;gap:6px;font-weight:400;margin-right:14px}

/* Neutralize wpautop artifacts injected by Elementor's Text Editor
   widget (and other rich-text pipelines) : stray <p> becomes layout-
   transparent (its children participate in the parent's grid/flex as
   if the <p> were not there) and stray <br> is hidden. Belt-and-
   suspenders alongside form.js `stripWpautopArtifacts()` — the JS
   removes the nodes for cleanliness, this CSS keeps the layout sane
   in the split-second before the JS fires (or if a browser cache
   serves an outdated form.js). */
.p4all-form-wrap p,
.p4all-form-wrap br{display:contents}
.p4all-form-wrap br{display:none}
/* But: preserve <p> tags that legitimately live inside merchant-
   authored rich-text zones (product / addon descriptions, method
   descriptions) AND inside the client-side summary (step 5) which
   is dynamically built by form.js with intentional <br> line breaks
   between variation / add-on lines. */
.p4all-form-wrap .p4all-product-desc p,
.p4all-form-wrap .p4all-addon-btn-desc p,
.p4all-form-wrap .p4all-method small p,
.p4all-form-wrap .p4all-delivery small p,
.p4all-form-wrap .p4all-summary p{display:block}
.p4all-form-wrap .p4all-product-desc br,
.p4all-form-wrap .p4all-addon-btn-desc br,
.p4all-form-wrap .p4all-method small br,
.p4all-form-wrap .p4all-delivery small br,
.p4all-form-wrap .p4all-summary br{display:inline}

.p4all-deliveries,.p4all-methods{display:grid;gap:8px}
/* Deliveries / payment methods share the merchant-configured field
   colors so the whole "inside-the-form" surface (inputs + products +
   cart + delivery/payment) stays cohesive. When a radio is checked,
   the row switches to the "Étape en cours" colors so the selected
   option visually pops the same way the active step badge does. */
/* Delivery + payment options use the "Étape à venir" colors when not
 * selected and the "Étape en cours" colors when selected — visually
 * consistent with the step pills at the top of the form.
 * !important on `color` because these blocks are rendered as <label>s
 * and most themes ship a `label { color: ... }` rule that beats this
 * one on specificity. */
.p4all-delivery,.p4all-method{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:0;border-radius:6px;padding:10px 12px;background:var(--p4all-step-bg,#f5f5f5) !important;color:var(--p4all-step-text,#665665) !important;cursor:pointer;transition:background .15s,color .15s}
/* Visually hide the radio while keeping it focusable for keyboard / AT
   users. The whole row is the click target via <label>, and the selected
   state is conveyed by the row background change below. */
.p4all-delivery input[type="radio"],.p4all-method input[type="radio"]{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.p4all-delivery:hover,.p4all-method:hover{filter:brightness(.96)}
.p4all-delivery:has(input:checked),.p4all-method:has(input:checked){background:var(--p4all-step-active-bg,var(--p4all-primary,#2271b1)) !important;color:var(--p4all-step-active-text,#fff) !important}
.p4all-delivery small,.p4all-method small{grid-column:1 / -1;color:inherit;opacity:.85;margin-top:2px}
.p4all-delivery-title,.p4all-method-title{font-weight:600}
.p4all-delivery-price{font-weight:600;color:inherit}

.p4all-actions{margin-top:24px;display:flex;justify-content:flex-end;gap:8px}
.p4all-actions .p4all-prev{margin-right:auto}
/* « (lire) » link next to the terms checkbox takes the form's own
   text color (--p4all-form-text) with !important so the theme's
   default `a { color: <accent> }` doesn't repaint it. Underlined
   so the shopper still recognises it as a link. */
.p4all-form-wrap .p4all-terms-link{color:var(--p4all-form-text,inherit) !important;text-decoration:underline}
.p4all-form-wrap .p4all-terms-link:hover,.p4all-form-wrap .p4all-terms-link:focus{color:var(--p4all-form-text,inherit) !important;text-decoration:none}

/* Buttons take the merchant-configured colors with !important so any
   theme .button rule (Elementor Hello, Astra, TwentyTwentyFour…) can't
   override the shopper-facing palette the merchant carefully picked in
   Réglages › Affichage. */
.p4all-actions .button{padding:10px 18px;border-radius:6px;border:1px solid var(--p4all-btn-prev-bg,#ccc) !important;background:var(--p4all-btn-prev-bg,#fff) !important;color:var(--p4all-btn-prev-text,#333) !important;cursor:pointer;font-size:14px}
.p4all-actions .button-primary{background:var(--p4all-btn-next-bg,var(--p4all-primary,#2271b1)) !important;color:var(--p4all-btn-next-text,#fff) !important;border-color:var(--p4all-btn-next-bg,var(--p4all-primary,#2271b1)) !important}
.p4all-actions .button-primary[disabled]{opacity:.6;cursor:wait}

/* Cart recap before validation uses the merchant-configured field
   colors to stay consistent with the rest of the form. Internal row
   separators are kept subtle via a semi-transparent black to avoid
   shipping a third configurable colour just for the divider. */
.p4all-summary-table{width:100%;border-collapse:collapse;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important;border:0;border-radius:6px;overflow:hidden}
/* Trash button on each summary line : transparent background so the row
   color shows through, icon painted with the merchant's form-text
   variable. !important on both to beat theme .button / button rules
   (Elementor Hello & co inflate every <button> to a coloured slab). */
.p4all-form-wrap .p4all-summary-remove{background:transparent !important;color:var(--p4all-form-text,#333) !important;border:0 !important;padding:4px 6px !important;cursor:pointer !important;vertical-align:middle;line-height:0;box-shadow:none !important;min-width:0 !important;min-height:0 !important;height:auto !important;width:auto !important}
.p4all-form-wrap .p4all-summary-remove:hover,.p4all-form-wrap .p4all-summary-remove:focus{background:transparent !important;color:var(--p4all-form-text,#333) !important;opacity:.75}
.p4all-summary-table td,.p4all-summary-table th{padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;font-weight:400}
.p4all-summary-table tr:last-child td,.p4all-summary-table tr:last-child th{border-bottom:0}

.p4all-cat-errors,.p4all-errors{margin-top:12px}
/* Category-rule + alert blocks: pull the merchant-configured alert colors
 * from Réglages › Couleur › Message d'erreur, drop the default UL bullets
 * (overridden by a triangular DANGER SVG injected via ::before), and bump
 * the size so the message reads at a glance — these errors are the only
 * blocker between the customer and the next step.
 *
 * The SVG is a yellow-and-black warning triangle baked into a data URI so
 * the rule has zero extra HTTP requests. */
/* `:not(:empty)` is critical — the outer .p4all-cat-errors div is in the
 * DOM all the time (form.js writes innerHTML there when categories fail
 * a rule); without the qualifier the styled box would show even when
 * there's no error to report. */
.p4all-cat-errors:not(:empty),.p4all-min-order-error:not([hidden]),.p4all-alert{background:var(--p4all-alert-bg,#fff4f4);color:var(--p4all-alert-text,#990000) !important;border-radius:8px;padding:14px 16px;line-height:1.35;font-size:1.6em;margin-top:12px}
.p4all-cat-errors ul,.p4all-alert ul{list-style:none;margin:6px 0 0;padding:0;color:inherit}
.p4all-cat-errors li,.p4all-alert li{margin:4px 0;color:inherit}
/* Per-product inline hint injected by form.js next to the qty input when the
   product's category or brand rule is currently failing. Compact + muted so it
   stays discreet but still discoverable — the primary error message still lives
   at the bottom of the products step in .p4all-cat-errors. */
.p4all-product-warn{margin-top:6px;font-size:.85em;line-height:1.3;color:var(--p4all-alert-text,#990000) !important;font-style:italic}

/* Order success / cancelled cards reuse the merchant-configured form
   colors (Réglages › Affichage › Formulaire) so they stay on-brand
   with the rest of the form. !important on the h2 color to beat
   theme/Elementor heading rules that target h2 directly. */
.p4all-thankyou{padding:24px;background:var(--p4all-form-bg,#fff) !important;color:var(--p4all-form-text,#333) !important;border:0;border-radius:8px}
.p4all-thankyou h2{margin-top:0;color:inherit !important}

.p4all-cancelled{padding:24px;background:var(--p4all-form-bg,#fff) !important;color:var(--p4all-form-text,#333) !important;border:0;border-radius:8px}
.p4all-cancelled h2{margin-top:0;color:inherit !important}
.p4all-cancelled .button{display:inline-block;padding:10px 18px;border-radius:6px;border:1px solid var(--p4all-btn-next-bg,var(--p4all-primary,#2271b1)) !important;background:var(--p4all-btn-next-bg,var(--p4all-primary,#2271b1)) !important;color:var(--p4all-btn-next-text,#fff) !important;text-decoration:none;font-size:14px;margin-top:8px}

@media (max-width:600px){
	/* Step badges on smartphones: keep only the round number, hide the
	   text label so the 5 steps fit a narrow screen without wrapping.
	   The li keeps its full per-state background (todo / active / done)
	   so the colored fill stays visible behind the number. We anchor
	   the selector to .p4all-form-wrap AND use !important because
	   themes / Elementor kits commonly override <li> backgrounds with
	   higher specificity that wins on narrow viewports. */
	.p4all-form-wrap .p4all-steps{gap:6px}
	.p4all-form-wrap .p4all-steps li{font-size:12px !important;padding:10px 4px !important;min-width:0 !important;flex:1 !important;background:var(--p4all-step-bg,#f5f5f5) !important;color:var(--p4all-step-text,#665665) !important}
	.p4all-form-wrap .p4all-steps li.is-active{background:var(--p4all-step-active-bg,var(--p4all-primary,#2271b1)) !important;color:var(--p4all-step-active-text,#fff) !important}
	.p4all-form-wrap .p4all-steps li.is-done{background:var(--p4all-step-done-bg,#dceddc) !important;color:var(--p4all-step-done-text,#0a4b78) !important}
	.p4all-form-wrap .p4all-step-label{display:none !important}
	/* Drop the dark overlay inside the round number so it sits flush on
	   the colored li background. The default / active / done overlays
	   were designed for desktop where the label sits next to the num
	   pill — on mobile (label hidden) they just clash with the li bg. */
	.p4all-form-wrap .p4all-step-num,
	.p4all-form-wrap .p4all-steps li.is-active .p4all-step-num,
	.p4all-form-wrap .p4all-steps li.is-done .p4all-step-num{background:none !important;color:inherit !important}
	.p4all-actions{flex-direction:column-reverse}
	.p4all-actions .button{width:100%}

	/* List mode on smartphones: stack the trail (price + qty) BELOW the
	   head (title + desc) instead of placing them side-by-side, which
	   gives more breathing room on narrow screens. */
	.p4all-products.p4all-list .p4all-product-body{flex-direction:column;align-items:stretch;gap:8px}
	.p4all-products.p4all-list .p4all-product-trail{align-items:flex-start;text-align:left}
	.p4all-products.p4all-list .p4all-product-trail .p4all-qty{justify-content:flex-start}
}

/* --- Filter bar (optional widget below the step bar) ---
 * All colours resolve to the CSS variables injected in :root by
 * Frontend\Assets.php (Réglages › Affichage › Couleur). Zero PHP-inline
 * styles required — deploying just this CSS is enough to see the change. */
.p4all-filters{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 18px;padding:12px 14px;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:var(--p4all-step-active-bg,#2271b1) !important;color:var(--p4all-step-active-text,#fff) !important}
/* JS toggles the [hidden] attribute when the customer leaves step 1.
 * `.p4all-filters` (spécificité 0,1,0) écrase la règle UA `[hidden]`
 * (0,0,1) — on rétablit `display:none` avec une spécificité supérieure. */
.p4all-filters[hidden]{display:none}
.p4all-filter{display:flex;flex-direction:column;gap:4px;flex:1 1 160px;min-width:0;position:relative}
.p4all-filter label{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:inherit;opacity:.9}
/* Tri <select> shares the same footprint as the custom dropdowns : same
 * padding, same 6px radius, same colours as "Couleur du formulaire". */
.p4all-filter select.p4all-filter-sort{padding:4px 10px !important;border:1px solid transparent !important;border-radius:6px !important;font-size:14px;font-family:inherit;line-height:1.4;max-width:100%;height:32px;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important;border-color:var(--p4all-field-bg,#f5f5f5) !important;text-transform:none !important}
.p4all-product.is-filter-hidden{display:none !important}

/* Custom dropdown : the visible button/panel replace the native <select>.
 * Colours pull from --p4all-field-bg / --p4all-field-text so the widget
 * follows "Couleur du formulaire". The count tag inverts these colours to
 * stay visible against the picker's own background. */
/* Elementor / Hello theme ship .elementor button rules with !important that
 * would otherwise repaint everything inside the picker (white text on a
 * dark purple button). We override with !important on the wrap AND on the
 * button so the "Couleur du formulaire" palette wins. */
.p4all-cs{position:relative;border:1px solid transparent !important;border-radius:6px;font-size:14px;line-height:1.2;background:var(--p4all-field-bg,#f5f5f5) !important;color:var(--p4all-field-text,#333) !important;border-color:var(--p4all-field-bg,#f5f5f5) !important}
.p4all-cs-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 10px !important;border:0 !important;background:transparent !important;color:var(--p4all-field-text,#333) !important;font:inherit !important;cursor:pointer !important;text-align:left !important;gap:8px;min-height:32px;text-transform:none !important;letter-spacing:normal !important}
.p4all-cs-current{color:var(--p4all-field-text,#333) !important;text-transform:none !important}
.p4all-cs-arrow{color:var(--p4all-field-text,#333) !important;font-size:20px !important;line-height:1;opacity:.85;transition:transform .15s}
.p4all-cs-btn:focus{outline:2px solid var(--p4all-primary,#2271b1);outline-offset:1px}
.p4all-cs-current{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;padding-bottom:2px}
.p4all-cs.is-open .p4all-cs-arrow{transform:rotate(180deg)}
.p4all-cs-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;margin:0;padding:4px 0;list-style:none;background:var(--p4all-field-bg,#fff) !important;color:var(--p4all-field-text,#333) !important;border:1px solid rgba(0,0,0,.1);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.15);max-height:280px;overflow:auto}
.p4all-cs-option{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;cursor:pointer;color:inherit}
.p4all-cs-option:hover,.p4all-cs-option.is-selected{background:rgba(0,0,0,.06)}
.p4all-cs-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;padding-bottom:2px}
/* Count tag inverts the field palette so it stays legible sitting on top
 * of the same field-bg used by the option row. */
.p4all-cs-count{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.02em;flex:0 0 auto;background:var(--p4all-field-text,#333) !important;color:var(--p4all-field-bg,#f5f5f5) !important}
.p4all-cs[hidden]{display:none}
.p4all-cs-list[hidden]{display:none}
/* Section titles are shown by default (even when the filter widget is
 * present) so a customer who hasn't touched the picker keeps the merchant's
 * grouping. They only get hidden the moment any filter/sort is applied,
 * because a filtered / re-sorted list crosses the original sections. The
 * `.p4all-filter-active` class is toggled by JS as filters change. */
.p4all-form.p4all-filter-active .p4all-product-section{display:none}
@media (max-width:640px){
	.p4all-filter{flex:1 1 100%}
}

/* Clickable thumbnail: cursor + subtle hint that the image can be enlarged. */
.p4all-product-thumb.is-zoomable{cursor:zoom-in}
.p4all-product-thumb.is-zoomable:hover img,
.p4all-product-thumb.is-zoomable:focus img{filter:brightness(0.94)}
.p4all-product-thumb.is-zoomable:focus{outline:2px solid #7f56d9;outline-offset:2px}

/* « En savoir plus » link, one line under the description. */
.p4all-product-info{margin:.25rem 0 0}
.p4all-product-info-link{font-size:.9em;text-decoration:underline}
.p4all-product-info-link:hover{text-decoration:none}

/* Lightbox overlay. Displayed via JS when a thumb is clicked. Rendered
 * on <body> to escape any transformed ancestor and keep it above form
 * modals. Hidden by default so a stray leftover node stays inert. */
.p4all-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);padding:2rem;animation:p4all-lb-in .12s ease-out}
.p4all-lightbox[hidden]{display:none}
.p4all-lightbox__img{max-width:min(95vw,1400px);max-height:90vh;width:auto;height:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);border-radius:6px;background:#fff}
.p4all-lightbox__close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.95);color:#111;font-size:1.5rem;line-height:44px;text-align:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.p4all-lightbox__close:hover{background:#fff}
.p4all-lightbox__close:focus{outline:2px solid #7f56d9;outline-offset:2px}
@keyframes p4all-lb-in{from{opacity:0}to{opacity:1}}

/* Smartphones: field width picker (25/33/50/66/75/100 %) collapses to a
 * single column so every field takes the full row. Applied via a media query
 * so we override the merchant-chosen width without touching each rule. */
@media (max-width:600px){
	.p4all-fields-grid > .p4all-field{flex-basis:100%;max-width:100%}
}