/*
 * Vitrine (SPEC §19.4, refonte D-201) : écrite pour 360 px, @media en min-width uniquement (600 / 960 px),
 * propriétés logiques (RTL). Complète le kit d'interface Harissa (assets/ui) sans le modifier :
 * toutes les couleurs viennent des tokens --ui-*. Aucun JavaScript propre (ui.js gère la feuille de menu).
 */
.vt { --vt-gutter: var(--ui-space-5); --vt-radius-xl: 28px; --vt-shadow-device: 0 28px 48px -16px rgb(26 23 21 / 0.4); }
.vt-skip { position: absolute; inset-inline-start: var(--ui-space-3); inset-block-start: -80px; z-index: 60; padding: var(--ui-space-3) var(--ui-space-4); background: var(--ui-surface); border-radius: var(--ui-radius-input); }
.vt-skip:focus { inset-block-start: var(--ui-space-3); }
.vt h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; }
.vt h1 { letter-spacing: -0.03em; }
[dir="rtl"] .vt h1, [dir="rtl"] .vt h2 { letter-spacing: 0; }
.vt-ico { flex-shrink: 0; }
[dir="rtl"] .vt-ico--flip { transform: scaleX(-1); }
[id] { scroll-margin-block-start: 88px; }

/* ---------- En-tête ---------- */
.vt-header { position: sticky; inset-block-start: 0; z-index: 30; min-block-size: 64px; justify-content: space-between; }
.vt-nav { display: none; }
.vt-header-end { display: flex; align-items: center; }
.vt-header .ui-brand { font-size: 17px; gap: 6px; }
.vt-header .ui-brand svg { inline-size: 28px; block-size: 28px; }
.vt-header-end { gap: var(--ui-space-1); }
.vt-lang { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--ui-touch-min); min-inline-size: var(--ui-touch-min); justify-content: center; padding-inline: var(--ui-space-2); font-size: 14px; font-weight: 600; color: var(--ui-text); text-decoration: none; border: 1px solid transparent; border-radius: var(--ui-radius-button); }
.vt-lang .vt-ico { display: none; }
.vt-lang:hover { border-color: var(--ui-text); }
.vt-login, .vt-header-cta { display: none; }
.vt-menu { max-inline-size: 100%; }
.vt-menu-links { display: flex; flex-direction: column; }
.vt-menu-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-block-size: 56px; font-size: 18px; font-weight: 600; color: var(--ui-text); text-decoration: none; border-block-end: 1px solid var(--ui-border); }
.vt-menu-links a[aria-current="page"] { color: var(--ui-action); }
.vt-menu-links .vt-ico { color: var(--ui-text-muted); }
.vt-menu-actions { display: grid; gap: var(--ui-space-3); margin-block-start: var(--ui-space-5); }

/* ---------- Mise en page, typographie ---------- */
.vt-main { flex-grow: 1; }
.vt-wrap { inline-size: 100%; max-inline-size: 1160px; margin-inline: auto; padding-inline: var(--vt-gutter); }
.vt-narrow { max-inline-size: 800px; }
.vt-section { padding-block: 56px; }
.vt-section--flush { padding-block-start: 0; }
.vt-section--tint { background: var(--ui-neutral-100); }
.vt-head { display: flex; flex-direction: column; gap: var(--ui-space-3); max-inline-size: 680px; margin-block-end: var(--ui-space-8); }
.vt-head--center { text-align: center; align-items: center; margin-inline: auto; }
.vt-head--split { max-inline-size: none; }
.vt-head--split > div { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.vt-head--split .vt-lead { max-inline-size: 620px; }
.vt-head--split .ui-btn { align-self: flex-start; }
.vt-eyebrow { font-size: 13px; line-height: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ui-action); }
[dir="rtl"] .vt-eyebrow { font-size: 14px; text-transform: none; letter-spacing: 0; }
.vt-lead { font-size: 18px; line-height: 28px; color: var(--ui-text-muted); }
.vt-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); }
.vt-btn-lg { min-block-size: var(--ui-cta); padding-inline: var(--ui-space-6); font-size: 16px; }
.vt-btn-light { background: transparent; color: var(--ui-neutral-0); border-color: var(--ui-neutral-500); }
.vt-btn-light:hover { background: var(--ui-neutral-800); border-color: var(--ui-neutral-0); }
.vt-link { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--ui-touch-min); font-weight: 600; color: var(--ui-action); text-decoration: none; }
.vt-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.vt-center { text-align: center; margin-block-start: var(--ui-space-6); }
.vt-strong { font-weight: 600; }
.vt-badge-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--ui-harissa-50); color: var(--ui-action); }
.vt-badge-ico--ok { background: var(--ui-success-soft); color: var(--ui-success); }
.vt-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vt-checks li { display: flex; gap: 10px; align-items: flex-start; }
.vt-checks .vt-ico { color: var(--ui-success); margin-block-start: 2px; }
.vt-page-head { padding-block: 40px 32px; }
.vt-page-head .vt-wrap { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.vt-page-head h1 { font-size: 34px; line-height: 40px; }
.vt-page-head .vt-lead { max-inline-size: 640px; }

/* ---------- Téléphone : aperçu réel d'un thème ---------- */
.vt-device { inline-size: 220px; padding: 7px; background: var(--ui-neutral-900); border-radius: 34px; box-shadow: var(--vt-shadow-device); }
.vt-device img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 390 / 844; border-radius: 27px; object-fit: cover; object-position: top; }

/* ---------- Accueil : hero ---------- */
.vt-hero { position: relative; overflow: hidden; padding-block: var(--ui-space-8) var(--ui-space-12); background: radial-gradient(ellipse 80% 60% at 90% 0%, var(--ui-harissa-100), transparent 70%), var(--ui-bg); }
[dir="rtl"] .vt-hero { background: radial-gradient(ellipse 80% 60% at 10% 0%, var(--ui-harissa-100), transparent 70%), var(--ui-bg); }
.vt-hero-grid { display: grid; gap: var(--ui-space-10); align-items: center; }
.vt-hero-text { display: flex; flex-direction: column; gap: var(--ui-space-5); }
.vt-hero h1 { font-size: 35px; line-height: 40px; }
.vt-hero h1 em { display: block; font-style: normal; color: var(--ui-action); }
.vt-hero .vt-actions .ui-btn { flex-grow: 1; }
.vt-reassure { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-5); font-size: 14px; font-weight: 500; color: var(--ui-text-muted); }
.vt-reassure li { display: inline-flex; align-items: center; gap: 6px; }
.vt-reassure .vt-ico { color: var(--ui-success); }
.vt-hero-visual { position: relative; display: flex; justify-content: center; padding-block-end: var(--ui-space-4); }
.vt-device--front { position: relative; z-index: 2; inline-size: 236px; }
.vt-device--back { display: none; }
.vt-scan { position: absolute; z-index: 3; inset-inline-start: 0; inset-block-end: 0; display: flex; align-items: center; gap: var(--ui-space-3); max-inline-size: 210px; padding: var(--ui-space-3); background: var(--ui-surface); border-radius: 18px; box-shadow: var(--ui-shadow-card), 0 12px 24px -8px rgb(26 23 21 / 0.18); }
.vt-scan p { display: flex; flex-direction: column; font-size: 14px; line-height: 18px; }
.vt-scan span { color: var(--ui-text-muted); font-size: 13px; }
.vt-qr-glyph { flex-shrink: 0; inline-size: 44px; block-size: 44px; color: var(--ui-neutral-900); }

/* ---------- Accueil : types d'établissement ---------- */
.vt-venues { padding-block: var(--ui-space-6); border-block: 1px solid var(--ui-border); background: var(--ui-surface); }
.vt-venues .vt-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); }
.vt.vt .vt-venues-title { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-text-muted); }
[dir="rtl"] .vt.vt .vt-venues-title { font-size: 14px; letter-spacing: 0; }
.vt-venues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2); }
.vt-venues li { padding: 6px 14px; font-weight: 600; font-size: 15px; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-button); }

/* ---------- Accueil : étapes ---------- */
.vt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-3); counter-reset: none; }
.vt-steps li { display: flex; flex-direction: column; gap: var(--ui-space-2); padding: var(--ui-space-6); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); }
.vt-step-n { font-size: 36px; line-height: 40px; font-weight: 800; color: var(--ui-action); margin-block-end: var(--ui-space-2); }
.vt-steps h3 { font-size: 20px; line-height: 26px; font-weight: 700; }
.vt-steps p { color: var(--ui-text-muted); }

/* ---------- Rangées produit (accueil, fonctionnalités) ---------- */
.vt-rows { display: grid; gap: var(--ui-space-12); }
.vt-row { display: grid; gap: var(--ui-space-6); align-items: center; }
.vt-row-text { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.vt.vt .vt-row-text h2, .vt-row-text h3 { font-size: 24px; line-height: 30px; font-weight: 800; }
.vt-row-text > p { color: var(--ui-text-muted); }
.vt-row-text .vt-checks { margin-block-start: var(--ui-space-2); }
.vt-panel { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: var(--ui-space-4); min-block-size: 320px; padding: var(--ui-space-8) var(--ui-space-4) 0; overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--vt-radius-xl); }
.vt-panel .vt-device, .vt-example-shot .vt-device { inline-size: 210px; block-size: 300px; padding-block-end: 0; border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: 0 -8px 32px -12px rgb(26 23 21 / 0.25); }
.vt-panel .vt-device img, .vt-example-shot .vt-device img { block-size: 100%; aspect-ratio: auto; border-end-start-radius: 0; border-end-end-radius: 0; }
.vt-panel--qr { align-items: center; padding: var(--ui-space-8) var(--ui-space-4); background: var(--ui-action); border-color: var(--ui-action); }
.vt-tent { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); inline-size: 220px; padding: var(--ui-space-6); text-align: center; background: var(--ui-surface); border-radius: var(--ui-radius-card); box-shadow: 0 24px 40px -16px rgb(26 23 21 / 0.45); }
.vt-tent-brand { direction: ltr; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.vt-tent-brand b { color: var(--ui-action); }
.vt-tent-qr { inline-size: 132px; block-size: 132px; color: var(--ui-neutral-900); }
.vt-tent strong { font-size: 15px; line-height: 20px; }
.vt-tent-langs { font-size: 13px; color: var(--ui-text-muted); }
.vt-panel--duo .vt-device { inline-size: 150px; block-size: 260px; }
.vt-panel--duo .vt-device + .vt-device { margin-block-start: var(--ui-space-8); }
.vt-swatches { position: absolute; inset-inline-end: var(--ui-space-5); inset-block-start: var(--ui-space-6); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vt-swatches li { inline-size: 30px; block-size: 30px; border-radius: 50%; border: 3px solid var(--ui-surface); box-shadow: var(--ui-shadow-card); background: var(--ui-action); }
.vt-swatches li:nth-child(2) { background: var(--ui-saffron-500); }
.vt-swatches li:nth-child(3) { background: var(--ui-success); }
.vt-swatches li:nth-child(4) { background: var(--ui-neutral-900); }
.vt-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-6); }
.vt-mini li { display: flex; gap: var(--ui-space-4); align-items: flex-start; }
.vt-mini h3 { font-size: 18px; line-height: 24px; font-weight: 700; margin-block-end: var(--ui-space-1); }
.vt-mini p { color: var(--ui-text-muted); }

/* ---------- Thèmes / cas d'utilisation : défilement horizontal interne sur mobile ---------- */
.vt-themes { list-style: none; margin: 0 calc(-1 * var(--vt-gutter)); padding: 0 var(--vt-gutter) var(--ui-space-2); display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: var(--ui-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vt-gutter); scrollbar-width: thin; }
.vt-themes li { scroll-snap-align: start; }
.vt-theme-card { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; border-radius: var(--ui-radius-card); }
.vt-theme-card:focus-visible { outline: 2px solid var(--ui-action); outline-offset: 4px; }
.vt-theme-card:hover strong { color: var(--ui-action); }
.vt-theme-shot { display: flex; justify-content: center; overflow: hidden; padding: var(--ui-space-6) var(--ui-space-4) 0; background: var(--ui-neutral-100); border-radius: var(--ui-radius-card); margin-block-end: var(--ui-space-3); }
.vt-theme-shot .vt-device { inline-size: 100%; max-inline-size: 230px; block-size: 330px; padding-block-end: 0; border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: 0 -8px 28px -12px rgb(26 23 21 / 0.3); }
.vt-theme-shot .vt-device img { block-size: 100%; aspect-ratio: auto; border-end-start-radius: 0; border-end-end-radius: 0; }
.vt-theme-meta { font-size: 14px; line-height: 20px; color: var(--ui-text-muted); }
.vt-theme-for { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-text-muted); }
.vt-themes strong { font-size: 18px; line-height: 24px; }

/* ---------- Tarifs ---------- */
.vt-plans { display: grid; gap: var(--ui-space-4); max-inline-size: 880px; margin-inline: auto; }
.vt-plan { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-8) var(--ui-space-6); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sheet); }
.vt.vt .vt-plan-name { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: 0; }
.vt-plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }
.vt-price { font-size: 16px; color: var(--ui-text-muted); }
.vt-price b { font-size: 40px; line-height: 46px; color: var(--ui-text); font-weight: 800; letter-spacing: -0.02em; }
.vt-price-text { font-size: 28px; line-height: 46px; font-weight: 800; }
.vt-plan-text { font-size: 15px; line-height: 22px; color: var(--ui-text-muted); }
.vt-plan .vt-checks { flex-grow: 1; padding-block: var(--ui-space-3); border-block-start: 1px solid var(--ui-border); }
.vt-plan-cta { inline-size: 100%; min-block-size: 52px; }
.vt-plan--premium { background: var(--ui-neutral-900); border-color: var(--ui-neutral-900); color: var(--ui-neutral-0); box-shadow: var(--vt-shadow-device); }
.vt-plan--premium .vt-price b, .vt-plan--premium .vt-price-text { color: var(--ui-neutral-0); }
.vt-plan--premium .vt-price, .vt-plan--premium .vt-plan-text { color: var(--ui-neutral-300); }
.vt-plan--premium .vt-checks { border-color: var(--ui-neutral-700); }
.vt-plan--premium .vt-checks .vt-ico { color: var(--ui-saffron-500); }
.vt-plan--premium .ui-pill { background: var(--ui-saffron-500); color: var(--ui-neutral-900); }
.vt-switch { max-inline-size: 320px; margin: 0 auto var(--ui-space-6); }
.vt-period .ui-tabs label { cursor: pointer; }
#period-monthly:checked ~ .ui-tabs label[for="period-monthly"],
#period-yearly:checked ~ .ui-tabs label[for="period-yearly"] { background: var(--ui-surface); color: var(--ui-text); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
#period-monthly:focus-visible ~ .ui-tabs label[for="period-monthly"],
#period-yearly:focus-visible ~ .ui-tabs label[for="period-yearly"] { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
.vt-period-yearly { display: none; }
#period-yearly:checked ~ .vt-period-monthly { display: none; }
#period-yearly:checked ~ .vt-period-yearly { display: block; }
.vt-compare th, .vt-compare td { padding-inline: 10px; text-align: center; vertical-align: middle; }
.vt-compare th[scope="row"] { text-align: start; font-weight: 500; color: var(--ui-text); font-size: 14px; line-height: 20px; background: var(--ui-surface); }
.vt-compare thead .vt-compare-hi { color: var(--ui-action); }
.vt-compare tbody tr:last-child > * { border-block-end: 0; }
.vt-yes { display: inline-flex; color: var(--ui-success); }
.vt-no { color: var(--ui-neutral-400); }

/* ---------- Encarts sombres, appel final ---------- */
.vt-callout { display: flex; flex-direction: column; gap: var(--ui-space-5); padding: var(--ui-space-8) var(--ui-space-6); background: var(--ui-neutral-900); color: var(--ui-neutral-0); border-radius: var(--vt-radius-xl); }
.vt-callout h2 { color: inherit; margin-block-end: var(--ui-space-2); }
.vt.vt .vt-callout h2 { font-size: 24px; line-height: 30px; }
.vt-callout p { color: var(--ui-neutral-300); }
.vt-callout--soft { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); }
.vt-callout--soft p { color: var(--ui-text-muted); }
.vt-section--final { padding-block: var(--ui-space-6) 56px; }
.vt-final { display: flex; flex-direction: column; gap: var(--ui-space-6); padding: var(--ui-space-10) var(--ui-space-6); text-align: center; color: var(--ui-neutral-0); background: radial-gradient(ellipse 70% 80% at 100% 100%, var(--ui-harissa-800), transparent 70%), var(--ui-neutral-900); border-radius: var(--vt-radius-xl); }
.vt.vt .vt-final h2 { color: inherit; font-size: 30px; line-height: 36px; }
.vt-final p { margin-block-start: var(--ui-space-3); font-size: 18px; line-height: 28px; color: var(--ui-neutral-300); }
.vt-final .vt-actions { flex-direction: column; }

/* ---------- FAQ ---------- */
.vt-faqs { display: flex; flex-direction: column; gap: 10px; }
.vt-faq { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; }
.vt-faq[open] { border-color: var(--ui-neutral-300); }
.vt-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-block-size: 56px; padding: var(--ui-space-4) var(--ui-space-5); font-weight: 600; cursor: pointer; list-style: none; }
.vt-faq summary::-webkit-details-marker { display: none; }
.vt-faq summary .vt-ico { color: var(--ui-text-muted); transition: transform 0.2s ease; }
.vt-faq[open] summary .vt-ico { transform: rotate(180deg); color: var(--ui-action); }
.vt-faq summary:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; border-radius: 16px; }
.vt-faq p { padding: 0 var(--ui-space-5) var(--ui-space-5); color: var(--ui-text-muted); }
.vt-faq-layout { display: grid; gap: var(--ui-space-8); }
.vt-kicker { flex-basis: 100%; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-text-muted); }
[dir="rtl"] .vt-kicker { font-size: 14px; letter-spacing: 0; }
.vt-toc { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.vt-toc a { display: inline-flex; align-items: center; min-block-size: var(--ui-touch-min); padding-inline: var(--ui-space-4); font-weight: 600; color: var(--ui-text); text-decoration: none; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-button); }
.vt-toc a:hover { border-color: var(--ui-text); }
.vt.vt .vt-faq-group { font-size: 22px; line-height: 28px; margin-block-end: var(--ui-space-4); }
.vt-faq-section + .vt-faq-section { margin-block-start: var(--ui-space-10); }
.vt-faq-groups .vt-callout { margin-block-start: var(--ui-space-10); }

/* ---------- Exemples ---------- */
.vt-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-5); }
.vt-example { display: flex; flex-direction: column; overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sheet); }
.vt-example-shot { display: flex; justify-content: center; padding: var(--ui-space-8) var(--ui-space-4) 0; background: var(--ui-neutral-100); }
.vt-example-body { display: flex; flex-direction: column; flex-grow: 1; gap: var(--ui-space-2); padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-6); }
.vt.vt .vt-example-body h2 { font-size: 22px; line-height: 28px; }
.vt-example-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-4); margin-block-start: auto; padding-block-start: var(--ui-space-3); }
.vt-qr-box { display: none; margin: 0; }
.vt-qr { inline-size: 96px; block-size: 96px; padding: 6px; background: var(--ui-neutral-0); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-thumb); }
.vt-qr-box figcaption { max-inline-size: 110px; font-size: 13px; line-height: 18px; color: var(--ui-text-muted); }

/* ---------- Contact ---------- */
.vt-contact-section { padding-block-start: var(--ui-space-10); }
.vt-contact { display: grid; gap: var(--ui-space-8); align-items: start; }
.vt-contact-aside { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.vt-contact-aside h1 { font-size: 34px; line-height: 40px; }
.vt-channels { list-style: none; margin: var(--ui-space-2) 0 0; padding: 0; display: grid; gap: var(--ui-space-3); }
.vt-channel { display: flex; align-items: center; gap: 14px; min-block-size: 72px; padding: var(--ui-space-3) var(--ui-space-4); color: var(--ui-text); text-decoration: none; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 18px; }
a.vt-channel:hover { border-color: var(--ui-text); }
.vt-channel > span:last-child { display: flex; flex-direction: column; min-inline-size: 0; overflow-wrap: anywhere; }
.vt-channel > span:last-child > span { font-size: 14px; color: var(--ui-text-muted); }
.vt-channel--wa .vt-badge-ico { background: var(--ui-success-soft); color: var(--ui-success); }
.vt-channel--static .vt-badge-ico { background: var(--ui-neutral-100); color: var(--ui-text); }
.vt-contact-form { padding: var(--ui-space-6) var(--ui-space-5); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sheet); }
.vt.vt .vt-contact-form h2 { font-size: 22px; line-height: 28px; }
.vt-form-pair { display: grid; gap: var(--ui-space-4); }
.vt-sent { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-4); padding: var(--ui-space-10) var(--ui-space-6); text-align: center; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sheet); }
.vt-sent h1 { font-size: 28px; line-height: 34px; }

/* ---------- Pages légales, inscription ---------- */
.vt-prose { font-size: 17px; line-height: 28px; color: var(--ui-neutral-700); }
.vt.vt .vt-prose h2 { font-size: 20px; line-height: 26px; color: var(--ui-text); margin-block: var(--ui-space-8) var(--ui-space-2); }
.vt-prose h2:first-child { margin-block-start: 0; }
.vt-prose a { color: var(--ui-action); font-weight: 600; }
.vt-form { padding: var(--ui-space-6) var(--vt-gutter) var(--ui-space-12); display: flex; flex-direction: column; gap: var(--ui-space-4); }
.vt-form > * { inline-size: 100%; max-inline-size: 480px; margin-inline: auto; }
.vt-form-title { font-size: 28px; line-height: 34px; }
.vt-trap { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* ---------- Pied de page, bouton collant ---------- */
.vt-footer { padding-block: var(--ui-space-12) calc(var(--ui-cta) + 56px); background: var(--ui-neutral-900); color: var(--ui-neutral-300); }
.vt-footer-grid { display: grid; gap: var(--ui-space-8); }
.vt-footer-brand { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.vt-footer .ui-brand { color: var(--ui-neutral-0); align-self: flex-start; }
.vt-footer .ui-brand b { color: var(--ui-harissa-300); }
.vt-footer-contact { list-style: none; margin: 0; padding: 0; }
.vt-footer a { color: var(--ui-neutral-200); text-decoration: none; }
.vt-footer a:hover { color: var(--ui-neutral-0); text-decoration: underline; text-underline-offset: 4px; }
.vt-footer-contact a { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-block-size: var(--ui-touch-min); }
.vt-footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.vt-footer-col a { display: inline-flex; align-items: center; min-block-size: var(--ui-touch-min); min-inline-size: var(--ui-touch-min); }
.vt-footer-title { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-neutral-400); margin-block-end: var(--ui-space-1); }
[dir="rtl"] .vt-footer-title { font-size: 14px; letter-spacing: 0; }
.vt-footer-rights { padding-block-start: var(--ui-space-6); border-block-start: 1px solid var(--ui-neutral-800); font-size: 13px; color: var(--ui-neutral-400); }
.vt-sticky { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 25; display: flex; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4) calc(var(--ui-space-3) + env(safe-area-inset-bottom)); background: var(--ui-surface); border-block-start: 1px solid var(--ui-border); box-shadow: 0 -6px 20px rgb(26 23 21 / 0.08); }
.vt-sticky .ui-btn:first-child { flex-grow: 1; min-block-size: var(--ui-cta); }
.vt-wa { min-inline-size: var(--ui-cta); padding-inline: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- ≥ 600 px ---------- */
@media (min-width: 600px) {
  .vt { --vt-gutter: var(--ui-space-8); }
  .vt-header .ui-brand { font-size: 19px; gap: var(--ui-space-2); }
  .vt-header .ui-brand svg { inline-size: 32px; block-size: 32px; }
  .vt-header-end { gap: var(--ui-space-2); }
  .vt-lang { padding-inline: var(--ui-space-3); font-size: 15px; border-color: var(--ui-border); }
  .vt-lang .vt-ico { display: block; }
  .vt h2 { font-size: 34px; line-height: 40px; }
  .vt-hero h1 { font-size: 50px; line-height: 54px; }
  .vt-hero .vt-actions .ui-btn { flex-grow: 0; }
  .vt-hero-visual { min-block-size: 520px; align-items: flex-start; }
  .vt-device--back { display: block; position: absolute; z-index: 1; inset-block-start: 48px; inset-inline-start: 50%; margin-inline-start: 24px; inline-size: 200px; transform: rotate(6deg); opacity: 0.95; }
  [dir="rtl"] .vt-device--back { transform: rotate(-6deg); }
  .vt-scan { inset-inline-start: 8%; inset-block-end: 24px; }
  .vt-page-head { padding-block: 56px 40px; }
  .vt-page-head h1, .vt-contact-aside h1 { font-size: 44px; line-height: 50px; }
  .vt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-8); }
  .vt-themes { grid-auto-columns: 40%; }
  .vt-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-compare th, .vt-compare td { padding-inline: var(--ui-space-4); }
  .vt.vt .vt-compare th[scope="row"] { font-size: 15px; }
  .vt-qr-box { display: flex; align-items: center; gap: var(--ui-space-3); }
  .vt-final { padding: 56px var(--ui-space-10); }
  .vt-final .vt-actions { flex-direction: row; justify-content: center; }
  .vt-callout { padding: var(--ui-space-10); }
  .vt-contact-form { padding: var(--ui-space-8); }
  .vt-form-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-footer-brand, .vt-footer-rights { grid-column: 1 / -1; }
}

/* ---------- ≥ 960 px : navigation en ligne, plus de bouton collant ---------- */
@media (min-width: 960px) {
  .vt-sticky { display: none; }
  .vt-burger { display: none; }
  .vt-footer { padding-block-end: var(--ui-space-8); }
  .vt-header { padding-inline: max(var(--ui-space-8), calc((100% - 1160px) / 2 + var(--ui-space-8))); }
  .vt-nav { display: flex; gap: var(--ui-space-1); margin-inline: auto; }
  .vt-nav a { display: inline-flex; align-items: center; min-block-size: var(--ui-touch-min); padding-inline: var(--ui-space-3); font-size: 15px; font-weight: 500; color: var(--ui-text); text-decoration: none; border-radius: var(--ui-radius-button); }
  .vt-nav a:hover { background: var(--ui-neutral-100); }
  .vt-nav a[aria-current="page"] { font-weight: 700; color: var(--ui-action); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .vt-login { display: inline-flex; align-items: center; min-block-size: var(--ui-touch-min); padding-inline: var(--ui-space-3); font-weight: 600; text-decoration: none; }
  .vt-login:hover { text-decoration: underline; text-underline-offset: 4px; }
  .vt-header-cta { display: inline-flex; min-block-size: var(--ui-touch-min); }

  .vt-section { padding-block: 96px; }
  .vt-section--flush { padding-block-start: 0; }
  .vt h2 { font-size: 40px; line-height: 46px; }
  .vt-lead { font-size: 20px; line-height: 30px; }
  .vt-head { margin-block-end: var(--ui-space-12); }
  .vt-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-8); }
  .vt-head--split .ui-btn { align-self: auto; flex-shrink: 0; }

  .vt-hero { padding-block: 72px 96px; }
  .vt-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--ui-space-12); }
  .vt-hero h1 { font-size: 58px; line-height: 62px; }
  .vt-hero-visual { min-block-size: 600px; }
  .vt-device--front { inline-size: 272px; }
  .vt-device--back { inline-size: 230px; inset-block-start: 64px; margin-inline-start: 40px; }
  .vt-scan { inset-inline-start: 0; inset-block-end: 48px; }

  .vt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
  .vt-row:nth-child(even) .vt-panel { order: -1; }
  .vt-panel { min-block-size: 400px; }
  .vt-panel .vt-device { inline-size: 240px; block-size: 360px; }
  .vt-panel--duo .vt-device { inline-size: 190px; block-size: 330px; }
  .vt-tent { inline-size: 250px; }
  .vt-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vt-mini li { flex-direction: column; }

  .vt-themes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-8) var(--ui-space-6); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .vt-theme-shot .vt-device { max-inline-size: 250px; block-size: 380px; }

  .vt-split { display: grid; grid-template-columns: 1fr 1.5fr; gap: 72px; align-items: start; }
  .vt-faq-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; align-items: start; }
  .vt-toc { position: sticky; inset-block-start: 96px; flex-direction: column; align-items: flex-start; gap: 0; }
  .vt-toc a { min-inline-size: var(--ui-touch-min); padding-inline: 0; background: none; border: 0; border-radius: 0; color: var(--ui-text-muted); }
  .vt-toc a:hover { color: var(--ui-action); }

  .vt-callout { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--ui-space-8); padding: var(--ui-space-12); }
  .vt-callout .vt-actions { flex-shrink: 0; }
  .vt-final { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--ui-space-8); padding: 64px; text-align: start; }
  .vt.vt .vt-final h2 { font-size: 40px; line-height: 46px; }
  .vt-final .vt-actions { flex-shrink: 0; flex-direction: column; }
  .vt-section--final { padding-block: var(--ui-space-8) 96px; }

  .vt-contact-section { padding-block: 72px 96px; }
  .vt-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 72px; }
  .vt-page-head { padding-block: 72px 56px; }
  .vt-page-head h1, .vt-contact-aside h1 { font-size: 52px; line-height: 58px; }

  .vt-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .vt-footer-brand { grid-column: auto; }
}