/* ═══════════════════════════════════════════════════════════════════════
   PPROD Storefront — LIFTING UI v5 (hero 100% legacy, scopé .lift-on)
   Évolution d'UI posée APRÈS les CSS legacy : le DOM, le layout et toutes
   les interactions (l'UX) sont inchangés — seules les SURFACES évoluent.
   Le HERO (nav, titre, chips, tuiles de pricing, preview) est laissé
   100 % legacy à la demande. Toutes les règles exigent body.lift-on (posé
   par le seul layout legacy) : même si ce <link> persiste dans le head via
   Turbo, il est inerte sur les autres designs (home, page Store claire,
   connexion). Retirer ce <link> restitue le pixel-perfect legacy strict.

   Langage : verre en dégradé (lumière haute + hairline), rayons harmonisés
   (cartes 16-20, tuiles 14, chips pill), accent produit via --c-accent*.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Fondations ───────────────────────────────────────────────────────── */

.body-product.lift-on {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.body-product.lift-on :focus-visible {
    outline: 2px solid rgba(var(--c-accent-rgb, 255, 175, 6), 0.85);
    outline-offset: 3px;
}
.body-product.lift-on :focus:not(:focus-visible) {
    outline: none;
}

.body-product.lift-on {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.body-product.lift-on::-webkit-scrollbar {
    width: 10px;
}
.body-product.lift-on::-webkit-scrollbar-track {
    background: transparent;
}
.body-product.lift-on::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
}
.body-product.lift-on::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--c-accent-rgb, 255, 175, 6), 0.55);
}

/* Vignette + grain cinéma : concentrent la lumière, unifient les fonds. */
.body-product.lift-on::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10999;
    pointer-events: none;
    background: radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(0, 0, 0, 0.26) 100%);
}
.body-product.lift-on::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 11000;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
}

.body-product.lift-on .why-title,
.body-product.lift-on .chain-title,
.body-product.lift-on .panel-title,
.body-product.lift-on .why-card-desc {
    text-wrap: balance;
}

/* ─── Timeline de scroll : le point actif rayonne ─────────────────────── */

body.lift-on .scroll-timeline .st-item.is-active .st-dot {
    background: rgba(var(--c-accent-rgb, 255, 175, 6), 1);
    box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb, 255, 175, 6), 0.16), 0 0 14px rgba(var(--c-accent-rgb, 255, 175, 6), 0.75);
}

/* ─── Demo strips : surface raffinée, index accent, play réactif ──────── */

.body-product.lift-on .demo-strip {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.055) inset, 0 18px 44px rgba(0, 0, 0, 0.30);
}
.body-product.lift-on .demo-strip .strip-index {
    color: rgba(var(--c-accent-rgb, 255, 175, 6), 0.85);
}
.body-product.lift-on .demo-strip .play-btn:hover {
    border-color: rgba(var(--c-accent-rgb, 255, 175, 6), 0.55);
    background: rgba(var(--c-accent-rgb, 255, 175, 6), 0.12);
}
.body-product.lift-on .demo-strip .play-btn:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* ─── Why : valeurs en dégradé accent, cartes lumineuses ──────────────── */

.body-product.lift-on .why-wrap .why-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.055) inset, 0 18px 44px rgba(0, 0, 0, 0.30);
}
.body-product.lift-on .why-wrap .why-card .why-card-value {
    background: linear-gradient(135deg, var(--c-accent-l2, #ffc862), var(--c-accent, #FFAF06));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--c-accent, #FFAF06); /* fallback si background-clip:text indisponible */
}

/* ─── Chain : onglet actif en carte de verre, chips pilules ───────────── */

.body-product.lift-on .chain-wrap .chain-tab {
    border-radius: 12px;
}
.body-product.lift-on .chain-wrap .chain-tab.is-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.body-product.lift-on .chain-wrap .panel-chip {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* ─── Plans (section pricing bas de page) ─────────────────────────────── */

.body-product.lift-on .plan-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), #121216;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 48px rgba(0, 0, 0, 0.35);
}
.body-product.lift-on .plan-card:hover {
    border-color: rgba(var(--c-accent-rgb, 255, 175, 6), 0.35);
}
.body-product.lift-on .plan-card__cta {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* CTA à vie : couleurs LEGACY conservées (rouge --c-glow, hover #c24c49). */
.body-product.lift-on .plan-card__cta--ghost:hover {
    border-color: rgba(var(--c-accent-rgb, 255, 175, 6), 0.45);
    transform: translateY(-2px);
}

/* ─── Footer de page produit : CTA principal dans le langage accent ───── */

/* CTA footer : couleurs LEGACY conservées (noir #1a1413 → rouge --c-glow). */
.body-product.lift-on .footer-brand .footer-cta-ghost {
    transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.body-product.lift-on .footer-brand .footer-cta-ghost:hover {
    border-color: rgba(var(--c-accent-rgb, 255, 175, 6), 0.45);
    transform: translateY(-2px);
}

/* ─── Cookies : micro-interactions ────────────────────────────────────── */

.body-product.lift-on .cookie-banner__btn {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease, background-color 0.2s ease;
}
.body-product.lift-on .cookie-banner__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.body-product.lift-on .cookie-banner__btn:active {
    transform: translateY(0) scale(0.97);
}

/* ─── Chrome de page : bannière cookies + footer légal en verre sombre ── */

.body-product.lift-on .cookie-banner {
    background: rgba(15, 16, 24, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px rgba(0, 0, 0, 0.45);
}

.body-product.lift-on .legal-footer {
    background: rgba(9, 9, 13, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #8b8f9a;
}
.body-product.lift-on .legal-footer a {
    color: #c6c9d2;
    transition: color 0.2s ease;
}
.body-product.lift-on .legal-footer a:hover {
    color: rgba(var(--c-accent-rgb, 255, 175, 6), 1);
}

/* ─── Sobriété : neutralisé sous prefers-reduced-motion ───────────────── */

@media (prefers-reduced-motion: reduce) {
    .body-product.lift-on .demo-strip .play-btn:active,
    .body-product.lift-on .cookie-banner__btn:hover,
    .body-product.lift-on .cookie-banner__btn:active,
    .body-product.lift-on .plan-card__cta--ghost:hover,
    .body-product.lift-on .footer-brand .footer-cta-ghost:hover {
        transform: none;
    }
}