/* =========================================================================
   VELMIRA — accueil premium (bannière « stories », bande défilante, duo, rangées)
   Mobile d'abord.
   ========================================================================= */

/* ---------- Bannière ---------- */
.vlm-hx { padding: 10px 10px 0; }
.vlm-hx__frame { position: relative; height: min(80svh, 700px); min-height: 540px; border-radius: 26px; overflow: hidden; isolation: isolate; background: var(--vlm-dark); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--vlm-dark) 60%, transparent); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vlm-hx__track { position: absolute; inset: 0; }
.vlm-hx__slide { position: absolute; inset: 0; background: var(--hx-tone); opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.vlm-hx__slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .9s ease; }
.vlm-hx__media { position: absolute; inset: 0; }
.vlm-hx__media picture { display: contents; }
.vlm-hx__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hx-pos, 50% 50%); transform: scale(1.14); transition: transform 8s cubic-bezier(.2, .6, .2, 1); will-change: transform; }
.vlm-hx__slide.is-active .vlm-hx__img { transform: scale(1.01); }
.vlm-hx__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .55) 66%, rgba(0, 0, 0, .86) 100%); }

/* Diapositive « produit » : fond coloré, produit qui flotte */
.vlm-hx__slide--product { background: radial-gradient(120% 70% at 50% 28%, color-mix(in srgb, var(--hx-tone) 70%, #fff) 0%, var(--hx-tone) 62%, color-mix(in srgb, var(--hx-tone) 82%, #000) 100%); }
.vlm-hx__slide--product .vlm-hx__veil { display: none; }
.vlm-hx__slide--product .vlm-hx__media { inset: 46px 0 auto 0; height: 54%; display: flex; align-items: center; justify-content: center; }
.vlm-hx__slide--product .vlm-hx__img { position: relative; inset: auto; width: auto; height: 100%; max-width: 86%; object-fit: contain; transform: translateY(30px) scale(.9); opacity: 0; transition: transform 1.1s cubic-bezier(.2, .75, .2, 1) .15s, opacity .8s ease .15s; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .25)); }
.vlm-hx__slide--product.is-active .vlm-hx__img { transform: none; opacity: 1; animation: vlm-hx-float 6s ease-in-out 1.3s infinite; }
.vlm-hx__img.is-blend { mix-blend-mode: multiply; filter: none; }
.vlm-hx__halo { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 70%); }
.vlm-hx__slide--product.is-dark .vlm-hx__halo { background: radial-gradient(circle, color-mix(in srgb, var(--vlm-accent) 38%, transparent) 0%, color-mix(in srgb, var(--vlm-accent) 12%, transparent) 45%, color-mix(in srgb, var(--vlm-accent) 0%, transparent) 70%); }
.vlm-hx__ring { position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--vlm-dark) 22%, transparent); animation: vlm-hx-spin 40s linear infinite; }
.vlm-hx__slide--product.is-dark .vlm-hx__ring { border-color: rgba(255, 255, 255, .25); }
@keyframes vlm-hx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes vlm-hx-spin { to { transform: rotate(360deg); } }

/* Texte */
.vlm-hx__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 22px 30px; color: #fff; }
.vlm-hx__slide--product .vlm-hx__content { color: var(--vlm-dark); }
.vlm-hx__slide--product.is-dark .vlm-hx__content { color: #fff; }
.vlm-hx__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px; border-radius: 99px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px); transition: opacity .6s ease .1s, transform .6s ease .1s; }
.vlm-hx__slide--product:not(.is-dark) .vlm-hx__eyebrow { background: rgba(255, 255, 255, .7); border-color: color-mix(in srgb, var(--vlm-dark) 8%, transparent); }
.vlm-hx__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--vlm-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vlm-accent) 70%, transparent); animation: vlm-hx-pulse 2s infinite; }
@keyframes vlm-hx-pulse { 70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--vlm-accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vlm-accent) 0%, transparent); } }
.vlm-hx__title { margin: 0 0 10px; font-family: var(--vlm-display); font-weight: 800; font-size: clamp(2.05rem, 9.4vw, 3.1rem); line-height: 1.02; letter-spacing: -.03em; max-width: 13ch; text-wrap: balance; }
.vlm-hx__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.vlm-hx__w > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2, .75, .2, 1) calc(.22s + var(--w, 0) * .07s); }
.vlm-hx__sub { margin: 0 0 20px; max-width: 34ch; font-size: 1rem; line-height: 1.5; opacity: 0; transform: translateY(12px); transition: opacity .7s ease .55s, transform .7s ease .55s; }
.vlm-hx__slide--photo .vlm-hx__sub { color: rgba(255, 255, 255, .88); }
.vlm-hx__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; opacity: 0; transform: translateY(14px); transition: opacity .7s ease .7s, transform .7s ease .7s; }
.vlm-hx__slide.is-active .vlm-hx__eyebrow, .vlm-hx__slide.is-active .vlm-hx__sub, .vlm-hx__slide.is-active .vlm-hx__actions { opacity: 1; transform: none; }
.vlm-hx__slide.is-active .vlm-hx__w > span { transform: none; }
.vlm-hx__cta { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 22px; border-radius: 99px; background: #fff; color: var(--vlm-dark); font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5); transition: transform .25s ease, box-shadow .25s ease; }
.vlm-hx__slide--product:not(.is-dark) .vlm-hx__cta { background: var(--vlm-dark); color: #fff; }
.vlm-hx__cta-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vlm-accent); color: var(--vlm-on-accent); transition: transform .3s cubic-bezier(.2, .75, .2, 1); }
.vlm-hx__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .55); }
.vlm-hx__cta:hover .vlm-hx__cta-ico { transform: translateX(4px); }
.vlm-hx__ghost { color: inherit; font-weight: 700; font-size: .95rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

/* Barres de progression façon « stories » */
.vlm-hx__bars { position: absolute; z-index: 5; top: 14px; left: 16px; right: 16px; display: flex; gap: 6px; }
.vlm-hx__bar { position: relative; flex: 1; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .34); }
.vlm-hx__bar i { position: absolute; inset: 0; width: 0; background: #fff; border-radius: inherit; }
.vlm-hx__bar.is-done i { width: 100%; }
.vlm-hx__bar.is-active i { animation: vlm-hx-fill var(--hx-dur, 6.5s) linear forwards; }
.vlm-hx__frame.is-paused .vlm-hx__bar.is-active i { animation-play-state: paused; }
.vlm-hx__frame.is-light .vlm-hx__bar { background: color-mix(in srgb, var(--vlm-dark) 16%, transparent); }
.vlm-hx__frame.is-light .vlm-hx__bar i { background: var(--vlm-dark); }
@keyframes vlm-hx-fill { to { width: 100%; } }

/* Note des clients */
.vlm-hx__rating { position: absolute; z-index: 5; top: 30px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: .8rem; color: var(--vlm-dark); background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .4); }
.vlm-hx__stars { color: var(--vlm-accent); }
.vlm-hx__rating span:last-child { color: var(--vlm-muted); }

/* Navigation (ordinateur) */
.vlm-hx__nav { position: absolute; z-index: 5; right: 22px; bottom: 26px; display: none; align-items: center; gap: 10px; }
.vlm-hx__count { margin-right: 6px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); letter-spacing: .05em; }
.vlm-hx__count b { color: #fff; }
.vlm-hx__frame.is-light .vlm-hx__count { color: color-mix(in srgb, var(--vlm-dark) 55%, transparent); }
.vlm-hx__frame.is-light .vlm-hx__count b { color: var(--vlm-dark); }
.vlm-hx__arrow, .vlm-hx__pause { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s ease, transform .2s ease; }
.vlm-hx__arrow[data-vlm-hx-prev] svg { transform: rotate(180deg); }
.vlm-hx__arrow:hover, .vlm-hx__pause:hover { background: rgba(255, 255, 255, .28); transform: scale(1.05); }
.vlm-hx__frame.is-light .vlm-hx__arrow, .vlm-hx__frame.is-light .vlm-hx__pause { color: var(--vlm-dark); border-color: color-mix(in srgb, var(--vlm-dark) 20%, transparent); background: rgba(255, 255, 255, .6); }
.vlm-hx__pause span { width: 12px; height: 14px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.vlm-hx__frame.is-paused .vlm-hx__pause span { width: 0; height: 0; border: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 4px; }

@media (min-width: 900px) {
	.vlm-hx { padding: 16px max(16px, calc((100vw - 1320px) / 2)) 0; }
	.vlm-hx__frame { height: clamp(540px, 74vh, 680px); border-radius: 32px; }
	.vlm-hx__veil { background: linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .45) 34%, rgba(0, 0, 0, 0) 62%), linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 18%); }
	.vlm-hx__content { top: 0; right: auto; width: min(620px, 52%); display: flex; align-items: center; padding: 0 0 0 clamp(36px, 5vw, 72px); }
	.vlm-hx__title { font-size: clamp(3rem, 4.8vw, 4.7rem); max-width: 12ch; margin-bottom: 18px; }
	.vlm-hx__sub { font-size: 1.12rem; margin-bottom: 30px; }
	.vlm-hx__slide--product .vlm-hx__media { inset: 0 0 0 44%; height: auto; }
	.vlm-hx__slide--product .vlm-hx__img { max-height: 82%; height: 82%; }
	.vlm-hx__halo { width: min(78%, 560px); }
	.vlm-hx__ring { width: min(90%, 640px); }
	.vlm-hx__bars { top: 22px; left: clamp(36px, 5vw, 72px); right: auto; width: min(360px, 36%); }
	.vlm-hx__rating { top: 22px; right: 22px; }
	.vlm-hx__nav { display: flex; }
}
@media (max-width: 380px) {
	.vlm-hx__frame { min-height: 500px; }
	.vlm-hx__content { padding: 0 18px 24px; }
	.vlm-hx__cta { min-height: 48px; font-size: .95rem; }
	.vlm-hx__cta-ico { width: 36px; height: 36px; }
}

/* ---------- Bande défilante des engagements ---------- */
.vlm-mq { display: flex; overflow: hidden; margin: 14px 10px 0; border-radius: 18px; background: var(--vlm-dark); color: #fff; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vlm-mq__row { flex-shrink: 0; display: flex; align-items: center; gap: 22px; margin: 0; padding: 14px 22px 14px 0; list-style: none; animation: vlm-mq 42s linear infinite; }
.vlm-mq:hover .vlm-mq__row { animation-play-state: paused; }
.vlm-mq__row li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: .9rem; font-weight: 650; }
.vlm-mq__row li svg { color: var(--vlm-accent); }
.vlm-mq__sep { color: var(--vlm-accent); font-size: .8rem; }
@keyframes vlm-mq { to { transform: translateX(-100%); } }
@media (min-width: 900px) { .vlm-mq { margin: 16px max(16px, calc((100vw - 1320px) / 2)) 0; } }

/* ---------- Duo éditorial ---------- */
.vlm-duo__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vlm-duo__card { position: relative; display: block; height: 380px; border-radius: 26px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; box-shadow: 0 24px 50px -36px color-mix(in srgb, var(--vlm-dark) 70%, transparent); }
.vlm-duo__media, .vlm-duo__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vlm-duo__media img { object-fit: cover; transform: scale(1.03); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.vlm-duo__card--mower .vlm-duo__media img { object-position: 38% 60%; }
.vlm-duo__card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78) 100%); }
.vlm-duo__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; }
.vlm-duo__body .vlm-kicker { color: var(--vlm-accent); margin: 0; }
.vlm-duo__title { font-family: var(--vlm-display); font-weight: 800; font-size: clamp(1.6rem, 6.5vw, 2.3rem); line-height: 1.05; letter-spacing: -.02em; max-width: 14ch; }
.vlm-duo__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 16px; border-radius: 99px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); font-weight: 700; font-size: .9rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease; }
.vlm-duo__card:hover .vlm-duo__media img { transform: scale(1.09); }
.vlm-duo__card:hover .vlm-duo__cta { background: var(--vlm-accent); color: var(--vlm-on-accent); border-color: transparent; }
@media (min-width: 760px) { .vlm-duo__grid { grid-template-columns: 1fr 1.25fr; gap: 18px; } .vlm-duo__card { height: 460px; } }

/* ---------- Rangées de produits à faire glisser (téléphone) ---------- */
@media (max-width: 640px) {
	.vlm-home .vlm-section .vlm-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 66%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; margin: 0 -16px 8px; padding: 4px 16px 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
	.vlm-home .vlm-section .vlm-grid::-webkit-scrollbar { display: none; }
	.vlm-home .vlm-section .vlm-grid > li { scroll-snap-align: start; }
	.vlm-home .vlm-section__title { font-size: 1.55rem; letter-spacing: -.02em; }
}

/* ---------- Titres de section plus éditoriaux ---------- */
.vlm-home .vlm-section__title { font-family: var(--vlm-display); font-weight: 800; letter-spacing: -.025em; }

/* ---------- En-tête translucide au défilement ---------- */
.vlm-header { transition: box-shadow .3s ease, background-color .3s ease; }
.vlm-scrolled .vlm-header { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--vlm-dark) 50%, transparent); }

@media (prefers-reduced-motion: reduce) {
	.vlm-hx__img, .vlm-hx__slide--product.is-active .vlm-hx__img { transition: none; animation: none; transform: none; }
	.vlm-hx__w > span, .vlm-hx__eyebrow, .vlm-hx__sub, .vlm-hx__actions { transition: none; transform: none; opacity: 1; }
	.vlm-hx__ring, .vlm-hx__pulse, .vlm-mq__row { animation: none; }
	.vlm-hx__bar.is-active i { animation: none; width: 100%; }
	.vlm-duo__media img { transition: none; }
}
/* Téléphone : la bannière tient entre l'en-tête et la barre d'onglets du bas */
@media (max-width: 899px) {
	.vlm-hx__frame { height: calc(100svh - 236px); min-height: 460px; max-height: 660px; }
	.vlm-hx__slide--product .vlm-hx__media { inset: 40px 0 auto 0; height: 48%; }
	.vlm-hx__slide--product .vlm-hx__img { max-width: 70%; }
}
@supports not (height: 100svh) { @media (max-width: 899px) { .vlm-hx__frame { height: calc(100vh - 236px); } } }
.vlm-hx__img, .vlm-duo__media img { -webkit-user-drag: none; user-drag: none; }

/* =========================================================================
   Bannière 3.9 : rideau, profondeur, aperçu de la suivante
   ========================================================================= */
.vlm-hx__slide { opacity: 1; clip-path: inset(0 0 0 100%); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1), visibility 0s linear 1.15s; }
.vlm-hx__frame.is-back .vlm-hx__slide { clip-path: inset(0 100% 0 0); }
.vlm-hx__slide.is-active { clip-path: inset(0 0 0 0) !important; visibility: visible; z-index: 3; transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1); }
.vlm-hx__slide.is-leaving { visibility: visible; z-index: 2; clip-path: inset(0) !important; transition: none; }
.vlm-hx__slide.is-leaving .vlm-hx__media { transform: translateX(calc(var(--hx-dir, 1) * -8%)) scale(1.02); transition: transform 1.15s cubic-bezier(.77, 0, .18, 1); }
.vlm-hx__frame.is-back { --hx-dir: -1; }
.vlm-hx__slide.is-leaving .vlm-hx__content { opacity: 0; transition: opacity .35s ease; }
/* Profondeur (souris) */
.vlm-hx__slide.is-active .vlm-hx__media { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.vlm-hx__slide--product.is-active .vlm-hx__media { transform: translate3d(calc(var(--mx, 0) * -26px), calc(var(--my, 0) * -18px), 0); }
.vlm-hx__slide.is-active .vlm-hx__inner { transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 4px), 0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.vlm-hx__bar { cursor: pointer; }
.vlm-hx__bar::before { content: ""; position: absolute; inset: -10px 0; }
/* Aperçu de la diapositive suivante (ordinateur) */
.vlm-hx__peek { display: none; }
@media (min-width: 1100px) {
	.vlm-hx__peek { position: absolute; z-index: 5; right: 22px; bottom: 92px; display: flex; align-items: center; gap: 12px; width: 280px; padding: 10px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 18px; background: rgba(255, 255, 255, .14); color: #fff; text-align: left; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; transition: background .25s ease, transform .25s ease; }
	.vlm-hx__peek:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }
	.vlm-hx__frame.is-light .vlm-hx__peek { color: var(--vlm-dark); background: rgba(255, 255, 255, .7); border-color: color-mix(in srgb, var(--vlm-dark) 10%, transparent); }
	.vlm-hx__peek-img { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .5); }
	.vlm-hx__peek-img img { width: 100%; height: 100%; object-fit: cover; }
	.vlm-hx__peek-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
	.vlm-hx__peek-txt small { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
	.vlm-hx__peek-txt strong { font-size: .92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.vlm-hx__peek-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .2); }
	.vlm-hx__peek-bar i { display: block; height: 100%; width: 0; background: var(--vlm-accent); animation: vlm-hx-fill var(--hx-dur, 6.5s) linear forwards; }
	.vlm-hx__frame.is-paused .vlm-hx__peek-bar i { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.vlm-hx__slide, .vlm-hx__slide.is-active { transition: none; }
	.vlm-hx__slide.is-active .vlm-hx__media, .vlm-hx__slide.is-active .vlm-hx__inner { transform: none; transition: none; }
}

/* =========================================================================
   Tunnel de commande
   ========================================================================= */
.vlm-steps { margin: 6px 0 22px; }
.vlm-steps ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.vlm-steps li { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; color: var(--vlm-muted); font-size: .86rem; font-weight: 650; }
.vlm-steps li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 10px; border-radius: 2px; background: var(--vlm-line); }
.vlm-steps li.is-done:not(:last-child)::after { background: var(--vlm-primary); }
.vlm-steps a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.vlm-steps__dot { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--vlm-line); background: #fff; font-size: .85rem; font-weight: 800; }
.vlm-steps li.is-done { color: var(--vlm-primary); }
.vlm-steps li.is-done .vlm-steps__dot { background: var(--vlm-primary); border-color: var(--vlm-primary); color: #fff; }
.vlm-steps li.is-current { color: var(--vlm-ink); }
.vlm-steps li.is-current .vlm-steps__dot { border-color: var(--vlm-accent); background: var(--vlm-accent); color: var(--vlm-on-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--vlm-accent) 25%, transparent); }
@media (max-width: 520px) {
	.vlm-steps li { font-size: .74rem; gap: 6px; }
	.vlm-steps li:not(:last-child)::after { margin: 0 6px; }
	.vlm-steps li:not(.is-current) .vlm-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Moyens de paiement en cartes */
.vlm-choice--pay { position: relative; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.vlm-choice--pay input { position: absolute; opacity: 0; pointer-events: none; }
.vlm-choice__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--vlm-surface); color: var(--vlm-primary); transition: background .2s ease, color .2s ease; }
.vlm-choice__tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; border: 2px solid var(--vlm-line); color: transparent; transition: all .2s ease; }
.vlm-choice--pay:has(input:checked) { border-color: var(--vlm-primary); background: color-mix(in srgb, var(--vlm-primary) 5%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vlm-primary) 14%, transparent); }
.vlm-choice--pay:has(input:checked) .vlm-choice__ico { background: var(--vlm-primary); color: #fff; }
.vlm-choice--pay:has(input:checked) .vlm-choice__tick { background: var(--vlm-primary); border-color: var(--vlm-primary); color: #fff; }
.vlm-choice--pay:has(input:focus-visible) { outline: 3px solid var(--vlm-accent); outline-offset: 2px; }

/* Résumé repliable (téléphone) */
.vlm-comini { display: none; }
@media (max-width: 960px) {
	.vlm-comini { display: block; margin: 0 0 16px; border: 1px solid var(--vlm-line); border-radius: 16px; background: #fff; overflow: hidden; }
	.vlm-comini > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none; }
	.vlm-comini > summary::-webkit-details-marker { display: none; }
	.vlm-comini > summary span::after { content: "▾"; display: inline-block; margin-left: 6px; color: var(--vlm-primary); transition: transform .2s ease; }
	.vlm-comini[open] > summary span::after { transform: rotate(180deg); }
	.vlm-comini > summary small { color: var(--vlm-muted); font-weight: 600; }
	.vlm-comini > summary strong { font-family: var(--vlm-display); font-size: 1.15rem; }
	.vlm-comini__body { padding: 0 16px 14px; border-top: 1px solid var(--vlm-line); }
}

/* Barre fixe « Confirmer la commande » (téléphone) */
.vlm-cobar { display: none; }
@media (max-width: 960px) {
	.vlm-cobar { position: fixed; z-index: 120; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; background: color-mix(in srgb, var(--vlm-dark) 94%, transparent); color: #fff; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; }
	.vlm-cobar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
	.vlm-cobar__total { display: flex; flex-direction: column; line-height: 1.15; }
	.vlm-cobar__total small { font-size: .72rem; opacity: .7; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
	.vlm-cobar__total strong { font-family: var(--vlm-display); font-size: 1.25rem; }
	.vlm-cobar__btn { min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--vlm-accent); color: var(--vlm-on-accent); font-weight: 800; font-size: .98rem; cursor: pointer; }
	.has-cobar .vlm-tabbar, .has-cobar .vlm-mobile-tabs { display: none !important; }
	.has-cobar .vlm-checkout-page { padding-bottom: 96px; }
}

/* =========================================================================
   Paiement par virement : encadré premium
   ========================================================================= */
.vlm-paybox { margin: 0 0 22px; padding: clamp(18px, 3vw, 30px); border-radius: 24px; background: #fff; border: 1px solid var(--vlm-line); box-shadow: 0 24px 50px -36px color-mix(in srgb, var(--vlm-dark) 45%, transparent); }
.vlm-paybox__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.vlm-paybox__intro h2 { margin: 0 0 6px; font-family: var(--vlm-display); font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; }
.vlm-paybox__intro p:last-child { margin: 0; color: var(--vlm-muted); max-width: 46ch; }
.vlm-paybox__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 14px 18px; border-radius: 18px; background: var(--vlm-dark); color: #fff; }
.vlm-paybox__amount span { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.vlm-paybox__amount strong { font-family: var(--vlm-display); font-size: 2rem; line-height: 1.05; }
.vlm-paybox__amount small { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--vlm-accent); font-weight: 700; }
.vlm-paybox__grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: start; }
.vlm-paybox__rows { margin: 0; display: grid; gap: 8px; }
.vlm-paybox__row { padding: 12px 14px; border-radius: 14px; background: var(--vlm-surface); }
.vlm-paybox__row dt { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vlm-muted); margin: 0 0 4px; }
.vlm-paybox__row dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vlm-paybox__val { font-weight: 750; font-size: 1.02rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vlm-paybox__row.is-iban .vlm-paybox__val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.04rem; letter-spacing: .02em; }
.vlm-paybox__row.is-ref { background: color-mix(in srgb, var(--vlm-accent) 16%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vlm-accent) 60%, transparent); }
.vlm-paybox__row.is-ref .vlm-paybox__val { font-size: 1.2rem; }
.vlm-paybox__row.is-amount .vlm-paybox__val { font-size: 1.15rem; }
.vlm-paybox__hint { margin: 6px 0 0; font-size: .82rem; color: var(--vlm-accent-text); }
.vlm-paybox__copy { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid var(--vlm-line); border-radius: 10px; background: #fff; color: var(--vlm-primary); font-weight: 700; font-size: .84rem; cursor: pointer; transition: all .2s ease; }
.vlm-paybox__copy:hover { border-color: var(--vlm-primary); }
.vlm-paybox__copy.is-copied, .vlm-paybox__all.is-copied { background: var(--vlm-primary); border-color: var(--vlm-primary); color: #fff; }
.vlm-paybox__qr { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; border: 1px dashed var(--vlm-line); text-align: center; }
.vlm-paybox__qrbox { display: grid; place-items: center; width: 100%; max-width: 190px; aspect-ratio: 1; border-radius: 12px; background: #fff; color: var(--vlm-muted); }
.vlm-paybox__qrbox svg { width: 100%; height: 100%; display: block; animation: vlm-qr-in .5s ease; }
@keyframes vlm-qr-in { from { opacity: 0; transform: scale(.94); } }
.vlm-paybox__qrtitle { margin: 0; font-weight: 800; }
.vlm-paybox__qrtext { margin: 0; font-size: .8rem; color: var(--vlm-muted); line-height: 1.4; }
.vlm-paybox__all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 16px 0 0; border: 0; border-radius: 14px; background: var(--vlm-dark); color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; transition: transform .15s ease, background .2s ease; }
.vlm-paybox__all:active { transform: scale(.98); }
.vlm-paybox__steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: s; }
.vlm-paybox__steps li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--vlm-muted); line-height: 1.4; }
.vlm-paybox__steps li span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vlm-primary-soft); color: var(--vlm-primary); font-weight: 800; font-size: .82rem; }
.vlm-paybox__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 760px) {
	.vlm-paybox__head { flex-direction: column; }
	.vlm-paybox__amount { align-items: flex-start; width: 100%; box-sizing: border-box; }
	.vlm-paybox__grid { grid-template-columns: 1fr; }
	.vlm-paybox__qr { flex-direction: row; text-align: left; align-items: center; }
	.vlm-paybox__qrbox { width: 120px; flex: none; }
	.vlm-paybox__steps { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .vlm-paybox__copy span { display: none; } .vlm-paybox__copy { padding: 0 10px; } }
/* Produits : profondeur appliquée à l'image (préserve le fondu du fond blanc) */
.vlm-hx__slide--product.is-active .vlm-hx__media, .vlm-hx__slide--product.is-leaving .vlm-hx__media { transform: none; }
.vlm-hx__slide--product .vlm-hx__img { transition: transform 1.1s cubic-bezier(.2, .75, .2, 1) .15s, opacity .8s ease .15s, translate .9s cubic-bezier(.2, .7, .2, 1); }
.vlm-hx__slide--product.is-active .vlm-hx__img { translate: calc(var(--mx, 0) * -26px) calc(var(--my, 0) * -18px); }
.vlm-hx__slide--product.is-active .vlm-hx__halo, .vlm-hx__slide--product.is-active .vlm-hx__ring { translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -8px); transition: translate .9s cubic-bezier(.2, .7, .2, 1); }
/* Pause au survol / appui : n'affecte pas l'icône du bouton pause */
.vlm-hx__frame.is-held .vlm-hx__bar.is-active i, .vlm-hx__frame.is-held .vlm-hx__peek-bar i { animation-play-state: paused; }

/* =========================================================================
   Micro-interactions et finitions 3.10
   ========================================================================= */
/* Ajout au panier : bouton → coche */
.vlm-btn.is-added, .button.is-added { position: relative; color: transparent !important; background: #1E8E5A !important; border-color: #1E8E5A !important; transition: background .25s ease; }
.vlm-btn.is-added::after, .button.is-added::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 17px; margin: -11px 0 0 -5px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); animation: vlm-tick .35s cubic-bezier(.2, .8, .3, 1.3) forwards; }
@keyframes vlm-tick { to { transform: rotate(45deg) scale(1); } }
.vlm-bump { animation: vlm-bump .55s cubic-bezier(.2, .8, .3, 1.4); }
@keyframes vlm-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-8deg); } 65% { transform: scale(.94) rotate(4deg); } 100% { transform: none; } }

/* Newsletter : carte sombre premium */
.vlm-newsletter { background: none; padding-left: 10px; padding-right: 10px; }
.vlm-newsletter__inner { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 64px); border-radius: 28px; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--vlm-accent) 28%, transparent) 0%, color-mix(in srgb, var(--vlm-accent) 0%, transparent) 45%), linear-gradient(135deg, var(--vlm-dark) 0%, var(--vlm-primary) 100%); color: #fff; box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--vlm-dark) 70%, transparent); }
.vlm-newsletter__inner::before { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .18); animation: vlm-hx-spin 50s linear infinite; }
.vlm-newsletter .vlm-section__title { color: #fff; font-family: var(--vlm-display); font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.02em; }
.vlm-newsletter__text p { color: rgba(255, 255, 255, .78); }
.vlm-newsletter__row { padding: 6px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6); }
.vlm-newsletter__row button, .vlm-newsletter__row .button { border-radius: 999px; background: var(--vlm-accent); color: var(--vlm-on-accent); font-weight: 800; }
.vlm-newsletter .vlm-small, .vlm-newsletter label, .vlm-newsletter a { color: rgba(255, 255, 255, .8); }
@media (min-width: 900px) { .vlm-newsletter { padding-left: max(16px, calc((100vw - 1320px) / 2)); padding-right: max(16px, calc((100vw - 1320px) / 2)); } .vlm-newsletter__inner { max-width: none; } }
@media (max-width: 760px) { .vlm-newsletter__inner { grid-template-columns: 1fr; gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .vlm-bump, .vlm-newsletter__inner::before { animation: none; } }
/* Mosaïque des catégories masquée sur téléphone (réglable dans Réglages > Accueil) */
@media (max-width: 760px) { .vlm-catshow.is-hide-mobile { display: none; } }
/* Cadrage propre au téléphone (sujet centré) */
@media (max-width: 899px) { .vlm-hx__img { object-position: var(--hx-mpos, var(--hx-pos, 50% 50%)); } }
/* QR code de virement : replié, avec mode d'emploi */
.vlm-paybox__qr { display: block; padding: 0; text-align: left; }
.vlm-paybox__qr > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 750; cursor: pointer; list-style: none; color: var(--vlm-primary); }
.vlm-paybox__qr > summary::-webkit-details-marker { display: none; }
.vlm-paybox__qr > summary::after { content: "▾"; margin-left: auto; transition: transform .2s ease; }
.vlm-paybox__qr[open] > summary::after { transform: rotate(180deg); }
.vlm-paybox__qrin { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px 16px; text-align: center; }
.vlm-paybox__qrin .vlm-paybox__qrbox { width: 100%; max-width: 190px; }
.vlm-paybox__qrwarn { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--vlm-surface); font-size: .78rem; color: var(--vlm-muted); line-height: 1.4; }
@media (max-width: 760px) { .vlm-paybox__qr { flex-direction: column; } .vlm-paybox__qrin .vlm-paybox__qrbox { width: 170px; } }