/* ============================================================
   VIDEOFUNNEL — LANDING PAGE
   Thème : crème chaud + encre navy + flamme violet→corail
   Typo  : Manrope (titres, esprit SF Pro) · DM Sans (texte)
   Accent unique : dégradé flamme (.flame / .flame-light)
   ============================================================ */

:root {
    --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --display: "Manrope", "DM Sans", ui-sans-serif, system-ui, sans-serif;

    --ground: #F7F5F0;
    --paper: #FFFFFF;
    --cream-deep: #EFECE3;
    --ink: #221F35;
    --ink-soft: #3B3752;
    --muted: #6D6980;
    --faint: #8B8798;
    --line: #E8E4DB;
    --line-strong: #D9D4C9;

    --purple: #6657E8;
    --purple-deep: #5142CC;
    --purple-soft: #EFECFF;
    --lilac: #9F8CFF;
    --magenta: #C24BB4;
    --coral: #F05B3F;
    --coral-soft: #FFEFE9;
    --amber: #F5A73B;
    --green: #239B6B;
    --green-soft: #EAF7F1;

    --night: #191631;
    --night-2: #221D40;
    --night-line: rgba(255, 255, 255, .09);
    --night-muted: rgba(233, 230, 255, .72);

    --flame: linear-gradient(100deg, #6657E8 0%, #A34FE0 34%, #EE5D68 68%, #F5A73B 100%);
    --flame-soft: linear-gradient(100deg, #9F8CFF 0%, #C87BF0 34%, #FF8D7E 68%, #FFC46B 100%);

    --shadow-lg: 0 30px 80px -22px rgba(34, 31, 53, .25);
    --shadow-md: 0 18px 50px -12px rgba(34, 31, 53, .14);
    --shadow-soft: 0 6px 24px rgba(34, 31, 53, .07);

    --r: 20px;
    --r-lg: 28px;
    --r-xl: 40px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--ground);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

::selection {
    background: var(--purple);
    color: #fff;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.033em;
    text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

section { scroll-margin-top: 86px; }

.nowrap { white-space: nowrap; }

/* Accent typographique unique : le dégradé flamme */
.flame {
    background: var(--flame);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.flame-light {
    background: var(--flame-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Animations d'entrée ---------- */

html.js .load-in {
    opacity: 0;
    transform: translateY(22px);
    animation: rise .9s var(--ease) var(--d, 0s) forwards;
}

@keyframes rise {
    to { opacity: 1; transform: none; }
}

html.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .85s var(--ease) var(--d, 0s), transform .85s var(--ease) var(--d, 0s);
}

html.js .reveal.in {
    opacity: 1;
    transform: none;
}

html.all-in .reveal,
html.all-in .load-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* ---------- Boutons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 27px;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .005em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), filter .35s var(--ease);
}

.btn svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }

.btn:hover svg { transform: translateX(4px); }

.btn-lg { padding: 18px 32px; font-size: 16.5px; }
.btn-sm { padding: 11px 20px; font-size: 14px; }

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #6B5BE9, #5948D5);
    box-shadow: 0 14px 34px -10px rgba(102, 87, 232, .55);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -12px rgba(102, 87, 232, .65);
}

.btn-flame {
    color: #fff;
    background: linear-gradient(115deg, #6657E8 0%, #A34FE0 38%, #EE5D68 74%, #F5A73B 108%);
    box-shadow: 0 16px 40px -10px rgba(238, 93, 104, .5);
}

.btn-flame:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 22px 52px -12px rgba(238, 93, 104, .6);
}

.btn-primary::after,
.btn-flame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s var(--ease);
}

.btn-primary:hover::after,
.btn-flame:hover::after { transform: translateX(120%); }

.btn-ghost {
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--line-strong);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    border-color: var(--ink);
    background: rgba(255, 255, 255, .6);
}

.btn-light {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45);
}

.btn-light:hover { transform: translateY(-2px); }

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    transition: background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}

.site-header.scrolled {
    background: rgba(247, 245, 240, .8);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 1px 0 var(--line), 0 12px 32px -18px rgba(34, 31, 53, .18);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
    height: 74px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 148px; height: auto; display: block; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.main-nav > a:not(.btn) {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    position: relative;
    padding: 6px 0;
}

.main-nav > a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--flame);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}

.main-nav > a:not(.btn):hover::after { transform: scaleX(1); }

.nav-cta { margin-left: 8px; }

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
}

.menu-toggle span {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .35s var(--ease), opacity .3s;
}

.menu-toggle.open span:first-child { transform: translateY(4.2px) rotate(45deg); }
.menu-toggle.open span:last-child { transform: translateY(-4.2px) rotate(-45deg); }

/* ============================================================
   BLOC 1 · HERO
   ============================================================ */

.hero {
    position: relative;
    padding: 168px 0 46px;
    overflow: clip;
}

/* Desktop : le hero occupe tout l'écran, la section suivante reste sous le pli.
   Flex colonne : hero-layout absorbe l'espace libre (contenu centré), .trust reste en bas. */
@media (min-width: 901px) {
    .hero {
        display: flex;
        flex-direction: column;
        min-height: 100svh;
    }

    .hero > .hero-layout { flex: 1 0 auto; }
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
}

.aurora-1 {
    width: 560px;
    height: 560px;
    top: -140px;
    right: 4%;
    background: rgba(102, 87, 232, .21);
    animation: drift 16s ease-in-out infinite alternate;
}

.aurora-2 {
    width: 440px;
    height: 440px;
    top: 320px;
    right: 26%;
    background: rgba(240, 91, 63, .13);
    animation: drift 19s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-70px, 46px) scale(1.12); }
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(34, 31, 53, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 31, 53, .05) 1px, transparent 1px);
    background-size: 74px 74px;
    -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 30%, transparent 100%);
}

.hero-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: center;
    gap: 56px;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: .01em;
}

.pill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--flame);
    box-shadow: 0 0 0 0 rgba(238, 93, 104, .45);
    animation: pulse 2.6s ease-out infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(238, 93, 104, .45); }
    70% { box-shadow: 0 0 0 9px rgba(238, 93, 104, 0); }
    100% { box-shadow: 0 0 0 0 rgba(238, 93, 104, 0); }
}

.hero h1 {
    margin: 26px 0 0;
    font-size: clamp(2.9rem, 5.2vw, 4.55rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.042em;
}

.hero-sub {
    margin-top: 26px;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--muted);
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.btn-ghost svg:first-child { transition: transform .35s var(--ease); }
.btn-ghost:hover svg:first-child { transform: scale(1.12); }

.hero-microcopy {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--faint);
    letter-spacing: .01em;
}

/* --- Téléphone / vidéo --- */

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.phone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 480px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 35% 30%, rgba(102, 87, 232, .35), transparent 60%),
        radial-gradient(circle at 70% 72%, rgba(240, 91, 63, .3), transparent 60%);
    filter: blur(70px);
    animation: glowpulse 7s ease-in-out infinite alternate;
}

@keyframes glowpulse {
    from { opacity: .75; transform: translate(-50%, -50%) scale(.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

.phone {
    position: relative;
    margin: 0;
    width: min(330px, 76vw);
    padding: 11px;
    background: linear-gradient(160deg, #2C2745, #17142A 55%, #2A2444);
    border-radius: 54px;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, .14),
        0 40px 90px -26px rgba(23, 20, 42, .55),
        0 12px 28px -14px rgba(23, 20, 42, .4);
    transform-style: preserve-3d;
    will-change: transform;
}

.phone-screen {
    position: relative;
    aspect-ratio: 1080 / 1920;
    border-radius: 44px;
    overflow: hidden;
    background: #0B1026;
}

.phone-screen video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sound-toggle {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    background: rgba(13, 11, 28, .55);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .3s var(--ease), background-color .3s;
}

.sound-toggle:hover { transform: scale(1.08); background: rgba(13, 11, 28, .75); }
.sound-toggle svg { width: 21px; height: 21px; }
.sound-toggle .ic-on { display: none; }
.sound-toggle.on .ic-on { display: block; }
.sound-toggle.on .ic-off { display: none; }

.float-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
}

.float-chip strong { font-weight: 700; color: var(--ink); }

.chip-ic {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
}

.chip-ic svg { width: 13px; height: 13px; stroke-width: 2.6; }
.chip-ic.ok { background: linear-gradient(135deg, #2FB989, #1F8A62); }
.chip-ic.warm { background: linear-gradient(135deg, #A34FE0, #EE5D68); }

.chip-a {
    top: 15%;
    right: calc(50% + 118px);
    animation: floaty 6s ease-in-out infinite alternate;
}

.chip-b {
    bottom: 12%;
    left: calc(50% + 106px);
    animation: floaty 7s .8s ease-in-out infinite alternate-reverse;
}

@keyframes floaty {
    from { transform: translateY(-7px); }
    to { transform: translateY(7px); }
}

/* --- Trust bar --- */

.trust {
    position: relative;
    margin-top: 84px;
}

.trust-label {
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
}

.marquee {
    margin-top: 26px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 84px;
    width: max-content;
    padding: 8px 42px;
    animation: scroll 34s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes scroll {
    to { transform: translateX(-50%); }
}

.wordmark { color: var(--ink); opacity: .4; transition: opacity .3s; }
.wordmark:hover { opacity: .9; }

/* Logos clients réels : encre uniforme, hauteur visuelle homogène */
.wm-logo {
    height: 40px;
    width: auto;
    opacity: .54;
    transition: opacity .3s;
}

.wm-logo:hover { opacity: .92; }

.wm-serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 25px; }
.wm-heavy { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .1em; }
.wm-sans { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.wm-caps { font-size: 14.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.wm-wide { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .26em; }

/* ============================================================
   SECTIONS — COMMUN
   ============================================================ */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--purple);
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--flame);
}

.eyebrow-dark { color: var(--lilac); }

.section-head {
    max-width: 780px;
    margin: 0 auto 68px;
    text-align: center;
}

.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--flame);
}

.section-head h2 {
    margin-top: 20px;
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    letter-spacing: -.038em;
}

.section-sub {
    margin-top: 20px;
    font-size: 18px;
    color: var(--muted);
    max-width: 620px;
    margin-inline: auto;
}

/* Variante sur fond sombre */
.section-head.on-dark h2 { color: #fff; }
.section-head.on-dark .section-sub { color: var(--night-muted); }
.section-head.on-dark .section-sub strong { color: #fff; }

.section-cta {
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

/* ============================================================
   BLOC 2 · LE PROBLÈME (sombre)
   ============================================================ */

.problem {
    position: relative;
    margin-top: 96px;
    padding: 118px 0 124px;
    background:
        radial-gradient(900px 480px at 18% 0%, rgba(102, 87, 232, .22), transparent 65%),
        radial-gradient(720px 420px at 88% 96%, rgba(240, 91, 63, .13), transparent 60%),
        var(--night);
    color: #fff;
}

.problem-noise,
.manifesto-noise,
.final-noise {
    position: absolute;
    inset: 0;
    background-image: var(--noise);
    background-size: 160px;
    opacity: .05;
    pointer-events: none;
}

/* --- Duel : boutique vs en ligne --- */

.duel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 900px;
    margin: 0 auto;
}

.duel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 58px 34px 28px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .11);
    backdrop-filter: blur(8px);
    transition: transform .5s var(--ease), border-color .5s;
}

.duel-card:hover { transform: translateY(-6px); }

.duel-irl:hover { border-color: rgba(245, 167, 59, .4); }
.duel-web:hover { border-color: rgba(255, 255, 255, .22); }

.duel-badge {
    position: absolute;
    top: -15px;
    left: 0;
    text-align: center;
    padding: 8px 16px;
    border-radius: 99px;
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.badge-warm {
    color: #2E2413;
    background: linear-gradient(120deg, #FFD79A, #F5A73B);
    box-shadow: 0 10px 26px -8px rgba(245, 167, 59, .5);
}

.badge-cold {
    color: #E3E1F2;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
}

/* Conversation (boutique) */

.chat {
    display: grid;
    gap: 12px;
    flex: 1;
    align-content: center;
}

.chat-row { display: flex; align-items: flex-end; gap: 10px; }
.chat-row.me { justify-content: flex-end; }

.chat-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    font-family: var(--display);
    font-weight: 800;
    font-size: 15px;
    color: #2E2413;
    background: linear-gradient(135deg, #FFD79A, #F0965B);
}

.chat-bubble {
    max-width: 78%;
    padding: 13px 18px;
    border-radius: 18px 18px 18px 6px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 15.5px;
    line-height: 1.5;
    color: rgba(255, 251, 244, .95);
}

.chat-row.me .chat-bubble {
    border-radius: 18px 18px 6px 18px;
    background: rgba(159, 140, 255, .18);
    border-color: rgba(159, 140, 255, .3);
    color: #EDE9FF;
}

/* La reco posée sur le comptoir : un produit, pas 1 848 */

.hold {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-left: 48px;
    padding: 12px 15px;
    border-radius: 15px;
    background: linear-gradient(120deg, rgba(245, 167, 59, .14), rgba(245, 167, 59, .05));
    border: 1px solid rgba(245, 167, 59, .3);
}

.hold-thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), transparent 46%),
        linear-gradient(135deg, #F7C876, #D97E2E);
}

.hold-txt strong { display: block; font-size: 13.5px; font-weight: 700; color: #FFE1B0; }
.hold-txt span { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; font-weight: 600; color: rgba(255, 225, 176, .75); }
.hold-txt i {
    font-style: normal;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(110, 231, 176, .2);
    color: #8BE3BC;
    font-size: 9px;
}

/* Navigateur "en ligne" : saturation de choix, scroll frénétique, fermeture */

.ol-wrap { position: relative; margin: auto 0; --ol-loop: 9s; }

.ol-browser {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    animation: olWindow var(--ol-loop) linear infinite;
    transform-origin: 92% 6%;
}

.ol-chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ol-dots { display: flex; gap: 5px; }
.ol-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .16); }

.ol-tab {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--night-muted);
    background: rgba(255, 255, 255, .07);
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 0;
}

.ol-tab > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ol-close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    color: var(--night-muted);
    animation: olCloseFlash var(--ol-loop) linear infinite;
}

.ol-viewport { position: relative; height: 166px; overflow: hidden; }
.ol-feed { padding: 12px 16px 12px 12px; animation: olScroll var(--ol-loop) linear infinite; }

.ol-promo {
    height: 38px;
    border-radius: 10px;
    margin-bottom: 10px;
    background: repeating-linear-gradient(115deg, rgba(240, 91, 63, .32) 0 26px, rgba(240, 91, 63, .18) 26px 52px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #FFC9BC;
}

.ol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.ol-prod { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 7px; }
.ol-prod .ph { height: 40px; border-radius: 7px; background: linear-gradient(140deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); position: relative; overflow: hidden; }
.ol-prod.v2 .ph { background: linear-gradient(140deg, rgba(159, 140, 255, .22), rgba(255, 255, 255, .05)); }
.ol-prod.v3 .ph { background: linear-gradient(140deg, rgba(240, 91, 63, .18), rgba(255, 255, 255, .05)); }
.ol-prod.v4 .ph { background: linear-gradient(140deg, rgba(245, 167, 59, .2), rgba(255, 255, 255, .05)); }
.ol-prod .pb {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #FFD9CF;
    background: rgba(240, 91, 63, .55);
    border-radius: 4px;
    padding: 2px 4px;
}
.ol-prod .l1 { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .2); margin-top: 7px; }
.ol-prod .l2 { display: block; height: 6px; width: 62%; border-radius: 4px; background: rgba(255, 255, 255, .11); margin-top: 4px; }
.ol-prod .rowp { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.ol-prod .price { height: 7px; width: 34%; border-radius: 4px; background: rgba(255, 255, 255, .28); }
.ol-prod .btn2 { height: 12px; width: 38%; border-radius: 6px; background: rgba(159, 140, 255, .4); }

.ol-sb { position: absolute; top: 6px; bottom: 6px; right: 4px; width: 4px; border-radius: 99px; background: rgba(255, 255, 255, .07); }
.ol-sb i { position: absolute; left: 0; width: 100%; height: 17%; border-radius: 99px; background: rgba(255, 255, 255, .34); animation: olThumb var(--ol-loop) linear infinite; }

.ol-cursor {
    position: absolute;
    z-index: 5;
    width: 17px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5));
    animation: olCursor var(--ol-loop) linear infinite;
}
.ol-cursor svg { display: block; width: 100%; fill: #fff; stroke: #1E1B2E; stroke-width: 1.4; stroke-linejoin: round; }

.ol-gone {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--night-muted);
    opacity: 0;
    animation: olGone var(--ol-loop) linear infinite;
}
.ol-gone span { display: flex; align-items: center; gap: 8px; }
.ol-gone i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(240, 91, 63, .7); color: #FFA491; font-style: normal; font-size: 11px; }

@keyframes olScroll {
    0%, 7.8% { transform: translateY(0); }
    10% { transform: translateY(-9%); }
    12% { transform: translateY(-8.4%); }
    16% { transform: translateY(-24%); }
    18% { transform: translateY(-23%); }
    22.5% { transform: translateY(-41%); }
    25% { transform: translateY(-39.5%); }
    29% { transform: translateY(-55%); }
    31% { transform: translateY(-54%); }
    35% { transform: translateY(-67%); }
    38% { transform: translateY(-59%); }
    41% { transform: translateY(-70%); }
    44%, 87% { transform: translateY(-71.5%); }
    93%, 100% { transform: translateY(0); }
}

@keyframes olThumb {
    0%, 7.8% { top: 0; }
    10% { top: 10%; }
    12% { top: 9.4%; }
    16% { top: 26%; }
    18% { top: 25%; }
    22.5% { top: 45%; }
    25% { top: 43.5%; }
    29% { top: 61%; }
    31% { top: 60%; }
    35% { top: 74%; }
    38% { top: 65%; }
    41% { top: 78%; }
    44%, 87% { top: 82%; }
    93%, 100% { top: 0; }
}

@keyframes olCursor {
    0% { left: 62%; top: 40%; }
    7% { left: 70%; top: 55%; }
    11% { left: 68%; top: 62%; }
    16% { left: 72%; top: 52%; }
    20% { left: 66%; top: 64%; }
    25% { left: 71%; top: 56%; }
    30% { left: 64%; top: 66%; }
    35% { left: 70%; top: 58%; }
    38% { left: 65%; top: 50%; }
    42% { left: 69%; top: 60%; }
    47% { left: 72%; top: 44%; }
    54% { left: 92.2%; top: 7.4%; }
    56% { left: 91.9%; top: 7.1%; }
    62%, 87% { left: 91.9%; top: 7.1%; }
    100% { left: 62%; top: 40%; }
}

@keyframes olCloseFlash {
    0%, 54% { background: transparent; color: var(--night-muted); }
    56%, 61% { background: rgba(240, 91, 63, .85); color: #fff; }
    62%, 100% { background: transparent; color: var(--night-muted); }
}

@keyframes olWindow {
    0%, 61% { opacity: 1; transform: scale(1); }
    66%, 87% { opacity: 0; transform: scale(.93); }
    94%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes olGone {
    0%, 64% { opacity: 0; }
    70%, 84% { opacity: 1; }
    90%, 100% { opacity: 0; }
}

/* Verdicts + conséquences */

.duel-verdict {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-weight: 600;
    font-size: 16.5px;
}

.duel-verdict svg { width: 18px; height: 18px; stroke-width: 2.6; flex: 0 0 auto; }
.duel-verdict.good { color: #8BE3BC; }
.duel-verdict.bad { color: #FFA491; }

/* Comparateur : sur 100 visiteurs, combien achètent (même échelle) */

.convert-compare {
    display: grid;
    gap: 20px;
    max-width: 820px;
    margin: 0 auto;
    padding: 30px 36px 36px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .11);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.compare-title {
    margin-bottom: 4px;
    text-align: center;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    letter-spacing: -.02em;
    color: #fff;
}

.compare-row {
    display: grid;
    grid-template-columns: 116px 1fr 170px;
    align-items: center;
    gap: 18px;
}

.compare-label {
    font-family: var(--display);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.row-irl .compare-label { color: #FFD79A; }
.row-web .compare-label { color: var(--night-muted); }

.compare-track {
    position: relative;
    height: 32px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
}

.compare-fill {
    position: absolute;
    inset: 3px auto 3px 3px;
    width: 0;
    border-radius: 99px;
    transition: width 1s cubic-bezier(.22, 1, .36, 1);
}

.row-irl .compare-fill {
    background: linear-gradient(90deg, #FFD79A, #F5A73B);
    box-shadow: 0 0 20px rgba(245, 167, 59, .4);
}

.row-web .compare-fill {
    background: linear-gradient(90deg, #FF9E88, #F05B3F);
    box-shadow: 0 0 14px rgba(240, 91, 63, .55);
}

.convert-compare.in .row-irl .compare-fill { width: 30%; transition-delay: .25s; }
.convert-compare.in .row-web .compare-fill { width: max(2%, 12px); transition-delay: .65s; }

.compare-count {
    font-size: 15px;
    font-weight: 600;
    color: var(--night-muted);
    white-space: nowrap;
}

.compare-count strong {
    display: inline-block;
    margin-right: 7px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -.03em;
    vertical-align: -3px;
}

.row-irl .compare-count strong { color: #FFCE8F; }
.row-web .compare-count strong { color: #FFA491; }

.duel-gap {
    margin: 54px auto 50px;
    max-width: 720px;
    text-align: center;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.7vw, 2.1rem);
    line-height: 1.3;
    letter-spacing: -.025em;
    color: rgba(255, 255, 255, .62);
    text-wrap: balance;
}

.duel-gap strong { color: #fff; }

.gap-why {
    display: inline-block;
    margin-top: 10px;
    font-size: .82em;
    font-weight: 700;
    color: var(--night-muted);
}

.problem-punch {
    margin: 74px auto 0;
    max-width: 820px;
    text-align: center;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.4vw, 2.85rem);
    line-height: 1.14;
    letter-spacing: -.035em;
    text-wrap: balance;
}

/* ============================================================
   BLOC 3 · LA MÉTHODE
   ============================================================ */

.steps { padding: 122px 0 0; }

.steps-rail {
    position: relative;
    display: grid;
    gap: 104px;
}

.steps-rail::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 37px;
    width: 2px;
    background: linear-gradient(to bottom, var(--purple), var(--magenta), var(--coral), var(--amber));
    opacity: .22;
}

/* Point terminal en bas de la ligne (le bas du rail = bas du dernier step) */
.step:last-child::after {
    content: "";
    position: absolute;
    left: 38px;
    bottom: 30px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 6px rgba(245, 167, 59, .12), 0 0 16px rgba(245, 167, 59, .4);
    transform: translate(-50%, 50%);
}

.step {
    position: relative;
    /* z-index explicite : pendant le reveal (opacity/transform), le step devient un
       contexte d'empilement et passerait sous .steps-rail::after (z-index 0) sans lui */
    z-index: 1;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 54px;
    align-items: center;
}

.step-num {
    align-self: start;
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--purple);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

.step:nth-child(2) .step-num { color: #D6456C; }
.step:nth-child(3) .step-num { color: #E8862E; }

.step-copy h3 {
    font-size: clamp(1.6rem, 2.5vw, 2.05rem);
    letter-spacing: -.03em;
}

.step-kicker {
    margin-top: 14px;
    font-weight: 700;
    font-size: 16.5px;
    color: var(--purple);
}

.step:nth-child(2) .step-kicker { color: #D6456C; }
.step:nth-child(3) .step-kicker { color: #E8862E; }

.step-copy > p:not(.step-kicker):not(.step-callout) {
    margin-top: 12px;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}

/* Callout : le point clé de l'étape 2 */
.step-callout {
    margin-top: 20px;
    max-width: 460px;
    padding: 20px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFF4EC, #FFE8EE);
    border: 1px solid rgba(214, 69, 108, .2);
    box-shadow: 0 16px 38px -24px rgba(214, 69, 108, .55);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ink-soft);
}

.step-callout strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 21.5px;
    letter-spacing: -.02em;
}

.step-copy .aside {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--purple-soft);
    font-size: 15px;
    font-weight: 600;
    color: var(--purple-deep);
}

.step:nth-child(2) .step-copy .aside { background: #FFEDF0; color: #C2334F; }

/* Forces (étape 3) */
.forces {
    display: grid;
    gap: 10px;
    margin: 18px 0 16px;
}

.force {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 13px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.force strong { font-size: 14.5px; letter-spacing: .01em; }
.force span { font-size: 14.5px; color: var(--muted); }

/* --- Mock : quiz (étape 1) --- */

.step-visual { display: flex; justify-content: center; }

.quiz-mock,
.roas-mock {
    width: min(430px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 26px;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.quiz-mock:hover,
.roas-mock:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.qm-video {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #1E1B2E;
}

.qm-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 24%;
}

.qm-count,
.qm-clock {
    position: absolute;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(20, 16, 38, .72);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.qm-count { left: 12px; }
.qm-clock { right: 12px; }

.qm-clock svg {
    width: 11px;
    height: 11px;
    fill: #fff;
    stroke: none;
}

.qm-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 48px 18px 15px;
    background: linear-gradient(to top, rgba(20, 16, 38, .82), rgba(20, 16, 38, 0));
    color: #fff;
    font-weight: 700;
    font-size: 16.5px;
    letter-spacing: -.01em;
    text-align: center;
    text-shadow: 0 1px 10px rgba(20, 16, 38, .4);
}

.qm-answers { display: grid; gap: 9px; margin-top: 16px; }

.qm-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border: 1.5px solid var(--line);
    border-radius: 13px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--ground);
}

.qm-chip.selected {
    border-color: var(--purple);
    background: var(--purple-soft);
    color: var(--purple-deep);
    font-weight: 700;
    box-shadow: 0 6px 18px -6px rgba(102, 87, 232, .35);
}

.qm-chip svg { width: 16px; height: 16px; stroke-width: 2.6; color: var(--purple); }

.qm-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.qm-progress span {
    font-size: 12px;
    font-weight: 600;
    color: var(--faint);
    white-space: nowrap;
}

.qm-bar {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: var(--cream-deep);
    overflow: hidden;
}

.qm-bar i {
    display: block;
    width: 43%;
    height: 100%;
    border-radius: inherit;
    background: var(--flame);
}

/* --- Photo réelle : vidéo résultat (étape 2) --- */

.photo-phone {
    position: relative;
    margin: 0;
    width: min(310px, 74vw);
    padding: 10px;
    background: linear-gradient(160deg, #2C2745, #17142A 55%, #2A2444);
    border-radius: 46px;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, .14),
        var(--shadow-lg);
    transition: transform .5s var(--ease);
}

.photo-phone:hover { transform: translateY(-6px) rotate(-1deg); }

.photo-phone img {
    display: block;
    width: 100%;
    aspect-ratio: 720 / 1280;
    object-fit: cover;
    object-position: top;
    border-radius: 37px;
    background: #0B1026;
}

.photo-tags {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 44px);
}

.photo-tags span {
    padding: 7px 11px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    background: rgba(13, 11, 28, .62);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 99px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
}

/* --- Mock : ROAS (étape 3) --- */

.roas-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

.roas-chart {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 54px;
    height: 230px;
    margin-top: 22px;
    padding: 0 10px 4px;
    background: repeating-linear-gradient(to top, transparent 0 45px, rgba(34, 31, 53, .06) 45px 46px);
}

.roas-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 12px;
}

.roas-bar {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 78px;
    height: 0;
    border-radius: 14px 14px 5px 5px;
    transition: height 1.2s var(--ease) .25s;
}

html.js .step.in .roas-bar,
html:not(.js) .roas-bar,
html.all-in .roas-bar { height: var(--h); }

.roas-bar span {
    padding-top: 9px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 19px;
}

.bar-flat { background: #E7E3ED; color: var(--muted); }

.bar-flame {
    background: linear-gradient(to top, #6657E8, #C24BB4 55%, #F5A73B);
    color: #fff;
    box-shadow: 0 14px 34px -12px rgba(194, 75, 180, .55);
}

.roas-col p { font-size: 13.5px; font-weight: 600; color: var(--muted); }

/* ============================================================
   BLOC 4 · ÉTUDES DE CAS
   ============================================================ */

.cases { padding: 128px 0 0; }

/* Titre sur deux lignes exactement : la 1re phrase ne doit pas se replier */
.cases .section-head { max-width: 960px; }

.case-card {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 48px;
    align-items: center;
    padding: 56px 60px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-soft);
}

.case-card + .case-card { margin-top: 36px; }

.case-card.flip .case-copy { order: 2; }
.case-card.flip .case-visual { order: 1; }

.case-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

.case-dot { width: 10px; height: 10px; border-radius: 50%; }
.case-dot.gold { background: linear-gradient(135deg, #E7C273, #B98A34); }
.case-dot.lime { background: linear-gradient(135deg, #A8E063, #56AB2F); }

.case-stats {
    display: flex;
    gap: 44px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.case-stat { max-width: 220px; }

.stat-num {
    display: block;
    font-family: var(--display);
    font-size: clamp(3rem, 4.6vw, 4.1rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
    background: var(--flame);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-num small { font-size: .62em; font-weight: 800; }
.stat-num.small-word { font-size: clamp(2.3rem, 3.4vw, 3.1rem); padding-top: .26em; }

.stat-label {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
}

.case-body {
    margin-top: 26px;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}

.case-outcome {
    margin-top: 18px;
    font-size: 16.5px;
    color: var(--ink-soft);
}

.case-outcome strong { color: var(--ink); }

/* Mini téléphones */

.case-visual {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-phone {
    position: absolute;
    width: 196px;
    height: 372px;
    padding: 20px 16px;
    border-radius: 32px;
    border: 6px solid #241F3A;
    box-shadow: 0 30px 60px -22px rgba(23, 20, 42, .45);
    overflow: hidden;
    transition: transform .6s var(--ease);
}

.mp-back { transform: translateX(-62px) rotate(-7deg); z-index: 1; }
.mp-front { transform: translateX(62px) translateY(16px) rotate(6deg); z-index: 2; }

.case-card:hover .mp-back { transform: translateX(-72px) rotate(-8.5deg) translateY(-6px); }
.case-card:hover .mp-front { transform: translateX(72px) translateY(8px) rotate(7.5deg); }

.mp-gold {
    background:
        radial-gradient(140px 110px at 50% 0%, rgba(233, 190, 110, .25), transparent 70%),
        linear-gradient(170deg, #232145, #161430);
    color: #F4E7CB;
}

.mp-lime {
    background:
        radial-gradient(140px 110px at 50% 0%, rgba(168, 224, 99, .22), transparent 70%),
        linear-gradient(170deg, #1B2436, #121A28);
    color: #E7F5D8;
}

.mp-head {
    font-family: var(--display);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -.01em;
}

.mp-chips { display: grid; gap: 7px; margin-top: 14px; }

.mp-chips span {
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .82);
}

.mp-gold .mp-chips .on { background: rgba(231, 194, 115, .18); border-color: #D9B36A; color: #F3DDA8; }
.mp-lime .mp-chips .on { background: rgba(168, 224, 99, .16); border-color: #A8E063; color: #D3F3A8; }

.mp-cards {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.mp-cards i {
    width: 34px;
    height: 52px;
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .22);
}

.mp-gold .mp-cards i { border-color: rgba(231, 194, 115, .5); }
.mp-lime .mp-cards i { border-color: rgba(168, 224, 99, .45); }

.mp-cards i:nth-child(2) { transform: translateY(-7px); }

.mp-eclipse {
    width: 88px;
    height: 88px;
    margin: 6px auto 0;
    border-radius: 50%;
    background: linear-gradient(150deg, #383266, #1C1938);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .2), 0 0 34px 4px rgba(233, 190, 110, .35);
}

.mp-lime .mp-eclipse { box-shadow: 0 0 0 2px rgba(255, 255, 255, .2), 0 0 34px 4px rgba(168, 224, 99, .3); }

.mp-for {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

.mp-for strong { color: #fff; }

.mp-wave {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.5px;
    height: 26px;
    margin-top: 12px;
}

.mp-wave i {
    width: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .65);
    animation: eq 1.25s ease-in-out calc(var(--i, 0) * -.13s) infinite alternate;
}

.mp-gold .mp-wave i { background: #E2C078; }
.mp-lime .mp-wave i { background: #B9E778; }

.mp-wave i:nth-child(odd) { --i: 2; }
.mp-wave i:nth-child(3n) { --i: 5; }
.mp-wave i:nth-child(4n) { --i: 6; }

.mp-dur {
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    padding: 6px 13px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
}

/* Variante photo réelle (visuel démo) */
.mini-phone.mp-photo { padding: 0; background: #0B1026; }

.mp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.mp-dur-overlay {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    margin: 0;
    background: rgba(13, 11, 28, .6);
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================================
   BLOC 5 · FONCTIONNEMENT
   ============================================================ */

.workflow { padding: 128px 0 0; }

.wf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.wf-card {
    position: relative;
    padding: 30px 30px 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}

.wf-card:hover {
    transform: translateY(-7px);
    border-color: rgba(102, 87, 232, .35);
    box-shadow: var(--shadow-md);
}

.wf-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.wf-ic {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    color: var(--purple-deep);
    background: var(--purple-soft);
}

.wf-card:nth-child(2) .wf-ic { color: #C2334F; background: #FFEDF0; }
.wf-card:nth-child(3) .wf-ic { color: #B26A12; background: #FFF3E0; }

.wf-ic svg { width: 25px; height: 25px; }

.wf-time {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--ink-soft);
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 99px;
}

.wf-card h3 {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 1.32rem;
    letter-spacing: -.02em;
}

.wf-step {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
}

.wf-card p {
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
}

.wf-closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding: 42px 52px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(520px 240px at 12% 0%, rgba(102, 87, 232, .35), transparent 65%),
        radial-gradient(420px 240px at 95% 100%, rgba(240, 91, 63, .25), transparent 60%),
        var(--night);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.wf-ready {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -.028em;
    color: #fff;
}

.wf-closing-copy > p:not(.wf-ready) {
    margin-top: 10px;
    font-size: 15.5px;
    color: var(--night-muted);
    max-width: 520px;
}

/* ============================================================
   BLOC 6 · COMPARATIF
   ============================================================ */

.versus { padding: 128px 0 0; }

.vs-mark {
    display: inline-grid;
    place-items: center;
    vertical-align: .32em;
    margin: 0 .1em;
    padding: .38em .62em;
    border-radius: 999px;
    background: var(--flame);
    color: #fff;
    font-size: .34em;
    font-weight: 800;
    letter-spacing: .14em;
    box-shadow: 0 10px 26px -8px rgba(238, 93, 104, .5);
}

.vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    max-width: 1020px;
    margin: 0 auto;
}

.vs-col {
    padding: 38px 42px 30px;
    border-radius: var(--r-lg);
}

.vs-old {
    background: #FDFCFA;
    border: 1px solid var(--line);
    color: var(--muted);
}

.vs-new {
    position: relative;
    background: var(--night);
    color: #fff;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--night), var(--night)) padding-box,
        var(--flame) border-box;
    box-shadow: var(--shadow-lg);
}

.vs-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.vs-old .vs-name { color: var(--ink-soft); }

.vs-q { width: 30px; height: 30px; border-radius: 8px; }

.vs-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vs-col li {
    display: grid;
    gap: 5px;
    padding: 17px 0;
    border-top: 1px solid var(--line);
}

.vs-new li { border-top-color: var(--night-line); }

.vs-col li:first-child { border-top: 0; margin-top: 10px; }

.vs-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}

.vs-new .vs-label { color: rgba(233, 230, 255, .5); }

.vs-value {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15.5px;
    font-weight: 500;
}

.vs-new .vs-value { font-weight: 600; }

.vs-value i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-style: normal;
    flex: 0 0 auto;
}

.vs-value .x {
    font-size: 11px;
    color: #C0392B;
    background: var(--coral-soft);
}

.vs-value .v {
    color: #fff;
    background: linear-gradient(135deg, #6657E8, #C24BB4);
}

.vs-value .v svg { width: 12px; height: 12px; stroke-width: 3; }

/* ============================================================
   BLOC 7 · MANIFESTE (sombre)
   ============================================================ */

.manifesto {
    position: relative;
    margin-top: 132px;
    padding: 128px 0 136px;
    background:
        radial-gradient(1000px 520px at 10% 0%, rgba(102, 87, 232, .28), transparent 62%),
        radial-gradient(800px 520px at 95% 100%, rgba(240, 91, 63, .18), transparent 60%),
        var(--night);
    color: #fff;
    overflow: clip;
}

.manifesto-q {
    position: absolute;
    right: -4%;
    bottom: -34%;
    font-family: var(--display);
    font-weight: 800;
    font-size: 44vw;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .055);
    transform: rotate(-10deg);
    pointer-events: none;
    user-select: none;
}

.manifesto-inner {
    position: relative;
    max-width: 840px;
    text-align: center;
}

.manifesto h2 {
    margin-top: 20px;
    font-size: clamp(2.4rem, 4.6vw, 3.9rem);
    letter-spacing: -.038em;
}

.manifesto-punch {
    margin-top: 32px;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    letter-spacing: -.022em;
    color: var(--night-muted);
}

.manifesto-cta { margin-top: 44px; }

.microcopy {
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: .02em;
    color: rgba(233, 230, 255, .55);
}

/* ============================================================
   BLOC 8 · PRICING
   ============================================================ */

.pricing { padding: 128px 0 0; }

.price-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.price-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }

.price-card.featured {
    border: 1.5px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--flame) border-box;
    box-shadow: 0 34px 74px -26px rgba(163, 79, 224, .4);
}

@media (min-width: 981px) {
    .price-card.featured { transform: scale(1.035); }
    .price-card.featured:hover { transform: scale(1.035) translateY(-7px); }
}

.plan-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 17px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--flame);
    border-radius: 99px;
    box-shadow: 0 10px 24px -8px rgba(238, 93, 104, .55);
}

.plan-name {
    font-family: var(--display);
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.015em;
}

.plan-for { margin-top: 5px; font-size: 14px; color: var(--faint); }

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.plan-price strong {
    font-family: var(--display);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.plan-price span { font-size: 15px; color: var(--faint); font-weight: 500; }

.plan-list {
    list-style: none;
    margin: 22px 0 30px;
    padding: 0;
    display: grid;
    gap: 12px;
    flex: 1;
}

.plan-list li {
    position: relative;
    padding-left: 26px;
    font-size: 14.8px;
    color: var(--ink-soft);
}

.plan-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--flame);
    opacity: .8;
}

.price-card .btn { width: 100%; }

.plan-unit {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--faint);
}

.price-enterprise {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 32px;
    margin-top: 22px;
    padding: 28px 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
}

.price-enterprise-info {
    flex: 1 1 380px;
}

.price-enterprise-info .plan-for {
    margin-top: 7px;
    max-width: 560px;
}

.price-enterprise-price {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.price-enterprise .btn { flex: 0 0 auto; }

.price-reassure {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 34px;
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
}

.price-reassure li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--muted);
}

.price-reassure strong {
    color: var(--ink);
    font-weight: 700;
}

.price-reassure svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 2px;
    stroke-width: 2.6;
    color: var(--green);
    background: var(--green-soft);
    border-radius: 50%;
    padding: 3px;
}

/* ============================================================
   BLOC 9 · FAQ
   ============================================================ */

.faq { padding: 128px 0 0; }

.faq-inner { max-width: 800px; }

.faq-list { display: grid; gap: 12px; }

.faq-list details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
}

.faq-list details[open] {
    border-color: rgba(102, 87, 232, .4);
    box-shadow: var(--shadow-soft);
}

.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 26px;
    font-weight: 600;
    font-size: 16.5px;
    letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-ic {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--purple-soft);
    transition: transform .4s var(--ease), background-color .3s;
}

.faq-ic::before,
.faq-ic::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--purple-deep);
    transform: translate(-50%, -50%);
    transition: transform .4s var(--ease);
}

.faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }

details[open] .faq-ic { transform: rotate(135deg); background: var(--purple); }
details[open] .faq-ic::before,
details[open] .faq-ic::after { background: #fff; }

.faq-a { overflow: hidden; }

.faq-a p {
    padding: 0 26px 24px;
    max-width: 660px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--muted);
}

/* ============================================================
   BLOC 10 · CTA FINAL + FOOTER
   ============================================================ */

.final { padding: 132px 0 0; }

.final-panel {
    position: relative;
    padding: clamp(64px, 8.5vw, 104px) 32px;
    text-align: center;
    background: var(--night);
    border-radius: var(--r-xl);
    color: #fff;
    overflow: clip;
    box-shadow: var(--shadow-lg);
}

.final-aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(620px 320px at 16% 0%, rgba(102, 87, 232, .38), transparent 62%),
        radial-gradient(560px 320px at 88% 100%, rgba(240, 91, 63, .26), transparent 60%);
    pointer-events: none;
}

.final-panel h2 {
    position: relative;
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    letter-spacing: -.04em;
}

.final-panel > p {
    position: relative;
    margin: 28px auto 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--night-muted);
}

.final-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 42px;
}

.final-alt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(233, 230, 255, .72);
    padding: 6px 4px;
    border-radius: 8px;
    transition: color .3s;
}

.final-alt:hover { color: #fff; }
.final-alt svg { width: 16px; height: 16px; }

/* Footer */

.site-footer { margin-top: 110px; border-top: 1px solid var(--line); }

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 46px;
    padding-bottom: 34px;
}

.footer-inner .brand img { width: 132px; }

.footer-tagline {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--muted);
}

.footer-nav { display: flex; gap: 26px; }

.footer-nav a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
}

.footer-nav a:hover { color: var(--purple-deep); }

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    padding-bottom: 30px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--faint);
}

.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--ink-soft); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
    .hero-layout { gap: 36px; }
    .phone { width: min(300px, 76vw); }
    .step { grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr); gap: 0 36px; }
    .step-num { width: 62px; height: 62px; font-size: 21px; border-radius: 19px; }
    .steps-rail::before { left: 30px; }
    .step:last-child::after { left: 31px; }
    .case-card { padding: 46px 44px; }
}

@media (max-width: 1160px) {
    .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .price-card.featured { transform: none; }
    .price-card.featured:hover { transform: translateY(-7px); }
}

@media (max-width: 980px) {
    .price-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .price-reassure { grid-template-columns: 1fr; max-width: 560px; gap: 16px; }
    .price-card.featured { order: -1; }
    .wf-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .vs-grid { grid-template-columns: 1fr; max-width: 560px; }
    .duel { grid-template-columns: 1fr; max-width: 540px; gap: 30px; }
}

@media (max-width: 900px) {
    .main-nav {
        position: fixed;
        top: 84px;
        left: 16px;
        right: 16px;
        z-index: 99;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity .35s var(--ease), transform .35s var(--ease);
    }

    .main-nav.open { opacity: 1; transform: none; pointer-events: auto; }

    .main-nav > a:not(.btn) { padding: 13px 14px; font-size: 16.5px; border-radius: 12px; }
    .main-nav > a:not(.btn):hover { background: var(--ground); }
    .main-nav > a:not(.btn)::after { display: none; }
    .nav-cta { margin: 10px 0 4px; justify-content: center; padding: 15px; }

    .menu-toggle { display: flex; }

    .hero { padding-top: 136px; }

    .hero-layout { grid-template-columns: 1fr; text-align: center; }
    .hero-copy { display: flex; flex-direction: column; align-items: center; }
    .hero-sub { max-width: 560px; }
    .hero-actions { justify-content: center; }
    .hero-visual { margin-top: 26px; }

    .chip-a { right: auto; left: 6px; top: 12%; }
    .chip-b { left: auto; right: 6px; }

    .trust { margin-top: 64px; }

    .steps-rail { gap: 72px; }
    .steps-rail::before { display: none; }
    .step:last-child::after { display: none; }

    .step {
        grid-template-columns: 1fr;
        gap: 26px;
        text-align: left;
    }

    .step-num { width: 56px; height: 56px; font-size: 19px; margin-bottom: -6px; }

    .case-card { grid-template-columns: 1fr; gap: 30px; padding: 38px 30px; }
    .case-card.flip .case-copy { order: 1; }
    .case-card.flip .case-visual { order: 2; }
    .case-visual { height: 400px; }

    .wf-closing { padding: 36px 30px; }

    .footer-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
    .footer-legal { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 560px) {
    .container { padding: 0 20px; }

    .hero { padding-top: 124px; }
    .hero h1 { font-size: clamp(2.35rem, 10vw, 2.9rem); }
    .hero-sub { font-size: 16.5px; }

    .hero-actions { width: 100%; flex-direction: column; }
    .hero-actions .btn { width: 100%; }

    .float-chip { font-size: 12px; padding: 9px 12px; }
    .chip-a { top: 8%; left: 0; }
    .chip-b { bottom: 9%; right: 0; }

    .btn { white-space: normal; text-align: center; line-height: 1.25; }

    .marquee-track { gap: 44px; }
    .wm-logo { height: 34px; }

    .section-head { margin-bottom: 46px; }

    .problem { padding: 84px 0 92px; margin-top: 72px; }
    .duel-card { padding: 48px 22px 22px; }
    .chat-bubble { max-width: 86%; font-size: 14.5px; }
    .hold { margin-left: 0; }
    .convert-compare { padding: 24px 18px 26px; gap: 22px; }
    .compare-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label count"
            "track track";
        gap: 10px 14px;
    }
    .compare-label { grid-area: label; }
    .compare-count { grid-area: count; }
    .compare-track { grid-area: track; }
    .duel-gap { margin: 40px auto 36px; }
    .problem-punch { margin-top: 56px; }
    .photo-tags { bottom: 20px; gap: 6px; }
    .photo-tags span { padding: 7px 11px; font-size: 11.5px; }

    .steps, .cases, .workflow, .versus, .pricing, .faq { padding-top: 92px; }
    .manifesto { margin-top: 96px; padding: 92px 0 100px; }
    .final { padding-top: 96px; }

    .quiz-mock, .roas-mock { padding: 20px; }
    .roas-chart { gap: 34px; height: 200px; }
    .roas-bar { width: 64px; }

    .case-visual { height: 360px; transform: scale(.92); }
    .case-stats { gap: 24px; }

    .vs-col { padding: 28px 24px 22px; }

    .wf-closing { flex-direction: column; align-items: flex-start; }
    .wf-closing .btn { width: 100%; }

    .final-panel { border-radius: 30px; }
    .final-actions .btn { width: 100%; }

    .footer-nav { flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   FINITION PREMIUM · PROFONDEUR, RYTHME & MICRO-INTERACTIONS
   ============================================================ */

/* Un header flottant plus "produit", avec progression de lecture. */
.site-header {
    padding-top: 10px;
    --scroll-progress: 0;
}

.site-header::after {
    content: "";
    position: fixed;
    z-index: 102;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--flame);
    box-shadow: 0 2px 12px rgba(163, 79, 224, .28);
    transform: scaleX(var(--scroll-progress));
    transform-origin: left;
    transition: transform .1s linear;
}

.header-inner {
    width: calc(100% - 32px);
    height: 62px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    transition:
        background-color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        backdrop-filter .4s ease;
}

.site-header.scrolled {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header.scrolled .header-inner {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(255, 255, 255, .82);
    box-shadow:
        0 1px 0 rgba(34, 31, 53, .08),
        0 18px 50px -24px rgba(34, 31, 53, .28);
    backdrop-filter: blur(22px) saturate(1.55);
    -webkit-backdrop-filter: blur(22px) saturate(1.55);
}

.main-nav > a:not(.btn).is-active { color: var(--ink); }
.main-nav > a:not(.btn).is-active::after { transform: scaleX(1); }

/* Hero : un décor orbital léger qui concentre le regard sur la démo. */
.hero {
    padding-top: 156px;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 74px;
    left: -190px;
    width: 480px;
    aspect-ratio: 1;
    border: 1px solid rgba(102, 87, 232, .1);
    border-radius: 50%;
    box-shadow:
        0 0 0 76px rgba(102, 87, 232, .025),
        0 0 0 152px rgba(240, 91, 63, .018);
}

.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 180px;
    background: linear-gradient(to bottom, transparent, var(--ground));
    pointer-events: none;
}

.hero-pill {
    position: relative;
    overflow: hidden;
    border-color: rgba(102, 87, 232, .15);
    box-shadow:
        0 10px 30px -18px rgba(34, 31, 53, .28),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.hero-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 28%, rgba(159, 140, 255, .14) 48%, transparent 68%);
    transform: translateX(-120%);
    animation: pillShine 6.5s var(--ease) 1.2s infinite;
}

@keyframes pillShine {
    0%, 72% { transform: translateX(-120%); }
    88%, 100% { transform: translateX(120%); }
}

.hero h1 {
    text-shadow: 0 18px 50px rgba(34, 31, 53, .08);
}

.hero h1 .flame {
    filter: drop-shadow(0 12px 24px rgba(163, 79, 224, .16));
}

.hero-microcopy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-microcopy::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    color: var(--green);
    background: var(--green-soft);
    font-size: 11px;
    font-weight: 800;
}

.hero-visual {
    isolation: isolate;
    --orbit-shift: 0deg;
}

.hero-visual::before,
.hero-visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
}

.hero-visual::before {
    width: 510px;
    border: 1px solid rgba(102, 87, 232, .18);
    box-shadow:
        inset 0 0 70px rgba(102, 87, 232, .035),
        0 0 0 34px rgba(255, 255, 255, .18);
    transform: translate(-50%, -50%) rotate(var(--orbit-shift));
}

.hero-visual::after {
    width: 420px;
    border: 1px dashed rgba(238, 93, 104, .2);
    transform: translate(-50%, -50%) rotate(calc(0deg - var(--orbit-shift)));
}

.phone {
    z-index: 2;
    border: 1px solid rgba(159, 140, 255, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        inset 0 -1px 0 rgba(0, 0, 0, .35),
        0 46px 100px -30px rgba(23, 20, 42, .62),
        0 18px 42px -22px rgba(102, 87, 232, .55);
}

.phone::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 12px auto 12px 7px;
    width: 1px;
    border-radius: 99px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5), transparent);
    pointer-events: none;
}

.phone::after {
    content: "";
    position: absolute;
    top: 28%;
    right: -4px;
    width: 3px;
    height: 78px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(#393253, #1C1831);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .18);
}

.phone-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    pointer-events: none;
}

.float-chip {
    z-index: 3;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72));
    border-color: rgba(255, 255, 255, .94);
    box-shadow:
        0 22px 50px -24px rgba(34, 31, 53, .4),
        inset 0 1px 0 #fff;
}

.chip-a::after,
.chip-b::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 38px;
    height: 1px;
    opacity: .5;
}

.chip-a::after {
    left: 100%;
    background: linear-gradient(to right, var(--green), transparent);
}

.chip-b::after {
    right: 100%;
    background: linear-gradient(to left, var(--magenta), transparent);
}

/* La preuve sociale devient un véritable rail premium. */
.trust {
    width: calc(100% - 56px);
    max-width: 1124px;
    padding: 24px 0 20px;
    border: 1px solid rgba(34, 31, 53, .07);
    border-radius: 26px;
    background:
        radial-gradient(420px 100px at 50% 0%, rgba(102, 87, 232, .075), transparent 72%),
        rgba(255, 255, 255, .58);
    box-shadow:
        0 20px 60px -42px rgba(34, 31, 53, .3),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.trust-label { color: #777287; }
.marquee { margin-top: 18px; }
.wordmark { opacity: .54; }
.wm-logo { opacity: .5; }

.hero-microcopy,
.case-brand,
.wf-step,
.plan-for { color: #777287; }

/* Ruptures sombres : relief et narration du duel. */
.problem,
.manifesto {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.problem .container,
.manifesto-inner { position: relative; z-index: 1; }

.duel { position: relative; }

.duel::after {
    content: "VS";
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: rgba(255, 255, 255, .8);
    background: rgba(25, 22, 49, .86);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
    backdrop-filter: blur(10px);
    transform: translate(-50%, -50%);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.duel-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.duel-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 28px 70px -38px rgba(0, 0, 0, .65);
}

/* Méthode : le rail se remplit au rythme du scroll. */
.steps,
.cases,
.workflow,
.versus,
.pricing,
.faq { position: relative; isolation: isolate; }

.steps::before,
.cases::before,
.pricing::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.steps::before {
    top: 22%;
    right: -470px;
    background: radial-gradient(circle, rgba(102, 87, 232, .075), transparent 68%);
}

.cases::before {
    top: 18%;
    left: -470px;
    background: radial-gradient(circle, rgba(240, 91, 63, .065), transparent 68%);
}

.pricing::before {
    top: 18%;
    right: -460px;
    background: radial-gradient(circle, rgba(163, 79, 224, .07), transparent 68%);
}

.steps-rail { --rail-progress: 0; }

.steps-rail::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 30px;
    bottom: 30px;
    left: 37px;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(to bottom, var(--purple), var(--magenta), var(--coral), var(--amber));
    box-shadow: 0 0 18px rgba(163, 79, 224, .35);
    transform: scaleY(var(--rail-progress));
    transform-origin: top;
    transition: transform .12s linear;
}

/* Doit suivre .steps-rail::before (left: 30px au même breakpoint), la règle de base ci-dessus étant déclarée après le bloc responsive */
@media (max-width: 1080px) {
    .steps-rail::after { left: 30px; }
}

.step-num {
    transition:
        color .45s var(--ease),
        border-color .45s var(--ease),
        transform .45s var(--ease),
        box-shadow .45s var(--ease);
}

.step.in .step-num {
    border-color: rgba(102, 87, 232, .28);
    transform: translateY(-3px);
    box-shadow:
        0 18px 42px -22px rgba(102, 87, 232, .48),
        0 0 0 7px rgba(102, 87, 232, .045);
}

.step:nth-child(2).in .step-num {
    border-color: rgba(214, 69, 108, .28);
    box-shadow: 0 18px 42px -22px rgba(214, 69, 108, .48), 0 0 0 7px rgba(214, 69, 108, .045);
}

.step:nth-child(3).in .step-num {
    border-color: rgba(232, 134, 46, .28);
    box-shadow: 0 18px 42px -22px rgba(232, 134, 46, .48), 0 0 0 7px rgba(232, 134, 46, .045);
}

.step-visual { position: relative; isolation: isolate; }

.step-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(430px, 88%);
    aspect-ratio: 1.15;
    border-radius: 42%;
    background: radial-gradient(circle, rgba(102, 87, 232, .14), transparent 68%);
    filter: blur(18px);
    transform: translate(-50%, -50%) rotate(-7deg);
}

.step:nth-child(2) .step-visual::before {
    background: radial-gradient(circle, rgba(238, 93, 104, .13), transparent 68%);
    transform: translate(-50%, -50%) rotate(7deg);
}

.step:nth-child(3) .step-visual::before {
    background: radial-gradient(circle, rgba(245, 167, 59, .13), transparent 68%);
}

.force {
    transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}

.force:hover {
    transform: translateX(5px);
    border-color: rgba(232, 134, 46, .28);
    box-shadow: 0 12px 30px -22px rgba(34, 31, 53, .28);
}

/* Études de cas : les métriques deviennent le point focal. */
.case-card {
    position: relative;
    overflow: hidden;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}

.case-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 360px at 100% 0%, rgba(231, 194, 115, .14), transparent 64%),
        linear-gradient(115deg, transparent 58%, rgba(102, 87, 232, .035));
    pointer-events: none;
}

.case-card.flip::before {
    background:
        radial-gradient(520px 360px at 0% 100%, rgba(168, 224, 99, .13), transparent 64%),
        linear-gradient(115deg, rgba(102, 87, 232, .028), transparent 44%);
}

.case-card:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 87, 232, .18);
    box-shadow: 0 32px 78px -38px rgba(34, 31, 53, .3);
}

.case-copy,
.case-visual { position: relative; z-index: 1; }

.case-stat {
    flex: 1 1 0;
    min-width: 150px;
    max-width: 220px;
    padding: 14px 16px;
    border: 1px solid rgba(102, 87, 232, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.stat-num { filter: drop-shadow(0 10px 18px rgba(163, 79, 224, .12)); }

.case-stats { gap: 16px; }

/* Setup : un flux visuel relie les trois actions. */
.wf-grid { position: relative; }

.wf-grid::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 56px;
    left: 14%;
    right: 14%;
    height: 2px;
    background: linear-gradient(to right, var(--purple), var(--magenta), var(--amber));
    opacity: .22;
}

.wf-card { overflow: hidden; isolation: isolate; }

.wf-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -110px;
    right: -90px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(102, 87, 232, .075);
    transition: transform .55s var(--ease), background-color .4s;
}

.wf-card:nth-child(2)::before { background: rgba(238, 93, 104, .07); }
.wf-card:nth-child(3)::before { background: rgba(245, 167, 59, .09); }
.wf-card:hover::before { transform: scale(1.22); }

.wf-ic { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }

.wf-card:hover .wf-ic {
    transform: translateY(-3px) rotate(-4deg);
    box-shadow: 0 14px 30px -18px currentColor;
}

.wf-closing {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
}

.wf-closing::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -16%;
    width: 38%;
    height: 340%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .075), transparent);
    transform: rotate(18deg);
    animation: panelGlint 9s var(--ease) infinite;
    pointer-events: none;
}

@keyframes panelGlint {
    0%, 70% { transform: translateX(-180%) rotate(18deg); }
    88%, 100% { transform: translateX(430%) rotate(18deg); }
}

.vs-new {
    overflow: hidden;
    isolation: isolate;
}

.vs-new::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -140px;
    bottom: -160px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 75, 180, .22), transparent 68%);
}

/* Tarifs, FAQ et fermeture : davantage de présence, sans bruit. */
.price-card {
    isolation: isolate;
    border-color: rgba(34, 31, 53, .09);
}

.price-card.featured {
    box-shadow:
        0 38px 86px -34px rgba(163, 79, 224, .48),
        0 0 0 7px rgba(163, 79, 224, .035);
}

.price-card .btn { margin-top: auto; }

.price-reassure {
    max-width: 1020px;
    margin-inline: auto;
    padding: 26px 32px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(255, 255, 255, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.faq-list details {
    position: relative;
    isolation: isolate;
}

.faq-list details::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 0 99px 99px 0;
    background: var(--flame);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .4s var(--ease);
}

.faq-list details:hover {
    border-color: rgba(102, 87, 232, .22);
    transform: translateX(3px);
}

.faq-list details[open]::before { transform: scaleY(1); }

.final-panel {
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
        0 44px 110px -42px rgba(25, 22, 49, .52),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.final-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(740px, 78vw);
    aspect-ratio: 1;
    border: 1px solid rgba(159, 140, 255, .16);
    border-radius: 50%;
    box-shadow:
        0 0 0 72px rgba(159, 140, 255, .025),
        0 0 0 144px rgba(240, 91, 63, .018);
    transform: translate(-50%, -50%);
    animation: finalBreath 9s ease-in-out infinite alternate;
    pointer-events: none;
}

.final-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .13) .8px, transparent .8px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 66%);
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 66%);
    opacity: .24;
    pointer-events: none;
}

@keyframes finalBreath {
    from { transform: translate(-50%, -50%) scale(.94); opacity: .64; }
    to { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}

.final-panel h2,
.final-panel > p,
.final-actions { z-index: 2; }

.final-actions .btn-flame {
    box-shadow:
        0 20px 50px -12px rgba(238, 93, 104, .58),
        0 0 0 7px rgba(238, 93, 104, .07);
}

/* Halo contextuel au pointeur sur les surfaces clés. */
.surface-glow {
    --mouse-x: 50%;
    --mouse-y: 50%;
}

.surface-glow::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        420px circle at var(--mouse-x) var(--mouse-y),
        rgba(159, 140, 255, .13),
        transparent 44%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.surface-glow:hover::after { opacity: 1; }

.case-card.surface-glow::after {
    z-index: 0;
    background: radial-gradient(520px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, .56), transparent 42%);
}

.duel-card > *,
.wf-card > *,
.price-card > *:not(.plan-badge) { position: relative; z-index: 1; }

.duel-badge,
.plan-badge { z-index: 3; }

@media (max-width: 980px) {
    .duel::after,
    .wf-grid::before { display: none; }
}

@media (max-width: 900px) {
    .site-header { padding-top: 8px; }
    .header-inner { width: calc(100% - 24px); padding: 0 18px; }
    .menu-toggle { position: fixed; z-index: 103; top: 16px; right: 22px; }
    .hero { padding-top: 130px; }
    .hero-layout,
    .hero-copy { width: 100%; min-width: 0; }
    .hero-visual::before { width: min(510px, 88vw); }
    .hero-visual::after { width: min(420px, 76vw); }
    .steps-rail::after { display: none; }
}

@media (max-width: 560px) {
    .header-inner { width: calc(100% - 20px); }
    .brand img { width: 134px; }

    .hero { padding-top: 116px; }
    .hero::before { left: -310px; opacity: .65; }
    .hero h1,
    .hero-sub,
    .hero-pill { max-width: 100%; }
    .hero-pill { padding-inline: 12px 14px; font-size: 12.5px; }
    .hero-microcopy { justify-content: center; flex-wrap: wrap; }
    .hero-visual::before { width: 92vw; }
    .hero-visual::after { width: 78vw; }

    .trust {
        width: calc(100% - 32px);
        padding-block: 22px 18px;
        border-radius: 22px;
    }

    .case-stats { gap: 10px; }
    .case-stat { min-width: 0; max-width: none; flex: 1 1 130px; padding: 12px; }
    .price-reassure { grid-template-columns: 1fr; gap: 16px; border-radius: 22px; padding: 20px 18px; }
    .faq-list details:hover { transform: none; }
}

@media (max-width: 400px) {
    .container { padding-inline: 16px; }
    .hero h1 { font-size: clamp(2.15rem, 10.4vw, 2.45rem); }
    .hero-pill { font-size: 11.8px; line-height: 1.35; }
    .float-chip {
        max-width: calc(100vw - 32px);
        white-space: nowrap;
        font-size: 11.5px;
        line-height: 1.25;
    }
    .chip-a::after,
    .chip-b::after { display: none; }
    .case-card { padding-inline: 22px; }
}

/* ============================================================
   ACCESSIBILITÉ · MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    html.js .load-in,
    html.js .reveal { opacity: 1; transform: none; }

    .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
    .marquee-track > :nth-child(n+7) { display: none; }

    .roas-bar { height: var(--h); }
}

/* ============================================================
   CHAPITRAGE DES ZONES CLAIRES
   Des bandes éditoriales alternées structurent la page sans
   quitter la palette crème ni concurrencer les cartes.
   ============================================================ */

.light-chapter {
    --chapter-rgb: 102, 87, 232;
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: 74px 0 76px;
    background:
        radial-gradient(760px 360px at 50% -220px, rgba(var(--chapter-rgb), .075), transparent 72%),
        var(--ground);
}

.steps.light-chapter {
    padding-top: 122px;
    --chapter-rgb: 102, 87, 232;
}

.cases.light-chapter { --chapter-rgb: 238, 93, 104; }
.workflow.light-chapter { --chapter-rgb: 163, 79, 224; }
.versus.light-chapter { --chapter-rgb: 102, 87, 232; }
.pricing.light-chapter { --chapter-rgb: 194, 75, 180; padding-top: 122px; }
.faq.light-chapter { --chapter-rgb: 240, 91, 63; }

.light-chapter-tinted {
    border-top: 1px solid rgba(34, 31, 53, .075);
    border-bottom: 1px solid rgba(34, 31, 53, .075);
    background:
        radial-gradient(760px 420px at 12% 0%, rgba(var(--chapter-rgb), .075), transparent 68%),
        radial-gradient(640px 360px at 92% 100%, rgba(245, 167, 59, .055), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .38)),
        var(--ground);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        inset 0 -1px 0 rgba(255, 255, 255, .52);
}

/* Trait de transition : une ligne très fine, un point d'accent. */
.light-chapter::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -5px;
    left: 50%;
    width: min(330px, 34vw);
    height: 11px;
    background:
        radial-gradient(circle at center, rgb(var(--chapter-rgb)) 0 2.5px, #fff 3px 5px, transparent 5.5px),
        linear-gradient(90deg, transparent, rgba(var(--chapter-rgb), .34) 24%, rgba(var(--chapter-rgb), .34) 76%, transparent) center / 100% 1px no-repeat;
    filter: drop-shadow(0 3px 8px rgba(var(--chapter-rgb), .22));
    transform: translateX(-50%);
    pointer-events: none;
}

.light-chapter > .container {
    position: relative;
    z-index: 1;
}

.light-chapter .section-head {
    position: relative;
    isolation: isolate;
}

.light-chapter .section-head::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -24px;
    left: 50%;
    width: min(620px, 82vw);
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--chapter-rgb), .065), transparent 68%);
    filter: blur(12px);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Les bandes ont désormais leur propre respiration ; plus de nappe continue. */
.manifesto { margin-top: 0; }
.final { padding-top: 76px; }

@media (max-width: 900px) {
    .light-chapter { padding-block: 64px 66px; }

    .steps.light-chapter,
    .pricing.light-chapter { padding-top: 96px; }

}

@media (max-width: 560px) {
    .light-chapter { padding-block: 48px 50px; }

    .steps.light-chapter,
    .pricing.light-chapter { padding-top: 88px; }

    .light-chapter::after { width: 170px; }

    .light-chapter .section-head::after {
        top: -10px;
        height: 160px;
    }

    .final { padding-top: 64px; }
}

/* ============================================================
   AJOUTS · CASSE H1 & CTA STICKY MOBILE
   ============================================================ */

/* Le <br> du h1 hero ne s'applique que sur grand écran */
.br-lg { display: none; }

@media (min-width: 901px) {
    .br-lg { display: inline; }
}

/* CTA sticky mobile : apparaît après le hero, disparaît au bloc final */
.mobile-cta {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: none;
}

@media (max-width: 900px) {
    .mobile-cta {
        display: block;
        opacity: 0;
        transform: translateY(130%);
        pointer-events: none;
        transition: opacity .45s var(--ease), transform .45s var(--ease);
    }

    .mobile-cta.show {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .mobile-cta .btn {
        width: 100%;
        padding: 17px 24px;
        font-size: 16px;
        box-shadow:
            0 10px 30px -8px rgba(238, 93, 104, .55),
            0 24px 60px -18px rgba(34, 31, 53, .4);
    }
}

/* Vidéo réelle dans le téléphone avant des études de cas */
.mp-photo video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    background: #0B1026;
}

/* ============================================================
   CAS ANNA VELAZIA · VRAIS ÉCRANS + BARRE DE LECTURE CUSTOM
   ============================================================ */

.case-logo {
    display: inline-block;
    height: 13px;
    width: auto;
    vertical-align: -2px;
    margin-right: 6px;
    filter: brightness(0);
    opacity: .85;
}

.case-logo-bt { height: 23px; vertical-align: -6px; }

.case-sector { white-space: nowrap; }

/* Téléphones avec captures réelles */
.mini-phone.mp-shot { padding: 0; background: #16132B; }

.mp-question picture,
.mp-question img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mp-question img { object-fit: cover; object-position: top; }

/* Le back phone épouse le ratio de la capture question */
.mp-back.mp-question { width: 178px; }

/* Résultat : la page "respire" doucement au-dessus de la barre de lecture */
.mp-result { background: #F8F1E9; }

.mp-page {
    position: absolute;
    inset: 0 0 40px;
    overflow: hidden;
}

.mp-canvas { position: relative; }

.mp-page img {
    display: block;
    width: 100%;
    height: auto;
}

/* Bulle loom animée par-dessus le cercle de la capture */
.mp-loom {
    position: absolute;
    left: 55.31%;
    top: 5.13%;
    width: 41.1%;
    aspect-ratio: 1;
    pointer-events: none;
}

.mp-loom::before,
.mp-loom::after {
    content: "";
    position: absolute;
    inset: -2%;
    border: 2px solid rgba(238, 93, 104, .55);
    border-radius: 50%;
    opacity: 0;
    animation: loomPing 3.2s ease-out infinite;
}

.mp-loom::after { animation-delay: 1.6s; }

.mp-loom-disc {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}

.mp-loom-disc img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    animation: loomSpeak 5s ease-in-out infinite;
}

@keyframes loomSpeak {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.055); }
}

@keyframes loomPing {
    0% { transform: scale(.94); opacity: .75; }
    75%, 100% { transform: scale(1.22); opacity: 0; }
}

/* Barre de lecture repensée : état "en cours", accent or/corail */
.mp-player {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(23, 20, 42, .84);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px -8px rgba(23, 20, 42, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
    color: #fff;
}

.mp-pp { display: grid; place-items: center; }

.mp-pp svg {
    width: 11px;
    height: 11px;
    fill: #fff;
    stroke: none;
}

.mp-prog {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.mp-prog i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #F5A73B, #EE5D68);
    transform-origin: left;
    animation: annaProg 16s linear infinite;
}

@keyframes annaProg {
    from { transform: scaleX(.04); }
    to { transform: scaleX(1); }
}

.mp-timer {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .mp-loom-disc img, .mp-loom::before, .mp-loom::after { animation: none; }
    .mp-prog i { animation: none; transform: scaleX(.62); }
}

/* Bulle loom vivante par-dessus la vidéo hero (position calée sur le rendu 720x1280) */
.hero-loom {
    position: absolute;
    left: 61.11%;
    top: 11.02%;
    width: 32.78%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    opacity: 0;
    animation: heroLoomIn .45s ease 1.35s forwards;
}

@keyframes heroLoomIn {
    to { opacity: 1; }
}

/* Curseur démo animé sur l'écran du téléphone hero */
.hero-cursor,
.demo-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 3.9%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    filter: drop-shadow(0 2px 6px rgba(20, 15, 35, .4));
    will-change: left, top;
}

.hero-cursor.on,
.demo-cursor.on { opacity: 1; }

.hero-cursor svg,
.demo-cursor svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #fff;
    stroke: #1E1B2E;
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: transform .12s ease;
    transform-origin: 20% 12%;
}

.hero-cursor.press svg,
.demo-cursor.press svg { transform: scale(.82); }

.cursor-ping {
    position: absolute;
    left: -68%;
    top: -68%;
    width: 230%;
    aspect-ratio: 1;
    border: 2.5px solid rgba(201, 123, 102, .85);
    border-radius: 50%;
    opacity: 0;
}

/* Étape 2 · écran du téléphone : loom vidéo + curseur */
.photo-screen { position: relative; }

.photo-loom {
    position: absolute;
    left: 6.11%;
    top: 9.06%;
    width: 28.89%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
}

.photo-loom video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .ol-feed, .ol-sb i, .ol-cursor, .ol-browser, .ol-gone, .ol-close { animation: none; }
    .ol-gone { display: none; }
}