/*
 * Fichier : /assets/css/mobile-conversion.css
 * Couche mobile partagée des pages commerciales WebpackPro.
 * Le contenu SEO reste dans le DOM ; l'affichage initial est simplement plus court sur téléphone.
 */
.vp-mobile-lead-bar,
.vp-mobile-grid-toggle {
    display: none;
}

@media (max-width: 767px) {
    :root {
        --vp-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    body.vp-commercial-page {
        padding-bottom: calc(76px + var(--vp-mobile-safe-bottom));
        overflow-x: hidden;
    }

    body.vp-commercial-page .vp-breadcrumbs {
        padding-top: 12px;
        padding-bottom: 8px;
        font-size: 12px;
        white-space: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.vp-commercial-page .vp-breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    body.vp-commercial-page .vp-commercial-hero {
        min-height: 0;
        padding-block: 28px 30px;
    }

    body.vp-commercial-page .vp-commercial-hero__grid {
        display: block;
    }

    body.vp-commercial-page .vp-commercial-hero h1 {
        max-width: 13ch;
        font-size: clamp(35px, 10.8vw, 46px);
        line-height: .98;
        letter-spacing: -.05em;
    }

    body.vp-commercial-page .vp-commercial-hero__lead {
        max-width: 40rem;
        margin-top: 16px;
        font-size: 16px;
        line-height: 1.52;
    }

    body.vp-commercial-page .vp-commercial-hero__grid > aside,
    body.vp-commercial-page .vp-commercial-hero__grid > .vp-price-poster,
    body.vp-commercial-page .vp-commercial-hero__grid > .vp-handoff,
    body.vp-commercial-page .vp-commercial-hero__grid > .vp-comparison-date {
        display: none;
    }

    body.vp-commercial-page .vp-hero__actions {
        margin-top: 20px;
        display: block;
    }

    body.vp-commercial-page .vp-hero__actions .vp-button {
        width: 100%;
        min-height: 50px;
        justify-content: center;
    }

    body.vp-commercial-page .vp-hero__actions .vp-button--secondary {
        display: none;
    }

    body.vp-commercial-page .vp-inline-trust {
        margin-top: 16px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 12px;
        font-size: 12px;
    }

    body.vp-commercial-page .vp-inline-trust li:nth-child(n + 3) {
        display: none;
    }

    body.vp-commercial-page .vp-proof-bar .vp-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.vp-commercial-page .vp-proof-bar span {
        min-height: 42px;
        padding: 9px 6px;
        font-size: 10.5px;
        line-height: 1.22;
        text-align: center;
    }

    body.vp-commercial-page .vp-proof-bar span:nth-child(n + 4) {
        display: none;
    }

    body.vp-commercial-page .vp-section {
        padding-block: 44px;
    }

    body.vp-commercial-page .vp-section-heading,
    body.vp-commercial-page .vp-faq-intro {
        margin-bottom: 22px;
    }

    body.vp-commercial-page .vp-section-heading h2,
    body.vp-commercial-page .vp-faq-intro h2,
    body.vp-commercial-page .vp-form-copy h2,
    body.vp-commercial-page .vp-managed-layout h2,
    body.vp-commercial-page .vp-final-cta h2 {
        font-size: clamp(29px, 8.5vw, 38px);
        line-height: 1.04;
        letter-spacing: -.045em;
    }

    body.vp-commercial-page .vp-section-heading--split,
    body.vp-commercial-page .vp-managed-layout,
    body.vp-commercial-page .vp-process-layout,
    body.vp-commercial-page .vp-faq-layout,
    body.vp-commercial-page .vp-form-layout,
    body.vp-commercial-page .vp-inclusion-layout,
    body.vp-commercial-page .vp-scope-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    body.vp-commercial-page .vp-section-heading--split > p {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.55;
    }

    body.vp-commercial-page .vp-managed-summary,
    body.vp-commercial-page .vp-inclusion-panel,
    body.vp-commercial-page .vp-scope-card,
    body.vp-commercial-page .vp-benefit-card {
        border-radius: 20px;
    }

    body.vp-commercial-page .vp-managed-summary {
        padding: 22px 18px;
    }

    body.vp-commercial-page .vp-faq-list {
        gap: 8px;
    }

    body.vp-commercial-page .vp-faq-list details:not(:first-child) {
        content-visibility: auto;
        contain-intrinsic-size: 68px;
    }

    body.vp-commercial-page .vp-form-copy > ul,
    body.vp-commercial-page .vp-form-contact {
        display: none;
    }

    body.vp-commercial-page .vp-lead-form {
        padding: 22px 17px;
        border-radius: 20px;
    }

    body.vp-commercial-page .vp-field-grid--two {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.vp-commercial-page input,
    body.vp-commercial-page select,
    body.vp-commercial-page textarea,
    body.vp-commercial-page button {
        font-size: 16px;
    }

    .js-mobile-conversion .vp-mobile-grid-hidden {
        display: none !important;
    }

    .js-mobile-conversion .vp-mobile-grid-toggle {
        display: block;
        width: 100%;
        min-height: 47px;
        margin-top: 14px;
        border: 1px solid var(--vp-line-strong, rgba(46, 91, 73, .24));
        border-radius: 999px;
        background: var(--vp-paper, #fff);
        color: var(--vp-ink-deep, #173b32);
        font: inherit;
        font-size: 14px;
        font-weight: 800;
    }

    .vp-mobile-lead-bar {
        position: fixed;
        z-index: 95;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 70px;
        padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + var(--vp-mobile-safe-bottom)) max(14px, env(safe-area-inset-left));
        border-top: 1px solid rgba(47, 107, 86, .18);
        background: color-mix(in srgb, var(--vp-paper, #fff) 94%, transparent);
        box-shadow: 0 -12px 32px rgba(18, 51, 41, .13);
        backdrop-filter: blur(16px) saturate(130%);
        -webkit-backdrop-filter: blur(16px) saturate(130%);
    }

    .vp-mobile-lead-bar:not([hidden]) {
        display: flex;
    }

    /*
     * Le bouton de gestion du consentement est lui aussi positionné en fixed.
     * Lorsqu'une barre de conversion mobile est visible, on le remonte au-dessus
     * afin qu'aucun des deux contrôles ne masque l'autre.
     */
    .js-mobile-conversion.has-mobile-lead-bar .consent-manage {
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(84px + var(--vp-mobile-safe-bottom));
        left: auto;
        max-width: calc(100vw - 28px);
    }

    .vp-mobile-lead-bar__price {
        min-width: 0;
    }

    .vp-mobile-lead-bar__price strong,
    .vp-mobile-lead-bar__price span {
        display: block;
    }

    .vp-mobile-lead-bar__price strong {
        color: var(--vp-ink-deep, #173b32);
        font-size: 15px;
        line-height: 1.05;
    }

    .vp-mobile-lead-bar__price span {
        margin-top: 3px;
        color: var(--vp-muted, #62756e);
        font-size: 11px;
        white-space: nowrap;
    }

    .vp-mobile-lead-bar .vp-button {
        flex: 0 0 auto;
        min-height: 46px;
        padding-inline: 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    html[data-theme="dark"] .vp-mobile-lead-bar,
    html[data-theme="dark"] .vp-mobile-grid-toggle {
        border-color: rgba(185, 220, 201, .2);
        background: color-mix(in srgb, #0b2117 94%, transparent);
    }

    html[data-theme="dark"] .vp-mobile-lead-bar__price strong {
        color: #f2fff0;
    }

    html[data-theme="dark"] .vp-mobile-lead-bar__price span {
        color: #b9d0c0;
    }
}

@media (max-width: 374px) {
    .vp-mobile-lead-bar__price span {
        display: none;
    }

    .vp-mobile-lead-bar .vp-button {
        padding-inline: 13px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-mobile-lead-bar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media print {
    .vp-mobile-lead-bar,
    .vp-mobile-grid-toggle {
        display: none !important;
    }
}


/* V2 — formulaire de demande rapide */
.vp-lead-form--fast {
    position: relative;
}

.vp-fast-start-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--vp-accent, #d8ff62) 46%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--vp-accent, #d8ff62) 12%, transparent);
    font-size: 12px;
    line-height: 1;
}

.vp-fast-start-note strong {
    font-weight: 900;
}

.vp-fast-start-note span {
    opacity: .78;
}

.vp-fast-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vp-lead-details {
    margin: 16px 0;
    border: 1px solid var(--vp-line, rgba(46, 91, 73, .18));
    border-radius: 16px;
    background: color-mix(in srgb, var(--vp-paper, #fff) 94%, transparent);
    overflow: clip;
}

.vp-lead-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.vp-lead-details > summary::-webkit-details-marker {
    display: none;
}

.vp-lead-details > summary span:first-child,
.vp-lead-details > summary strong,
.vp-lead-details > summary small {
    display: block;
}

.vp-lead-details > summary strong {
    font-size: 14px;
}

.vp-lead-details > summary small {
    margin-top: 3px;
    color: var(--vp-muted, #62756e);
    font-size: 11px;
    font-weight: 600;
}

.vp-lead-details__icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--vp-accent, #d8ff62) 18%, transparent);
    font-size: 20px;
    line-height: 1;
    transition: transform .2s ease;
}

.vp-lead-details[open] .vp-lead-details__icon {
    transform: rotate(45deg);
}

.vp-lead-details__content {
    display: grid;
    gap: 14px;
    padding: 2px 14px 16px;
}

.vp-lead-details__content .vp-field-grid {
    gap: 14px;
}

.vp-field label small {
    margin-left: 4px;
    color: var(--vp-muted, #62756e);
    font-size: 11px;
    font-weight: 600;
}

.vp-form-microcopy {
    margin: 9px 0 0;
    color: var(--vp-muted, #62756e);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

html[data-theme="dark"] .vp-lead-details {
    border-color: rgba(185, 220, 201, .18);
    background: rgba(10, 35, 25, .58);
}

@media (max-width: 767px) {
    body.vp-commercial-page .vp-lead-form--fast {
        padding: 18px 15px;
    }

    body.vp-commercial-page .vp-fast-fields {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.vp-commercial-page .vp-form-required-note {
        margin-bottom: 13px;
        font-size: 11px;
        line-height: 1.45;
    }

    body.vp-commercial-page .vp-lead-details {
        margin: 13px 0;
        border-radius: 14px;
    }

    body.vp-commercial-page .vp-lead-details__content .vp-field-grid--two {
        grid-template-columns: 1fr;
    }

    body.vp-commercial-page .vp-lead-details textarea {
        min-height: 112px;
    }

    body.vp-commercial-page .vp-consent {
        margin-top: 10px;
        font-size: 11px;
        line-height: 1.45;
    }

    body.vp-commercial-page .cf-turnstile {
        margin-block: 8px;
    }
}

/* V3 — valeur de l'offre visible immédiatement sur les landing pages */
.vp-mobile-offer-summary {
    display: none;
}

@media (max-width: 767px) {
    body.vp-commercial-page .vp-mobile-offer-summary {
        display: grid;
        gap: 4px;
        margin: 16px 0 0;
        padding: 12px 13px;
        border: 1px solid color-mix(in srgb, var(--vp-line-strong, #b9d0c0) 72%, transparent);
        border-radius: 14px;
        background: color-mix(in srgb, var(--vp-paper, #fff) 78%, transparent);
    }

    body.vp-commercial-page .vp-mobile-offer-summary strong {
        color: var(--vp-ink-deep, #173b32);
        font-size: 18px;
        line-height: 1.05;
    }

    body.vp-commercial-page .vp-mobile-offer-summary span {
        color: var(--vp-muted, #62756e);
        font-size: 11px;
        font-weight: 750;
        line-height: 1.35;
    }

    /* Les illustrations hero métier restent desktop : sur mobile, priorité au message et au CTA. */
    body.vp-commercial-page .trade-circuit-hero .circuit-board,
    body.vp-commercial-page .trade-dispatch-hero .dispatch-console,
    body.vp-commercial-page .trade-portfolio-hero .portfolio-collage,
    body.vp-commercial-page .trade-case-hero .case-before-after,
    body.vp-commercial-page .trade-workshop-hero .workshop-stamp {
        display: none !important;
    }

    body.vp-commercial-page .trade-circuit-hero,
    body.vp-commercial-page .trade-dispatch-hero,
    body.vp-commercial-page .trade-portfolio-hero,
    body.vp-commercial-page .trade-case-hero,
    body.vp-commercial-page .trade-workshop-hero {
        min-height: 0;
        padding-block: 24px 28px;
    }

    body.vp-commercial-page .trade-circuit-hero .vp-container,
    body.vp-commercial-page .trade-dispatch-hero .vp-container,
    body.vp-commercial-page .trade-portfolio-hero .vp-container,
    body.vp-commercial-page .trade-case-hero .vp-container,
    body.vp-commercial-page .trade-workshop-hero .vp-container {
        display: block;
    }

    body.vp-commercial-page .trade-circuit-hero h1,
    body.vp-commercial-page .trade-dispatch-hero h1,
    body.vp-commercial-page .trade-portfolio-hero h1,
    body.vp-commercial-page .trade-case-hero h1,
    body.vp-commercial-page .trade-workshop-hero h1 {
        max-width: 13ch;
        font-size: clamp(34px, 10.3vw, 44px);
        line-height: .98;
        letter-spacing: -.045em;
    }

    body.vp-commercial-page .trade-circuit-hero h1 + p,
    body.vp-commercial-page .trade-dispatch-hero h1 + p,
    body.vp-commercial-page .trade-portfolio-hero h1 + p,
    body.vp-commercial-page .trade-case-hero h1 + p,
    body.vp-commercial-page .trade-workshop-hero h1 + p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.48;
    }

    body.vp-commercial-page .trade-circuit-hero .vp-hero__actions,
    body.vp-commercial-page .trade-dispatch-hero .vp-hero__actions,
    body.vp-commercial-page .trade-portfolio-hero .vp-hero__actions,
    body.vp-commercial-page .trade-case-hero .vp-hero__actions,
    body.vp-commercial-page .trade-workshop-hero .vp-hero__actions {
        margin-top: 14px;
    }

    html[data-theme="dark"] body.vp-commercial-page .vp-mobile-offer-summary {
        border-color: rgba(185, 220, 201, .2);
        background: rgba(255, 255, 255, .045);
    }

    html[data-theme="dark"] body.vp-commercial-page .vp-mobile-offer-summary strong {
        color: #f2fff0;
    }

    html[data-theme="dark"] body.vp-commercial-page .vp-mobile-offer-summary span {
        color: #b9d0c0;
    }
}

/* V5 Core Web Vitals: commercial sections below the first conversion block
   are rendered on demand on small screens. */
@media (max-width: 767px) {
    body.vp-commercial-page main > section:not(.vp-commercial-hero):not(.vp-section--form):not(.vp-mobile-pricing-summary) {
        content-visibility: auto;
        contain-intrinsic-size: auto 620px;
    }
}