/* Artisan showcase aligned with the WebpackPro design system. */
.vp-artisan-showcase {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--vp-line);
    background:
        radial-gradient(circle at 10% 15%, rgba(47, 107, 86, .07), transparent 26%),
        radial-gradient(circle at 92% 78%, rgba(189, 104, 72, .06), transparent 24%),
        var(--vp-paper-warm);
    color: var(--vp-text);
}
.vp-artisan-showcase::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(47, 107, 86, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 107, 86, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    content: "";
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
}
.vp-artisan-showcase .vp-container { position: relative; }
.vp-artisan-showcase__heading { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.vp-artisan-showcase__heading .vp-kicker { color: var(--vp-green); }
.vp-artisan-showcase__heading h2 {
    margin: 12px 0 16px;
    color: var(--vp-ink-deep);
    font-size: clamp(38px, 4.6vw, 64px);
    line-height: .98;
    letter-spacing: -.045em;
}
.vp-artisan-showcase__heading > p:last-child {
    max-width: 720px;
    margin: 0 auto;
    color: var(--vp-muted);
    font-size: 17px;
    line-height: 1.65;
}

.vp-artisan-desktop { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.vp-artisan-goals { display: grid; gap: 10px; align-content: start; }
.vp-artisan-goal {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    width: 100%;
    padding: 17px;
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius-md);
    background: color-mix(in srgb, var(--vp-white) 94%, var(--vp-green-soft));
    color: var(--vp-text);
    box-shadow: 0 7px 22px rgba(23, 59, 50, .045);
    text-align: left;
    cursor: pointer;
    transition: border-color .22s ease, transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.vp-artisan-goal:hover { transform: translateX(3px); border-color: var(--vp-sage); box-shadow: var(--vp-shadow-small); }
.vp-artisan-goal:focus-visible { outline: 3px solid var(--vp-clay); outline-offset: 3px; }
.vp-artisan-goal.is-active {
    border-color: var(--vp-green);
    background: var(--vp-green-soft);
    box-shadow: 0 14px 34px rgba(47, 107, 86, .13);
}
.vp-artisan-goal__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--vp-green) 25%, var(--vp-line));
    border-radius: 12px;
    background: var(--vp-white);
    color: var(--vp-green-strong);
    font-size: 18px;
}
.vp-artisan-goal.is-active .vp-artisan-goal__icon { border-color: var(--vp-green); background: var(--vp-green); color: #fff; }
.vp-artisan-goal strong, .vp-artisan-goal small { display: block; }
.vp-artisan-goal strong { color: var(--vp-ink-deep); font-size: 13px; line-height: 1.25; text-transform: uppercase; letter-spacing: .025em; }
.vp-artisan-goal small { margin-top: 5px; color: var(--vp-muted); font-size: 12px; line-height: 1.38; }

.vp-artisan-stage { position: relative; min-height: 570px; }
.vp-artisan-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .65fr);
    gap: 28px;
    min-height: 570px;
    padding: 26px;
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius-lg);
    background: var(--vp-white);
    box-shadow: var(--vp-shadow);
}
.vp-artisan-desktop.is-enhanced .vp-artisan-panel:not(.is-active) { display: none; }
.vp-artisan-panel__preview {
    position: relative;
    display: grid;
    align-items: center;
    min-width: 0;
    padding: 25px 50px 25px 18px;
    border: 1px solid color-mix(in srgb, var(--trade-accent) 18%, var(--vp-line));
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--trade-accent) 12%, transparent), transparent 48%),
        color-mix(in srgb, var(--vp-paper-warm) 76%, var(--vp-white));
    overflow: hidden;
}
.vp-browser-frame {
    overflow: hidden;
    border: 1px solid var(--vp-line-strong);
    border-radius: 14px;
    background: var(--vp-white);
    box-shadow: 0 24px 46px rgba(23, 59, 50, .18);
    transform: perspective(1100px) rotateY(1deg);
}
.vp-browser-frame__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--vp-line); background: var(--vp-paper); }
.vp-browser-frame__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--vp-line-strong); }
.vp-browser-frame__bar i:first-child { background: #dd8265; }
.vp-browser-frame__bar i:nth-child(2) { background: #dfb85f; }
.vp-browser-frame__bar i:nth-child(3) { background: #75ad89; }
.vp-browser-frame__bar span { overflow: hidden; margin-left: 7px; color: var(--vp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.vp-browser-frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vp-phone-frame {
    position: absolute;
    right: 12px;
    bottom: 38px;
    width: 26%;
    min-width: 105px;
    max-width: 152px;
    padding: 8px 6px 12px;
    border: 2px solid var(--vp-ink-deep);
    border-radius: 25px;
    background: var(--vp-ink-deep);
    box-shadow: 0 22px 38px rgba(23, 59, 50, .26);
}
.vp-phone-frame__speaker { width: 34%; height: 4px; margin: 1px auto 7px; border-radius: 20px; background: color-mix(in srgb, var(--vp-white) 30%, transparent); }
.vp-phone-frame img { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 17px; object-fit: cover; }

.vp-artisan-panel__copy { align-self: center; }
.vp-artisan-panel__eyebrow { margin: 0 0 10px; color: color-mix(in srgb, var(--trade-accent) 60%, var(--vp-ink-deep)); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vp-artisan-panel__copy h3 { margin: 0; color: var(--vp-ink-deep); font-family: var(--vp-display); font-size: clamp(28px, 3vw, 42px); line-height: 1; }
.vp-artisan-panel__copy > p:not(.vp-artisan-panel__eyebrow) { margin: 16px 0 24px; color: var(--vp-muted); font-size: 15px; line-height: 1.62; }
.vp-artisan-panel__copy ul { display: grid; gap: 13px; margin: 0 0 28px; padding: 0; list-style: none; }
.vp-artisan-panel__copy li { position: relative; padding-left: 29px; color: var(--vp-text); font-size: 14px; line-height: 1.35; }
.vp-artisan-panel__copy li::before {
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--trade-accent) 38%, var(--vp-line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--trade-accent) 10%, var(--vp-white));
    color: color-mix(in srgb, var(--trade-accent) 66%, var(--vp-ink-deep));
    content: "✓";
    font-size: 11px;
    font-weight: 900;
}
.vp-artisan-panel .vp-button { width: 100%; justify-content: center; background: var(--vp-clay-action); color: #fff; box-shadow: 0 12px 25px rgba(178, 89, 60, .22); }
.vp-artisan-panel .vp-button:hover { background: #9f4d34; box-shadow: 0 15px 30px rgba(178, 89, 60, .3); }
.vp-artisan-mobile { display: none; }

.vp-artisan-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 22px;
    padding: 25px 28px;
    border: 1px solid var(--vp-line-strong);
    border-radius: var(--vp-radius-lg);
    background: color-mix(in srgb, var(--vp-green-soft) 62%, var(--vp-white));
    box-shadow: var(--vp-shadow-small);
}
.vp-artisan-custom > div { display: flex; align-items: center; gap: 18px; }
.vp-artisan-custom__icon { display: grid; flex: 0 0 auto; width: 54px; height: 54px; place-items: center; border: 1px solid var(--vp-sage); border-radius: 16px; background: var(--vp-white); color: var(--vp-green-strong); font-family: var(--vp-display); font-size: 24px; }
.vp-artisan-custom h3 { margin: 0 0 5px; color: var(--vp-ink-deep); font-size: 22px; }
.vp-artisan-custom p { max-width: 670px; margin: 0; color: var(--vp-muted); font-size: 14px; line-height: 1.5; }
.vp-artisan-custom .vp-button { flex: 0 0 auto; }

html[data-theme="dark"] .vp-artisan-showcase {
    background:
        radial-gradient(circle at 12% 18%, rgba(120, 196, 160, .08), transparent 27%),
        radial-gradient(circle at 90% 76%, rgba(239, 155, 120, .07), transparent 24%),
        var(--vp-paper-warm);
}
html[data-theme="dark"] .vp-artisan-showcase::before { opacity: .48; }
html[data-theme="dark"] .vp-artisan-goal,
html[data-theme="dark"] .vp-artisan-panel,
html[data-theme="dark"] .vp-browser-frame,
html[data-theme="dark"] .vp-artisan-mobile-card { background: var(--vp-white); }
html[data-theme="dark"] .vp-artisan-goal.is-active { background: var(--vp-green-soft); }
html[data-theme="dark"] .vp-artisan-panel__preview { background: color-mix(in srgb, var(--vp-paper) 84%, var(--vp-green-soft)); }
html[data-theme="dark"] .vp-browser-frame__bar { background: var(--vp-paper); }
html[data-theme="dark"] .vp-artisan-panel .vp-button { color: #fff; }

@media (max-width: 1050px) and (min-width: 768px) {
    .vp-artisan-desktop { grid-template-columns: 250px minmax(0, 1fr); }
    .vp-artisan-panel { grid-template-columns: 1fr; padding: 20px; }
    .vp-artisan-panel__preview { min-height: 310px; }
    .vp-artisan-panel__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
    .vp-artisan-panel__copy .vp-button { align-self: end; }
    .vp-artisan-stage, .vp-artisan-panel { min-height: 740px; }
}

@media (max-width: 767px) {
    .vp-artisan-showcase { padding-top: 58px; padding-bottom: 58px; }
    .vp-artisan-showcase__heading { margin-bottom: 28px; text-align: left; }
    .vp-artisan-showcase__heading h2 { font-size: clamp(34px, 9.6vw, 43px); }
    .vp-artisan-showcase__heading > p:last-child { font-size: 15px; }
    .vp-artisan-desktop { display: none; }
    .vp-artisan-mobile { display: grid; gap: 14px; }
    .vp-artisan-mobile-card {
        position: relative;
        overflow: hidden;
        display: block;
        border: 1px solid var(--vp-line);
        border-radius: 19px;
        background: var(--vp-white);
        color: var(--vp-text);
        text-decoration: none;
        box-shadow: var(--vp-shadow-small);
    }
    .vp-artisan-mobile-card__goal {
        position: absolute;
        z-index: 2;
        top: 12px;
        left: 12px;
        max-width: calc(100% - 24px);
        padding: 7px 10px;
        border: 1px solid color-mix(in srgb, var(--trade-accent) 28%, var(--vp-line));
        border-radius: 999px;
        background: color-mix(in srgb, var(--trade-accent) 10%, var(--vp-white));
        color: var(--vp-ink-deep);
        box-shadow: 0 6px 16px rgba(23, 59, 50, .09);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .045em;
        text-transform: uppercase;
    }
    .vp-artisan-mobile-card__image { height: 185px; overflow: hidden; border-bottom: 1px solid var(--vp-line); }
    .vp-artisan-mobile-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
    .vp-artisan-mobile-card__body { padding: 18px; }
    .vp-artisan-mobile-card h3 { margin: 0; color: var(--vp-ink-deep); font-size: 22px; }
    .vp-artisan-mobile-card p { margin: 8px 0 15px; color: var(--vp-muted); font-size: 13px; line-height: 1.45; }
    .vp-artisan-mobile-card__body > span { color: var(--vp-clay-action); font-size: 13px; font-weight: 900; }
    .js-mobile-first .vp-artisan-mobile-card:nth-child(n + 4):not(.is-mobile-expanded) { display: none; }
    .vp-artisan-custom { align-items: flex-start; flex-direction: column; padding: 22px; }
    .vp-artisan-custom > div { align-items: flex-start; }
    .vp-artisan-custom__icon { width: 46px; height: 46px; }
    .vp-artisan-custom h3 { font-size: 21px; }
    .vp-artisan-custom .vp-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-artisan-goal,
    .vp-artisan-mobile-card__image img { transition: none; }
}

/* Step 20 — Mobile previews show a real mini website, not a cropped photo. */
.vp-phone-site {
    overflow: hidden;
    min-height: 250px;
    border-radius: 17px;
    background: #f7faf8;
    color: #132b25;
    font-family: var(--vp-sans);
}
.vp-phone-site__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-height: 28px;
    padding: 7px 8px;
    background: #fff;
    color: #173b32;
    font-size: 7px;
}
.vp-phone-site__top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-phone-site__top span { font-size: 9px; }
.vp-phone-site__hero { display: grid; gap: 6px; padding: 10px 8px 8px; }
.vp-phone-site__hero small {
    color: var(--phone-accent, #2479d8);
    font-size: 5.5px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.vp-phone-site__hero > strong { min-height: 31px; color: #10231e; font-size: 11px; line-height: 1.08; }
.vp-phone-site__hero img {
    width: 100%;
    height: 86px;
    aspect-ratio: auto;
    border-radius: 7px;
    object-fit: cover;
}
.vp-phone-site__cta {
    display: grid;
    min-height: 24px;
    place-items: center;
    border-radius: 6px;
    background: var(--phone-accent, #2479d8);
    color: var(--phone-cta-text, #fff);
    font-size: 6px;
    font-weight: 900;
    text-align: center;
}
.vp-phone-site__proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 0 8px 9px;
}
.vp-phone-site__proof span {
    padding: 5px 2px;
    border: 1px solid rgba(24, 71, 59, .12);
    border-radius: 5px;
    background: #fff;
    color: #31554b;
    font-size: 4.8px;
    font-weight: 800;
    text-align: center;
}
.vp-phone-site--aquatech { --phone-accent: #176dc5; }
.vp-phone-site--renov { --phone-accent: #a45a2a; }
.vp-phone-site--voltis { --phone-accent: #f4c515; --phone-cta-text: #10130f; background: #111a20; }
.vp-phone-site--voltis .vp-phone-site__top,
.vp-phone-site--voltis .vp-phone-site__proof span { background: #16232b; color: #fff; }
.vp-phone-site--voltis .vp-phone-site__hero > strong { color: #fff; }
.vp-phone-site--voltis .vp-phone-site__proof span { border-color: rgba(255,255,255,.12); }
.vp-phone-site--naturia { --phone-accent: #397f36; }
.vp-phone-site--moreau { --phone-accent: #6f4c31; }

html[data-theme="dark"] .vp-artisan-panel .vp-button {
    color: #07110e;
}

/* Étape 21 — aperçus fidèles aux démonstrations métiers */
.vp-demo-site {
    --demo-accent: var(--trade-accent);
    --demo-ink: #13231f;
    --demo-surface: #ffffff;
    display: grid;
    grid-template-rows: 34px auto minmax(250px, 1fr) auto;
    min-height: 365px;
    color: var(--demo-ink);
}
.vp-demo-site .vp-browser-frame__bar { grid-row: 1; }
.vp-demo-site__nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 48px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(15, 35, 29, .1);
    background: var(--demo-surface);
}
.vp-demo-site__nav strong {
    color: var(--demo-ink);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.vp-demo-site__nav strong em { color: var(--demo-accent); font-style: normal; }
.vp-demo-site__nav > span {
    overflow: hidden;
    color: color-mix(in srgb, var(--demo-ink) 72%, transparent);
    font-size: 7px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-demo-site__nav > b,
.vp-demo-site__copy div > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--demo-accent);
    color: #fff;
    font-size: 7px;
    white-space: nowrap;
}
.vp-demo-site__hero {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    min-height: 250px;
    background: var(--demo-surface);
}
.vp-demo-site__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 24px 18px 22px;
}
.vp-demo-site__copy small {
    margin-bottom: 10px;
    color: var(--demo-accent);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.vp-demo-site__copy > strong {
    max-width: 15ch;
    color: var(--demo-ink);
    font-family: var(--vp-display);
    font-size: clamp(20px, 2vw, 31px);
    line-height: .98;
}
.vp-demo-site__copy mark { background: transparent; color: var(--demo-accent); }
.vp-demo-site__copy p {
    max-width: 32ch;
    margin: 13px 0 16px;
    color: color-mix(in srgb, var(--demo-ink) 72%, transparent);
    font-size: 9px;
    line-height: 1.45;
}
.vp-demo-site__copy div { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.vp-demo-site__copy div > span {
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--demo-ink) 15%, transparent);
    border-radius: 999px;
    color: var(--demo-ink);
    font-size: 7px;
    font-weight: 700;
}
.vp-demo-site__hero > img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
}
.vp-demo-site__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    padding: 10px 12px;
    border-top: 1px solid rgba(15, 35, 29, .1);
    background: color-mix(in srgb, var(--demo-accent) 6%, var(--demo-surface));
}
.vp-demo-site__trust span {
    position: relative;
    padding-left: 14px;
    color: color-mix(in srgb, var(--demo-ink) 76%, transparent);
    font-size: 7px;
    font-weight: 700;
    text-align: center;
}
.vp-demo-site__trust span::before {
    position: absolute;
    left: 3px;
    color: var(--demo-accent);
    content: "✓";
}

.vp-demo-site--aquatech { --demo-accent: #0789d8; --demo-ink: #0f2741; --demo-surface: #f8fcff; }
.vp-demo-site--renov { --demo-accent: #b75b2d; --demo-ink: #2e251f; --demo-surface: #fffaf5; }
.vp-demo-site--voltis { --demo-accent: #ffc400; --demo-ink: #f6f7f8; --demo-surface: #111318; }
.vp-demo-site--voltis .vp-browser-frame__bar { background: #181b21; border-color: rgba(255,255,255,.12); }
.vp-demo-site--voltis .vp-demo-site__nav,
.vp-demo-site--voltis .vp-demo-site__hero { border-color: rgba(255,255,255,.12); }
.vp-demo-site--voltis .vp-demo-site__nav > b,
.vp-demo-site--voltis .vp-demo-site__copy div > b { color: #111318; }
.vp-demo-site--voltis .vp-demo-site__copy div > span { border-color: rgba(255,255,255,.22); }
.vp-demo-site--voltis .vp-demo-site__trust { border-color: rgba(255,255,255,.12); }
.vp-demo-site--naturia { --demo-accent: #397d3b; --demo-ink: #18331d; --demo-surface: #f8fcf5; }
.vp-demo-site--moreau { --demo-accent: #80573c; --demo-ink: #35251b; --demo-surface: #fffaf4; }

html[data-theme="dark"] .vp-artisan-panel .vp-button {
    color: #07110e;
}

@media (max-width: 1050px) and (min-width: 768px) {
    .vp-demo-site { min-height: 340px; }
    .vp-demo-site__hero { min-height: 225px; }
    .vp-demo-site__hero > img { min-height: 225px; }
    .vp-demo-site__nav > span { display: none; }
    .vp-demo-site__nav { grid-template-columns: 1fr auto; }
}