/* =========================================================================
   SBD Forms — frontend stylesheet (jalon 4)

   Theme-resistant strategy without any !important:
     1. Every rule below is prefixed with .sbd-form or .sbd-modal so its
        specificity gains at least one class over plain element selectors
        a typical theme uses (.entry-content button, body input, etc.).
     2. Browser-default reset (`all: revert`) applied surgically to the
        elements themes love to restyle — input, button, textarea, select,
        label, fieldset, ul, ol, li, h1-h6. This wipes inherited theme
        styling once, then our own rules paint on a clean canvas below.

   Colors and radii come from CSS variables injected per-skin by the
   Renderer, prefixed --sbd-* (see Helpers::default_tokens()).
   ========================================================================= */

/* -------- Targeted reset (clean canvas inside our wrappers) -------- */

.sbd-form input,
.sbd-form textarea,
.sbd-form select,
.sbd-form button,
.sbd-form label,
.sbd-form fieldset,
.sbd-form legend,
.sbd-form ul,
.sbd-form ol,
.sbd-form li,
.sbd-form h1,
.sbd-form h2,
.sbd-form h3,
.sbd-form h4,
.sbd-form p,
.sbd-modal button {
    all: revert;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
}

/* ---------- Base layout ---------- */

.sbd-form {
    --sbd-primary:           #C7AB76;
    --sbd-primary-hover:     #BE9961;
    --sbd-primary-light:     #D1B380;
    --sbd-primary-bg:        #FAF5ED;
    --sbd-text:              #1A3A5C;
    --sbd-text-muted:        #6B7280;
    --sbd-sidebar-bg:        #1A365C;
    --sbd-sidebar-text:      #FFFFFF;
    --sbd-border:            #E6E8EB;
    --sbd-border-muted:      #CCD9E6;
    --sbd-stepper-inactive:  #9CA3B0;
    --sbd-radius:            12px;
    /* Everything that sits INSIDE the frame — cards, inputs, panels — takes a
       tighter radius than the frame itself; that nesting is what the design
       reads as. Those were hardcoded at 8px and 6px, so the skin's radius
       token stopped at the frame: set it to 0 and you got rounded cards inside
       a square form. Deriving them keeps the nesting AND lets the token reach
       all the way down. At the default 12px they resolve to exactly the 8px
       and 6px they used to be, so no existing skin moves. Shapes that are not
       radii but forms — pills, circles, the checkbox glyph — stay as they are. */
    --sbd-radius-inner:      max(0px, calc(var(--sbd-radius) - 4px));
    --sbd-radius-sm:         max(0px, calc(var(--sbd-radius) - 6px));
    --sbd-font-family:       system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    font-family: var(--sbd-font-family);
    color: var(--sbd-text);
    background: #fff;
    display: grid;
    grid-template-columns: 340px 1fr;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    line-height: 1.45;
}
.sbd-form *,
.sbd-form *::before,
.sbd-form *::after { box-sizing: border-box; }

.sbd-form.sbd-form--inline {
    min-height: 720px;
    border-radius: var(--sbd-radius);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(26, 58, 92, 0.08);
}

/* ---------- Sidebar ---------- */

.sbd-form .sbd-form-sidebar {
    background: var(--sbd-sidebar-bg);
    color: var(--sbd-sidebar-text);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    position: relative;
    overflow: hidden;
}
.sbd-form .sbd-form-sidebar::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.sbd-form .sbd-sidebar-logo-img {
    max-width: 160px;
    height: auto;
    display: block;
}

.sbd-form .sbd-sidebar-tagline-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--sbd-sidebar-text);
}
.sbd-form .sbd-sidebar-tagline-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--sbd-primary);
}

.sbd-form .sbd-sidebar-usps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.sbd-form .sbd-sidebar-usp {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--sbd-sidebar-text);
}
.sbd-form .sbd-sidebar-usp-bullet {
    color: var(--sbd-primary);
    font-size: 1.25rem;
    line-height: 1;
    margin-top: 0.05em;
}

.sbd-form .sbd-sidebar-product { margin-top: auto; }
.sbd-form .sbd-sidebar-product-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--sbd-radius-inner, 8px);
}

.sbd-form .sbd-sidebar-badges {
    display: flex;
    gap: 0.75rem;
}
.sbd-form .sbd-sidebar-badge {
    flex: 1;
    background: #fff;
    color: var(--sbd-text);
    border-radius: var(--sbd-radius-sm, 6px);
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
    text-align: center;
}
.sbd-form .sbd-badge-rating { font-weight: 700; font-size: 0.85rem; }
.sbd-form .sbd-badge-stars {
    color: var(--sbd-primary);
    letter-spacing: 1px;
    font-size: 0.7rem;
}
.sbd-form .sbd-badge-name { color: var(--sbd-text-muted); font-size: 0.7rem; }

/* ---------- Main column ---------- */

.sbd-form .sbd-form-main {
    padding: 2.5rem 3rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.sbd-form .sbd-form-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -0.5rem;
}
.sbd-form .sbd-eyebrow {
    color: var(--sbd-primary);
    font-size: 0.875rem;
    font-weight: 500;
}
.sbd-form .sbd-close,
.sbd-modal .sbd-close {
    background: transparent;
    border: 0;
    color: var(--sbd-text);
    cursor: pointer;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}
.sbd-form .sbd-close:hover,
.sbd-modal .sbd-close:hover { color: var(--sbd-primary); }
.sbd-form .sbd-close > span:first-child,
.sbd-modal .sbd-close > span:first-child { font-size: 1.1rem; }

.sbd-form .sbd-form-headline { margin: 0; }
.sbd-form .sbd-form-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    /* !important so a theme's global heading colour (e.g. Kadence sets h2 to a
       light palette value) can't wash out our title on a light page. The value
       is still the token, so per-skin customisation is preserved. */
    color: var(--sbd-text) !important;
    margin: 0 0 0.5rem;
}
.sbd-form .sbd-form-subtitle {
    font-size: 1rem;
    color: var(--sbd-text-muted);
    margin: 0;
}

/* ---------- Stepper ---------- */

.sbd-form .sbd-stepper {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
    display: flex;
    align-items: center;
    align-content: center; /* keep wrapped lines grouped, never spread apart */
    column-gap: 0;
    row-gap: 1rem;
    flex-wrap: wrap;
}
.sbd-form .sbd-stepper.is-wrapped { justify-content: center; }
.sbd-form .sbd-stepper-item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    /* NB: the [hidden] override lives just below — our display rule would
       otherwise beat the UA `[hidden]{display:none}` and leak skipped steps. */
    /* The active-state pill background lives on .sbd-stepper-item-inner so
       that the ::after separator (which is part of THIS item) stays outside
       the pill — fixes the visual where the separator looked "wrapped" by
       the active step's gold halo, with asymmetric spacing on either side. */
}
.sbd-form .sbd-stepper-item[hidden] { display: none; }
.sbd-form .sbd-stepper-item-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border-radius: 999px;
    transition: background 0.2s;
}
.sbd-form .sbd-stepper-item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 2px;
    background: var(--sbd-border);
    margin: 0 0.75rem;
    flex-shrink: 0;
    transition: background 0.2s;
}
/* When the stepper wraps, the item ending a line (marked by JS) must not show
   its trailing connector — otherwise a dash dangles into the gap. Also hides
   it on the last visible item when later steps are auto-skipped.

   NB: visibility:hidden, NOT display:none — the connector KEEPS its space. If
   we removed the box, hiding a line-end connector would free horizontal room,
   change where the line wraps, and feed back into the JS detection (cascading
   into wrong marks + a ResizeObserver loop). Reserving the space keeps the
   layout — and therefore the line detection — stable. */
.sbd-form .sbd-stepper-item.is-row-end::after { visibility: hidden; }
.sbd-form .sbd-stepper-item.is-completed:not(:last-child)::after {
    background: var(--sbd-primary);
}

.sbd-form .sbd-stepper-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--sbd-border);
    background: #fff;
    color: var(--sbd-stepper-inactive);
    font-size: 0.8rem;
    font-weight: 600;
    /* v0.7.0: default cursor on future steps (was not-allowed, too aggressive).
       Completed steps still get cursor:pointer via the .is-completed rule. */
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
    line-height: 1;
}
.sbd-form .sbd-stepper-check { display: none; font-size: 0.85rem; }
.sbd-form .sbd-stepper-number { display: inline; }

.sbd-form .sbd-stepper-item.is-active .sbd-stepper-dot {
    background: var(--sbd-primary);
    border-color: var(--sbd-primary);
    color: #fff;
    cursor: default;
}
.sbd-form .sbd-stepper-item.is-completed .sbd-stepper-dot {
    background: var(--sbd-primary);
    border-color: var(--sbd-primary);
    color: #fff;
    cursor: pointer;
}
.sbd-form .sbd-stepper-item.is-completed .sbd-stepper-check { display: inline; }
.sbd-form .sbd-stepper-item.is-completed .sbd-stepper-number { display: none; }
.sbd-form .sbd-stepper-item.is-completed .sbd-stepper-dot:hover {
    background: var(--sbd-primary-hover);
    border-color: var(--sbd-primary-hover);
}

.sbd-form .sbd-stepper-label {
    margin: 0;
    color: var(--sbd-stepper-inactive);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    display: none;
}
/* Only the CURRENT step shows its label (as a pill), like the reference
   design. Past (completed) and future steps show just their numbered dot, so
   long step titles never pile up unreadably across the stepper. */
.sbd-form .sbd-stepper-item.is-active .sbd-stepper-item-inner {
    background: var(--sbd-primary);
    padding: 0 0.85rem 0 0;
}
.sbd-form .sbd-stepper-item.is-active .sbd-stepper-label {
    display: inline;
    color: #fff;
}

/* ---------- Form body / steps ---------- */

.sbd-form .sbd-form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sbd-form .sbd-form-body .wpcf7 { margin: 0; padding: 0; }
.sbd-form .sbd-form-body form { margin: 0; padding: 0; border: 0; }

.sbd-form .sbd-step {
    border: 0;
    margin: 0;
    padding: 0;
    display: none;
}
.sbd-form .sbd-step.is-active { display: block; }

.sbd-form .sbd-step-section-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sbd-text);
    margin: 0 0 1rem;
    padding-left: 1rem;
    position: relative;
}
.sbd-form .sbd-step-section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.6rem;
    height: 2px;
    background: var(--sbd-primary);
}

.sbd-form .sbd-step-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sbd-form .sbd-field {
    display: block;
    position: relative;
}
.sbd-form .sbd-field-head { margin-bottom: 0.5rem; }
.sbd-form .sbd-field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sbd-text);
    margin-bottom: 0.25rem;
}
.sbd-form .sbd-field-description {
    font-size: 0.8125rem;
    color: var(--sbd-text-muted);
    margin: 0;
}

/* Hide CF7's wrapper <p>s if they end up empty after extraction. */
.sbd-form .sbd-step-fields > p:empty,
.sbd-form .sbd-step-fields > label:empty { display: none; }

/* Text-like inputs. */
.sbd-form .sbd-field input[type="text"],
.sbd-form .sbd-field input[type="email"],
.sbd-form .sbd-field input[type="tel"],
.sbd-form .sbd-field input[type="url"],
.sbd-form .sbd-field input[type="number"],
.sbd-form .sbd-field input[type="search"],
.sbd-form .sbd-field textarea,
.sbd-form .sbd-field select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--sbd-text);
    background: #fff;
    border: 1px solid var(--sbd-border);
    border-radius: var(--sbd-radius-inner, 8px);
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1.45;
}
.sbd-form .sbd-field textarea { min-height: 120px; resize: vertical; }

/* File inputs (CF7 `[file]`, Infocob upload fields).
   They get their own block rather than joining the list above for two
   reasons: the picker button needs styling of its own (browsers render it
   with their native chrome), and `appearance:none` — which the text-like
   fields set — hides that button entirely in WebKit, so it must NOT apply
   here. Without this rule a file field kept the browser default look while
   every other field wore the skin, and any theme painting bare `input`
   (e.g. `.wpcf7 input { background:#0D0F12 }`) leaked into it. */
.sbd-form .sbd-field input[type="file"] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--sbd-text);
    background: #fff;
    border: 1px solid var(--sbd-border);
    border-radius: var(--sbd-radius-inner, 8px);
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.45;
    cursor: pointer;
}

/* The picker button. `::file-selector-button` is the standard one; the
   `-webkit-` alias below covers Safari < 14.1 and has to live in its own
   rule, because one unknown pseudo-element invalidates a whole selector
   list. */
.sbd-form .sbd-field input[type="file"]::file-selector-button {
    margin: 0 0.75rem 0 0;
    padding: 0.35rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sbd-text);
    background: var(--sbd-primary-bg);
    border: 1px solid var(--sbd-border-muted);
    border-radius: var(--sbd-radius-sm, 6px);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sbd-form .sbd-field input[type="file"]:hover::file-selector-button {
    border-color: var(--sbd-primary-light);
}
.sbd-form .sbd-field input[type="file"]::-webkit-file-upload-button {
    margin: 0 0.75rem 0 0;
    padding: 0.35rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sbd-text);
    background: var(--sbd-primary-bg);
    border: 1px solid var(--sbd-border-muted);
    border-radius: var(--sbd-radius-sm, 6px);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sbd-form .sbd-field input[type="file"]:hover::-webkit-file-upload-button {
    border-color: var(--sbd-primary-light);
}

/* Theme override guard: some themes force input colours with !important from
   a page-level class (`.some-page input { color:#fff!important;
   background:#0D0F12!important }`), which would make our fields white-on-dark
   and unreadable on the light form. These selectors (2 classes + element +
   attribute = higher specificity than the theme's) reclaim the field colours
   with !important. Applies to the contact fields AND the finder search box.
   `file` belongs in this list too: a theme rule written on bare `input`
   catches file fields exactly like text ones. */
.sbd-form .sbd-form-body input[type="text"],
.sbd-form .sbd-form-body input[type="email"],
.sbd-form .sbd-form-body input[type="tel"],
.sbd-form .sbd-form-body input[type="url"],
.sbd-form .sbd-form-body input[type="number"],
.sbd-form .sbd-form-body input[type="search"],
.sbd-form .sbd-form-body input[type="password"],
.sbd-form .sbd-form-body input[type="date"],
.sbd-form .sbd-form-body input[type="file"],
.sbd-form .sbd-form-body textarea,
.sbd-form .sbd-form-body select {
    color: var(--sbd-text) !important;
    background-color: #fff !important;
}

.sbd-form .sbd-field input:focus,
.sbd-form .sbd-field textarea:focus,
.sbd-form .sbd-field select:focus {
    outline: none;
    border-color: var(--sbd-primary);
    box-shadow: 0 0 0 3px rgba(199, 171, 118, 0.15);
}

.sbd-form .sbd-field input::placeholder,
.sbd-form .sbd-field textarea::placeholder {
    color: var(--sbd-text-muted);
    opacity: 0.7;
}

/* ---------- Option-based fields (cards, pills, toggle) ---------- */

.sbd-form .sbd-options {
    display: grid;
    gap: 0.75rem;
}
/* The three card modes share one grid. The track is each card's exact share of
   the row — which yields precisely --sbd-cards-per-row columns whatever the
   form is wide — floored at the narrowest that mode stays readable at. Below
   the floor the share loses, the track freezes, and auto-fill drops columns on
   its own: a phone gets fewer without a breakpoint to maintain.
   The floors differ because the modes do — a logo survives 110px, a card
   carrying a title and a description does not. And only cards-image leaves
   --sbd-cards-per-row undeclared, so it is the mode the skin token reaches;
   the other two carry their own count. A field's own setting is written
   inline on its grid and still wins over all of it. */
.sbd-form .sbd-options--cards-rich,
.sbd-form .sbd-options--cards-icon,
.sbd-form .sbd-options--cards-image {
    --sbd-card-track: max(
        var(--sbd-card-floor, 110px),
        calc((100% - (var(--sbd-cards-per-row, 7) - 1) * 0.75rem) / var(--sbd-cards-per-row, 7))
    );
    grid-template-columns: repeat(auto-fill, minmax(var(--sbd-card-track), 1fr));
}
.sbd-form .sbd-options--cards-rich  { --sbd-cards-per-row: 3; --sbd-card-floor: 260px; }
.sbd-form .sbd-options--cards-icon  { --sbd-cards-per-row: 5; --sbd-card-floor: 180px; }
.sbd-form .sbd-options--cards-image { --sbd-card-floor: 110px; }
.sbd-form .sbd-options--pills      { display: flex; flex-wrap: wrap; }
.sbd-form .sbd-options--toggle     { display: flex; flex-direction: column; gap: 0.5rem; }

.sbd-form .sbd-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: #fff;
    border: 1px solid var(--sbd-border);
    border-radius: var(--sbd-radius-inner, 8px);
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    position: relative;
    user-select: none;
    margin: 0;
}
.sbd-form .sbd-option:hover { border-color: var(--sbd-primary-light); }
.sbd-form .sbd-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
    margin: 0;
}
.sbd-form .sbd-option-control {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--sbd-border-muted);
    border-radius: 4px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 0.1em;
    background: #fff;
}
.sbd-form .sbd-option-control::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--sbd-primary);
    border-radius: 2px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s, transform 0.15s;
}
.sbd-form .sbd-option-input:checked ~ .sbd-option-control { border-color: var(--sbd-primary); }
.sbd-form .sbd-option-input:checked ~ .sbd-option-control::after { opacity: 1; transform: scale(1); }
.sbd-form .sbd-option:has(.sbd-option-input:checked) {
    border-color: var(--sbd-primary);
    background: var(--sbd-primary-bg);
}

/* A single-choice group carries no box. That control is a checkbox — square,
   square tick — and drawing it on a radio tells the visitor they may pick
   several, which is exactly what they cannot do. The selected card already
   reads as selected through its outline and tint (the rule just above), which
   is how the finder's single-choice cards behave too.
   In the three card variants the control is positioned out of flow, so
   removing it shifts nothing. The toggle variant is excluded: there the
   control IS the switch, and hiding it would leave nothing to look at. */
.sbd-form .sbd-option:not(.sbd-option--toggle) .sbd-option-input[type="radio"] ~ .sbd-option-control {
    display: none;
}

.sbd-form .sbd-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}
.sbd-form .sbd-option-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sbd-text);
    line-height: 1.3;
}
.sbd-form .sbd-option-description {
    font-size: 0.8125rem;
    color: var(--sbd-text-muted);
    line-height: 1.4;
}

/* Variant: cards-rich.
   Layout: title + description stacked, checkbox pinned to top-right out of
   flow so it doesn't push the body and doesn't leave a gap on the top-left
   of every card (the old behaviour with the control still in the flex flow). */
.sbd-form .sbd-option--cards-rich {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1rem 1rem 1rem;
    padding-right: 2.75rem; /* reserves the space the absolute checkbox occupies */
    gap: 0.25rem;
}
.sbd-form .sbd-option--cards-rich .sbd-option-control {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    margin-top: 0;
}

/* Variant: cards-icon.
   Layout: icon on the top-left (in flow), body below, checkbox top-right
   out of flow. Same reserved padding-right as cards-rich. */
.sbd-form .sbd-option--cards-icon {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1rem 1rem;
    padding-right: 2.75rem;
    gap: 0.65rem;
}
.sbd-form .sbd-option--cards-icon .sbd-option-control {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    margin-top: 0;
}
.sbd-form .sbd-option-icon {
    font-size: 1.4rem;
    color: var(--sbd-primary);
    width: auto;
    height: auto;
}

/* Variant: cards-image.
   Layout: a cover image fills the top of the card (flush to the edges), the
   title sits centred below it, and the checkbox is pinned to the top-right
   corner over the image — matching the "types de travaux" mockup. */
.sbd-form .sbd-option--cards-image {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: hidden;
    text-align: center;
}
.sbd-form .sbd-option--cards-image .sbd-option-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sbd-primary-bg);
}
.sbd-form .sbd-option--cards-image .sbd-option-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sbd-form .sbd-option--cards-image .sbd-option-body {
    padding: 0.85rem 0.75rem;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    gap: 0;
}
.sbd-form .sbd-option--cards-image .sbd-option-title { font-weight: 600; }
.sbd-form .sbd-option--cards-image .sbd-option-control {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    margin-top: 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Variant: pills. */
.sbd-form .sbd-option--pills {
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    gap: 0.4rem;
    flex: 0 0 auto;
}
.sbd-form .sbd-option--pills .sbd-option-control { display: none; }
.sbd-form .sbd-option--pills .sbd-option-title { font-weight: 500; }
.sbd-form .sbd-option--pills:has(.sbd-option-input:checked) {
    background: var(--sbd-primary);
    border-color: var(--sbd-primary);
}
.sbd-form .sbd-option--pills:has(.sbd-option-input:checked) .sbd-option-title { color: #fff; }

/* Variant: toggle. */
.sbd-form .sbd-option--toggle {
    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
}
.sbd-form .sbd-option--toggle:hover { border-color: transparent; }
.sbd-form .sbd-option--toggle .sbd-option-control {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--sbd-border);
    border: 0;
    flex-shrink: 0;
    margin-top: 0;
    position: relative;
}
.sbd-form .sbd-option--toggle .sbd-option-control::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    opacity: 1;
    transform: none;
    transition: left 0.15s;
}
.sbd-form .sbd-option--toggle .sbd-option-input:checked ~ .sbd-option-control {
    background: var(--sbd-primary);
}
.sbd-form .sbd-option--toggle .sbd-option-input:checked ~ .sbd-option-control::after { left: 18px; }
.sbd-form .sbd-option--toggle:has(.sbd-option-input:checked) {
    background: transparent;
}

/* ---------- Navigation buttons ---------- */

.sbd-form .sbd-form-nav {
    display: flex;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: auto;
    gap: 1rem;
}
/* v0.6.3: next button always sits on the right edge of the nav, even when
   prev is hidden on step 1. We use `margin-left: auto` on next instead of
   `justify-content: space-between` on the parent because space-between would
   pin the lone next button to the left when prev is hidden. */
.sbd-form .sbd-nav-next { margin-left: auto; }
/* v0.6.2: ensure the `hidden` HTML attribute actually hides these buttons.
   Without this rule, the inline-flex display set below wins over the implicit
   `display: none` from [hidden], and "Previous" stays visible on step 1. */
.sbd-form .sbd-nav-prev[hidden],
.sbd-form .sbd-nav-next[hidden] { display: none; }
.sbd-form .sbd-nav-prev {
    background: transparent;
    border: 0;
    color: var(--sbd-primary);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}
.sbd-form .sbd-nav-prev:hover { color: var(--sbd-primary-hover); }

.sbd-form .sbd-nav-next,
.sbd-form .sbd-form-body .wpcf7-submit,
.sbd-form .sbd-form-body .if-btn-submit button,
.sbd-form .sbd-form-body input[type="submit"] {
    background: var(--sbd-primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    line-height: 1.2;
}
.sbd-form .sbd-nav-next:hover,
.sbd-form .sbd-form-body .wpcf7-submit:hover,
.sbd-form .sbd-form-body .if-btn-submit button:hover,
.sbd-form .sbd-form-body input[type="submit"]:hover {
    background: var(--sbd-primary-hover);
}
.sbd-form .sbd-nav-next:disabled { opacity: 0.6; cursor: not-allowed; }

/* v0.6.2: when the "Next" button is morphed into the form's submit on the
   last step, hide its trailing arrow (it's now a CTA, not a "go forward"). */
.sbd-form .sbd-nav-next.is-submit-mode .sbd-nav-next-arrow { display: none; }

/* v0.6.2: on the last step we trigger the form's requestSubmit() from the
   morphed "Next" button. The native submit (CF7's .wpcf7-submit, Infocob's
   .if-btn-submit, or any other <input type="submit">) must stay in the DOM
   for the submitter handoff but be visually hidden — otherwise it shows up
   twice (once as Next button, once as the native CTA at the end of the
   fieldset). We hide via off-screen positioning instead of display:none so
   accessibility / form submitter semantics aren't broken. */
.sbd-form[data-active-step-is-last="true"] .sbd-form-body .if-btn-submit,
.sbd-form[data-active-step-is-last="true"] .sbd-form-body .wpcf7-submit,
.sbd-form[data-active-step-is-last="true"] .sbd-form-body input[type="submit"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.sbd-form .sbd-structural { margin-top: 1.25rem; }
.sbd-form .sbd-structural--top { margin: 0; }
.sbd-form .sbd-structural--top[hidden] { display: none; }

/* CF7 validation messages. */
.sbd-form .sbd-form-body .wpcf7-not-valid-tip {
    color: #c92a2a;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}
.sbd-form .sbd-form-body .wpcf7-not-valid {
    border-color: #c92a2a;
}
.sbd-form .sbd-form-body .wpcf7-response-output {
    border: 1px solid var(--sbd-border);
    border-radius: var(--sbd-radius-inner, 8px);
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    margin-top: 1rem;
}
.sbd-form .sbd-form-body .wpcf7 form.invalid .wpcf7-response-output,
.sbd-form .sbd-form-body .wpcf7 form.failed  .wpcf7-response-output { border-color: #c92a2a; color: #c92a2a; }
.sbd-form .sbd-form-body .wpcf7 form.sent    .wpcf7-response-output { border-color: #2b8a3e; color: #2b8a3e; }

.sbd-form .sbd-step-error {
    background: #fff5f5;
    border: 1px solid #f5c2c2;
    color: #c92a2a;
    border-radius: var(--sbd-radius-inner, 8px);
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* =========================================================================
   Modal mode (v0.6.3 — full-screen + slide-in animation from the right)

   When opened via a hash link (#sbd-form-X) or a [data-sbd-form-open]
   trigger, the modal takes the entire viewport and the frame slides in from
   the right side of the screen. The sticky chrome (only .sbd-form-body
   scrolls) is shared between modal and inline modes — see "Sticky chrome"
   block lower down.
   ========================================================================= */

.sbd-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    box-sizing: border-box;
}
.sbd-modal[hidden] { display: none; }
.sbd-modal .sbd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 58, 92, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.sbd-modal.is-open .sbd-modal-backdrop {
    opacity: 1;
}
.sbd-modal .sbd-modal-frame {
    position: relative;
    background: #fff;
    border-radius: 0;
    width: 100vw;
    /* dvh (dynamic viewport height) excludes the mobile browser's toolbars, so
       the frame — and the nav pinned at its bottom — stays within the VISIBLE
       area instead of extending behind the bottom bar (where "Continuer" became
       unreachable). vh kept as a fallback for browsers without dvh. */
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
    display: flex;
    /* v0.6.3: slide-in animation from the right. The frame starts off-screen
       and animates to position when the modal gains the .is-open class.
       Reduced motion users get an instant transition (see media query below). */
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.sbd-modal.is-open .sbd-modal-frame {
    transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
    .sbd-modal .sbd-modal-frame,
    .sbd-modal .sbd-modal-backdrop {
        transition: none;
    }
}
.sbd-modal .sbd-modal-frame .sbd-form {
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

body.sbd-modal-open { overflow: hidden; }

/* =========================================================================
   Sticky chrome (v0.6.3 — shared by modal AND inline)

   In both modes, only the field area (.sbd-form-body) scrolls. The sidebar,
   topbar, headline, stepper and nav stay fixed. Padding is removed from
   .sbd-form-main and reapplied on each sub-block so the body scrollbar runs
   from the stepper to the nav without inner gaps cutting the scroll track.
   ========================================================================= */
.sbd-form {
    overflow: hidden;
}
.sbd-form .sbd-form-sidebar {
    overflow-y: auto;
    height: 100%;
    align-self: stretch;
}
.sbd-form .sbd-form-main {
    padding: 0;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}
.sbd-form .sbd-form-topbar,
.sbd-form .sbd-form-headline,
.sbd-form .sbd-stepper {
    flex: 0 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
    margin: 0;
}
.sbd-form .sbd-form-topbar {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
}
.sbd-form .sbd-form-headline {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.sbd-form .sbd-stepper {
    padding-bottom: 1rem;
}
.sbd-form .sbd-form-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 0.5rem 3rem 1rem;
    margin: 0;
}
.sbd-form .sbd-form-nav {
    flex: 0 0 auto;
    padding: 1.25rem 3rem 1.5rem;
    border-top: 1px solid var(--sbd-border);
    margin-top: 0;
    background: #fff;
}

/* Mode-specific heights (heights are set on .sbd-form itself; sticky chrome
   above operates inside this constraint). */
.sbd-form.sbd-form--modal {
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
}
.sbd-form.sbd-form--modal .sbd-form-sidebar {
    max-height: 100vh;
    max-height: 100dvh;
}
.sbd-form.sbd-form--inline {
    /* Take 85vh of the viewport, capped at 800px so very tall screens
       don't end up with a comically tall embedded form. Inside this height,
       only the body scrolls — same behaviour as the modal. */
    height: min(85vh, 800px);
    min-height: 600px;
}
.sbd-form.sbd-form--inline .sbd-form-sidebar {
    max-height: 800px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablet — sidebar in a top banner. */
@media (max-width: 1023px) {
    .sbd-form { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .sbd-form .sbd-form-sidebar {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem 1.75rem;
        flex-wrap: wrap;
        /* v0.6.8: the sticky-chrome rule sets height:100% + overflow-y:auto
           for the desktop 2-col layout; as a top banner it must size to its
           own content instead, otherwise it stretches and steals the main
           column's scroll height. */
        height: auto;
        max-height: none;
        overflow: visible;
        align-self: start;
    }
    .sbd-form .sbd-form-sidebar::before { display: none; }
    .sbd-form .sbd-sidebar-logo { flex: 0 0 auto; }
    .sbd-form .sbd-sidebar-logo-img { max-width: 110px; }
    .sbd-form .sbd-sidebar-tagline { flex: 1 1 200px; }
    .sbd-form .sbd-sidebar-tagline-title,
    .sbd-form .sbd-sidebar-tagline-subtitle { font-size: 1rem; }
    .sbd-form .sbd-sidebar-usps,
    .sbd-form .sbd-sidebar-product { display: none; }
    .sbd-form .sbd-sidebar-badges { flex: 0 0 auto; }

    /* v0.6.8: keep .sbd-form-main at padding:0 (sticky-chrome model) and
       shrink the per-block gutters, so we don't double up main padding +
       child padding (was 1.75rem + 3rem = 4.75rem of effective gutter). */
    .sbd-form .sbd-form-main { padding: 0; }
    .sbd-form .sbd-form-topbar,
    .sbd-form .sbd-form-headline,
    .sbd-form .sbd-stepper,
    .sbd-form .sbd-form-body,
    .sbd-form .sbd-form-nav {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    /* No card override here any more: all three modes size their tracks from
       the available width, so they thin out on their own. */
}

/* Mobile — sidebar hidden, modal goes fullscreen. */
@media (max-width: 1100px) {
    /* Sidebar is removed from the grid, so the form is a single row that
       must fill the height for the sticky-chrome body scroll to work.
       The column track has to collapse with it: the single-column rule lives
       in the 1023px block, so between 1024 and 1100 (iPad landscape) the
       sidebar was hidden while its 340px track stayed — the form rendered
       inside that track with the rest of the row left empty. */
    .sbd-form { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .sbd-form .sbd-form-sidebar { display: none; }

    /* v0.6.8: single-gutter padding (sticky-chrome model, no double-up).
       .sbd-form-main stays at 0; each block carries the 1.25rem gutter. */
    .sbd-form .sbd-form-main { padding: 0; gap: 0; }
    .sbd-form .sbd-form-topbar,
    .sbd-form .sbd-form-headline,
    .sbd-form .sbd-stepper,
    .sbd-form .sbd-form-body,
    .sbd-form .sbd-form-nav {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .sbd-form .sbd-form-topbar { padding-top: 1.5rem; }

    .sbd-form .sbd-form-title { font-size: 1.4rem; }
    .sbd-form .sbd-form-subtitle { font-size: 0.9rem; }

    /* v0.6.8: compact stepper — numbered dots only, centered, NO labels.
       The step name already lives in the headline above, so on mobile the
       stepper just communicates position/progress. Previously the
       active/completed label rule (0,3,0) beat the plain
       `.sbd-stepper-label { display:none }` (0,2,0), so gold pills with
       text leaked through and wrapped awkwardly. We now hide ALL labels at
       equal-or-higher specificity and neutralise the active pill fill. */
    .sbd-form .sbd-stepper {
        column-gap: 0;
        row-gap: 9px;
    }
    .sbd-form .sbd-stepper-item.is-active .sbd-stepper-label,
    .sbd-form .sbd-stepper-item.is-completed .sbd-stepper-label,
    .sbd-form .sbd-stepper-label { display: none; }
    .sbd-form .sbd-stepper-item.is-active .sbd-stepper-item-inner {
        background: transparent;
        padding: 0;
    }
    .sbd-form .sbd-stepper-item:not(:last-child)::after {
        width: 20px;
        margin: 0 0.4rem;
    }
    /* On mobile, fully remove the row-end separator from layout (display:none)
       so the row can centre correctly. The JS markStepperRows() stabilises the
       wrap detection in multiple passes, so there is no ResizeObserver loop. */
    .sbd-form .sbd-stepper-item.is-row-end::after { display: none; }

    .sbd-modal { padding: 0; }
    .sbd-modal .sbd-modal-frame {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
    .sbd-modal .sbd-modal-frame .sbd-form {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .sbd-form .sbd-form-nav {
        flex-direction: column-reverse;
        gap: 0.75rem;
        align-items: stretch;
    }
    /* v0.6.9: in the column layout the desktop `margin-left: auto` on next
       (used to pin it right when prev is hidden) pushes the button to the
       right edge instead of letting it stretch full-width — producing the
       lopsided "next on the right, prev centered below" look. Reset it and
       let align-items:stretch + width:100% drive a clean full-width stack. */
    .sbd-form .sbd-nav-next { margin-left: 0; }
    .sbd-form .sbd-nav-next,
    .sbd-form .sbd-nav-prev {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   Infocob CRM Forms — engine adaptations
   =====================================================================
   All rules below are scoped under .sbd-form[data-engine="icf"] (added in
   v0.6.1) so they only apply on Infocob-skinned forms AND so their
   specificity (0,3,X) beats Infocob's own stylesheet (typically 0,2,X)
   without relying on `!important`. The double-class selector
   `.sbd-form[data-engine="icf"].sbd-form` is used for the honeypot to push
   to (0,4,X) where Infocob's CSS is more aggressive. */

/* Reset Infocob's own form margin AND force the form into a column layout.
   Infocob applies `display: flex; flex-wrap: wrap` on form.infocob-crm-forms
   to drive its own 12-col grid — but we rebuild the layout ourselves at the
   .sbd-step-fields level, so the form itself just needs to stack its
   <fieldset> children vertically (structural at top, steps below). Without
   this override, the fieldsets behave as flex items and don't span 100%. */
.sbd-form[data-engine="icf"] .sbd-form-body form.infocob-crm-forms {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Infocob renders each field's libellé inside an <input placeholder="…">,
   so we don't need to display the inner <span class="if-field-libelle">.
   Keep it accessible to screen readers via the existing native label. */
.sbd-form[data-engine="icf"] .sbd-form-body .if-field .if-field-libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Infocob's honeypot wrapper. Double the data-attr + tag class for higher
   specificity than Infocob's own rules — no `!important` needed. */
.sbd-form[data-engine="icf"].sbd-form .sbd-form-body .if-dadywinnie { display: none; }

/* AJAX loader span sits next to the submit button — give it some spacing. */
.sbd-form[data-engine="icf"] .sbd-form-body .infocob-crm-forms-ajax-loader { margin-left: 0.5rem; }

/* Each .if-field is the native field wrapper — let it flow naturally
   inside our .sbd-step-fields grid without inheriting Infocob's grid-12
   layout (we handle layout at the .sbd-field level).

   v0.7.1: `max-width: none` neutralises Infocob's `.if-field-X-Y { max-width: X/Y * 100% }`
   rules that bubble down to the label inside our wrapper. Without this, a
   field with data-col="6" (span 6 of 12 = 50% of the grid) would also be
   capped at max-width:50% by Infocob inside its 50% slot, ending up at 25%. */
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field .if-field {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* RGPD acceptance: Infocob injects the checkbox at DOMContentLoaded.
   Make sure the label looks consistent with our toggle styling. */
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field--toggle .if-casenorobot,
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field .if-casenorobot {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.45;
}
.sbd-form[data-engine="icf"] .sbd-form-body .if-casenorobot a {
    color: var(--sbd-primary);
    text-decoration: underline;
}

/* =====================================================================
   v0.7.0 — ICF column grid, select chevron, toggle (single + RGPD)
   ===================================================================== */

/* 12-column grid on ICF step bodies. .sbd-field carries data-col="N"
   (forwarded from Infocob's `col` attribute). Odd Infocob values are
   snapped to the nearest sensible span. Default span = 12. */
.sbd-form[data-engine="icf"] .sbd-step-fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field {
    grid-column: span 12;
}
.sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field[data-col="2"] { grid-column: span 6; }
.sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field[data-col="3"] { grid-column: span 4; }
.sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field[data-col="4"] { grid-column: span 4; }
.sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field[data-col="5"] { grid-column: span 6; }
.sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field[data-col="6"] { grid-column: span 6; }
.sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field[data-col="7"] { grid-column: span 8; }
.sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field[data-col="8"] { grid-column: span 8; }
@media (max-width: 1100px) {
    .sbd-form[data-engine="icf"] .sbd-step-fields > .sbd-field { grid-column: span 12; }
}

/* Native <select> chevron (appearance:none strips the OS one). */
.sbd-form .sbd-field select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Single checkbox / RGPD toggle: the label IS the .sbd-option--toggle.
   We hide the native checkbox even when it lacks the .sbd-option-input
   class (RGPD's injected checkbox doesn't carry it). :has() supports
   both cases for the checked state. */
.sbd-form[data-engine="icf"] .sbd-field--toggle .sbd-option--toggle > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}
.sbd-form[data-engine="icf"] .sbd-field--toggle .sbd-option--toggle:has(> input[type="checkbox"]:checked) .sbd-option-control {
    background: var(--sbd-primary);
}
.sbd-form[data-engine="icf"] .sbd-field--toggle .sbd-option--toggle:has(> input[type="checkbox"]:checked) .sbd-option-control::after {
    left: 18px;
}
.sbd-form[data-engine="icf"] .sbd-field--toggle .sbd-option--toggle .sbd-option-body {
    font-size: 0.9rem;
    color: var(--sbd-text);
    line-height: 1.45;
    flex-direction: row;
}
.sbd-form[data-engine="icf"] .sbd-field--toggle .sbd-option--toggle .sbd-option-body a {
    color: var(--sbd-primary);
    text-decoration: underline;
}
/* v0.8.1: Infocob wraps the RGPD label text in its OWN inner <span> (kept
   when initRgpdToggle adopts the JS-injected checkbox). Infocob sizes that
   span larger, and since our font-size lives on the parent .sbd-option-body,
   the inner span won out — making the RGPD label bigger than the newsletter
   one. Force the inner span (and its link) back to the toggle body size. */
.sbd-form[data-engine="icf"] .sbd-field--toggle .sbd-option--toggle .sbd-option-body span,
.sbd-form[data-engine="icf"] .sbd-field--toggle .sbd-option--toggle .sbd-option-body span a {
    font-size: 0.9rem;
    line-height: 1.45;
}

/* =====================================================================
   v0.7.1 — ICF focus state override
   =====================================================================
   Infocob's stylesheet sets a red border on inputs in :focus, with a
   selector specificity that ties or beats our generic .sbd-form .sbd-field
   input:focus rule. We bump the selector to (0,5,1) by adding
   [data-engine="icf"] + .sbd-form-body so it lands after Infocob's CSS in
   the cascade resolution and stays clean of any `!important`.

   Token used: --sbd-primary-hover (interaction-state companion of
   --sbd-primary). Kept ICF-scoped on purpose — CF7 focus remains on
   --sbd-primary (untouched) since no red-border issue exists there. */
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field input:focus,
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field textarea:focus,
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field select:focus,
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field .if-field input:focus,
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field .if-field textarea:focus,
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field .if-field select:focus {
    outline: none;
    border-color: var(--sbd-primary-hover);
    box-shadow: 0 0 0 3px rgba(199, 171, 118, 0.15);
}

/* =====================================================================
   v0.7.1–0.7.2 — Toggle layout fix (newsletter + RGPD)
   =====================================================================
   A single checkbox rendered as a toggle reuses Infocob's own label, which
   carries `if-field`. The high-specificity reset
   `.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field .if-field`
   (0,5,0) forces display:block, clobbering the toggle's flex row — the
   control and text stacked / misplaced. Re-assert the flex row at (0,6,0)
   so the switch sits inline with its label again.

   This covers BOTH the newsletter toggle (input present server-side) and
   the RGPD toggle (input injected by Infocob's JS, then wrapped into
   .sbd-option--toggle client-side by initRgpdToggle() — v0.7.2). Once the
   RGPD label carries .sbd-option--toggle, every generic + ICF toggle rule
   (hidden native input, gold switch, body link) applies identically. */
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field--toggle .if-field.sbd-option--toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
}

/* =====================================================================
   v0.6.4 — Custom confirm dialog
   =====================================================================
   Replaces window.confirm() for the "Are you sure you want to close?"
   prompt. Lives at the top-level of <body> (not inside .sbd-form), so the
   selectors below are NOT scoped under .sbd-form — they target the
   .sbd-confirm-* hierarchy directly. Z-index sits above .sbd-modal
   (100001 vs 100000) so the dialog correctly overlays an open modal.

   Because the overlay lives at <body> level it can't inherit the per-skin
   tokens emitted on `.sbd-form[data-skin-id]` via the cascade. Instead the JS
   (applySkinTokens) copies the triggering skin's resolved token values onto
   this element inline, so the dialog matches whatever launched it. The
   hardcoded values below are the standalone fallback used when no source
   skin is available. */

.sbd-confirm-overlay {
    --sbd-primary:           #C7AB76;
    --sbd-primary-hover:     #BE9961;
    --sbd-text:              #1A3A5C;
    --sbd-text-muted:        #6B7280;
    --sbd-border:            #E6E8EB;
    --sbd-radius:            12px;
    --sbd-font-family:       system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(26, 58, 92, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.18s ease-out;
    font-family: var(--sbd-font-family);
    box-sizing: border-box;
}
.sbd-confirm-overlay * { box-sizing: border-box; }
.sbd-confirm-overlay.is-open { opacity: 1; }

.sbd-confirm-dialog {
    background: #fff;
    border-radius: var(--sbd-radius);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
    /* 520 rather than 480: French action labels ("Continuer la saisie" /
       "Fermer le formulaire") sat within a few pixels of the old width, so
       any theme font or a slightly longer label wrapped the two buttons onto
       separate rows. */
    max-width: 520px;
    width: 100%;
    padding: 1.75rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transform: translateY(8px) scale(0.985);
    transition: transform 0.18s ease-out;
}
.sbd-confirm-overlay.is-open .sbd-confirm-dialog {
    transform: translateY(0) scale(1);
}

.sbd-confirm-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    /* Colour is reclaimed from the theme by the guard block below. */
    color: var(--sbd-text);
    line-height: 1.3;
}
.sbd-confirm-message {
    margin: 0;
    font-size: 0.925rem;
    color: var(--sbd-text-muted);
    line-height: 1.5;
}

.sbd-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.sbd-confirm-btn {
    all: revert;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 600;
    line-height: 1.2;
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1.35rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-sizing: border-box;
}
.sbd-confirm-btn--cancel {
    background: transparent;
    color: var(--sbd-text);
    border: 1px solid var(--sbd-border);
}
.sbd-confirm-btn--cancel:hover {
    border-color: var(--sbd-text-muted);
    background: rgba(0, 0, 0, 0.02);
}
.sbd-confirm-btn--confirm {
    background: var(--sbd-primary);
    color: #fff;
    /* Transparent border so both buttons compute the same outer height —
       cancel carries a real 1px border. */
    border: 1px solid transparent;
}
.sbd-confirm-btn--confirm:hover {
    background: var(--sbd-primary-hover);
}

/* Theme override guard (v0.14.2)
   ------------------------------------------------------------------
   The overlay lives at <body> level, so the single-class selectors above
   only outrank bare element selectors. A theme that paints from a class
   scope still wins — a host theme that styles every button in its accent
   colour and its headings in a light grey washed out the dialog title and
   repainted the "keep editing" button the moment it took focus.
   The JS focuses that button when the dialog opens, so the themed focus
   state was the button's *default* appearance for every visitor.

   The rules below repeat the overlay class (house pattern, see the Infocob
   honeypot rule above) to reach (0,4,X) / (0,5,X) and mark the colour
   declarations !important, so neither a more specific theme selector nor a
   theme `!important` can reach them. `-webkit-text-fill-color` is reset
   alongside every `color`: it wins over `color` whatever the specificity,
   and themes set it for gradient text. */

.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-dialog .sbd-confirm-title,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-dialog h3.sbd-confirm-title {
    color: var(--sbd-text) !important;
    -webkit-text-fill-color: var(--sbd-text) !important;
    /* A gradient / background-clip heading would paint over the token. */
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-dialog .sbd-confirm-message {
    color: var(--sbd-text-muted) !important;
    -webkit-text-fill-color: var(--sbd-text-muted) !important;
    opacity: 1 !important;
}

.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--cancel {
    background: transparent !important;
    color: var(--sbd-text) !important;
    -webkit-text-fill-color: var(--sbd-text) !important;
    border: 1px solid var(--sbd-border) !important;
}
/* Focus is styled exactly like hover: the dialog opens with this button
   focused, so its focused state IS the state the visitor sees first. */
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--cancel:hover,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--cancel:focus,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--cancel:focus-visible,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--cancel:active {
    background: rgba(0, 0, 0, 0.02) !important;
    color: var(--sbd-text) !important;
    -webkit-text-fill-color: var(--sbd-text) !important;
    border-color: var(--sbd-text-muted) !important;
}

.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--confirm {
    background: var(--sbd-primary) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid transparent !important;
}
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--confirm:hover,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--confirm:focus,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--confirm:focus-visible,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn--confirm:active {
    background: var(--sbd-primary-hover) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Focus ring: pointer focus stays clean (the hover treatment above is the
   only cue), keyboard focus adds the ring. `outline` is reclaimed from themes
   that blank it, `box-shadow` from themes that draw their own glow on hover
   or focus. Declared after the state rules so it wins at equal specificity. */
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn:hover,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn:focus,
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn:active {
    outline: none !important;
    box-shadow: none !important;
}
.sbd-confirm-overlay.sbd-confirm-overlay .sbd-confirm-actions .sbd-confirm-btn:focus-visible {
    outline: 2px solid var(--sbd-primary) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .sbd-confirm-overlay,
    .sbd-confirm-dialog { transition: none; }
}

@media (max-width: 480px) {
    /* Below this width the auto tracks would collapse to a single column and
       the cards would stretch full-width; two-up reads better on a phone. */
    .sbd-form .sbd-options--cards-image { grid-template-columns: repeat(2, 1fr); }

    .sbd-confirm-dialog { padding: 1.25rem 1.25rem 1.1rem; }
    .sbd-confirm-actions { flex-direction: column-reverse; align-items: stretch; }
    .sbd-confirm-btn { width: 100%; text-align: center; }
}

/* =====================================================================
   v0.6.6 — ICF native <select> (Select2 neutralised)
   =====================================================================
   Infocob ships its selects with class="select2JS" and inits Select2 on
   them at DOMContentLoaded. IcfFieldTransformer::neutralise_select2()
   strips that hook so the native control renders instead — the widget our
   base `.sbd-form .sbd-field select` rules (chevron, focus, padding)
   already style. The select now sits directly inside `.sbd-field`, NOT
   inside an `.if-field` label, so the generic rules apply cleanly.

   v0.6.7: Infocob's own `.infocob-crm-forms select` rules outrank our
   generic `.sbd-form .sbd-field select` (0,2,1) on several axes — causing
   (a) a blue border on hover (Infocob's color, not ours), (b) a width that
   overflows the field, and (c) a 1px left crop because Infocob applies a
   box-sizing/margin that pushes the left border outside the scroll
   container. So we re-assert the FULL box model here at (0,3,2) — every
   property Infocob might steal: box-sizing, border, background, margin,
   width, max-width, color. The chevron/padding still come from the generic
   rule (not re-declared = inherited from the cascade above). */
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field select.sbd-native-select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--sbd-text);
    background-color: #fff;
    border: 1px solid var(--sbd-border);
    border-radius: var(--sbd-radius-inner, 8px);
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Hover — keep the same neutral border (no Infocob blue creeping in).
   Subtle lift toward the primary tint, matching the option-card hover. */
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field select.sbd-native-select:hover {
    border-color: var(--sbd-primary-light);
}

/* Focus — same treatment as text inputs (primary-hover ring, no Infocob
   red border). Mirrors the v0.7.1 ICF focus override for inputs/textareas. */
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field select.sbd-native-select:focus {
    outline: none;
    border-color: var(--sbd-primary-hover);
    box-shadow: 0 0 0 3px rgba(199, 171, 118, 0.15);
}

/* The neutralised placeholder option (empty value, disabled+hidden) and any
   :invalid placeholder state read as muted, like a text input placeholder. */
.sbd-form[data-engine="icf"] .sbd-form-body .sbd-field select.sbd-native-select:has(option[value=""]:checked) {
    color: var(--sbd-text-muted);
}
.sbd-form .sbd-field select.sbd-native-select option {
    color: var(--sbd-text);
}

/* =====================================================================
   v0.7.0 — Searchable option groups
   =====================================================================
   The search box + "show all" toggle + no-results message are injected by
   forms.js (initSearchableGroups) into a .sbd-field that carries
   data-sbd-search="1". Filtered-out options get .sbd-option--hidden
   (display:none) but stay in the DOM so their native inputs still submit.

   The search input is an <input type="text"> inside .sbd-field, so the
   generic `.sbd-form .sbd-field input[type="text"]` rule (0,2,1) already
   gives it the field look. We restate the essentials at (0,3,0) — higher —
   to add the magnifier icon + left padding without the generic rule
   clobbering them. */
.sbd-form .sbd-options-search { margin-bottom: 0.85rem; }

.sbd-form .sbd-field .sbd-options-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--sbd-text);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.85rem center;
    background-size: 16px 16px;
    border: 1px solid var(--sbd-border);
    border-radius: var(--sbd-radius-inner, 8px);
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1.45;
}
.sbd-form .sbd-field .sbd-options-search-input:focus {
    outline: none;
    border-color: var(--sbd-primary-hover);
    box-shadow: 0 0 0 3px rgba(199, 171, 118, 0.15);
}

/* Filtered-out option: removed from the (grid/flex) flow, kept in the DOM. */
.sbd-form .sbd-option.sbd-option--hidden { display: none; }

.sbd-form .sbd-options-noresults {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--sbd-text-muted);
}
/* The no-results message is toggled via the `hidden` attribute from
   forms.js. That relies on the UA `[hidden]{display:none}` rule, but this
   <p> is also matched by `.sbd-form p { all: revert }` above, which resets
   `display`. Restate the hide explicitly (author origin, higher specificity)
   so the message stays hidden until there genuinely are no matches. */
.sbd-form .sbd-options-noresults[hidden] { display: none; }

.sbd-form .sbd-options-more {
    margin-top: 0.85rem;
    text-align: center;
}
.sbd-form .sbd-options-more-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--sbd-primary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    text-decoration: underline;
}
.sbd-form .sbd-options-more-btn:hover { color: var(--sbd-primary-hover); }


/* =========================================================================
   Conditional visibility (jalon 5)
   A field / step hidden by a condition is removed from the flow entirely.
   ========================================================================= */

.sbd-form .sbd-conditional-hidden { display: none !important; }

/* =========================================================================
   Finder brick (jalon 5) — image + title cards, one step per level
   ========================================================================= */

.sbd-form .sbd-finder-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    margin: 0 0 0.5rem;
}

/* Each card: media on top, check badge in the corner, title/sub below. */
.sbd-form .sbd-finder-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    background: #fff;
    border: 1px solid var(--sbd-border);
    border-radius: var(--sbd-radius-inner, 8px);
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    color: var(--sbd-text);
    transition: border-color .15s, box-shadow .15s, transform .05s;
}
.sbd-form .sbd-finder-card:hover {
    border-color: var(--sbd-primary-light);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.sbd-form .sbd-finder-card:focus-visible {
    outline: none;
    border-color: var(--sbd-primary);
    box-shadow: 0 0 0 3px var(--sbd-primary-bg);
}
.sbd-form .sbd-finder-card.is-selected {
    border-color: var(--sbd-primary);
    box-shadow: 0 0 0 2px var(--sbd-primary) inset;
}

.sbd-form .sbd-finder-card-media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--sbd-primary-bg);
    overflow: hidden;
}
.sbd-form .sbd-finder-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* No image → a soft branded panel instead of an empty gap. */
.sbd-form .sbd-finder-card-media.is-empty {
    aspect-ratio: 16 / 7;
    background:
        linear-gradient(135deg, var(--sbd-primary-bg), #fff);
    border-bottom: 1px solid var(--sbd-border);
}

/* Icon: between the image and the title, aligned left on the same gutter as the
   card body, so image / icon / title / description share one left edge. Two
   flavours, decided by the server: a dashicon <span> or an <img> (attachment or
   SVG URL). */
.sbd-form .sbd-finder-card-icon {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0.8rem 0.85rem 0;
    color: var(--sbd-primary);
}
.sbd-form span.sbd-finder-card-icon {
    font-size: 32px;
    line-height: 1;
}
.sbd-form img.sbd-finder-card-icon {
    object-fit: contain;
    object-position: left center;
}
/* The icon already provides the top gutter; don't stack it with the body's. */
.sbd-form .sbd-finder-card-icon + .sbd-finder-card-body { padding-top: 0.45rem; }

/* Checkbox-style badge in the top-right corner. MULTI-PICK ONLY: it is emitted
   only by the result step when the skin allows several results. A single-choice
   card never gets one — a checkbox there would promise a multi-select that does
   not exist; the outline alone says "chosen" (see .sbd-finder-card-clear). */
.sbd-form .sbd-finder-card-check {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 22px;
    height: 22px;
    border: 2px solid var(--sbd-border-muted);
    border-radius: var(--sbd-radius-sm, 6px);
    background: rgba(255,255,255,.9);
}
.sbd-form .sbd-finder-card.is-selected .sbd-finder-card-check {
    border-color: var(--sbd-primary);
    background: var(--sbd-primary);
}
.sbd-form .sbd-finder-card.is-selected .sbd-finder-card-check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Single-choice cards carry no checkbox at all: the pick is the outline. To
   still let the visitor UNDO a choice, the chosen card shows a discreet "×" —
   on a step they navigated back to (JS adds .is-revisit), and on the result
   step, where they stay after picking. */
.sbd-form .sbd-finder-card-clear {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--sbd-border-muted);
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    color: var(--sbd-text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.sbd-form .sbd-finder-card-clear::after { content: "\00d7"; }
.sbd-form .sbd-step.is-revisit .sbd-finder-card.is-selected .sbd-finder-card-clear,
.sbd-form .sbd-finder-result-step .sbd-finder-card.is-selected .sbd-finder-card-clear {
    display: flex;
}
.sbd-form .sbd-finder-card-clear:hover {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

.sbd-form .sbd-finder-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem 0.9rem;
}
.sbd-form .sbd-finder-card-title {
    font-weight: 700;
    line-height: 1.25;
    color: var(--sbd-text);
}
/* Description: server-truncated, so every card of a step stays the same height
   and the grid reads as a grid. */
.sbd-form .sbd-finder-card-desc {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--sbd-text-muted);
}
.sbd-form .sbd-finder-card-sub {
    font-size: 0.85rem;
    color: var(--sbd-text-muted);
}

/* Result step: a search box above the product cards. */
.sbd-form .sbd-finder-search {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font: inherit;
    color: var(--sbd-text);
    background: #fff;
    border: 1px solid var(--sbd-border);
    border-radius: var(--sbd-radius-inner, 8px);
}
.sbd-form .sbd-finder-search:focus {
    outline: none;
    border-color: var(--sbd-primary);
    box-shadow: 0 0 0 3px var(--sbd-primary-bg);
}
.sbd-form .sbd-finder-products { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.sbd-form .sbd-finder-skip-hint,
.sbd-form .sbd-finder-multi-hint,
.sbd-form .sbd-finder-empty {
    margin: 0.4rem 0 0;
    color: var(--sbd-text-muted);
    font-size: 0.9rem;
}
/* Multi-pick hint sits above the cards, with a live count of what is ticked. */
.sbd-form .sbd-finder-multi-hint { margin: 0 0 0.9rem; }
.sbd-form .sbd-finder-multi-count {
    margin-left: 0.35rem;
    font-weight: 700;
    color: var(--sbd-primary);
}
/* The optional-level hint sits ABOVE the cards, so it needs space below it. */
.sbd-form .sbd-finder-skip-hint {
    margin: 0 0 0.9rem;
    font-style: italic;
}
/* Guarantee the `hidden` attribute wins over any theme display rule on these
   nodes (same class of bug as the stepper items): otherwise "Aucun résultat",
   the loader and "Charger plus" could leak while results are shown. */
.sbd-form .sbd-finder-empty[hidden],
.sbd-form .sbd-finder-more[hidden],
.sbd-form .sbd-finder-multi-count[hidden],
.sbd-form .sbd-finder-loading[hidden] { display: none !important; }

/* The visitor now lands on a finder step while it is still loading (the card
   click no longer waits for the round trip), so the loader has to hold the
   space instead of being a stray dot in the corner. */
.sbd-form .sbd-finder-loading {
    display: block;
    padding: 2rem 0;
    text-align: center;
}
.sbd-form .sbd-finder-loading::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--sbd-border-muted);
    border-top-color: var(--sbd-primary);
    border-radius: 50%;
    animation: sbd-finder-spin 0.7s linear infinite;
    vertical-align: -0.2em;
}
@keyframes sbd-finder-spin { to { transform: rotate(360deg); } }

.sbd-form .sbd-finder-more { margin: 0.8rem 0 0; }
.sbd-form .sbd-finder-more-btn {
    background: none;
    border: 1px solid var(--sbd-border);
    color: var(--sbd-text);
    cursor: pointer;
    font: inherit;
    padding: 0.5rem 0.9rem;
    border-radius: var(--sbd-radius-inner, 8px);
}
.sbd-form .sbd-finder-more-btn:hover { border-color: var(--sbd-primary); }

@media (max-width: 600px) {
    .sbd-form .sbd-finder-cards { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
}

/* =========================================================================
   CF7 acceptance (RGPD consent) — tidy inline checkbox + label (jalon 5)
   Without this, the theme/base layout can center or stack the native
   acceptance oddly. Force a left-aligned "checkbox + text" row.
   ========================================================================= */
.sbd-form .sbd-field .wpcf7-acceptance .wpcf7-list-item {
    display: block;
    margin: 0;
}
.sbd-form .sbd-field .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    text-align: left;
    cursor: pointer;
    margin: 0;
}
.sbd-form .sbd-field .wpcf7-acceptance input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0.15rem 0 0;
    accent-color: var(--sbd-primary);
}
.sbd-form .sbd-field .wpcf7-acceptance .wpcf7-list-item-label { flex: 1 1 auto; }