/* ============================================================
   ANW Solutions – Démo e-commerce "Orbe"
   public/assets/css/demo-shop.css
   ============================================================ */

:root {
    --ink:      #0E0B1F;
    --ink-2:    #1B1440;
    --violet:   #6D28FF;
    --hot:      #FF3D7F;
    --orange:   #FF8A00;
    --lime:     #C6FF3D;
    --cyan:     #00C2FF;
    --bg:       #F6F4FF;
    --surface:  #FFFFFF;
    --line:     #E6E1F7;
    --muted:    #6B6785;
    --text:     #15122B;

    --font:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display:  'Space Grotesk', 'Inter', system-ui, sans-serif;

    --radius:    20px;
    --radius-sm: 12px;
    --shadow:    0 10px 30px -12px rgba(30, 14, 90, .25);
    --shadow-lg: 0 30px 60px -20px rgba(30, 14, 90, .45);
    --ease:      cubic-bezier(.2, .8, .2, 1);
    --spring:    cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Plusieurs blocs masqués via l'attribut hidden ont un display propre : hidden doit toujours gagner. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body.shop {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); line-height: 1.08; letter-spacing: -.02em; }
p { margin: 0; }
s { color: var(--muted); font-weight: 500; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 110px) 0; }

.kicker {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--violet);
}
.kicker--hot { color: var(--hot); }
.kicker--light { color: var(--lime); }
.title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; }
.title--light { color: #fff; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 22px;
    border: 0; border-radius: 999px;
    font-weight: 700; font-size: 15px; white-space: nowrap;
    transition: transform .25s var(--spring), box-shadow .25s var(--ease), background .2s;
    will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--hot {
    background: linear-gradient(110deg, var(--hot), var(--orange), var(--hot));
    background-size: 220% 100%;
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(255, 61, 127, .7);
    animation: shimmer 3.5s linear infinite;
}
.btn--hot:hover { box-shadow: 0 18px 40px -10px rgba(255, 61, 127, .85); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--violet); }
.btn--lime { background: var(--lime); color: var(--ink); box-shadow: 0 12px 30px -12px rgba(198, 255, 61, .8); }
.btn--glass { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255, 255, 255, .18); }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover { color: var(--text); }

@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- Petits éléments ---------- */
.live-dot {
    position: relative; display: inline-block; flex: none;
    width: 8px; height: 8px; border-radius: 50%;
    background: #22E58B;
}
.live-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: inherit; animation: ping 1.6s var(--ease) infinite;
}
.kicker--hot .live-dot { background: var(--hot); }
@keyframes ping { 75%, 100% { transform: scale(2.8); opacity: 0; } }

.stars {
    --rating: 100%;
    display: inline-block; position: relative;
    font-size: 14px; line-height: 1; letter-spacing: 2px;
    color: #D9D4EC;
}
.stars::before { content: '★★★★★'; }
.stars::after {
    content: '★★★★★'; position: absolute; inset: 0;
    width: var(--rating); overflow: hidden; color: #FFB800;
}

.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font-family: var(--display); font-size: 20px; }
.price s { font-size: 14px; }
.price--lg b { font-size: 32px; }

.badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    padding: 5px 11px; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-size: 12px; font-weight: 700;
    animation: badge-pop 2.8s var(--ease) infinite;
}
@keyframes badge-pop { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.12) rotate(-3deg); } }

/* ---------- Marquee ---------- */
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee__track {
    display: flex; flex: none; align-items: center; gap: 48px;
    padding-right: 48px;
    animation: marquee 32s linear infinite;
}
.marquee--slow .marquee__track { animation-duration: 45s; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Barre de progression de lecture ---------- */
.shop-progress {
    position: fixed; top: 0; left: 0; z-index: 200;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--violet), var(--hot), var(--orange));
    transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- Bandeau démo ANW ---------- */
.demo-bar {
    display: flex; align-items: center; gap: 16px;
    padding: 8px 16px;
    background: #05040C; color: #CFCBE6;
    font-size: 13px;
}
.demo-bar__back { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; }
.demo-bar__back svg { width: 16px; height: 16px; }
.demo-bar__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-bar__text strong { color: #fff; }
.demo-bar__actions { display: flex; gap: 8px; flex: none; }
.demo-bar__btn, .demo-bar__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
}
.demo-bar__btn { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.demo-bar__btn[aria-pressed="true"] { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.demo-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: blink 1.2s steps(2) infinite; }
.demo-bar__btn[aria-pressed="true"] .demo-bar__dot { background: var(--ink); }
.demo-bar__cta { background: var(--hot); color: #fff; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- Bandeau d'annonces ---------- */
.announce {
    padding: 9px 0;
    background: linear-gradient(90deg, var(--violet), var(--hot));
    color: #fff; font-size: 13.5px; font-weight: 600;
}
.announce .marquee__track span::before { content: '✦'; margin-right: 42px; color: var(--lime); }
.announce b { font-variant-numeric: tabular-nums; color: var(--lime); }

/* ---------- En-tête ---------- */
.head {
    position: sticky; top: 0; z-index: 90;
    background: rgba(246, 244, 255, .82);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s, border-color .3s;
}
.head.is-scrolled { border-color: var(--line); box-shadow: 0 8px 30px -18px rgba(30, 14, 90, .4); }
.head__inner { display: flex; align-items: center; gap: 28px; height: 72px; }

.logo {
    display: inline-flex; align-items: baseline;
    font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.04em;
}
.logo__dot {
    width: 9px; height: 9px; margin-left: 3px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hot), var(--orange));
    animation: bounce-dot 2s var(--ease) infinite;
}
.logo--light { color: #fff; }
@keyframes bounce-dot { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } 60% { transform: translateY(0) scaleX(1.3) scaleY(.7); } }

.head__nav { display: flex; gap: 22px; font-size: 14.5px; font-weight: 600; }
.head__nav a { position: relative; padding: 6px 0; color: var(--muted); transition: color .2s; }
.head__nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--violet); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.head__nav a:hover { color: var(--text); }
.head__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.head__hot { color: var(--hot) !important; }
.head__hot::before {
    content: 'LIVE'; margin-right: 6px; padding: 2px 5px; border-radius: 4px;
    background: var(--hot); color: #fff; font-size: 9.5px; letter-spacing: .06em; vertical-align: 2px;
    animation: blink 1s steps(2) infinite;
}

.search { position: relative; flex: 1; max-width: 300px; margin-left: auto; }
.search > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input {
    width: 100%; height: 44px; padding: 0 16px 0 42px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--text);
    transition: border-color .2s, box-shadow .2s;
}
.search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(109, 40, 255, .14); }
.search__results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 5;
    margin: 0; padding: 8px; list-style: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-lg);
    animation: drop-in .25s var(--ease);
}
.search__results li button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 8px; border: 0; border-radius: 10px; background: none; text-align: left;
}
.search__results li button:hover, .search__results li button.is-active { background: var(--bg); }
.search__results .mini-art { width: 40px; height: 40px; }
.search__results small { display: block; color: var(--muted); }
.search__results mark { background: rgba(198, 255, 61, .6); color: inherit; border-radius: 3px; }
.search__empty { padding: 10px; color: var(--muted); font-size: 14px; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }

.head__icons { display: flex; gap: 6px; }
.icon-btn {
    position: relative; display: grid; place-items: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: transparent; transition: background .2s;
}
.icon-btn:hover { background: rgba(109, 40, 255, .08); }
.icon-btn svg { width: 23px; height: 23px; }
.icon-btn__count {
    position: absolute; top: 2px; right: 0;
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--hot); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.icon-btn__count.is-pop { animation: pop .5s var(--spring); }
.icon-btn.is-bump { animation: bump .6s var(--spring); }
@keyframes pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
@keyframes bump { 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(.95) rotate(4deg); } }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--ink); color: #fff;
}
.hero__blobs span {
    position: absolute; z-index: -1; border-radius: 50%;
    filter: blur(70px); opacity: .7;
    animation: blob 14s ease-in-out infinite alternate;
}
.hero__blobs span:nth-child(1) { width: 520px; height: 520px; top: -160px; left: -120px; background: var(--violet); }
.hero__blobs span:nth-child(2) { width: 420px; height: 420px; bottom: -180px; right: 10%; background: var(--hot); animation-delay: -5s; }
.hero__blobs span:nth-child(3) { width: 300px; height: 300px; top: 20%; right: -80px; background: var(--cyan); opacity: .45; animation-delay: -9s; }
@keyframes blob {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(60px, 40px) scale(1.15); }
    100% { transform: translate(-40px, 70px) scale(.9); }
}

.hero__inner {
    display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px;
    min-height: min(680px, 82vh); padding: 56px 0 72px;
}

.live-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    font-size: 14px; color: #E4E0FF;
    animation: rise .8s var(--ease) both;
}
.live-pill b { font-variant-numeric: tabular-nums; color: #fff; }
.js-visitors.is-tick { animation: tick .5s var(--ease); }
@keyframes tick { 0% { color: var(--lime); transform: translateY(-3px); } }

.hero__title {
    margin: 22px 0 18px;
    font-size: clamp(40px, 5.6vw, 76px); font-weight: 700; letter-spacing: -.045em;
    animation: rise .8s .1s var(--ease) both;
}
.rotator { display: block; overflow: hidden; padding-bottom: .08em; }
.rotator__word {
    display: inline-block; white-space: nowrap;
    background: linear-gradient(90deg, var(--lime), var(--cyan), var(--hot));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transition: transform .5s var(--ease), opacity .5s;
}
.rotator__word.is-out { transform: translateY(-100%); opacity: 0; }
.rotator__word.is-in { transform: translateY(100%); opacity: 0; transition: none; }

.hero__text { max-width: 520px; font-size: 18px; color: #C9C4E8; animation: rise .8s .2s var(--ease) both; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; animation: rise .8s .3s var(--ease) both; }
.hero__proof { display: inline-flex; align-items: center; gap: 14px; margin-top: 36px; font-size: 14px; color: #C9C4E8; animation: rise .8s .4s var(--ease) both; }
.hero__proof b { color: #fff; }
.avatars { display: flex; }
.avatars span {
    display: grid; place-items: center;
    width: 38px; height: 38px; margin-left: -10px; border-radius: 50%;
    background: var(--a); border: 3px solid var(--ink);
    font-weight: 700; font-size: 14px;
}
.avatars span:first-child { margin-left: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.hero__stage { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: center; }
.orbit {
    position: absolute; inset: 8%; border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .22);
    animation: spin 40s linear infinite;
}
.orbit--2 { inset: 0; border-style: solid; border-color: rgba(255, 255, 255, .08); animation-duration: 18s; animation-direction: reverse; }
.orbit--2 span {
    position: absolute; top: 50%; left: -7px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--lime); box-shadow: 0 0 24px 4px var(--lime);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__product {
    position: absolute; inset: 14%;
    display: grid; place-items: center;
    border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 40px 80px -30px var(--c2), inset 0 0 60px rgba(255, 255, 255, .25);
    animation: morph 9s ease-in-out infinite, float 6s ease-in-out infinite;
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
}
.hero__product .art { width: 76%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .35)); }
@keyframes morph {
    0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; }
    50%      { border-radius: 58% 42% 45% 55% / 42% 58% 42% 58%; }
}
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }

.chip {
    position: absolute; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .95); color: var(--ink);
    font-size: 14px; font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-lg);
    animation: float 5s ease-in-out infinite;
}
.chip b { color: var(--hot); }
.chip--a { top: 10%; left: -4%; }
.chip--b { top: 22%; right: -6%; animation-delay: -1.5s; }
.chip--c { bottom: 16%; left: -8%; animation-delay: -3s; }
.chip--d { bottom: 6%; right: 4%; animation-delay: -2s; background: var(--lime); }
.chip--d b { color: var(--ink); }
.chip__ico { color: #FFB800; }
#heroBuyer { display: inline-block; transition: opacity .3s, transform .3s; }
#heroBuyer.is-out { opacity: 0; transform: translateY(6px); }

.trust {
    padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px; font-weight: 600; color: #DCD8F5;
}
.trust .marquee__track span { display: inline-flex; align-items: center; gap: 12px; }
.trust i { width: 8px; height: 8px; border-radius: 2px; background: var(--lime); transform: rotate(45deg); }

/* ---------- Vente flash ---------- */
.flash { background: linear-gradient(180deg, #FFF0F5, var(--bg)); }
.flash__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }

.countdown { display: flex; align-items: flex-start; gap: 8px; }
.countdown__cell {
    display: grid; justify-items: center;
    min-width: 82px; padding: 14px 10px 10px; border-radius: 16px;
    background: var(--ink); color: #fff;
    box-shadow: var(--shadow);
}
.countdown__cell b {
    display: block; font-family: var(--display); font-size: 40px; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.countdown__cell b.is-flip { animation: flip .45s var(--ease); }
.countdown__cell small { margin-top: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #A8A2CF; }
.countdown__sep { padding-top: 14px; font-family: var(--display); font-size: 36px; font-weight: 700; color: var(--hot); animation: blink 1s steps(2) infinite; }
@keyframes flip { 0% { transform: rotateX(90deg); opacity: .2; } 100% { transform: rotateX(0); } }

.flash__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flash-card {
    overflow: hidden; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line);
    transition: transform .35s var(--spring), box-shadow .35s;
}
.flash-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.flash-card__art {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--c1), var(--c2));
}
.flash-card__art .art { width: 62%; transition: transform .5s var(--spring); }
.flash-card:hover .flash-card__art .art { transform: scale(1.08) rotate(-4deg); }
.flash-card__off {
    position: absolute; top: 14px; right: 14px;
    display: grid; place-items: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--lime); color: var(--ink);
    font-family: var(--display); font-weight: 700; font-size: 16px;
    animation: wobble 2.4s ease-in-out infinite;
}
@keyframes wobble { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }
.flash-card__body { padding: 18px; }
.flash-card__name { font-size: 18px; margin-bottom: 6px; }
.flash-card .price b { color: var(--hot); }

.stock { margin: 14px 0 16px; }
.stock__bar { height: 8px; border-radius: 999px; background: #F1EDFB; overflow: hidden; }
.stock__bar span {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--orange), var(--hot));
    background-size: 30px 100%;
    transition: width 1s var(--ease);
    position: relative;
}
.stock__bar span::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px);
    animation: stripes .8s linear infinite;
}
@keyframes stripes { to { background-position: 17px 0; } }
.stock__text { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.stock__text b { color: var(--hot); }
.stock.is-hit .stock__text { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* ---------- Chiffres ---------- */
.stats { background: var(--ink); color: #fff; padding: 44px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { display: grid; gap: 6px; text-align: center; }
.stat__value { font-family: var(--display); font-size: clamp(34px, 4vw, 50px); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: .5em; color: #A8A2CF; }
.stat__label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #A8A2CF; font-size: 14px; }
.js-orders.is-tick { animation: tick-big .6s var(--spring); }
@keyframes tick-big { 0% { color: var(--lime); transform: scale(1.25); } }

/* ---------- Catalogue ---------- */
.catalogue__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.sort select {
    height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--text); font-weight: 600;
}

.filters {
    position: relative; display: inline-flex; gap: 4px; flex-wrap: wrap;
    margin-bottom: 30px; padding: 5px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    max-width: 100%;
}
.filters__pill {
    position: absolute; top: 5px; left: 0; height: calc(100% - 10px);
    border-radius: 999px; background: var(--ink);
    transition: transform .45s var(--spring), width .45s var(--spring), height .3s;
}
.filters__btn {
    position: relative; z-index: 1;
    padding: 9px 18px; border: 0; border-radius: 999px; background: none;
    font-weight: 600; font-size: 14.5px; color: var(--muted);
    transition: color .3s;
}
.filters__btn.is-active { color: #fff; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
    display: flex; flex-direction: column;
    border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
    transition: box-shadow .35s, transform .35s var(--spring), opacity .35s;
}
.card:hover { box-shadow: var(--shadow-lg); }
.card.is-hidden { display: none; }
.card.is-entering { animation: card-in .5s var(--spring) both; }
@keyframes card-in { from { opacity: 0; transform: scale(.9) translateY(20px); } }

.card__art {
    position: relative; display: grid; place-items: center; overflow: hidden;
    aspect-ratio: 1; border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    transform-style: preserve-3d;
    transition: transform .2s ease-out;
}
.card__art::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), transparent 55%);
    opacity: 0; transition: opacity .3s;
}
.card:hover .card__art::after { opacity: 1; }
.card__art .art { width: 66%; transition: transform .5s var(--spring); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25)); }
.card:hover .card__art .art { transform: scale(1.1) translateZ(30px); }

.card__wish {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9);
    transition: transform .3s var(--spring);
}
.card__wish svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.8; transition: fill .2s, stroke .2s; }
.card__wish:hover { transform: scale(1.12); }
.card__wish[aria-pressed="true"] svg { fill: var(--hot); stroke: var(--hot); }
.card__wish.is-burst { animation: heart .6s var(--spring); }
@keyframes heart { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } }

.card__quick {
    position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
    padding: 11px; border: 0; border-radius: 999px;
    background: rgba(14, 11, 31, .88); color: #fff; font-weight: 600; font-size: 14px;
    backdrop-filter: blur(6px);
    transform: translateY(140%); transition: transform .35s var(--spring);
}
.card:hover .card__quick, .card__quick:focus-visible { transform: translateY(0); }

.card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.card__meta { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.card__viewers { display: inline-flex; align-items: center; gap: 4px; color: var(--violet); text-transform: none; letter-spacing: 0; }
.card__viewers svg { width: 15px; height: 15px; }
.card__viewers b { font-variant-numeric: tabular-nums; transition: color .3s; }
.card__name { margin: 6px 0 6px; font-size: 18px; }
.card__rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.card__low { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--hot); }
.card__low::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--hot); animation: blink 1s steps(2) infinite; }

.add-btn {
    position: relative; display: grid; place-items: center; flex: none;
    width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: var(--ink); color: #fff;
    transition: transform .3s var(--spring), background .2s;
}
.add-btn svg { width: 20px; height: 20px; transition: transform .4s var(--spring); }
.add-btn:hover { background: var(--violet); transform: scale(1.08); }
.add-btn:hover svg { transform: rotate(90deg); }
.add-btn.is-added { background: #22C576; }

/* ---------- Pack ---------- */
.bundle { background: var(--bg); padding-top: 0; }
.bundle__inner {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center;
    padding: clamp(32px, 5vw, 64px); border-radius: 32px;
    background: radial-gradient(circle at 85% 20%, rgba(109, 40, 255, .65), transparent 50%), var(--ink);
    color: #C9C4E8;
}
.bundle__text { margin: 16px 0 22px; max-width: 460px; }
.bundle__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.bundle__price b { font-family: var(--display); font-size: 42px; color: #fff; }
.bundle__price s { color: #8E88B5; font-size: 18px; }
.bundle__price span { padding: 4px 10px; border-radius: 999px; background: var(--hot); color: #fff; font-size: 13px; font-weight: 700; }
.bundle__items { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bundle__item {
    display: grid; justify-items: center; gap: 10px;
    width: 30%; padding: 18px 10px 14px; border-radius: 22px;
    background: linear-gradient(160deg, var(--c1), var(--c2));
    color: #fff; font-size: 13px; font-weight: 700; text-align: center;
    animation: float 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.4s);
}
.bundle__item .art { width: 82%; }
.bundle__plus { font-family: var(--display); font-size: 30px; color: var(--lime); }

/* ---------- Bandeau roue ---------- */
.wheel-band { padding: 0 0 clamp(64px, 9vw, 110px); }
.wheel-band__inner {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    padding: 26px 32px; border-radius: 28px;
    background: linear-gradient(110deg, #FFE7F0, #EFE7FF 55%, #E2F8FF);
    border: 1px solid var(--line);
}
.wheel-band__inner > div:nth-child(2) { flex: 1; min-width: 220px; }
.wheel-band__title { font-size: 26px; margin-bottom: 4px; }
.wheel-band p { color: var(--muted); }
.wheel-band__mini {
    width: 74px; height: 74px; border-radius: 50%; flex: none;
    background: conic-gradient(var(--hot) 0 60deg, var(--violet) 0 120deg, var(--lime) 0 180deg, var(--cyan) 0 240deg, var(--orange) 0 300deg, var(--ink) 0);
    border: 5px solid #fff; box-shadow: var(--shadow);
    animation: spin 6s linear infinite;
}

/* ---------- Avis ---------- */
.reviews { overflow: hidden; }
.reviews .wrap { margin-bottom: 36px; }
.marquee--reviews { margin-bottom: 18px; }
.marquee--reviews .marquee__track { gap: 18px; padding-right: 18px; align-items: stretch; animation-duration: 55s; }
.review {
    display: flex; flex-direction: column; gap: 12px;
    width: 340px; margin: 0; padding: 22px;
    border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
}
.review blockquote { margin: 0; flex: 1; font-size: 15px; }
.review figcaption { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.review figcaption b { color: var(--text); }
.review figcaption em { font-style: normal; font-size: 12px; font-weight: 600; color: #16A34A; }
.review figcaption em::before { content: '✓ '; }
.review__avatar {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--hot)); color: #fff; font-weight: 700; font-size: 13px;
}

/* ---------- UGC ---------- */
.ugc { padding-top: 0; }
.ugc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.ugc__text { max-width: 360px; color: var(--muted); }
.ugc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ugc__tile {
    position: relative; overflow: hidden; display: grid; place-items: center;
    aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius);
    background: linear-gradient(200deg, var(--c1), var(--c2));
}
.ugc__tile:nth-child(odd) { background: linear-gradient(20deg, var(--c2), var(--c1)); }
.ugc__tile .art { width: 58%; transition: transform .6s var(--spring); }
.ugc__tile:hover .art { transform: scale(1.15) rotate(6deg); }
.ugc__overlay {
    position: absolute; inset: auto 0 0 0;
    display: grid; gap: 2px; padding: 40px 16px 14px;
    background: linear-gradient(transparent, rgba(14, 11, 31, .85));
    color: #fff; text-align: left; font-size: 13px;
    transform: translateY(30%); opacity: 0; transition: transform .35s var(--ease), opacity .35s;
}
.ugc__overlay b { font-size: 15px; }
.ugc__tile:hover .ugc__overlay, .ugc__tile:focus-visible .ugc__overlay { transform: none; opacity: 1; }

/* ---------- Newsletter ---------- */
.newsletter { padding-top: 0; }
.newsletter__inner {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
    padding: clamp(28px, 5vw, 56px); border-radius: 32px;
    background: linear-gradient(120deg, var(--violet), var(--hot));
    color: #FBE9FF;
    background-size: 200% 200%;
    animation: pan 10s ease-in-out infinite alternate;
}
.newsletter__inner p { margin-top: 12px; }
@keyframes pan { to { background-position: 100% 100%; } }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter__form input {
    flex: 1; min-width: 200px; height: 54px; padding: 0 20px;
    border: 2px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--text);
}
.newsletter__form input:focus { outline: none; border-color: var(--lime); }
.newsletter__form input.is-error { border-color: var(--ink); animation: shake .4s; }
.newsletter__form .btn { height: 54px; }
.newsletter__note { flex-basis: 100%; font-size: 13px; opacity: .85; }
.newsletter__form.is-done input, .newsletter__form.is-done .btn { display: none; }
.newsletter__form.is-done .newsletter__note { font-size: 18px; font-weight: 700; opacity: 1; animation: rise .5s var(--spring); }

/* ---------- Vus récemment ---------- */
.recent { padding-top: 0; }
.recent .title { margin-bottom: 22px; font-size: 30px; }
.recent__row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.recent__item {
    display: flex; align-items: center; gap: 12px; flex: none;
    padding: 10px 18px 10px 10px; border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface); text-align: left;
    animation: card-in .4s var(--spring) both;
}
.recent__item .mini-art { width: 54px; height: 54px; }
.recent__item small { display: block; color: var(--muted); }

/* ---------- Illustrations miniatures ---------- */
.mini-art {
    display: grid; place-items: center; flex: none;
    border-radius: 12px; background: linear-gradient(135deg, var(--c1), var(--c2));
}
.mini-art .art { width: 78%; }

/* ---------- Pied de boutique ---------- */
.shop-foot { background: var(--ink); color: #A8A2CF; padding: 56px 0; font-size: 14px; }
.shop-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; }
.shop-foot p { margin-top: 12px; max-width: 280px; }
.shop-foot h3 { margin-bottom: 12px; font-family: var(--font); font-size: 14px; color: #fff; letter-spacing: 0; }
.shop-foot a, .shop-foot span { display: block; margin-bottom: 6px; }
.shop-foot a:hover { color: #fff; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-badges span { display: inline-block; margin: 0; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; }

/* ---------- Encart ANW ---------- */
.anw { background: #05040C; color: #C9C4E8; padding: clamp(56px, 8vw, 96px) 0; }
.anw__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.anw__kicker { color: var(--lime); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.anw__title { margin: 14px 0; font-size: clamp(30px, 4vw, 46px); color: #fff; }
.anw__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.anw__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.anw__list li {
    display: grid; gap: 2px; padding: 14px 18px;
    border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
    font-size: 14px;
}
.anw__list b { color: #fff; }

/* ---------- Notifications d'achats ---------- */
.proof-toast {
    position: fixed; left: 20px; bottom: 20px; z-index: 80;
    display: flex; align-items: center; gap: 12px;
    width: min(360px, calc(100vw - 110px)); padding: 12px 38px 12px 12px; overflow: hidden;
    border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    transform: translateX(calc(-100% - 40px)); transition: transform .6s var(--spring);
}
.proof-toast.is-visible { transform: none; }
.proof-toast__art .mini-art { width: 56px; height: 56px; }
.proof-toast__body p { font-size: 14px; line-height: 1.35; }
.proof-toast__body small { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.proof-toast__body small::before { content: '✓'; color: #16A34A; font-weight: 700; }
.proof-toast__close { position: absolute; top: 4px; right: 8px; border: 0; background: none; font-size: 20px; color: var(--muted); }
.proof-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--violet), var(--hot)); transform-origin: 0 50%; transform: scaleX(0); }
.proof-toast.is-visible .proof-toast__timer { animation: drain 6s linear forwards; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Bouton cadeau ---------- */
.gift-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 80;
    display: grid; place-items: center;
    width: 64px; height: 64px; border: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--hot), var(--orange)); color: #fff;
    box-shadow: 0 16px 34px -10px rgba(255, 61, 127, .8);
    animation: gift 3s ease-in-out infinite;
}
.gift-fab svg { width: 28px; height: 28px; }
.gift-fab__label {
    position: absolute; top: -6px; right: -8px;
    padding: 2px 7px; border-radius: 999px; background: var(--lime); color: var(--ink);
    font-size: 11px; font-weight: 800;
}
.gift-fab.is-used { display: none; }
@keyframes gift { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg) scale(1.08); } 80% { transform: rotate(12deg) scale(1.08); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(4deg); } }

/* ---------- Toast simple ---------- */
.toast {
    position: fixed; left: 50%; bottom: 100px; z-index: 150;
    padding: 12px 20px; border-radius: 999px;
    background: var(--ink); color: #fff; font-weight: 600; font-size: 14.5px;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
    transition: transform .4s var(--spring), opacity .3s;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Overlay, tiroir, modales ---------- */
.overlay {
    position: fixed; inset: 0; z-index: 110;
    background: rgba(14, 11, 31, .55); backdrop-filter: blur(3px);
    animation: fade .3s;
}
@keyframes fade { from { opacity: 0; } }

.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
    display: flex; flex-direction: column;
    width: min(440px, 100vw); overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); box-shadow: -30px 0 60px -30px rgba(14, 11, 31, .5);
    transform: translateX(105%); transition: transform .5s var(--ease);
    visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 22px; }
.drawer__head h2 span { color: var(--muted); font-size: 16px; font-family: var(--font); font-weight: 500; }
.drawer__close, .modal__close {
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 0; border-radius: 50%; background: var(--bg); font-size: 24px; line-height: 1;
    transition: transform .3s var(--spring), background .2s;
}
.drawer__close:hover, .modal__close:hover { transform: rotate(90deg); background: var(--line); }

.ship { padding: 14px 22px; background: var(--bg); }
.ship__text { font-size: 14px; margin-bottom: 8px; }
.ship__text b { color: var(--violet); }
.ship__bar { height: 8px; border-radius: 999px; background: #E3DDF7; overflow: hidden; }
.ship__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--hot)); transition: width .8s var(--spring); }
.ship.is-free .ship__bar span { background: linear-gradient(90deg, #22C576, var(--lime)); }

.drawer__timer { padding: 8px 22px; font-size: 13px; color: var(--hot); font-weight: 600; background: #FFF0F5; }
.drawer__timer b { font-variant-numeric: tabular-nums; }

.drawer__items { flex: 1 0 auto; margin: 0; padding: 8px 22px; list-style: none; }
.line {
    display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    animation: line-in .45s var(--spring) both;
}
.line.is-removing { animation: line-out .35s var(--ease) forwards; }
@keyframes line-in { from { opacity: 0; transform: translateX(30px); } }
@keyframes line-out { to { opacity: 0; transform: translateX(60px); height: 0; padding: 0; } }
.line .mini-art { width: 64px; height: 64px; }
.line__name { font-weight: 700; font-size: 15px; }
.line__price { font-size: 14px; color: var(--muted); }
.qty { display: inline-flex; align-items: center; margin-top: 6px; border: 1px solid var(--line); border-radius: 999px; }
.qty button { width: 30px; height: 30px; border: 0; background: none; font-weight: 700; }
.qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: 14px; }
.line__total { display: grid; justify-items: end; gap: 6px; font-weight: 700; }
.line__remove { border: 0; background: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; }

.drawer__empty { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px; text-align: center; color: var(--muted); }
.drawer.is-empty .drawer__empty { display: flex; }
.drawer.is-empty .drawer__items, .drawer.is-empty .drawer__foot, .drawer.is-empty .drawer__timer { display: none; }

.upsell { margin: 0 22px 12px; padding: 12px; border-radius: 16px; border: 1px dashed var(--violet); background: #F7F3FF; }
.upsell__title { margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--violet); text-transform: uppercase; letter-spacing: .05em; }
.upsell__item { display: flex; align-items: center; gap: 12px; }
.upsell__item .mini-art { width: 48px; height: 48px; }
.upsell__item div { flex: 1; font-size: 14px; }
.upsell__item small { display: block; color: var(--muted); }
.upsell__item button { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--violet); color: #fff; font-weight: 700; font-size: 13px; }

.drawer__foot {
    position: sticky; bottom: 0; z-index: 2;
    padding: 16px 22px 20px; border-top: 1px solid var(--line);
    background: var(--surface); box-shadow: 0 -12px 24px -18px rgba(14, 11, 31, .35);
}
.promo { display: flex; gap: 8px; }
.promo input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; text-transform: uppercase; }
.promo button { padding: 0 16px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; }
.promo__msg { min-height: 20px; margin: 6px 0 4px; font-size: 13px; font-weight: 600; }
.promo__msg.is-ok { color: #16A34A; }
.promo__msg.is-ko { color: var(--hot); }
.totals { margin: 0 0 12px; font-size: 14.5px; }
.totals div { display: flex; justify-content: space-between; padding: 3px 0; }
.totals dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.totals__discount { color: #16A34A; }
.totals__total { margin-top: 6px; padding-top: 10px !important; border-top: 1px solid var(--line); font-size: 18px; font-weight: 700; }
.totals__total dd { font-family: var(--display); font-size: 22px; }
.drawer__points { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.drawer__points b { color: var(--violet); }
.drawer__secure { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--muted); }

.modal {
    position: fixed; inset: 0; z-index: 130;
    display: grid; place-items: center; padding: 16px;
    background: rgba(14, 11, 31, .6); backdrop-filter: blur(4px);
    animation: fade .3s;
}
.modal[hidden] { display: none; }
.modal__box {
    position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
    border-radius: 28px; background: var(--surface);
    animation: modal-in .5s var(--spring);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(40px) scale(.94); } }
.modal__close { position: absolute; top: 14px; right: 14px; z-index: 3; }

.quick { display: grid; grid-template-columns: 1fr 1fr; }
.quick__art { display: grid; place-items: center; min-height: 360px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.quick__art .art { width: 70%; animation: float 5s ease-in-out infinite; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .3)); }
.quick__body { display: flex; flex-direction: column; gap: 10px; padding: 34px 30px 30px; }
.quick__cat { font-size: 12.5px; font-weight: 700; color: var(--violet); text-transform: uppercase; letter-spacing: .06em; }
.quick__name { font-size: 30px; }
.quick__rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.quick__tagline { color: var(--muted); }
.quick__viewers, .quick__delivery { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.quick__viewers { color: var(--violet); }
.quick__delivery { padding: 10px 12px; border-radius: 12px; background: #ECFDF3; color: #166534; display: block; }
.quick__perks { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.quick__perks li::before { content: '✓ '; color: #16A34A; font-weight: 700; }

.modal__box--wheel { width: min(820px, 100%); background: linear-gradient(150deg, #fff, #F3EDFF); }
.wheel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding: 34px; }
.wheel__disc-wrap { position: relative; aspect-ratio: 1; max-width: 340px; width: 100%; justify-self: center; }
.wheel__disc {
    width: 100%; height: 100%; border-radius: 50%;
    box-shadow: 0 0 0 8px var(--ink), 0 0 0 11px var(--lime), var(--shadow-lg);
    transition: transform 5.2s cubic-bezier(.12, .7, .05, 1);
}
.wheel__disc text { font-family: var(--display); font-weight: 700; font-size: 11px; fill: #fff; }
.wheel__pointer {
    position: absolute; top: -14px; left: 50%; z-index: 2;
    width: 0; height: 0; transform: translateX(-50%);
    border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid var(--hot);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3));
}
.wheel__disc-wrap.is-spinning .wheel__pointer { animation: tick-pointer .15s ease-in-out infinite alternate; }
@keyframes tick-pointer { to { transform: translateX(-50%) rotate(-12deg); } }
.wheel__hub {
    position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
    width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--ink); color: #fff; border: 4px solid #fff;
    font-family: var(--display); font-weight: 700; font-size: 15px;
}
.wheel__title { margin-bottom: 10px; font-size: 32px; }
.wheel__text { color: var(--muted); margin-bottom: 18px; }
.wheel__form { display: grid; gap: 10px; }
.wheel__form input { height: 50px; padding: 0 18px; border: 2px solid var(--line); border-radius: 14px; }
.wheel__form input:focus { outline: none; border-color: var(--violet); }
.wheel__form input.is-error { border-color: var(--hot); animation: shake .4s; }
.wheel__note { font-size: 12px; color: var(--muted); text-align: center; }
.wheel__result { display: grid; gap: 12px; animation: rise .5s var(--spring); }
.wheel__code { text-align: center; }
.wheel__code span {
    display: inline-block; padding: 12px 24px; border: 2px dashed var(--violet); border-radius: 14px;
    font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: .08em; color: var(--violet);
    background: #fff;
}

.modal__box--checkout { width: min(460px, 100%); padding: 40px 32px 28px; text-align: center; }
.checkout__title { font-size: 26px; margin-bottom: 18px; }
.checkout__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.checkout__steps li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px; background: var(--bg);
    color: var(--muted); font-weight: 600; transition: color .3s, background .3s;
}
.checkout__steps li::before {
    content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%;
    border: 3px solid var(--line); border-top-color: var(--violet);
}
.checkout__steps li.is-active { color: var(--text); }
.checkout__steps li.is-active::before { animation: spin .7s linear infinite; }
.checkout__steps li.is-done { color: #166534; background: #ECFDF3; }
.checkout__steps li.is-done::before { border-color: #22C576; background: #22C576; animation: none; box-shadow: inset 0 0 0 3px #ECFDF3; }
.checkout--done { display: grid; gap: 12px; }
.checkout--done p { color: var(--muted); margin-bottom: 8px; }
.checkout__check svg { width: 84px; height: 84px; margin: 0 auto 6px; }
.checkout__check circle { fill: none; stroke: #22C576; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s var(--ease) forwards; }
.checkout__check path { fill: none; stroke: #22C576; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .5s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.confetti { position: fixed; inset: 0; z-index: 160; width: 100%; height: 100%; pointer-events: none; }

/* Produit qui vole vers le panier */
.flyer { position: fixed; z-index: 170; pointer-events: none; border-radius: 16px; }

/* ---------- Apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Mode "leviers marketing" ---------- */
.lever-rel { position: relative; }
.lever-tag { display: none; }
body.levers-on [data-lever] { outline: 2px dashed var(--hot); outline-offset: 3px; }
body.levers-on .lever-tag {
    position: absolute; top: 6px; left: 6px; z-index: 60;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--hot); color: #fff;
    font: 700 11px/1.4 var(--font); letter-spacing: .02em; text-transform: none; white-space: nowrap;
    box-shadow: 0 6px 16px -6px rgba(255, 61, 127, .9);
    pointer-events: none;
    animation: rise .4s var(--spring) both;
}
/* Petits éléments : l'étiquette passe au-dessus pour ne pas masquer le contenu */
body.levers-on :is(.live-pill, .hero__proof, .search, .countdown, .btn, .gift-fab, .quick__viewers, .quick__delivery) > .lever-tag { top: -13px; left: 10px; }
body.levers-on .lever-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
body.levers-on [data-lever].is-pulse { animation: lever-pulse 1.2s var(--ease) 2; }
@keyframes lever-pulse { 50% { outline-color: var(--lime); outline-offset: 10px; } }

.levers-panel {
    position: fixed; right: 20px; bottom: 100px; z-index: 95;
    width: min(330px, calc(100vw - 40px)); max-height: calc(100vh - 200px); overflow-y: auto;
    padding: 18px; border-radius: 20px;
    background: rgba(14, 11, 31, .96); color: #C9C4E8; font-size: 13.5px;
    box-shadow: var(--shadow-lg);
    animation: modal-in .45s var(--spring);
}
.levers-panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: #fff; font-size: 16px; }
.levers-panel__close { border: 0; background: none; color: #fff; font-size: 22px; }
.levers-panel ul { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.levers-panel li button {
    display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px; background: rgba(255, 255, 255, .04); text-align: left; color: inherit; font-size: 12.5px;
    transition: background .2s, border-color .2s;
}
.levers-panel li button:hover { background: rgba(255, 61, 127, .14); border-color: var(--hot); }
.levers-panel li b { color: #fff; font-size: 13.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .head__nav { display: none; }
    .flash__grid, .grid { grid-template-columns: repeat(3, 1fr); }
    .flash__grid .flash-card:nth-child(4) { display: none; }
}

@media (max-width: 860px) {
    .demo-bar__text span { display: none; }
    .hero__inner { grid-template-columns: 1fr; padding-top: 36px; min-height: 0; }
    .hero__stage { max-width: 420px; }
    .flash__grid, .grid { grid-template-columns: repeat(2, 1fr); }
    .flash__grid .flash-card:nth-child(4) { display: block; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
    .bundle__inner, .newsletter__inner, .anw__inner { grid-template-columns: 1fr; }
    .ugc__grid { grid-template-columns: repeat(2, 1fr); }
    .shop-foot__grid { grid-template-columns: 1fr 1fr; }
    .quick, .wheel { grid-template-columns: 1fr; }
    .quick__art { min-height: 240px; }
    .wheel { padding: 26px 20px; }
    .wheel__disc-wrap { max-width: 260px; }
}

@media (max-width: 600px) {
    .demo-bar { gap: 10px; padding: 8px 12px; }
    .demo-bar__text { display: none; }
    .demo-bar__actions { margin-left: auto; }
    .head__inner { gap: 10px; height: 64px; }
    .logo { font-size: 24px; }
    .search { max-width: none; }
    .search input { height: 40px; }
    .hero__title { font-size: 42px; }
    .chip { font-size: 12px; padding: 7px 12px; }
    .chip--a { left: 0; }
    .chip--b { right: 0; }
    .chip--c { left: 0; }
    .countdown__cell { min-width: 64px; }
    .countdown__cell b { font-size: 30px; }
    .flash__grid, .grid { gap: 12px; }
    .card__body { padding: 12px; }
    .card__name { font-size: 15px; }
    .card__meta .card__viewers { display: none; }
    .price b { font-size: 17px; }
    .add-btn { width: 40px; height: 40px; }
    .card__quick { display: none; }
    .flash-card__body { padding: 12px; }
    .flash-card__off { width: 48px; height: 48px; font-size: 13px; }
    .stock__text span:last-child { display: none; }
    .review { width: 280px; }
    .bundle__item span { font-size: 11px; }
    .proof-toast { left: 12px; bottom: 12px; }
    .gift-fab { right: 12px; bottom: 12px; width: 56px; height: 56px; }
    .levers-panel { right: 12px; bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    .marquee { overflow-x: auto; }
    .reveal { opacity: 1; transform: none; }
}