/* ════════════════════════════════════════════════════
   Pitchbase — Nouveau design system landing
   Extracted from landing-solo-redesign.html on 2026-05-27
   Shared by: landing-solo, landing-entreprises, landing-ecoles, pricing-new, etc.
   ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
           TOKENS
        ════════════════════════════════════════════════════ */
        :root {
            --bg:           #FAFAF7;
            --bg-2:         #F1F0EA;
            --bg-3:         #FFFFFF;
            --ink:          #0A0A0A;
            --ink-2:        #404040;
            --ink-3:        #737373;
            --ink-4:        #A3A3A3;
            --rule:         #E5E5E0;
            --rule-2:       #D4D4CE;

            --surface-d:    #0A0A0B;
            --surface-d-2:  #16161A;
            --surface-d-3:  #222226;

            --signal:       #FF4D2E;
            --signal-2:     #E63812;
            --signal-soft:  #FFE5DE;
            --green:        #16A34A;
            --green-soft:   #DCFCE7;

            --grad-wave:    linear-gradient(180deg, #FF7A47 0%, #FF4D2E 100%);

            --sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
            --serif: 'Inter Tight', system-ui, -apple-system, sans-serif; /* serif retiré — unifié sur sans */
            --mono:  'JetBrains Mono', ui-monospace, monospace;

            /* Custom easings (Emil-style — stronger than built-in) */
            --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
            --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
            --ease-snap:     cubic-bezier(0.2, 0.7, 0.3, 1);
            --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);

            --press: scale(0.97);

            /* Canonical pulse rhythm — one breath, all "live" indicators in sync */
            --pulse-rhythm:  1.8s;

            --max:   1240px;

            /* — v8 — Spacing rhythm (x1.5 generalised for calm) */
            --section-pad:   clamp(96px, 12vh, 160px);
            --block-gap:     clamp(48px, 6vh, 80px);
            --head-gap:      clamp(56px, 7vh, 88px);

            /* — v8 — Typo scale (monumental + disciplined) */
            --fs-hero:       clamp(52px, 7.6vw, 108px);
            --fs-h2:         clamp(38px, 4.8vw, 68px);
            --fs-h3:         clamp(22px, 1.8vw, 26px);
            --fs-lede:       clamp(17px, 1.4vw, 21px);
            --fs-eyebrow:    11px;
            --tracking-hero: -0.045em;
            --tracking-h2:   -0.038em;
            --tracking-eyebrow: 0.14em;
            --leading-tight: 0.96;
            --leading-body:  1.6;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
        /* Browser default italic on em is disabled — we use color+weight as accent instead */
        em { font-style: normal; }
        /* scroll-behavior smooth retiré — le user trouvait le scroll programmatique pas fluide */
        html { scroll-behavior: auto; overflow-x: clip; }
        body {
            background: var(--bg);
            color: var(--ink);
            font-family: var(--sans);
            font-size: 16px;
            line-height: 1.5;
            font-feature-settings: "kern" 1, "ss01" 1, "cv11" 1, "calt" 1, "liga" 1;
            font-kerning: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            hanging-punctuation: first last;
            overflow-x: hidden;
        }

        /* Custom scrollbar — discreet but on-brand */
        @media (pointer: fine) {
            ::-webkit-scrollbar { width: 12px; height: 12px; }
            ::-webkit-scrollbar-track { background: transparent; }
            ::-webkit-scrollbar-thumb {
                background: var(--rule-2);
                border: 3px solid var(--bg);
                border-radius: 999px;
            }
            ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image: radial-gradient(circle at center, rgba(10,10,10,0.07) 1px, transparent 1.5px);
            background-size: 24px 24px;
            mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
        }

        a { color: inherit; text-decoration: none; }
        img, svg { display: block; max-width: 100%; }
        button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
        ::selection { background: var(--ink); color: var(--bg-3); }

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

        /* Pause perpetual animations (marquees, pulses, waves) when their
           section is out of viewport. Saves GPU cycles, esp. on a long page
           with many infinite animations. Toggled by initOffscreenPause(). */
        section.is-offscreen,
        section.is-offscreen *,
        section.is-offscreen *::before,
        section.is-offscreen *::after {
            animation-play-state: paused !important;
        }

        /* Blanket reduced-motion: neutralize every perpetual decorative
           animation. Keeps `spin` (loading state) and one-time entrances. */
        @media (prefers-reduced-motion: reduce) {
            [class*="pulse"],
            .logo-marquee-track,
            .persona-row,
            .ripple,
            .wave .bar,
            .cursor,
            .cast-stage .pwave i,
            .proto-frame .ls-wave i,
            .pmock-call .ca-wave i,
            .pc-fall, .pc-trail,
            .theater-stage .wave i,
            .ps-handle-grip::after,
            .cast-scroll-hint .arrow,
            .casting-wall-v14 .wall-ticker .d,
            [class*="blink"] {
                animation: none !important;
                opacity: 1 !important;
            }
        }

        .shell {
            max-width: var(--max);
            margin: 0 auto;
            padding: 0 32px;
            position: relative;
            z-index: 1;
        }
        @media (max-width: 720px) { .shell { padding: 0 20px; } }

        /* Skip link */
        .skip {
            position: absolute;
            left: -9999px;
        }
        .skip:focus {
            left: 16px;
            top: 16px;
            z-index: 100;
            background: var(--ink);
            color: white;
            padding: 12px 18px;
            border-radius: 8px;
            font-weight: 600;
        }

        /* ════════════════════════════════════════════════════
           NAV
        ════════════════════════════════════════════════════ */
        .nav-wrap {
            position: sticky;
            top: 16px;
            z-index: 50;
            padding: 0 32px;
            margin-top: 24px;
        }
        nav.top {
            max-width: 1180px;
            margin: 0 auto;
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(18px) saturate(160%);
            -webkit-backdrop-filter: blur(18px) saturate(160%);
            border: 1px solid var(--rule);
            border-radius: 999px;
            padding: 8px 8px 8px 24px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 32px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.08);
            transition: box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out), background 240ms var(--ease-out);
        }
        nav.top.scrolled {
            background: rgba(255,255,255,0.95);
            border-color: var(--rule-2);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 14px 36px -8px rgba(0,0,0,0.16);
        }
        .brand { display: flex; align-items: center; gap: 10px; }
        .brand .mark {
            width: 28px; height: 28px;
            background: var(--ink);
            color: white;
            border-radius: 8px;
            display: grid;
            place-items: center;
            position: relative;
            overflow: hidden;
        }
        .brand .mark::before {
            content: '';
            position: absolute;
            top: -8px; right: -8px;
            width: 16px; height: 16px;
            background: var(--signal);
            border-radius: 50%;
            opacity: 0.6;
        }
        .brand .mark svg { width: 14px; height: 14px; position: relative; z-index: 1; }
        .brand .word {
            font-weight: 700;
            font-size: 16px;
            letter-spacing: -0.02em;
            color: var(--ink);
        }
        .brand .word sup {
            font-size: 9px;
            color: var(--ink-3);
            font-weight: 500;
            margin-left: 4px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-family: var(--mono);
            vertical-align: top;
        }
        nav.top .links {
            display: flex;
            gap: 28px;
            justify-content: center;
            align-items: center;
        }
        nav.top .links a {
            font-size: 13.5px;
            font-weight: 500;
            color: var(--ink-2);
            transition: color 180ms var(--ease-out);
            position: relative;
        }
        nav.top .links a::after {
            content: '';
            position: absolute;
            left: 0; right: 0;
            bottom: -22px;
            height: 2px;
            background: var(--signal);
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 280ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            nav.top .links a:hover { color: var(--ink); }
            nav.top .links a:hover::after { transform: scaleX(1); }
        }
        nav.top .right { display: flex; align-items: center; gap: 8px; }
        nav.top .login {
            font-size: 13.5px;
            font-weight: 500;
            color: var(--ink-2);
            padding: 9px 14px;
            transition: color 180ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            nav.top .login:hover { color: var(--ink); }
        }
        nav.top .cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--ink);
            color: white;
            padding: 10px 18px;
            border-radius: 999px;
            font-size: 13.5px;
            font-weight: 600;
            transition: background 200ms var(--ease-out), transform 160ms var(--ease-out);
        }
        nav.top .cta svg { width: 12px; height: 12px; transition: transform 200ms var(--ease-out); }
        nav.top .cta:active { transform: var(--press); }
        @media (hover: hover) and (pointer: fine) {
            nav.top .cta:hover { background: var(--signal); }
            nav.top .cta:hover svg { transform: translateX(3px); }
            nav.top .cta:active { transform: var(--press); }
        }

        nav.top .burger {
            display: none;
            width: 40px; height: 40px;
            border-radius: 999px;
            border: 1px solid var(--rule);
            background: var(--bg-3);
            color: var(--ink);
            place-items: center;
            transition: background 180ms var(--ease-out), transform 140ms var(--ease-out);
        }
        nav.top .burger svg { width: 18px; height: 18px; }
        nav.top .burger:active { transform: var(--press); }

        @media (max-width: 900px) {
            nav.top { grid-template-columns: auto 1fr auto; padding: 8px 8px 8px 18px; }
            nav.top .links { display: none; }
            nav.top .login { display: none; }
            nav.top .cta { display: none; }
            nav.top .burger { display: grid; }
        }

        /* Mobile drawer */
        .drawer-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(10,10,10,0.6);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            opacity: 0;
            visibility: hidden;
            transition: opacity 280ms var(--ease-drawer), visibility 280ms var(--ease-drawer);
            z-index: 90;
        }
        .drawer-backdrop[data-open="true"] {
            opacity: 1;
            visibility: visible;
        }
        .drawer {
            position: fixed;
            top: 0; right: 0; bottom: 0;
            width: min(360px, 88vw);
            background: var(--bg);
            border-left: 1px solid var(--rule);
            transform: translateX(100%);
            transition: transform 340ms var(--ease-drawer);
            z-index: 100;
            display: flex;
            flex-direction: column;
            padding: 24px 24px 32px;
            overflow-y: auto;
        }
        .drawer[data-open="true"] {
            transform: translateX(0);
        }
        .drawer .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--rule);
            margin-bottom: 24px;
        }
        .drawer .close {
            width: 36px; height: 36px;
            border-radius: 999px;
            background: var(--bg-2);
            color: var(--ink);
            display: grid;
            place-items: center;
            transition: background 180ms var(--ease-out), transform 140ms var(--ease-out);
        }
        .drawer .close:active { transform: var(--press); }
        .drawer .close svg { width: 16px; height: 16px; }
        .drawer .nav-links {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .drawer .nav-links a {
            font-size: 16px;
            font-weight: 600;
            color: var(--ink);
            padding: 14px 0;
            border-bottom: 1px solid var(--rule);
            display: flex;
            align-items: center;
            justify-content: space-between;
            letter-spacing: -0.01em;
        }
        .drawer .nav-links a:last-child { border-bottom: 0; }
        .drawer .nav-links a svg {
            width: 14px; height: 14px;
            color: var(--ink-3);
            transition: transform 200ms var(--ease-out), color 200ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .drawer .nav-links a:hover { color: var(--signal); }
            .drawer .nav-links a:hover svg { transform: translateX(4px); color: var(--signal); }
        }
        .drawer .foot {
            margin-top: auto;
            padding-top: 24px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .drawer .foot .login-link {
            font-size: 14px;
            color: var(--ink-3);
            text-align: center;
            padding: 10px;
        }
        .drawer .foot .login-link:hover { color: var(--ink); }
        .drawer .foot .drawer-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: var(--ink);
            color: white;
            padding: 14px 22px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 14.5px;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition: transform 140ms var(--ease-out);
        }
        .drawer .foot .drawer-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--signal);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 260ms var(--ease-out);
            z-index: -1;
        }
        .drawer .foot .drawer-cta:active { transform: var(--press); }
        .drawer .foot .drawer-cta svg { width: 13px; height: 13px; transition: transform 220ms var(--ease-out); }
        @media (hover: hover) and (pointer: fine) {
            .drawer .foot .drawer-cta:hover::before { transform: scaleX(1); }
            .drawer .foot .drawer-cta:hover svg { transform: translateX(3px); }
        }
        body.drawer-open { overflow: hidden; }

        /* ════════════════════════════════════════════════════
           SECTION SCAFFOLD (shared)
        ════════════════════════════════════════════════════ */
        .section-head {
            text-align: center;
            margin-bottom: var(--head-gap);
            max-width: 760px;
            margin-left: auto;
            margin-right: auto;
        }
        .section-head .badge { margin-bottom: 24px; }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 999px;
            padding: 6px 16px 6px 8px;
            font-size: 12.5px;
            font-weight: 500;
            color: var(--ink-2);
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        .badge .pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--ink);
            color: white;
            padding: 4px 10px;
            border-radius: 999px;
            font-family: var(--mono);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .badge .pill .dot {
            width: 5px; height: 5px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 0 3px rgba(255,77,46,0.3);
            animation: pulse-soft var(--pulse-rhythm) ease-in-out infinite;
        }
        @keyframes pulse-soft {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.55; }
        }
        .badge b { color: var(--ink); font-weight: 600; }

        h2 {
            font-family: var(--sans);
            font-weight: 700;
            font-size: var(--fs-h2);
            line-height: var(--leading-tight);
            letter-spacing: var(--tracking-h2);
            color: var(--ink);
            text-wrap: balance;
            margin-bottom: 20px;
        }
        h2 em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            font-size: 1.04em;
            color: var(--ink);
            letter-spacing: -0.005em;
        }
        .section-head .sub {
            font-size: var(--fs-lede);
            color: var(--ink-3);
            max-width: 38em;
            margin: 0 auto;
            line-height: var(--leading-body);
        }
        .section-head .sub b { color: var(--ink); font-weight: 600; }
        .section-head .sub-link {
            color: var(--signal);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-thickness: 1.5px;
            transition: color 200ms ease, text-decoration-color 200ms ease;
        }
        .section-head .sub-link:hover {
            color: var(--signal-2);
            text-decoration-color: var(--signal-2);
        }

        /* ════════════════════════════════════════════════════
           HERO
        ════════════════════════════════════════════════════ */
        .hero {
            padding: clamp(80px, 10vh, 128px) 0 clamp(40px, 5vh, 64px);
            text-align: center;
            position: relative;
        }

        h1.display {
            font-family: var(--sans);
            font-weight: 700;
            font-size: var(--fs-hero);
            line-height: var(--leading-tight);
            letter-spacing: var(--tracking-hero);
            color: var(--ink);
            margin: 28px auto 32px;
            max-width: 14ch;
            text-wrap: balance;
        }
        h1.display em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            color: var(--ink);
            display: inline-block;
            letter-spacing: -0.01em;
            font-size: 1.04em;
        }
        .hero .lede {
            font-size: var(--fs-lede);
            line-height: var(--leading-body);
            color: var(--ink-3);
            max-width: 38em;
            margin: 0 auto 44px;
        }
        .hero .lede b { color: var(--ink); font-weight: 600; }
        .cta-row {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 48px;
            justify-content: center;
        }

        /* Secondary self-serve link (B2B heroes) — low-friction champion path */
        .cta-row:has(+ .cta-alt) { margin-bottom: 18px; }
        .cta-alt {
            display: flex;
            width: fit-content;
            margin: 0 auto 44px;
            align-items: center;
            gap: 6px;
            font: 500 14px/1.2 var(--sans);
            color: var(--ink-3);
            text-decoration: none;
            transition: color 200ms var(--ease-out);
        }
        .cta-alt svg {
            width: 14px;
            height: 14px;
            transition: transform 200ms var(--ease-out);
        }
        .cta-alt:hover { color: var(--ink); }
        @media (hover: hover) and (pointer: fine) {
            .cta-alt:hover svg { transform: translateX(3px); }
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--ink);
            color: white;
            padding: 14px 24px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 14.5px;
            transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
            position: relative;
            overflow: hidden;
            isolation: isolate;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 18px -6px rgba(10,10,10,0.3);
            will-change: transform;
        }
        .btn-primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--signal);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 260ms var(--ease-out);
            z-index: -1;
        }
        .btn-primary svg { width: 13px; height: 13px; transition: transform 220ms var(--ease-out); }
        .btn-primary:active { transform: var(--press); }
        @media (hover: hover) and (pointer: fine) {
            .btn-primary:hover::before { transform: scaleX(1); }
            .btn-primary:hover svg { transform: translateX(3px); }
            .btn-primary:active { transform: var(--press); }
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-3);
            color: var(--ink);
            padding: 13px 22px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 14.5px;
            border: 1px solid var(--rule-2);
            transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
        }
        .btn-secondary:active { transform: var(--press); }
        @media (hover: hover) and (pointer: fine) {
            .btn-secondary:hover { background: var(--bg-2); border-color: var(--ink-3); }
            .btn-secondary:active { transform: var(--press); }
        }
        .btn-secondary .play {
            width: 18px; height: 18px;
            border-radius: 50%;
            background: var(--signal);
            display: grid;
            place-items: center;
            color: white;
        }
        .btn-secondary .play svg { width: 7px; height: 7px; }

        .risk-reversal {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 28px;
            margin-bottom: 72px;
            font-family: var(--mono);
            font-size: 11.5px;
            color: var(--ink-3);
            letter-spacing: 0.04em;
        }
        .risk-reversal span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .risk-reversal svg { width: 12px; height: 12px; color: var(--green); }

        .logos { margin-bottom: 0; width: 100%; }
        .logos .lbl {
            font-family: var(--mono);
            font-size: var(--fs-eyebrow);
            color: var(--ink-4);
            text-transform: uppercase;
            letter-spacing: var(--tracking-eyebrow);
            margin-bottom: 28px;
            text-align: center;
        }

        /* — Infinite marquee logos (real brand logos via clearbit) — */
        .logo-marquee {
            position: relative;
            width: 100%;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
                    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
        }
        .logo-marquee-track {
            display: inline-flex;
            align-items: center;
            gap: 72px;
            padding-right: 72px;
            white-space: nowrap;
            animation: logo-marquee 38s linear infinite;
            will-change: transform;
        }
        @keyframes logo-marquee {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }
        @media (hover: hover) and (pointer: fine) {
            .logo-marquee:hover .logo-marquee-track {
                animation-play-state: paused;
            }
        }
        .logo-marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            color: var(--ink-3);
            text-decoration: none;
            opacity: 0.7;
            transition: opacity 220ms var(--ease-out), color 220ms var(--ease-out);
        }
        .logo-marquee-item:hover {
            opacity: 1;
            color: var(--ink);
        }
        .logo-marquee-item .ico {
            display: inline-grid;
            place-items: center;
            width: 24px;
            height: 24px;
            color: currentColor;
            flex-shrink: 0;
        }
        .logo-marquee-item .ico svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        .logo-marquee-item .name {
            font: 600 15px/1 var(--sans);
            color: currentColor;
            letter-spacing: -0.015em;
        }
        @media (max-width: 720px) {
            .logo-marquee-track { gap: 48px; padding-right: 48px; }
            .logo-marquee-item .ico { width: 20px; height: 20px; }
            .logo-marquee-item .name { font-size: 13px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .logo-marquee-track {
                animation: none;
                justify-content: center;
                flex-wrap: wrap;
                gap: 36px;
                padding-right: 0;
            }
            .logo-marquee { -webkit-mask-image: none; mask-image: none; }
        }

        /* ════════════════════════════════════════════════════
           PRODUCT STAGE — v8 mockup live-transcript
        ════════════════════════════════════════════════════ */
        .stage {
            position: relative;
            margin: 0 auto;
            max-width: 1080px;
            padding: 0 16px;
        }
        .stage-glow {
            position: absolute;
            top: -8%; left: 50%;
            width: 100%; height: 70%;
            background:
                radial-gradient(ellipse at 50% 50%, rgba(255,77,46,0.12) 0%, transparent 55%),
                radial-gradient(ellipse at 30% 70%, rgba(10,10,10,0.08) 0%, transparent 50%);
            transform: translateX(-50%);
            filter: blur(48px);
            z-index: 0;
            pointer-events: none;
        }
        .call {
            position: relative;
            z-index: 1;
            background: var(--surface-d);
            border: 1px solid #1F1F23;
            border-radius: 20px;
            overflow: hidden;
            box-shadow:
                0 1px 0 rgba(255,255,255,0.04) inset,
                0 30px 60px -20px rgba(10,10,11,0.5),
                0 80px 100px -50px rgba(255,77,46,0.18);
        }

        /* Chrome (top bar) */
        .call .chrome {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 16px;
            padding: 14px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .call .chrome .dots { display: flex; gap: 6px; }
        .call .chrome .dots i {
            width: 10px; height: 10px;
            border-radius: 50%;
            background: #2A2A2E;
        }
        .call .chrome .addr {
            justify-self: center;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 999px;
            padding: 6px 14px;
            font-family: var(--mono);
            font-size: 11px;
            color: rgba(255,255,255,0.55);
        }
        .call .chrome .addr .dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 0 3px rgba(255,77,46,0.18);
            animation: pulse-soft var(--pulse-rhythm) ease-in-out infinite;
        }
        .call .chrome .timer {
            font-family: var(--mono);
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            font-weight: 500;
            font-variant-numeric: tabular-nums;
        }

        /* Persona strip (horizontal) */
        .call .persona {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 18px;
            padding: 22px 24px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .call .persona .ava {
            position: relative;
            width: 52px; height: 52px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            box-shadow: 0 4px 12px -2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.08);
        }
        .call .persona .ava .live-dot {
            position: absolute;
            bottom: -1px; right: -1px;
            width: 14px; height: 14px;
            border-radius: 50%;
            background: var(--green);
            border: 2.5px solid var(--surface-d);
        }
        .call .persona .info .n {
            font-size: 16px;
            font-weight: 600;
            color: white;
            letter-spacing: -0.015em;
            line-height: 1.15;
            margin-bottom: 4px;
        }
        .call .persona .info .meta {
            font-family: var(--mono);
            font-size: 10.5px;
            color: rgba(255,255,255,0.45);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .call .persona .info .meta .sep {
            width: 3px; height: 3px;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
        }
        .call .persona .info .meta .pips {
            display: inline-flex;
            gap: 2px;
            align-items: center;
        }
        .call .persona .info .meta .pips i {
            width: 4px; height: 8px;
            background: rgba(255,255,255,0.15);
            border-radius: 1px;
        }
        .call .persona .info .meta .pips i.on { background: var(--signal); }
        .call .persona .rec {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-family: var(--mono);
            font-size: 10.5px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--signal);
            font-weight: 600;
            padding: 6px 12px;
            background: rgba(255,77,46,0.08);
            border: 1px solid rgba(255,77,46,0.18);
            border-radius: 999px;
        }
        .call .persona .rec .d {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--signal);
            position: relative;
        }
        .call .persona .rec .d::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 1.5px solid var(--signal);
            animation: ripple 1.8s ease-out infinite;
            opacity: 0;
        }
        @keyframes ripple {
            0%   { transform: scale(0.6); opacity: 0.9; }
            100% { transform: scale(2.2); opacity: 0; }
        }
        @media (max-width: 640px) {
            .call .persona { padding: 18px 20px; gap: 14px; grid-template-columns: auto 1fr; }
            .call .persona .rec { display: none; }
        }

        /* Live transcript */
        .call .transcript {
            padding: 28px 28px 8px;
            display: flex;
            flex-direction: column;
            gap: 18px;
            min-height: 340px;
            position: relative;
            overflow: hidden;
        }
        .call .transcript::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 24px;
            background: linear-gradient(180deg, var(--surface-d) 0%, transparent 100%);
            pointer-events: none;
            z-index: 2;
        }
        @media (max-width: 640px) {
            .call .transcript { padding: 22px 20px 4px; gap: 14px; min-height: 280px; }
        }
        .tline {
            display: flex;
            flex-direction: column;
            max-width: 78%;
            opacity: 0;
            transform: translateY(8px);
            animation: tline-in 600ms var(--ease-out) forwards;
        }
        .tline.them { align-self: flex-start; }
        .tline.you  { align-self: flex-end; }
        @keyframes tline-in {
            to { opacity: 1; transform: translateY(0); }
        }
        .tline .who {
            font-family: var(--mono);
            font-size: 9.5px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            margin-bottom: 8px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .tline.them .who { color: var(--signal); }
        .tline.you  .who { color: rgba(255,255,255,0.55); justify-content: flex-end; }
        .tline .who .ts {
            color: rgba(255,255,255,0.32);
            font-weight: 500;
            font-variant-numeric: tabular-nums;
        }
        .tline .msg {
            padding: 14px 18px;
            border-radius: 14px;
            font-size: 15px;
            line-height: 1.5;
            color: white;
        }
        .tline.them .msg {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.07);
            border-bottom-left-radius: 4px;
        }
        .tline.you .msg {
            background: linear-gradient(180deg, rgba(255,77,46,0.16) 0%, rgba(255,77,46,0.10) 100%);
            border: 1px solid rgba(255,77,46,0.22);
            border-bottom-right-radius: 4px;
        }
        .tline .msg em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            font-size: 1.04em;
        }
        .tline .cursor {
            display: inline-block;
            width: 7px; height: 15px;
            background: var(--signal);
            margin-left: 3px;
            transform: translateY(3px);
            animation: blink 0.8s step-end infinite;
            border-radius: 1px;
        }
        @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
        /* Stagger animation — entrance */
        .stage.in .tline:nth-child(1) { animation-delay: 200ms; }
        .stage.in .tline:nth-child(2) { animation-delay: 700ms; }
        .stage.in .tline:nth-child(3) { animation-delay: 1300ms; }
        .stage.in .tline:nth-child(4) { animation-delay: 2000ms; }
        .js .stage:not(.in) .tline { opacity: 0; }

        /* Bottom bar (waveform + controls) */
        .call .bar-bottom {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 24px;
            padding: 18px 24px;
            border-top: 1px solid rgba(255,255,255,0.06);
            background: rgba(0,0,0,0.18);
        }
        @media (max-width: 640px) {
            .call .bar-bottom { grid-template-columns: 1fr; gap: 14px; padding: 16px 20px; }
            .call .bar-bottom .wave { width: 100%; }
        }
        .wave {
            display: flex;
            align-items: center;
            gap: 2.5px;
            height: 32px;
            min-width: 0;
        }
        .wave .bar {
            width: 2.5px;
            background: var(--grad-wave);
            border-radius: 999px;
            opacity: 0.85;
            height: var(--h, 40%);
            animation: bar 1.1s ease-in-out infinite alternate;
            animation-delay: var(--d, 0s);
            transform-origin: center;
            flex: 0 0 auto;
        }
        @keyframes bar {
            0%   { transform: scaleY(0.3); }
            100% { transform: scaleY(1); }
        }
        .controls {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }
        .ctrl {
            width: 38px; height: 38px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            color: white;
            display: grid;
            place-items: center;
            transition: background 180ms var(--ease-out), transform 140ms var(--ease-out);
        }
        .ctrl:active { transform: var(--press); }
        @media (hover: hover) and (pointer: fine) {
            .ctrl:hover { background: rgba(255,255,255,0.1); }
        }
        .ctrl.end {
            background: var(--signal);
            border-color: transparent;
            box-shadow: 0 4px 12px -2px rgba(255,77,46,0.45);
        }
        @media (hover: hover) and (pointer: fine) {
            .ctrl.end:hover { background: var(--signal-2); }
        }
        .ctrl svg { width: 14px; height: 14px; }

        /* Chips (kept but reduced to 2 for visual calm) */
        .chip {
            position: absolute;
            z-index: 2;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 14px;
            padding: 10px 14px;
            font-size: 12.5px;
            color: var(--ink-2);
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 24px -8px rgba(0,0,0,0.18);
            white-space: nowrap;
        }
        .chip .ico {
            width: 30px; height: 30px;
            border-radius: 9px;
            display: grid;
            place-items: center;
            color: white;
            flex-shrink: 0;
        }
        .chip .ico.green  { background: var(--green); }
        .chip .ico.orange { background: var(--signal); }
        .chip .ico.dark   { background: var(--ink); }
        .chip .ico svg { width: 14px; height: 14px; }
        .chip b { display: block; font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.2; }
        .chip span { font-size: 11px; color: var(--ink-3); }
        .chip.tr { top: 88px; right: -32px; transform: rotate(2deg); }
        .chip.bl { bottom: 32px; left: -28px; transform: rotate(-1.5deg); }
        @media (max-width: 980px) { .chip { display: none; } }

        @media (prefers-reduced-motion: reduce) {
            .wave .bar { animation: none; }
            .call .persona .rec .d::after,
            .badge .pill .dot,
            .tline .cursor { animation: none; }
            .tline { opacity: 1 !important; transform: none !important; animation: none !important; }
        }

        /* ════════════════════════════════════════════════════
           SECTION COMMON wrapper
        ════════════════════════════════════════════════════ */
        section.block {
            padding: var(--section-pad) 0;
            position: relative;
        }

        /* ════════════════════════════════════════════════════
           PRODUCT TABS (Section I — "Produit en action")
        ════════════════════════════════════════════════════ */
        .product-tabs {
            max-width: 1180px;
            margin: 0 auto;
        }
        .pt-bar {
            display: inline-flex;
            padding: 6px;
            background: var(--ink);
            border-radius: 999px;
            margin: 0 auto var(--block-gap);
            box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 32px -16px rgba(0,0,0,0.25);
        }
        .pt-bar-wrap {
            display: flex;
            justify-content: center;
        }
        .pt-tab {
            padding: 10px 22px;
            border-radius: 999px;
            font-size: 13.5px;
            font-weight: 600;
            color: rgba(255,255,255,0.55);
            font-family: var(--sans);
            transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            letter-spacing: -0.01em;
            white-space: nowrap;
        }
        .pt-tab .pt-num {
            font-family: var(--mono);
            font-size: 10px;
            opacity: 0.6;
            font-weight: 500;
        }
        .pt-tab[aria-selected="true"] {
            background: white;
            color: var(--ink);
        }
        .pt-tab[aria-selected="true"] .pt-num {
            color: var(--signal);
            opacity: 1;
        }
        @media (hover: hover) and (pointer: fine) {
            .pt-tab:hover:not([aria-selected="true"]) { color: white; }
        }
        @media (max-width: 720px) {
            .pt-bar { padding: 4px; gap: 0; overflow-x: auto; max-width: 100%; flex-wrap: nowrap; border-radius: 16px; }
            .pt-tab { padding: 8px 14px; font-size: 12.5px; flex-shrink: 0; }
        }

        .pt-stage {
            position: relative;
            background: var(--surface-d);
            border: 1px solid #1F1F23;
            border-radius: 24px;
            overflow: hidden;
            box-shadow:
                0 1px 0 rgba(255,255,255,0.04) inset,
                0 24px 48px -16px rgba(10,10,11,0.45),
                0 60px 80px -50px rgba(255,77,46,0.18);
            min-height: 480px;
        }
        .pt-panel {
            display: none;
            padding: 36px 40px;
            color: white;
            opacity: 0;
            transition: opacity 280ms var(--ease-out);
        }
        .pt-panel.active {
            display: block;
            opacity: 1;
        }
        @media (max-width: 720px) {
            .pt-panel { padding: 24px 22px; }
        }
        .pt-panel-head {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: end;
            gap: 24px;
            margin-bottom: 28px;
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .pt-panel-head .lbl {
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: var(--tracking-eyebrow);
            font-weight: 600;
            margin-bottom: 10px;
        }
        .pt-panel-head h3 {
            font-family: var(--sans);
            font-size: clamp(24px, 2.6vw, 34px);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.025em;
            color: white;
            max-width: 28ch;
        }
        .pt-panel-head h3 em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            font-size: 1.06em;
        }
        .pt-panel-head .meta {
            display: flex;
            align-items: center;
            gap: 14px;
            font-family: var(--mono);
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            white-space: nowrap;
        }
        .pt-panel-head .meta span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .pt-panel-head .meta .dot {
            width: 5px; height: 5px;
            border-radius: 50%;
            background: var(--signal);
        }
        @media (max-width: 720px) {
            .pt-panel-head { grid-template-columns: 1fr; gap: 16px; }
            .pt-panel-head .meta { font-size: 10px; gap: 10px; flex-wrap: wrap; }
        }

        .pt-grid {
            display: grid;
            grid-template-columns: 1fr 0.72fr;
            gap: 36px;
            align-items: start;
        }
        @media (max-width: 900px) {
            .pt-grid { grid-template-columns: 1fr; gap: 28px; }
        }

        /* Conversation column */
        .pt-conv {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .pt-msg {
            max-width: 92%;
            padding: 13px 17px;
            border-radius: 13px;
            font-size: 14.5px;
            line-height: 1.55;
        }
        .pt-msg .who {
            font-family: var(--mono);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }
        .pt-msg .who .ts {
            color: rgba(255,255,255,0.3);
            font-weight: 500;
        }
        .pt-msg em {
            color: var(--signal);
            font-weight: 500;
            font-size: 1.04em;
        }
        .pt-msg.them {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.07);
            color: white;
            border-bottom-left-radius: 4px;
            align-self: flex-start;
        }
        .pt-msg.them .who { color: var(--signal); }
        .pt-msg.you {
            background: linear-gradient(180deg, rgba(255,77,46,0.16) 0%, rgba(255,77,46,0.08) 100%);
            border: 1px solid rgba(255,77,46,0.22);
            color: white;
            border-bottom-right-radius: 4px;
            align-self: flex-end;
        }
        .pt-msg.you .who { color: rgba(255,255,255,0.55); }

        /* Insight column */
        .pt-insight {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .pt-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 999px;
            font-family: var(--mono);
            font-size: 10.5px;
            font-weight: 600;
            color: rgba(255,255,255,0.75);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            align-self: flex-start;
        }
        .pt-tag .dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--signal);
        }
        .pt-tag.green .dot { background: var(--green); }
        .pt-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 14px;
            padding: 18px 20px;
            color: white;
        }
        .pt-card .lbl {
            font-family: var(--mono);
            font-size: 10px;
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .pt-card .body {
            font-size: 13.5px;
            line-height: 1.55;
            color: rgba(255,255,255,0.88);
        }
        .pt-card .body em {
            color: var(--signal);
            font-weight: 500;
            color: white;
            font-size: 1.05em;
        }
        .pt-card .body b {
            color: white;
            font-weight: 600;
        }
        .pt-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .pt-stat {
            padding: 14px 16px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 12px;
        }
        .pt-stat .v {
            font-family: var(--sans);
            font-size: 22px;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1;
            color: white;
            margin-bottom: 6px;
        }
        .pt-stat .v em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            color: var(--signal);
        }
        .pt-stat .k {
            font-family: var(--mono);
            font-size: 9.5px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            line-height: 1.35;
        }

        /* ════════════════════════════════════════════════════
           AUDIO PILL — reusable
        ════════════════════════════════════════════════════ */
        .audio-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 14px 6px 6px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 999px;
            font-family: var(--mono);
            font-size: 11px;
            color: var(--ink-2);
            font-weight: 600;
            letter-spacing: 0.06em;
            transition: border-color 180ms var(--ease-out), transform 140ms var(--ease-out);
        }
        .audio-pill:active { transform: var(--press); }
        @media (hover: hover) and (pointer: fine) {
            .audio-pill:hover { border-color: var(--ink); }
        }
        .audio-pill .play {
            width: 24px; height: 24px;
            border-radius: 50%;
            background: var(--ink);
            color: white;
            display: grid;
            place-items: center;
            transition: background 180ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .audio-pill:hover .play { background: var(--signal); }
        }
        .audio-pill .play svg { width: 9px; height: 9px; }
        .audio-pill .pwave {
            display: inline-flex;
            align-items: center;
            gap: 1.5px;
            height: 18px;
        }
        .audio-pill .pwave i {
            width: 2px;
            background: var(--ink-3);
            border-radius: 1px;
            opacity: 0.5;
        }
        .audio-pill .dur {
            font-variant-numeric: tabular-nums;
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        /* ════════════════════════════════════════════════════
           CASTING (Section II) — v8 editorial cards
        ════════════════════════════════════════════════════ */
        .cards-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            max-width: 1180px;
            margin: 0 auto;
            text-align: left;
        }
        @media (max-width: 960px) {
            .cards-3 { grid-template-columns: 1fr; max-width: 520px; }
        }
        .card-prospect {
            position: relative;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 20px;
            overflow: hidden;
            transition: transform 320ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 320ms var(--ease-out);
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        @media (hover: hover) and (pointer: fine) {
            .card-prospect:hover {
                transform: translateY(-6px);
                border-color: var(--ink);
                box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 24px 48px -16px rgba(0,0,0,0.22);
            }
        }
        .card-prospect .visual {
            position: relative;
            height: 180px;
            background: var(--surface-d);
            border-bottom: 1px solid var(--rule);
            overflow: hidden;
        }
        .card-prospect .visual::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 40%, rgba(255,77,46,0.15) 0%, transparent 55%);
        }
        .card-prospect .visual .mini-ava {
            position: absolute;
            top: 24px;
            left: 24px;
            width: 56px; height: 56px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            box-shadow: 0 4px 12px -2px rgba(0,0,0,0.4);
        }
        .card-prospect .visual .mini-info {
            position: absolute;
            top: 30px;
            left: 96px;
            color: white;
        }
        .card-prospect .visual .mini-info .n {
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.015em;
            margin-bottom: 3px;
        }
        .card-prospect .visual .mini-info .r {
            font-size: 11.5px;
            color: rgba(255,255,255,0.55);
            font-family: var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .card-prospect .visual .mini-wave {
            position: absolute;
            bottom: 18px; left: 24px; right: 24px;
            display: flex;
            gap: 2px;
            align-items: flex-end;
            height: 60px;
        }
        .card-prospect .visual .mini-wave i {
            flex: 1;
            background: var(--grad-wave);
            opacity: 0.6;
            border-radius: 1.5px;
        }
        .card-prospect .visual .mini-wave i.played { background: rgba(255,255,255,0.18); opacity: 1; }

        .card-prospect .body { padding: 22px 24px 24px; }
        .card-prospect .body .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
        }
        .scen {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 5px 11px;
            background: var(--bg-2);
            border-radius: 999px;
            font-family: var(--mono);
            font-size: 10.5px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ink-2);
        }
        .scen .d {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--signal);
        }
        .diff {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--ink-3);
        }
        .diff .pips { display: inline-flex; gap: 2px; }
        .diff .pips i {
            width: 7px; height: 4px;
            background: var(--rule);
            border-radius: 1px;
        }
        .diff .pips i.on { background: var(--ink); }
        .diff b { color: var(--ink); }

        .card-prospect .quote {
            font-size: 15px;
            line-height: 1.5;
            color: var(--ink);
            margin-bottom: 22px;
            min-height: 4.5em;
        }
        .card-prospect .quote em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            color: var(--ink);
            font-size: 1.05em;
        }
        .card-prospect .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 16px;
            border-top: 1px solid var(--rule);
        }
        .listen {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--ink);
            color: white;
            padding: 8px 14px 8px 8px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 12.5px;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition: transform 140ms var(--ease-out);
        }
        .listen::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--signal);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 260ms var(--ease-out);
            z-index: -1;
        }
        .listen:active { transform: var(--press); }
        @media (hover: hover) and (pointer: fine) {
            .listen:hover::before { transform: scaleX(1); }
            .listen:active { transform: var(--press); }
        }
        .listen .ico {
            width: 22px; height: 22px;
            border-radius: 50%;
            background: var(--signal);
            color: white;
            display: grid; place-items: center;
            transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .listen:hover .ico { background: white; color: var(--signal); }
        }
        .listen .ico svg { width: 8px; height: 8px; }
        .duration {
            font-family: var(--mono);
            font-size: 11px;
            color: var(--ink-3);
            font-weight: 500;
        }
        .duration b { color: var(--ink); font-weight: 600; }

        /* ════════════════════════════════════════════════════
           COMMENT ÇA MARCHE — 3 steps horizontal
        ════════════════════════════════════════════════════ */
        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            max-width: 1180px;
            margin: 0 auto;
            position: relative;
            border: 1px solid var(--rule);
            background: var(--bg-3);
            border-radius: 20px;
            overflow: hidden;
        }
        @media (max-width: 960px) {
            .steps { grid-template-columns: 1fr; }
        }
        .step {
            padding: 32px 28px 36px;
            border-right: 1px solid var(--rule);
            position: relative;
        }
        .step:last-child { border-right: 0; }
        @media (max-width: 960px) {
            .step { border-right: 0; border-bottom: 1px solid var(--rule); }
            .step:last-child { border-bottom: 0; }
        }
        .step .num {
            color: var(--signal);
            font-weight: 500;
            font-size: 64px;
            line-height: 0.9;
            color: var(--signal);
            font-weight: 400;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
        }
        .step h3 {
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -0.022em;
            line-height: 1.15;
            margin-bottom: 12px;
            color: var(--ink);
        }
        .step h3 em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            font-size: 1.04em;
        }
        .step p {
            font-size: 14.5px;
            line-height: 1.55;
            color: var(--ink-3);
            margin-bottom: 24px;
        }
        .step .preview {
            background: var(--surface-d);
            border-radius: 12px;
            padding: 16px;
            position: relative;
            overflow: hidden;
            color: white;
        }
        .step .preview::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 50%, rgba(255,77,46,0.12) 0%, transparent 60%);
        }
        .step .preview .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin-bottom: 12px;
        }
        .step .preview .lbl {
            font-family: var(--mono);
            font-size: 9px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.14em;
        }
        .step .preview .live-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-family: var(--mono);
            font-size: 9px;
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-weight: 600;
        }
        .step .preview .live-tag .d {
            width: 5px; height: 5px;
            border-radius: 50%;
            background: var(--signal);
        }
        .preview-list { position: relative; display: grid; gap: 8px; }
        .preview-list .item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px;
            font-size: 12px;
        }
        .preview-list .item.on { background: rgba(255,77,46,0.12); border-color: rgba(255,77,46,0.3); }
        .preview-list .item .face {
            width: 22px; height: 22px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .preview-list .item .name { color: white; font-weight: 500; }
        .preview-list .item .meta {
            margin-left: auto;
            font-family: var(--mono);
            font-size: 9.5px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .preview-wave { position: relative; height: 78px; display: flex; align-items: center; gap: 3px; }
        .preview-wave i {
            flex: 1;
            background: var(--grad-wave);
            opacity: 0.9;
            border-radius: 2px;
            display: inline-block;
        }
        .preview-fb { position: relative; }
        .preview-fb .score {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .preview-fb .score-num {
            color: var(--signal);
            font-weight: 500;
            font-size: 38px;
            color: var(--signal);
            font-weight: 400;
            line-height: 1;
        }
        .preview-fb .score-lbl {
            font-family: var(--mono);
            font-size: 10px;
            color: rgba(255,255,255,0.6);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            line-height: 1.4;
        }
        .preview-fb .score-lbl b { color: white; font-weight: 600; }
        .preview-fb .skills { display: grid; gap: 6px; }
        .preview-fb .sk {
            display: grid;
            grid-template-columns: 70px 1fr 28px;
            gap: 8px;
            align-items: center;
            font-family: var(--mono);
            font-size: 10px;
            color: rgba(255,255,255,0.7);
        }
        .preview-fb .sk .bar {
            height: 5px;
            background: rgba(255,255,255,0.08);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }
        .preview-fb .sk .bar::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--grad-wave);
            border-radius: 3px;
            width: var(--w, 50%);
        }
        .preview-fb .sk .val { color: white; font-weight: 600; text-align: right; }

        /* Arrow connector between steps */
        .step::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -8px;
            width: 16px; height: 16px;
            background: var(--bg-3);
            border-top: 1px solid var(--rule);
            border-right: 1px solid var(--rule);
            transform: translateY(-50%) rotate(45deg);
            z-index: 2;
        }
        .step:last-child::after { display: none; }
        @media (max-width: 960px) {
            .step::after { display: none; }
        }

        /* ════════════════════════════════════════════════════
           FEEDBACK SHOWCASE
        ════════════════════════════════════════════════════ */
        .feedback-show {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr;
            gap: 56px;
            align-items: center;
            max-width: 1180px;
            margin: 0 auto;
        }
        @media (max-width: 960px) {
            .feedback-show { grid-template-columns: 1fr; gap: 40px; text-align: left; }
        }
        .feedback-show .left { text-align: left; }
        .feedback-show h2 {
            font-size: clamp(34px, 4.4vw, 52px);
            text-align: left;
            margin-top: 16px;
        }
        .feedback-show .left .badge { margin-bottom: 0; }
        .feedback-show .left p.lede2 {
            font-size: 17px;
            color: var(--ink-3);
            line-height: 1.6;
            margin-bottom: 28px;
            max-width: 30em;
        }
        .feedback-show .left p.lede2 b { color: var(--ink); font-weight: 600; }
        .feedback-show .bullets {
            display: grid;
            gap: 14px;
            margin-bottom: 32px;
        }
        .feedback-show .bullets li {
            display: grid;
            grid-template-columns: 28px 1fr;
            gap: 14px;
            align-items: start;
            font-size: 14.5px;
            color: var(--ink-2);
            line-height: 1.5;
            list-style: none;
        }
        .feedback-show .bullets li .b-ico {
            width: 28px; height: 28px;
            border-radius: 8px;
            background: var(--signal-soft);
            color: var(--signal);
            display: grid;
            place-items: center;
            flex-shrink: 0;
        }
        .feedback-show .bullets li .b-ico svg { width: 14px; height: 14px; }
        .feedback-show .bullets li b { color: var(--ink); font-weight: 600; }

        .fb-card {
            background: var(--surface-d);
            border: 1px solid #2A2A2E;
            border-radius: 20px;
            overflow: hidden;
            color: white;
            box-shadow: 0 24px 48px -16px rgba(10,10,11,0.4), 0 60px 80px -40px rgba(255,77,46,0.15);
        }
        .fb-card .head {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 16px;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .fb-card .head .l-ava {
            width: 38px; height: 38px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
        }
        .fb-card .head .h-info .n {
            font-size: 14px;
            font-weight: 600;
            color: white;
            line-height: 1.2;
        }
        .fb-card .head .h-info .m {
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            font-family: var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .fb-card .head .h-meta {
            text-align: right;
            font-family: var(--mono);
            font-size: 10.5px;
            color: rgba(255,255,255,0.5);
            line-height: 1.4;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .fb-card .head .h-meta b { color: var(--signal); font-weight: 600; display: block; }
        .fb-card .score-row {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 24px;
            padding: 24px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            align-items: center;
        }
        .fb-card .ring {
            position: relative;
            width: 84px; height: 84px;
        }
        .fb-card .ring svg {
            width: 100%; height: 100%;
            transform: rotate(-90deg);
        }
        .fb-card .ring svg .bg { stroke: rgba(255,255,255,0.08); }
        .fb-card .ring svg .fg {
            stroke: var(--signal);
            stroke-dasharray: 220;
            stroke-dashoffset: 220;
        }
        .feedback-show.in .fb-card .ring svg .fg {
            animation: ring-fill 1100ms var(--ease-out) 220ms forwards;
        }
        @keyframes ring-fill {
            from { stroke-dashoffset: 220; }
            to   { stroke-dashoffset: 56; }
        }

        @media (prefers-reduced-motion: reduce) {
            .feedback-show.in .fb-card .ring svg .fg { animation: none; stroke-dashoffset: 56; }
        }
        .fb-card .ring .v {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            color: var(--signal);
            font-weight: 500;
            font-size: 30px;
            color: white;
            font-weight: 400;
        }
        .fb-card .skill-list {
            display: grid;
            gap: 8px;
            flex: 1;
        }
        .fb-card .sk-row {
            display: grid;
            grid-template-columns: 80px 1fr 28px;
            gap: 10px;
            align-items: center;
            font-family: var(--mono);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.6);
        }
        .fb-card .sk-row .bar {
            height: 6px;
            background: rgba(255,255,255,0.08);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }
        .fb-card .sk-row .bar::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--grad-wave);
            border-radius: 3px;
            width: var(--w, 50%);
        }
        .fb-card .sk-row .v { color: white; font-weight: 600; text-align: right; }
        .fb-card .tip {
            padding: 18px 20px;
            display: grid;
            grid-template-columns: 28px 1fr;
            gap: 14px;
            align-items: start;
            background: rgba(255,77,46,0.06);
        }
        .fb-card .tip .t-ico {
            width: 28px; height: 28px;
            border-radius: 8px;
            background: var(--signal);
            color: white;
            display: grid; place-items: center;
        }
        .fb-card .tip .t-ico svg { width: 14px; height: 14px; }
        .fb-card .tip .t-txt {
            font-size: 13.5px;
            line-height: 1.55;
            color: rgba(255,255,255,0.9);
        }
        .fb-card .tip .t-txt em {
            color: var(--signal);
            font-weight: 500;
            color: white;
        }
        .fb-card .tip .t-txt .lbl {
            display: block;
            font-family: var(--mono);
            font-size: 10px;
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-weight: 600;
            margin-bottom: 6px;
        }

        /* ════════════════════════════════════════════════════
           TÉMOIGNAGES — v8 editorial 2-col format
        ════════════════════════════════════════════════════ */
        .testimonials-edit {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: clamp(48px, 6vh, 80px);
        }
        .testimonial-edit {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 56px;
            align-items: start;
            padding-bottom: clamp(48px, 6vh, 72px);
            border-bottom: 1px solid var(--rule);
        }
        .testimonial-edit:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
        .testimonial-edit.reverse {
            grid-template-columns: 1fr 240px;
        }
        .testimonial-edit.reverse .te-meta { order: 2; }
        .testimonial-edit.reverse .te-quote { order: 1; }
        @media (max-width: 800px) {
            .testimonial-edit,
            .testimonial-edit.reverse { grid-template-columns: 1fr; gap: 28px; }
            .testimonial-edit.reverse .te-meta { order: 0; }
            .testimonial-edit.reverse .te-quote { order: 0; }
        }
        .te-meta {
            display: flex;
            flex-direction: column;
            gap: 18px;
            position: sticky;
            top: 96px;
        }
        @media (max-width: 800px) {
            .te-meta { position: static; flex-direction: row; align-items: center; gap: 16px; }
        }
        .te-face {
            width: 96px; height: 96px;
            border-radius: 24px;
            background-size: cover;
            background-position: center;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 32px -12px rgba(0,0,0,0.18);
            border: 1px solid var(--rule);
        }
        @media (max-width: 800px) {
            .te-face { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; }
        }
        .te-id .te-name {
            font-size: 17px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: -0.015em;
            line-height: 1.2;
            margin-bottom: 4px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .te-id .te-name .li {
            width: 18px; height: 18px;
            border-radius: 4px;
            background: #0077B5;
            color: white;
            display: grid;
            place-items: center;
        }
        .te-id .te-name .li svg { width: 10px; height: 10px; }
        .te-id .te-role {
            font-size: 13.5px;
            color: var(--ink-3);
            line-height: 1.45;
            margin-bottom: 12px;
        }
        .te-stats {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        @media (max-width: 800px) {
            .te-stats { display: none; }
        }
        .te-stat {
            display: flex;
            align-items: baseline;
            gap: 6px;
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .te-stat b {
            font-family: var(--sans);
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--ink);
            text-transform: none;
        }
        .te-stat b em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            color: var(--signal);
        }

        .te-quote {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .te-quote .stars {
            display: inline-flex;
            gap: 2px;
            color: var(--signal);
            font-size: 13px;
            letter-spacing: 1px;
        }
        .te-quote .q {
            font-family: var(--sans);
            font-size: clamp(20px, 2.2vw, 28px);
            line-height: 1.4;
            color: var(--ink);
            font-weight: 500;
            letter-spacing: -0.015em;
            text-wrap: balance;
        }
        .te-quote .q em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            font-size: 1.06em;
        }
        .te-quote .q-foot {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        /* ════════════════════════════════════════════════════
           NE PAS ACHETER SI…
        ════════════════════════════════════════════════════ */
        .not-for-you { padding: 56px 0; }
        .nfu {
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 20px;
            padding: 36px 40px;
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 48px;
            align-items: center;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
            max-width: 1100px;
            margin: 0 auto;
        }
        @media (max-width: 800px) {
            .nfu { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
        }
        .nfu-side .badge { margin-bottom: 16px; }
        .nfu-side h2 {
            font-size: clamp(28px, 3.2vw, 40px);
            line-height: 1.02;
            text-align: left;
            margin-bottom: 12px;
        }
        .nfu-side h2 em { color: var(--signal); }
        .nfu-side p {
            font-size: 14.5px;
            color: var(--ink-3);
            line-height: 1.5;
        }
        .nfu-list {
            list-style: none;
            display: grid;
            gap: 12px;
        }
        .nfu-list li {
            display: grid;
            grid-template-columns: 28px 1fr;
            gap: 14px;
            align-items: start;
            padding: 14px 16px;
            background: var(--bg);
            border: 1px solid var(--rule);
            border-radius: 10px;
            font-size: 14.5px;
            color: var(--ink-2);
            line-height: 1.5;
        }
        .nfu-list li b { color: var(--ink); font-weight: 600; }
        .nfu-list li em {
            color: var(--signal);
            font-weight: 500;
            color: var(--ink);
            font-size: 1.05em;
        }
        .nfu-list li .x {
            width: 24px; height: 24px;
            border-radius: 50%;
            background: var(--signal-soft);
            color: var(--signal);
            display: grid;
            place-items: center;
            font-weight: 700;
            font-size: 14px;
            flex-shrink: 0;
            line-height: 1;
        }

        /* ════════════════════════════════════════════════════
           COMPARAISON vs alternatives
        ════════════════════════════════════════════════════ */
        .compare-wrap {
            max-width: 1100px;
            margin: 0 auto;
            border: 1px solid var(--rule);
            border-radius: 20px;
            overflow: hidden;
            background: var(--bg-3);
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        .compare {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        .compare thead th {
            text-align: left;
            padding: 18px 20px;
            font-family: var(--mono);
            font-size: 10.5px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--ink-3);
            background: var(--bg-2);
            border-bottom: 1px solid var(--rule);
            vertical-align: bottom;
        }
        .compare thead th.us {
            color: var(--ink);
            background: var(--ink);
            color: white;
            position: relative;
        }
        .compare thead th.us::after {
            content: '';
            position: absolute;
            top: -1px;
            left: 0; right: 0;
            height: 3px;
            background: var(--signal);
        }
        .compare tbody td {
            padding: 16px 20px;
            border-bottom: 1px solid var(--rule);
            color: var(--ink-2);
            vertical-align: middle;
        }
        .compare tbody td:first-child {
            font-weight: 600;
            color: var(--ink);
            font-size: 14px;
        }
        .compare tbody tr:last-child td { border-bottom: 0; }
        .compare tbody td.us {
            background: rgba(255,77,46,0.04);
            color: var(--ink);
            font-weight: 600;
            border-left: 1px solid var(--rule);
            border-right: 1px solid var(--rule);
        }
        .compare tbody tr:last-child td.us {
            box-shadow: inset 0 -3px 0 var(--signal);
        }
        .compare .yes { color: var(--green); font-weight: 700; }
        .compare .no  { color: var(--ink-4); }
        .compare .mid { color: #C28717; font-weight: 600; }
        @media (max-width: 800px) {
            .compare thead th, .compare tbody td { padding: 12px 14px; font-size: 12.5px; }
            .compare thead th { font-size: 9.5px; }
        }

        /* Honesty strip — integrated below comparison */
        .honesty {
            max-width: 1100px;
            margin: clamp(48px, 6vh, 72px) auto 0;
            padding: 32px 40px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 20px;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 36px;
            align-items: center;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        @media (max-width: 800px) {
            .honesty { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
        }
        .honesty .h-side .lbl {
            font-family: var(--mono);
            font-size: var(--fs-eyebrow);
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: var(--tracking-eyebrow);
            font-weight: 600;
            margin-bottom: 10px;
        }
        .honesty .h-side h3 {
            font-family: var(--sans);
            font-size: clamp(20px, 2.2vw, 26px);
            font-weight: 700;
            letter-spacing: -0.025em;
            line-height: 1.15;
            color: var(--ink);
            white-space: nowrap;
        }
        .honesty .h-side h3 em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            color: var(--signal);
        }
        @media (max-width: 800px) {
            .honesty .h-side h3 { white-space: normal; }
        }
        .honesty .h-list {
            list-style: none;
            display: grid;
            gap: 8px;
            margin: 0;
            padding-left: 24px;
            border-left: 1px solid var(--rule);
        }
        @media (max-width: 800px) {
            .honesty .h-list { border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--rule); }
        }
        .honesty .h-list li {
            font-size: 14px;
            color: var(--ink-2);
            line-height: 1.5;
            display: grid;
            grid-template-columns: 16px 1fr;
            gap: 12px;
            align-items: start;
        }
        .honesty .h-list li::before {
            content: '×';
            color: var(--signal);
            font-weight: 700;
            font-size: 16px;
            line-height: 1;
            margin-top: 2px;
        }
        .honesty .h-list li b { color: var(--ink); font-weight: 600; }
        .honesty .h-list li em {
            color: var(--signal);
            font-weight: 500;
            color: var(--ink);
            font-size: 1.04em;
        }

        /* ════════════════════════════════════════════════════
           COST COMPARISON STRIP
        ════════════════════════════════════════════════════ */
        .cost-compare {
            display: grid;
            grid-template-columns: 1fr auto 1fr auto;
            gap: 20px;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto 48px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 16px;
            padding: 22px 28px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        @media (max-width: 900px) {
            .cost-compare { grid-template-columns: 1fr; gap: 16px; padding: 20px; text-align: center; }
            .cost-compare .cc-arrow { display: none; }
        }
        .cc-item .cc-label {
            font-family: var(--mono);
            font-size: 10.5px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--ink-3);
            margin-bottom: 6px;
        }
        .cc-item .cc-value {
            font-family: var(--sans);
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: var(--ink-2);
            line-height: 1.1;
        }
        .cc-item .cc-value em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
            color: var(--ink-3);
        }
        .cc-item .cc-foot {
            font-size: 12px;
            color: var(--ink-3);
            margin-top: 4px;
            line-height: 1.4;
        }
        .cc-item.cc-us .cc-label { color: var(--signal); }
        .cc-item.cc-us .cc-value { color: var(--ink); }
        .cc-item.cc-us .cc-value em { color: var(--signal); }
        .cc-strike {
            position: relative;
            display: inline-block;
        }
        .cc-strike::after {
            content: '';
            position: absolute;
            left: -4px; right: -4px;
            top: 50%;
            height: 2.5px;
            background: var(--ink-3);
            transform: skewY(-3deg);
            opacity: 0.6;
        }
        .cc-arrow {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--bg-2);
            color: var(--ink);
            display: grid;
            place-items: center;
        }
        .cc-arrow svg { width: 16px; height: 16px; }
        .cc-badge {
            background: var(--signal);
            color: white;
            padding: 12px 18px;
            border-radius: 14px;
            display: inline-flex;
            flex-direction: column;
            text-align: center;
            box-shadow: 0 8px 18px -6px rgba(255,77,46,0.45);
        }
        .cc-badge-num {
            font-family: var(--sans);
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.01em;
            line-height: 1;
        }
        .cc-badge-num em {
            color: var(--signal);
            font-weight: 500;
            font-weight: 400;
        }
        .cc-badge-lbl {
            font-family: var(--mono);
            font-size: 9.5px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            opacity: 0.85;
            margin-top: 4px;
        }

        /* ════════════════════════════════════════════════════
           TARIFS
        ════════════════════════════════════════════════════ */
        .plans {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            max-width: 1100px;
            margin: 0 auto;
        }
        @media (max-width: 960px) {
            .plans { grid-template-columns: 1fr; max-width: 460px; }
        }
        .plan {
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 20px;
            padding: 32px 28px;
            display: flex;
            flex-direction: column;
            position: relative;
            transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 220ms var(--ease-out);
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        @media (hover: hover) and (pointer: fine) {
            .plan:hover {
                transform: translateY(-4px);
                border-color: var(--ink-3);
                box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 20px 36px -16px rgba(0,0,0,0.18);
            }
            .plan.pop:hover { border-color: var(--surface-d-3); }
        }
        /* CRO Phase 9 : Pro card en light orange tint (au lieu de dark) — softer hierarchy */
        .plan.pop {
            background: #FFF8F6;
            color: var(--ink);
            border: 1.5px solid var(--signal);
            transform: translateY(-12px);
            box-shadow:
                0 1px 2px rgba(255,77,46,0.06),
                0 24px 48px -16px rgba(255,77,46,0.18),
                0 60px 80px -50px rgba(255,77,46,0.25);
            position: relative;
        }
        @media (max-width: 960px) {
            .plan.pop { transform: none; }
        }
        @media (hover: hover) and (pointer: fine) {
            .plan.pop:hover {
                transform: translateY(-16px);
                border-color: var(--signal);
            }
        }
        /* CRO Phase 9 : pop-tag intégré en haut de card (pas en débord) */
        .plan .pop-tag {
            position: absolute;
            top: 16px; right: 16px;
            background: var(--signal);
            color: var(--bg-3);
            font-family: var(--mono);
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            padding: 5px 11px;
            border-radius: 999px;
            box-shadow: 0 2px 6px -1px rgba(255,77,46,0.35);
            z-index: 1;
        }
        .plan .p-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink-3);
            font-family: var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-bottom: 14px;
        }
        .plan.pop .p-name { color: var(--signal); }
        .plan .price {
            display: flex;
            align-items: baseline;
            gap: 4px;
            margin-bottom: 8px;
        }
        .plan .price .num {
            font-family: var(--sans);
            font-size: 56px;
            font-weight: 700;
            letter-spacing: -0.04em;
            line-height: 1;
            color: var(--ink);
        }
        .plan.pop .price .num { color: var(--ink); }
        .plan .price .num em {
            color: var(--signal);
            font-weight: 500;
        }
        .plan .price .per {
            font-size: 14px;
            color: var(--ink-3);
        }
        .plan.pop .price .per { color: var(--ink-3); }
        .plan .p-desc {
            font-size: 14px;
            color: var(--ink-3);
            margin-bottom: 22px;
            line-height: 1.5;
            min-height: 2.8em;
        }
        .plan.pop .p-desc { color: var(--ink-2); }
        .plan .p-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--ink);
            color: white;
            padding: 13px 18px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 22px;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition: color 200ms var(--ease-out), transform 140ms var(--ease-out);
        }
        .plan .p-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--signal);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 260ms var(--ease-out);
            z-index: -1;
        }
        .plan .p-cta:active { transform: var(--press); }
        @media (hover: hover) and (pointer: fine) {
            .plan .p-cta:hover::before { transform: scaleX(1); }
            .plan .p-cta:active { transform: var(--press); }
        }
        /* Featured plan: orange base → white wipe (keeps tier hierarchy) */
        .plan.pop .p-cta { background: var(--signal); }
        .plan.pop .p-cta::before { background: white; }
        @media (hover: hover) and (pointer: fine) {
            .plan.pop .p-cta:hover { color: var(--ink); }
        }
        .plan .p-feats {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-top: 22px;
            border-top: 1px solid var(--rule);
            list-style: none;
            margin: 0;
        }
        .plan.pop .p-feats { border-top-color: rgba(255,77,46,0.18); }
        /* CRO fix Phase 9 : flex instead of grid to keep <b> + text on same line */
        .plan .p-feats li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13.5px;
            color: var(--ink-2);
            line-height: 1.5;
        }
        .plan.pop .p-feats li { color: var(--ink-2); }
        .plan .p-feats li::before {
            content: '';
            width: 16px; height: 16px;
            background: var(--green-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
            border-radius: 4px;
            display: inline-block;
            flex-shrink: 0;
            margin-top: 3px;
        }
        .plan.pop .p-feats li::before {
            background-color: rgba(255,77,46,0.15);
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF4D2E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
        }
        .plan .p-feats li b { color: var(--ink); font-weight: 600; }
        .plan.pop .p-feats li b { color: var(--ink); }

        .pricing-foot {
            text-align: center;
            margin-top: 48px;
            font-family: var(--mono);
            font-size: 11.5px;
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }

        /* CRO Phase 9 : compress section spacing on dedicated pricing page only.
           Landing pages keep generous breathing room; pricing is denser. */
        body[data-page="pricing"] section.block {
            padding: clamp(40px, 6vh, 64px) 0;
        }
        body[data-page="pricing"] section.hero {
            padding: clamp(56px, 8vh, 90px) 0 clamp(24px, 4vh, 40px);
        }

        /* CRO Phase 9 : micro-trust sous chaque CTA */
        .plan .p-trust {
            margin: -12px 0 22px;
            text-align: center;
            font: 500 11px/1.4 var(--mono);
            color: var(--ink-3);
            letter-spacing: 0.04em;
        }
        .plan.pop .p-trust { color: var(--ink-3); }

        /* CRO Phase 9 : bridge link vers /pricing pour les indécis */
        .pricing-foot-row {
            margin-top: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
        }
        @media (max-width: 640px) {
            .pricing-foot-row {
                flex-direction: column;
                gap: 14px;
                text-align: center;
            }
        }
        .pricing-bridge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 10px 18px;
            border-radius: 99px;
            border: 1px solid var(--rule);
            background: var(--bg-3);
            color: var(--ink);
            font: 600 13px/1 var(--sans);
            letter-spacing: -0.005em;
            transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
            text-decoration: none;
        }
        .pricing-bridge:hover {
            border-color: var(--ink);
            background: var(--bg-2);
        }
        .pricing-bridge svg {
            width: 14px;
            height: 14px;
            transition: transform 200ms ease;
        }
        .pricing-bridge:hover svg { transform: translateX(2px); }
        .pricing-foot b { color: var(--ink); font-weight: 600; }

        /* ════════════════════════════════════════════════════
           FAQ
        ════════════════════════════════════════════════════ */
        .faq {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 64px;
            max-width: 1100px;
            margin: 0 auto;
            align-items: start;
        }
        @media (max-width: 900px) {
            .faq { grid-template-columns: 1fr; gap: 32px; }
        }
        .faq .side {
            position: sticky;
            top: 120px;
        }
        @media (max-width: 900px) {
            .faq .side { position: static; }
        }
        .faq .side .badge { margin-bottom: 16px; }
        .faq .side h2 {
            font-size: clamp(32px, 3.6vw, 42px);
            text-align: left;
            margin-bottom: 16px;
            line-height: 1;
        }
        .faq .side p {
            font-size: 14.5px;
            color: var(--ink-3);
            line-height: 1.55;
            margin-bottom: 18px;
        }
        .faq .side a.contact {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--ink);
            border-bottom: 1px solid var(--rule-2);
            padding-bottom: 2px;
            transition: color 180ms var(--ease-out), border-bottom-color 180ms var(--ease-out), gap 220ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .faq .side a.contact:hover { color: var(--signal); border-bottom-color: var(--signal); gap: 10px; }
        }
        .faq .list {
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 20px;
            overflow: hidden;
        }
        details.q {
            border-bottom: 1px solid var(--rule);
        }
        details.q:last-child { border-bottom: 0; }
        details.q summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 28px;
            cursor: pointer;
            list-style: none;
            font-size: 16.5px;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -0.01em;
            line-height: 1.4;
            transition: background 180ms var(--ease-out);
            user-select: none;
        }
        details.q summary::-webkit-details-marker { display: none; }
        @media (hover: hover) and (pointer: fine) {
            details.q summary:hover { background: var(--bg-2); }
        }
        details.q summary:active .plus { transform: var(--press); }
        details.q .plus {
            width: 28px; height: 28px;
            border-radius: 50%;
            background: var(--bg-2);
            display: grid;
            place-items: center;
            flex-shrink: 0;
            margin-left: 16px;
            transition: background 220ms var(--ease-out), color 220ms var(--ease-out), transform 140ms var(--ease-out);
        }
        details.q .plus svg {
            width: 12px; height: 12px;
            transition: transform 280ms var(--ease-out);
        }
        details.q[open] .plus { background: var(--signal); color: white; }
        details.q[open] .plus svg { transform: rotate(45deg); }
        details.q .a {
            padding: 0 28px 24px;
            font-size: 15px;
            color: var(--ink-2);
            line-height: 1.65;
            max-width: 60ch;
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
            transition:
                opacity 280ms var(--ease-out),
                transform 280ms var(--ease-out),
                filter 280ms var(--ease-out);
        }
        /* Enter animation: interruptible, replays cleanly on rapid open/close */
        @starting-style {
            details.q[open] .a {
                opacity: 0;
                transform: translateY(-4px);
                filter: blur(2px);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            details.q .a { transition: none; }
        }
        details.q .a b { color: var(--ink); font-weight: 600; }
        details.q .a em {
            color: var(--signal);
            font-weight: 500;
            color: var(--ink);
            font-size: 1.06em;
        }

        /* ════════════════════════════════════════════════════
           FINAL CTA
        ════════════════════════════════════════════════════ */
        .final-cta {
            position: relative;
            padding: 96px 0;
            background: var(--surface-d);
            color: white;
            overflow: hidden;
            margin-top: 64px;
        }
        .final-cta::before {
            content: '';
            position: absolute;
            top: -20%; left: 50%;
            width: 80%; height: 100%;
            background:
                radial-gradient(ellipse at 30% 50%, rgba(255,77,46,0.25) 0%, transparent 55%),
                radial-gradient(ellipse at 70% 50%, rgba(255,122,71,0.1) 0%, transparent 55%);
            transform: translateX(-50%);
            filter: blur(60px);
        }
        .final-cta::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle at center, rgba(255,255,255,0.08) 1px, transparent 1.5px);
            background-size: 24px 24px;
            mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
            pointer-events: none;
        }
        .final-cta .shell { text-align: center; position: relative; z-index: 1; }
        .final-cta .badge {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.7);
            margin-bottom: 24px;
        }
        .final-cta .badge b { color: white; }
        .final-cta .badge .pill {
            background: var(--signal);
        }
        .final-cta h2 {
            font-size: clamp(40px, 6vw, 80px);
            color: white;
            margin-bottom: 20px;
            max-width: 16ch;
            margin-left: auto;
            margin-right: auto;
        }
        .final-cta h2 em { color: white; }
        .final-cta p {
            font-size: 18px;
            color: rgba(255,255,255,0.65);
            max-width: 38em;
            margin: 0 auto 40px;
            line-height: 1.55;
        }
        .final-cta p b { color: white; }
        .final-cta .cta-row { justify-content: center; margin-bottom: 32px; }
        .final-cta .btn-primary {
            background: var(--signal);
            box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 12px 24px -6px rgba(255,77,46,0.5);
        }
        .final-cta .btn-primary::before { background: white; }
        .final-cta .btn-primary:hover { color: var(--ink); }
        .final-cta .btn-secondary {
            background: transparent;
            border-color: rgba(255,255,255,0.18);
            color: white;
        }
        .final-cta .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
        .final-cta .trust-line {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
            margin-top: 40px;
            padding-top: 32px;
            border-top: 1px solid rgba(255,255,255,0.08);
            font-family: var(--mono);
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }
        .final-cta .trust-line span {
            display: inline-flex; align-items: center; gap: 6px;
        }
        .final-cta .trust-line svg { width: 13px; height: 13px; color: var(--signal); }

        /* CTA grid (copy + form) */
        .final-cta .cta-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 64px;
            align-items: center;
            max-width: 1080px;
            margin: 0 auto;
        }
        @media (max-width: 900px) {
            .final-cta .cta-grid { grid-template-columns: 1fr; gap: 40px; }
        }
        .final-cta .cta-copy { text-align: left; }
        .final-cta .cta-copy h2 {
            font-size: clamp(36px, 4.8vw, 60px);
            text-align: left;
            margin-bottom: 16px;
        }
        .final-cta .cta-copy p {
            margin: 0 0 24px;
            text-align: left;
        }
        .cta-bullets {
            list-style: none;
            display: grid;
            gap: 12px;
            margin-top: 24px;
        }
        .cta-bullets li {
            display: grid;
            grid-template-columns: 24px 1fr;
            gap: 12px;
            align-items: start;
            font-size: 14px;
            color: rgba(255,255,255,0.75);
            line-height: 1.5;
        }
        .cta-bullets li b { color: white; font-weight: 600; }
        .cta-bullets li .b-ico {
            width: 24px; height: 24px;
            border-radius: 50%;
            background: rgba(22, 163, 74, 0.15);
            color: var(--green);
            display: grid;
            place-items: center;
            flex-shrink: 0;
        }
        .cta-bullets li .b-ico svg { width: 13px; height: 13px; }

        /* Form */
        .cta-form {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 32px;
            backdrop-filter: blur(20px) saturate(140%);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
            box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -16px rgba(0,0,0,0.3);
            display: flex;
            flex-direction: column;
            gap: 16px;
            text-align: left;
        }
        .cta-form-title {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: white;
            line-height: 1.2;
        }
        .cta-form-sub {
            font-size: 13.5px;
            color: rgba(255,255,255,0.55);
            margin: -8px 0 8px;
            line-height: 1.5;
        }
        .field { display: grid; gap: 6px; }
        .field label {
            font-family: var(--mono);
            font-size: 10.5px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(255,255,255,0.65);
        }
        .field input, .field select {
            font-family: var(--sans);
            font-size: 15px;
            color: white;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            padding: 14px 16px;
            outline: 0;
            transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
            width: 100%;
            -webkit-appearance: none;
            appearance: none;
        }
        .field input::placeholder { color: rgba(255,255,255,0.35); }
        .field input:hover, .field select:hover {
            border-color: rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.08);
        }
        .field input:focus, .field select:focus {
            border-color: var(--signal);
            background: rgba(255,77,46,0.06);
            box-shadow: 0 0 0 3px rgba(255,77,46,0.18);
        }
        .field input:invalid:not(:placeholder-shown) {
            border-color: rgba(255,77,46,0.5);
        }
        .field select {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.6)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
            background-repeat: no-repeat;
            background-position: calc(100% - 16px) center;
            padding-right: 40px;
        }
        .field select option { background: var(--surface-d-2); color: white; }
        .cta-form-submit {
            margin-top: 8px;
            width: 100%;
            justify-content: center;
            background: var(--signal);
            box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 12px 24px -6px rgba(255,77,46,0.45);
            position: relative;
        }
        .cta-form-submit::before { background: white; }
        @media (hover: hover) and (pointer: fine) {
            .cta-form-submit:hover { color: var(--ink); }
            .cta-form-submit:hover .btn-arrow { color: var(--ink); }
        }
        .cta-form-submit .btn-spinner {
            width: 16px; height: 16px;
            display: none;
            animation: spin 0.9s linear infinite;
        }
        .cta-form-submit[data-state="loading"] .btn-arrow { display: none; }
        .cta-form-submit[data-state="loading"] .btn-spinner { display: inline-block; }
        .cta-form-submit[data-state="loading"] .btn-label::after { content: '…'; }
        .cta-form-submit[data-state="success"] {
            background: var(--green);
            box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 12px 24px -6px rgba(22,163,74,0.4);
        }
        .cta-form-submit[data-state="success"]::before { display: none; }
        .cta-form-submit[data-state="success"] .btn-arrow,
        .cta-form-submit[data-state="success"] .btn-spinner { display: none; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .cta-form-msg {
            font-size: 13px;
            color: rgba(255,255,255,0.7);
            min-height: 1.4em;
            line-height: 1.4;
        }
        .cta-form-msg.error { color: #FCA5A5; }
        .cta-form-msg.success { color: #86EFAC; }
        .cta-form-fine {
            font-size: 11.5px;
            color: rgba(255,255,255,0.4);
            line-height: 1.5;
            margin-top: -4px;
        }
        .cta-form-fine a {
            color: rgba(255,255,255,0.6);
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        @media (hover: hover) and (pointer: fine) {
            .cta-form-fine a:hover { color: var(--signal); }
        }

        /* ════════════════════════════════════════════════════
           FOOTER — v8 editorial polish
        ════════════════════════════════════════════════════ */
        footer.foot {
            background: var(--bg);
            padding: clamp(72px, 9vh, 112px) 0 40px;
            border-top: 1px solid var(--rule);
        }
        footer.foot .grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 64px;
            margin-bottom: 72px;
        }
        @media (max-width: 900px) {
            footer.foot .grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
            footer.foot .grid .brand-col { grid-column: 1 / -1; max-width: 460px; }
        }
        footer.foot .brand-col .brand .mark { width: 32px; height: 32px; }
        footer.foot .brand-col .brand .word { font-size: 17px; }
        footer.foot .brand-col p {
            font-size: 14px;
            color: var(--ink-3);
            line-height: 1.6;
            margin: 20px 0 28px;
            max-width: 28em;
        }
        footer.foot .brand-col .social {
            display: flex;
            gap: 10px;
        }
        footer.foot .brand-col .social a {
            width: 36px; height: 36px;
            border-radius: 10px;
            border: 1px solid var(--rule);
            display: grid;
            place-items: center;
            color: var(--ink-3);
            background: var(--bg-3);
            transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 140ms var(--ease-out), background 180ms var(--ease-out);
        }
        footer.foot .brand-col .social a:active { transform: var(--press); }
        @media (hover: hover) and (pointer: fine) {
            footer.foot .brand-col .social a:hover {
                color: white;
                background: var(--ink);
                border-color: var(--ink);
                transform: translateY(-2px);
            }
        }
        footer.foot .brand-col .social svg { width: 15px; height: 15px; }
        footer.foot h4 {
            font-family: var(--mono);
            font-size: var(--fs-eyebrow);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: var(--tracking-eyebrow);
            color: var(--ink-4);
            margin-bottom: 20px;
        }
        footer.foot .col ul {
            list-style: none;
            display: grid;
            gap: 12px;
        }
        footer.foot .col ul a {
            font-size: 14px;
            color: var(--ink-2);
            transition: color 180ms var(--ease-out);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        @media (hover: hover) and (pointer: fine) {
            footer.foot .col ul a:hover { color: var(--ink); }
        }
        footer.foot .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 32px;
            border-top: 1px solid var(--rule);
            flex-wrap: wrap;
            gap: 20px;
        }
        footer.foot .bottom .c {
            font-family: var(--mono);
            font-size: 11px;
            color: var(--ink-3);
            letter-spacing: 0.04em;
        }
        footer.foot .bottom .pills {
            display: inline-flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        footer.foot .bottom .pills span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--ink-3);
            padding: 6px 12px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 999px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        footer.foot .bottom .pills svg { width: 10px; height: 10px; color: var(--green); }

        /* ════════════════════════════════════════════════════
           PAGE-LOAD ANIMATIONS — v8 calmed
        ════════════════════════════════════════════════════ */
        @media (prefers-reduced-motion: no-preference) {
            .hero > .shell > * {
                opacity: 0;
                animation: rise 720ms var(--ease-out) forwards;
            }
            .hero .badge          { animation-delay: 80ms; }
            .hero h1              { animation-delay: 180ms; }
            .hero .lede           { animation-delay: 320ms; }
            .hero .cta-row        { animation-delay: 440ms; }
            .hero .risk-reversal  { animation-delay: 540ms; }
            .hero .logos          { animation-delay: 620ms; }

            .stage {
                opacity: 0;
                animation: stage-in 800ms var(--ease-out) 500ms forwards;
            }
            .chip {
                opacity: 0;
                animation: chip-in 600ms var(--ease-out) forwards;
            }
            /* Chips arrive *with* the stage they live on, not after the whole hero has settled */
            .chip.tr { animation-delay: 700ms; }
            .chip.bl { animation-delay: 780ms; }
        }
        @keyframes rise {
            from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
            to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
        }
        @keyframes stage-in {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes chip-in {
            from { opacity: 0; filter: blur(2px); transform: var(--chip-rest, none) scale(0.92); }
            to   { opacity: 1; filter: blur(0); transform: var(--chip-rest, none) scale(1); }
        }

        /* Reveal on scroll — progressive enhancement */
        .js .reveal:not(.in) {
            opacity: 0;
            transform: translateY(14px);
        }
        .reveal {
            transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-out);
        }

        /* Stagger children inside a revealed container */
        .js .reveal.stagger > * {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
        }
        .js .reveal.stagger.in > * {
            opacity: 1;
            transform: translateY(0);
        }
        .js .reveal.stagger.in > *:nth-child(1) { transition-delay: 0ms; }
        .js .reveal.stagger.in > *:nth-child(2) { transition-delay: 80ms; }
        .js .reveal.stagger.in > *:nth-child(3) { transition-delay: 160ms; }
        .js .reveal.stagger.in > *:nth-child(4) { transition-delay: 240ms; }
        .js .reveal.stagger.in > *:nth-child(5) { transition-delay: 320ms; }
        .js .reveal.stagger.in > *:nth-child(6) { transition-delay: 400ms; }

        @media (prefers-reduced-motion: reduce) {
            .js .reveal:not(.in),
            .js .reveal.stagger > * { opacity: 1; transform: none; }
            .reveal { transition: none; }
            .hero > .shell > *, .stage, .chip { opacity: 1; animation: none; }
        }

        /* ════════════════════════════════════════════════════
           V9 — Animation primitives & refactored sections
        ════════════════════════════════════════════════════ */

        /* — Hero social proof (replaces secondary CTA) — */
        .hero-social {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            padding: 8px 18px 8px 10px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 999px;
            box-shadow: 0 4px 14px -6px rgba(0,0,0,0.08);
        }
        .hero-social .avatars {
            display: flex;
            align-items: center;
        }
        .hero-social .avatars .av {
            width: 34px; height: 34px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            border: 2px solid var(--bg-3);
            margin-left: -10px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.12);
            flex-shrink: 0;
            transition: transform 220ms var(--ease-out);
        }
        .hero-social .avatars .av:first-child { margin-left: 0; }
        @media (hover: hover) and (pointer: fine) {
            .hero-social:hover .avatars .av { transform: translateY(-2px); }
            .hero-social:hover .avatars .av:nth-child(1) { transition-delay: 0ms; }
            .hero-social:hover .avatars .av:nth-child(2) { transition-delay: 30ms; }
            .hero-social:hover .avatars .av:nth-child(3) { transition-delay: 60ms; }
            .hero-social:hover .avatars .av:nth-child(4) { transition-delay: 90ms; }
            .hero-social:hover .avatars .av:nth-child(5) { transition-delay: 120ms; }
        }
        .hero-social .meta {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding-left: 2px;
        }
        .hero-social .stars {
            display: inline-flex;
            gap: 1px;
            letter-spacing: 0.05em;
        }
        .hero-social .stars svg {
            width: 14px; height: 14px;
            fill: var(--signal);
        }

        /* Hero scope : /entreprises + /ecoles — h1 size tightened (concise punchy headlines vs display monsters) */
        /* Solo hero — wider measure so the longer H1 balances to 3 lines (keeps monumental size) */
        body[data-page="solo"] .hero h1.display {
            font-size: clamp(40px, 5.5vw, 72px);
            line-height: 1.05;
            letter-spacing: -0.025em;
            max-width: 19ch;
        }

        body[data-page="entreprises"] .hero h1.display,
        body[data-page="ecoles"] .hero h1.display {
            font-size: clamp(40px, 5.5vw, 72px);
            line-height: 1.05;
            letter-spacing: -0.025em;
            max-width: 18ch;
            margin-left: auto;
            margin-right: auto;
        }
        body[data-page="entreprises"] .hero .lede,
        body[data-page="ecoles"] .hero .lede {
            max-width: 38em;
            margin-left: auto;
            margin-right: auto;
        }
        /* Hero entreprises + écoles : layout cta-row en flex pour que .risk-reversal flow below */
        body[data-page="entreprises"] .hero .cta-row,
        body[data-page="ecoles"] .hero .cta-row {
            display: flex;
            justify-content: center;
        }

        /* Hero — Quote-style social proof card (entreprises hero) */
        .hero-social-quote {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 14px 18px;
            margin: 0 0 0 4px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 16px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
            max-width: 360px;
            text-align: left;
        }
        .hero-social-quote .hsq-stars {
            display: inline-flex;
            gap: 2px;
        }
        .hero-social-quote .hsq-stars svg {
            width: 13px;
            height: 13px;
            fill: var(--signal);
        }
        .hero-social-quote .hsq-quote {
            margin: 0;
            font: 500 14px/1.45 var(--sans);
            color: var(--ink);
            letter-spacing: -0.005em;
        }
        .hero-social-quote .hsq-author {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 4px;
            padding-top: 10px;
            border-top: 1px solid var(--rule);
        }
        .hero-social-quote .hsq-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: linear-gradient(135deg, #FF8264, #FF4D2E);
            color: var(--bg-3);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font: 700 11px/1 var(--mono);
            letter-spacing: 0.02em;
            flex-shrink: 0;
        }
        .hero-social-quote .hsq-meta {
            display: flex;
            flex-direction: column;
            gap: 1px;
            line-height: 1.2;
        }
        .hero-social-quote .hsq-name {
            font: 600 12.5px/1.2 var(--sans);
            color: var(--ink);
        }
        .hero-social-quote .hsq-role {
            font: 500 10.5px/1.2 var(--mono);
            color: var(--ink-3);
            letter-spacing: 0.02em;
        }
        @media (max-width: 720px) {
            .hero-social-quote {
                max-width: 100%;
                margin: 8px 0 0;
            }
        }
        .hero-social .count {
            font: 600 12px/1 var(--sans);
            color: var(--ink-2);
            white-space: nowrap;
            letter-spacing: -0.005em;
        }
        .hero-social .count b {
            color: var(--ink);
            font-weight: 700;
        }
        @media (max-width: 640px) {
            .hero-social { padding: 7px 14px 7px 9px; gap: 11px; }
            .hero-social .avatars .av { width: 28px; height: 28px; }
            .hero-social .stars svg { width: 12px; height: 12px; }
            .hero-social .count { font-size: 11px; }
        }


        /* — Scroll progress bar (fixed top) — */
        .scroll-progress {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 2px;
            background: transparent;
            z-index: 9000;
            pointer-events: none;
        }
        .scroll-progress > i {
            display: block;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--signal) 0%, var(--signal-2) 100%);
            transform-origin: left center;
            transition: width 80ms linear;
        }

        /* — Text reveal by lines (used on hero H1) — */
        .reveal-lines .line-wrap { display: block; overflow: hidden; }
        .reveal-lines .line {
            display: inline-block;
            transform: translateY(110%);
            opacity: 0;
            transition: transform 800ms var(--ease-out), opacity 800ms var(--ease-out);
        }
        .reveal-lines.in .line {
            transform: translateY(0);
            opacity: 1;
        }
        .reveal-lines.in .line:nth-child(1) { transition-delay: 0ms; }
        .reveal-lines.in .line:nth-child(2) { transition-delay: 90ms; }
        .reveal-lines.in .line:nth-child(3) { transition-delay: 180ms; }
        .reveal-lines.in .line:nth-child(4) { transition-delay: 270ms; }

        /* — Parallax host — */
        [data-parallax] { will-change: transform; }

        /* ═══════════════════════════════════════════
           v14 — CASTING : Persona Wall (mosaïque qui défile)
        ═══════════════════════════════════════════ */
        #casting.casting-wall-v14 {
            padding: var(--section-pad) 0;
            background: var(--bg-2);
            overflow: hidden;
        }
        .casting-wall-v14 .shell-wide {
            max-width: var(--max);
            margin: 0 auto;
            padding: 0 24px;
        }
        .casting-wall-v14 .section-head {
            text-align: center;
            margin-bottom: 48px;
        }

        .persona-wall {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 14px;
            width: 100%;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
                    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
        }
        .persona-row {
            display: flex;
            flex-wrap: nowrap;
            gap: 14px;
            padding-right: 14px;
            width: max-content;
            will-change: transform;
        }
        .persona-row.r1 { animation: persona-scroll-left 60s linear infinite; }
        .persona-row.r2 { animation: persona-scroll-right 72s linear infinite; }
        .persona-row.r3 { animation: persona-scroll-left 56s linear infinite; }

        /* Row entry stagger — fades each row in just before the infinite marquee carries them */
        .persona-wall .persona-row {
            opacity: 0;
            transition: opacity 600ms var(--ease-out);
        }
        .persona-wall.is-in .persona-row { opacity: 1; }
        .persona-wall.is-in .persona-row.r1 { transition-delay: 0ms; }
        .persona-wall.is-in .persona-row.r2 { transition-delay: 80ms; }
        .persona-wall.is-in .persona-row.r3 { transition-delay: 160ms; }
        @media (prefers-reduced-motion: reduce) {
            .persona-wall .persona-row { opacity: 1; transition: none; }
        }
        @keyframes persona-scroll-left {
            from { transform: translate3d(0, 0, 0); }
            to   { transform: translate3d(-50%, 0, 0); }
        }
        @keyframes persona-scroll-right {
            from { transform: translate3d(-50%, 0, 0); }
            to   { transform: translate3d(0, 0, 0); }
        }
        @media (hover: hover) and (pointer: fine) {
            .persona-wall:hover .persona-row {
                animation-play-state: paused;
            }
        }

        /* — Persona card (compact chip horizontal) — */
        .persona-card {
            position: relative;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 9px 14px 9px 9px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 999px;
            color: var(--ink);
            text-decoration: none;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 2px 6px -2px rgba(0,0,0,0.06);
            transition:
                transform 220ms var(--ease-out),
                border-color 220ms var(--ease-out),
                box-shadow 220ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .persona-card:hover {
                transform: translateY(-2px);
                border-color: var(--rule-2);
                box-shadow: 0 10px 22px -10px rgba(0,0,0,0.18);
            }
        }
        .persona-card:active { transform: scale(0.98); }
        .persona-card:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--signal);
        }

        .persona-card .pc-avatar {
            width: 44px; height: 44px;
            border-radius: 50%;
            background-size: cover;
            background-position: center 18%;
            flex-shrink: 0;
            position: relative;
        }
        .persona-card .pc-avatar::after {
            content: '';
            position: absolute;
            bottom: -1px; right: -1px;
            width: 12px; height: 12px;
            border-radius: 50%;
            background: var(--signal);
            border: 2px solid var(--bg-3);
            box-shadow: 0 0 6px rgba(255,77,46,0.5);
        }
        .persona-card .pc-content {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        .persona-card .pc-name {
            font: 700 14px/1.1 var(--sans);
            letter-spacing: -0.012em;
            color: var(--ink);
        }
        .persona-card .pc-meta {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font: 500 11px/1 var(--mono);
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .persona-card .pc-meta .pc-scenario {
            color: var(--signal);
            font-weight: 700;
        }
        .persona-card .pc-meta .pc-sep {
            width: 3px; height: 3px;
            border-radius: 50%;
            background: var(--rule-2);
            display: inline-block;
        }
        .persona-card .pc-level {
            font: 700 10px/1 var(--mono);
            color: var(--ink-2);
            padding: 5px 8px;
            background: var(--bg-2);
            border: 1px solid var(--rule);
            border-radius: 6px;
            letter-spacing: 0.04em;
            margin-left: 4px;
        }

        /* — Ticker above the wall — */
        .casting-wall-v14 .wall-ticker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 9px 18px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 999px;
            font: 500 11px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ink-3);
            margin: 0 auto 22px;
        }
        .casting-wall-v14 .wall-ticker .d {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 8px var(--signal);
            animation: pulse-soft var(--pulse-rhythm) ease-in-out infinite;
        }
        .casting-wall-v14 .wall-ticker b { color: var(--ink); font-weight: 700; }
        .casting-wall-v14 .wall-ticker em { color: var(--signal); font-style: normal; font-weight: 700; }

        /* — Final CTA below the wall — */
        .casting-wall-v14 .wall-cta-wrap {
            display: flex;
            justify-content: center;
            margin-top: 48px;
        }
        .casting-wall-v14 .wall-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 26px 16px 18px;
            background: var(--ink);
            color: #fff;
            border-radius: 999px;
            font: 700 15px/1 var(--sans);
            letter-spacing: -0.005em;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 18px -6px rgba(10,10,10,0.3);
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition: transform 160ms var(--ease-out);
        }
        .casting-wall-v14 .wall-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--signal);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 260ms var(--ease-out);
            z-index: -1;
        }
        @media (hover: hover) and (pointer: fine) {
            .casting-wall-v14 .wall-cta:hover::before { transform: scaleX(1); }
        }
        .casting-wall-v14 .wall-cta:active { transform: scale(0.97); }
        .casting-wall-v14 .wall-cta .ico {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            display: grid; place-items: center;
        }
        .casting-wall-v14 .wall-cta .ico svg { width: 13px; height: 13px; }
        .casting-wall-v14 .wall-cta .meta {
            padding-left: 14px;
            border-left: 1px solid rgba(255,255,255,0.22);
            font: 500 11px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.78);
        }

        @media (max-width: 720px) {
            .persona-card { padding: 8px 12px 8px 8px; gap: 10px; }
            .persona-card .pc-avatar { width: 38px; height: 38px; }
            .persona-card .pc-name { font-size: 13px; }
            .persona-card .pc-meta { font-size: 10px; }
            .casting-wall-v14 .wall-cta { padding: 13px 20px 13px 14px; font-size: 13px; }
            .casting-wall-v14 .wall-cta .meta { font-size: 9px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .persona-row {
                animation: none !important;
                flex-wrap: wrap;
                justify-content: center;
                padding-right: 0;
                width: auto;
            }
            .persona-wall {
                -webkit-mask-image: none;
                mask-image: none;
            }
            .casting-wall-v14 .wall-ticker .d { animation: none !important; }
            .persona-card .pc-avatar::after { animation: none !important; }
        }

        /* ═══════════════════════════════════════════
           v10 — CASTING DIRECTOR : pinned scroll-driven storytelling (DEPRECATED — kept for ref, no longer rendered)
        ═══════════════════════════════════════════ */
        /* Pin wrapper takes 5 * 100vh height — GSAP pins the inner */
        .casting-pin-wrap {
            position: relative;
        }
        .casting-pin-inner {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 60px 0;
        }
        @media (max-width: 980px) {
            /* On mobile, no pin — natural flow */
            .casting-pin-wrap { min-height: 0 !important; }
            .casting-pin-inner { min-height: 0; padding: 0; }
        }

        .casting-room {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
            gap: 14px;
            align-items: stretch;
        }
        @media (max-width: 980px) {
            .casting-room { grid-template-columns: 1fr; }
        }

        /* Counter "01 / 05" in top-left corner of stage */
        .cast-counter {
            position: absolute;
            top: 28px; left: 36px;
            z-index: 3;
            display: flex;
            align-items: baseline;
            gap: 4px;
            font: 800 12px/1 var(--mono);
            color: rgba(255,255,255,0.55);
            letter-spacing: 0.1em;
            pointer-events: none;
            text-shadow: 0 2px 14px rgba(0,0,0,0.4);
        }
        .cast-counter .cur {
            font-size: 40px;
            color: #fff;
            letter-spacing: -0.04em;
            font-weight: 800;
            transition: transform 220ms var(--ease-out);
            display: inline-block;
            min-width: 42px;
        }
        .cast-counter .sep {
            font-size: 16px;
            color: rgba(255,255,255,0.45);
            margin: 0 3px;
        }
        .cast-counter .total {
            font-size: 16px;
            color: rgba(255,255,255,0.6);
        }
        @media (max-width: 980px) {
            .cast-counter { top: 20px; left: 24px; }
            .cast-counter .cur { font-size: 30px; }
        }

        /* Bottom slot — Scroll hint on 1-4, "Create your own" CTA on last persona */
        .cast-action-slot {
            position: absolute;
            bottom: 24px;
            left: 0; right: 0;
            display: grid;
            grid-template: "stack" auto / 1fr;
            place-items: center;
            z-index: 3;
            pointer-events: none;
        }
        .cast-action-slot > * {
            grid-area: stack;
            transition:
                opacity 320ms var(--ease-out),
                transform 420ms var(--ease-drawer);
        }
        .cast-action-slot .cast-scroll-hint {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font: 600 10px/1 var(--mono);
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
            letter-spacing: 0.18em;
            white-space: nowrap;
            opacity: 1;
            transform: translateY(0);
        }
        .cast-action-slot .cast-scroll-hint .arrow {
            display: inline-flex;
            animation: hint-bounce 1.6s ease-in-out infinite;
        }
        .cast-action-slot .cast-scroll-hint .arrow svg {
            width: 14px; height: 14px;
        }
        @keyframes hint-bounce {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(4px); }
        }
        .cast-action-slot .cast-cta-create {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 13px 22px 13px 16px;
            background: var(--ink);
            color: #fff;
            border-radius: 999px;
            font: 600 13px/1 var(--sans);
            letter-spacing: -0.005em;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 18px -6px rgba(10,10,10,0.3);
            position: relative;
            overflow: hidden;
            isolation: isolate;
            opacity: 0;
            white-space: nowrap;
            pointer-events: none;
            transform: translateY(12px) scale(0.96);
        }
        .cast-action-slot .cast-cta-create::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--signal);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 260ms var(--ease-out);
            z-index: -1;
        }
        @media (hover: hover) and (pointer: fine) {
            .cast-action-slot .cast-cta-create:hover::before { transform: scaleX(1); }
        }
        .cast-action-slot .cast-cta-create:active { transform: translateY(0) scale(0.97); }
        .cast-action-slot .cast-cta-create .ico {
            width: 22px; height: 22px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            display: grid; place-items: center;
        }
        .cast-action-slot .cast-cta-create .ico svg {
            width: 12px; height: 12px;
        }
        .cast-action-slot .cast-cta-create .meta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font: 500 11px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.75);
            padding-left: 10px;
            border-left: 1px solid rgba(255,255,255,0.22);
        }

        /* When last persona reached — swap slot content */
        .casting-room.is-last .cast-action-slot .cast-scroll-hint {
            opacity: 0;
            transform: translateY(-10px);
        }
        .casting-room.is-last .cast-action-slot .cast-cta-create {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
            transition-delay: 100ms;
        }

        @media (max-width: 980px) {
            .cast-action-slot { display: none; }
        }

        /* — Cast ticker (mini live indicator above the room) — */
        .cast-ticker {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
            padding: 10px 16px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 999px;
            font: 500 11px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ink-3);
            width: fit-content;
        }
        .cast-ticker .d {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 8px var(--signal);
            animation: pulse-soft var(--pulse-rhythm) ease-in-out infinite;
        }
        .cast-ticker b { color: var(--ink); font-weight: 700; }

        /* — FEATURED STAGE — */
        .cast-stage {
            position: relative;
            border-radius: 28px;
            overflow: hidden;
            background: #0a0a0b;
            color: #fff;
            isolation: isolate;
            height: clamp(480px, calc(100vh - 220px), 640px);
        }
        @media (max-width: 980px) { .cast-stage { height: auto; min-height: 460px; } }
        .cast-stage-photo {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center 22%;
            transition: background-image 0ms;
            z-index: 0;
        }
        .cast-stage-photo::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(60% 40% at 50% 0%, rgba(255,77,46,0.16), transparent 70%),
                linear-gradient(180deg, rgba(10,10,11,0.20) 0%, rgba(10,10,11,0.80) 60%, rgba(10,10,11,0.98) 100%);
        }
        /* Mask reveal layer for cross-fade between prospects */
        .cast-stage-mask {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center 22%;
            z-index: 1;
            clip-path: inset(0 0 100% 0);
            transition: clip-path 280ms var(--ease-out);
        }
        .cast-stage-mask::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(60% 40% at 50% 0%, rgba(255,77,46,0.16), transparent 70%),
                linear-gradient(180deg, rgba(10,10,11,0.20) 0%, rgba(10,10,11,0.80) 60%, rgba(10,10,11,0.98) 100%);
        }
        .cast-stage.is-swapping .cast-stage-mask {
            clip-path: inset(0 0 0 0);
        }

        .cast-stage-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 78px 36px 84px 36px;
        }
        @media (max-width: 980px) { .cast-stage-content { padding: 64px 24px 40px 24px; } }

        .cast-stage-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }
        .cast-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font: 600 10px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: rgba(255,255,255,0.85);
            background: rgba(255,77,46,0.16);
            border: 1px solid rgba(255,77,46,0.45);
            padding: 9px 13px;
            border-radius: 999px;
            backdrop-filter: blur(6px);
        }
        .cast-pill .d {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 10px var(--signal);
            animation: pulse-soft var(--pulse-rhythm) ease-in-out infinite;
        }
        .cast-pill em { font-style: normal; font-weight: 700; color: #fff; }

        .cast-difficulty {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font: 500 11px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(255,255,255,0.7);
            padding: 8px 12px;
            background: rgba(0,0,0,0.4);
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 999px;
            backdrop-filter: blur(6px);
        }
        .cast-difficulty b { color: #fff; font-weight: 700; }
        .cast-difficulty .pips { display: inline-flex; gap: 3px; }
        .cast-difficulty .pips i {
            width: 6px; height: 6px; border-radius: 50%;
            background: rgba(255,255,255,0.18);
        }
        .cast-difficulty .pips i.on { background: var(--signal); }

        .cast-stage-body {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .cast-id {
            display: flex; flex-direction: column; gap: 6px;
        }
        .cast-name {
            font: 800 38px/1.05 var(--sans);
            letter-spacing: -0.035em;
            color: #fff;
        }
        @media (max-width: 980px) { .cast-name { font-size: 30px; } }
        .cast-role {
            font: 500 12px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: rgba(255,255,255,0.55);
        }
        .cast-quote {
            font: 500 22px/1.42 var(--sans);
            letter-spacing: -0.008em;
            color: rgba(255,255,255,0.96);
            max-width: 520px;
            border-left: 2px solid var(--signal);
            padding-left: 18px;
        }
        @media (max-width: 980px) { .cast-quote { font-size: 18px; } }
        .cast-quote em {
            color: var(--signal);
            font-weight: 500;
        }

        /* Cross-fade animation host for text — blur bridges the gap (Emil) */
        .cast-fade {
            transition:
                opacity 220ms var(--ease-out),
                transform 220ms var(--ease-out),
                filter 220ms var(--ease-out);
            will-change: opacity, transform, filter;
        }
        .cast-stage.is-swapping .cast-fade {
            opacity: 0;
            transform: translateY(6px);
            filter: blur(3px);
        }

        .cast-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        .cast-audio {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 11px 18px 11px 12px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 999px;
            color: #fff;
            cursor: pointer;
            font: 500 12px/1 var(--sans);
            transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 140ms var(--ease-out);
        }
        .cast-audio:hover {
            background: rgba(255,255,255,0.14);
            border-color: rgba(255,255,255,0.30);
        }
        .cast-audio:active { transform: scale(0.97); }
        .cast-audio .play {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: var(--signal);
            display: grid; place-items: center;
            flex-shrink: 0;
            box-shadow: 0 0 0 0 rgba(255,77,46,0.5);
            transition: box-shadow 200ms var(--ease-out);
        }
        .cast-audio:hover .play { box-shadow: 0 0 0 6px rgba(255,77,46,0.18); }
        .cast-audio .play svg { width: 11px; height: 11px; color: #fff; margin-left: 1px; }
        .cast-audio .pwave {
            display: inline-flex; align-items: center; gap: 2px;
            height: 20px;
        }
        .cast-audio .pwave i {
            width: 2px;
            background: rgba(255,255,255,0.55);
            border-radius: 1px;
            transition: transform 200ms var(--ease-out);
        }
        .cast-audio .dur {
            color: rgba(255,255,255,0.65);
            font: 500 11px/1 var(--mono);
            letter-spacing: 0.04em;
        }
        .cast-stage.is-playing .cast-audio .pwave i { animation: cast-wave 800ms ease-in-out infinite alternate; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(2) { animation-delay: 80ms; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(3) { animation-delay: 160ms; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(4) { animation-delay: 240ms; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(5) { animation-delay: 320ms; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(6) { animation-delay: 400ms; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(7) { animation-delay: 480ms; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(8) { animation-delay: 560ms; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(9) { animation-delay: 640ms; }
        .cast-stage.is-playing .cast-audio .pwave i:nth-child(10) { animation-delay: 720ms; }
        @keyframes cast-wave {
            from { transform: scaleY(0.4); }
            to   { transform: scaleY(1.4); }
        }
        .cast-voice-tag {
            font: 500 11px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.5);
        }
        .cast-voice-tag b { color: #fff; font-weight: 700; }

        /* — CAST LIST (right) — */
        .cast-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 14px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 22px;
            height: clamp(480px, calc(100vh - 220px), 640px);
        }
        @media (max-width: 980px) {
            .cast-list { height: auto; }
        }
        .cast-list-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 10px 12px;
            border-bottom: 1px solid var(--rule);
            margin-bottom: 6px;
        }
        .cast-list-head .lbl {
            font: 700 10px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--ink-3);
        }
        .cast-list-head .count {
            font: 700 11px/1 var(--mono);
            color: var(--ink);
        }

        .cast-row {
            display: grid;
            grid-template-columns: 46px 1fr auto;
            gap: 12px;
            align-items: center;
            padding: 12px 14px;
            border-radius: 14px;
            cursor: pointer;
            background: transparent;
            border: 1px solid transparent;
            text-align: left;
            transition:
                background 220ms var(--ease-out),
                border-color 220ms var(--ease-out),
                padding 240ms var(--ease-out),
                transform 140ms var(--ease-out);
            position: relative;
            overflow: hidden;
        }
        .cast-row::before {
            content: '';
            position: absolute;
            left: 0; top: 14px; bottom: 14px;
            width: 3px;
            background: var(--signal);
            border-radius: 0 3px 3px 0;
            transform: scaleY(0);
            transform-origin: center;
            transition: transform 280ms var(--ease-out);
        }
        /* Hover only on devices that truly hover (avoids sticky touch hover) */
        @media (hover: hover) and (pointer: fine) {
            .cast-row:hover {
                background: var(--bg-2);
            }
            .cast-row:hover .ct-ava { transform: scale(1.06); }
        }
        /* Press feedback (Emil : buttons must feel responsive) */
        .cast-row:active {
            transform: scale(0.985);
        }
        /* Keyboard focus visible — outline ring orange */
        .cast-row:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px var(--bg-3), 0 0 0 4px var(--signal);
        }
        .cast-row.is-active {
            background: var(--ink);
            color: #fff;
            padding-left: 18px;
        }
        .cast-row.is-active::before {
            transform: scaleY(1);
        }
        .cast-row .ct-ava {
            width: 46px; height: 46px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
            position: relative;
            transition: transform 280ms var(--ease-out);
        }
        .cast-row.is-active .ct-ava::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 2px solid var(--signal);
            opacity: 0.7;
        }
        .cast-row .ct-id {
            display: flex; flex-direction: column; gap: 3px;
            min-width: 0;
        }
        .cast-row .ct-name {
            font: 700 14px/1.1 var(--sans);
            letter-spacing: -0.01em;
            color: var(--ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cast-row.is-active .ct-name { color: #fff; }
        .cast-row .ct-sub {
            display: flex; align-items: center; gap: 6px;
            font: 500 10px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ink-3);
        }
        .cast-row.is-active .ct-sub { color: rgba(255,255,255,0.6); }
        .cast-row .ct-sub .scen {
            color: var(--ink-2);
        }
        .cast-row.is-active .ct-sub .scen { color: rgba(255,255,255,0.85); }
        .cast-row .ct-sub .dot {
            width: 3px; height: 3px; border-radius: 50%;
            background: var(--rule-2);
        }
        .cast-row .ct-pips {
            display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
        }
        .cast-row .ct-pips .pips {
            display: inline-flex; gap: 2px;
        }
        .cast-row .ct-pips .pips i {
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--rule-2);
        }
        .cast-row .ct-pips .pips i.on { background: var(--signal); }
        .cast-row.is-active .ct-pips .pips i { background: rgba(255,255,255,0.18); }
        .cast-row.is-active .ct-pips .pips i.on { background: var(--signal); }
        .cast-row .ct-pips .lvl {
            font: 700 9px/1 var(--mono);
            color: var(--ink-3);
            letter-spacing: 0.08em;
        }
        .cast-row.is-active .ct-pips .lvl { color: rgba(255,255,255,0.55); }

        /* Stagger reveal of rows */
        .cast-list.reveal-rows .cast-row {
            opacity: 0;
            transform: translateX(20px);
            transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
        }
        .cast-list.reveal-rows.is-in .cast-row { opacity: 1; transform: translateX(0); }
        .cast-list.reveal-rows.is-in .cast-row:nth-child(2) { transition-delay: 80ms; }
        .cast-list.reveal-rows.is-in .cast-row:nth-child(3) { transition-delay: 160ms; }
        .cast-list.reveal-rows.is-in .cast-row:nth-child(4) { transition-delay: 240ms; }
        .cast-list.reveal-rows.is-in .cast-row:nth-child(5) { transition-delay: 320ms; }
        .cast-list.reveal-rows.is-in .cast-row:nth-child(6) { transition-delay: 400ms; }

        @media (prefers-reduced-motion: reduce) {
            .cast-stage-mask,
            .cast-stage.is-swapping .cast-fade,
            .cast-list.reveal-rows .cast-row { transition: none !important; opacity: 1 !important; transform: none !important; }
            .cast-pill .d, .cast-row .ct-ava::after, .cast-ticker .d { animation: none !important; }
        }

        /* ─── Refonte PROTOCOLE — pinned stage ─── */
        #comment.protocole-v9 { padding: var(--section-pad) 0; }
        .proto-shell { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
        .proto-stage {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
            gap: 56px;
            align-items: start;
        }
        @media (max-width: 980px) {
            .proto-stage { grid-template-columns: 1fr; gap: 36px; }
        }

        /* Sticky mockup on the left */
        .proto-mock-col { position: relative; min-height: 540px; }
        .proto-mock-sticky {
            position: sticky;
            top: calc(50% - 270px);
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            border-radius: 20px;
            overflow: hidden;
            background: var(--surface-d);
            box-shadow: 0 30px 60px -30px rgba(0,0,0,0.4), 0 0 0 1px var(--surface-d-3);
        }
        .proto-mock-stage {
            position: relative;
            width: 100%; height: 100%;
            background: #0C1219;
        }
        .proto-mock-chrome {
            display: flex; align-items: center; gap: 8px;
            padding: 11px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            background: rgba(0,0,0,0.3);
        }
        .proto-mock-chrome .dots { display: flex; gap: 5px; }
        .proto-mock-chrome .dots i {
            width: 9px; height: 9px; border-radius: 50%;
            background: rgba(255,255,255,0.18);
        }
        .proto-mock-chrome .dots i:nth-child(1) { background: #FF5F57; }
        .proto-mock-chrome .dots i:nth-child(2) { background: #FEBC2E; }
        .proto-mock-chrome .dots i:nth-child(3) { background: #28C840; }
        .proto-mock-chrome .url {
            font: 500 10px/1 var(--mono);
            color: rgba(255,255,255,0.4);
            margin-left: 8px;
        }
        .proto-mock-body {
            position: relative;
            height: calc(100% - 36px);
            overflow: hidden;
        }
        .proto-frame {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: scale(0.98);
            transition: opacity 460ms var(--ease-out), transform 600ms var(--ease-out);
            pointer-events: none;
            padding: 22px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .proto-frame.is-active {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }

        /* Frame 1 — Persona Lab table */
        .pl-head {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 4px;
        }
        .pl-head .pl-title { font: 700 14px/1 var(--sans); color: #fff; letter-spacing: -0.01em; }
        .pl-head .pl-add {
            display: inline-flex; align-items: center; gap: 5px;
            font: 600 10px/1 var(--sans);
            color: var(--signal);
            padding: 6px 9px;
            background: rgba(255,77,46,0.12);
            border: 1px solid rgba(255,77,46,0.28);
            border-radius: 7px;
        }
        .pl-table {
            width: 100%;
            font: 400 11px/1 var(--sans);
            color: rgba(255,255,255,0.78);
            border-collapse: collapse;
        }
        .pl-table th {
            text-align: left;
            font: 600 9px/1 var(--mono);
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 8px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .pl-table td {
            padding: 11px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            vertical-align: middle;
        }
        .pl-table tr:last-child td { border-bottom: none; }
        .pl-cell-person { display: flex; align-items: center; gap: 8px; }
        .pl-cell-person .av {
            width: 24px; height: 24px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
        }
        .pl-cell-person b { font-weight: 600; color: #fff; }
        .pl-badge {
            display: inline-block;
            padding: 3px 7px;
            border-radius: 5px;
            font: 700 9px/1 var(--mono);
        }
        .pl-bar {
            display: inline-block;
            width: 50px; height: 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 2px;
            overflow: hidden;
            vertical-align: middle;
            margin-left: 6px;
        }
        .pl-bar > i {
            display: block;
            height: 100%;
            background: var(--signal);
            border-radius: 2px;
        }

        /* Frame 2 — Live session waveform */
        .ls-top {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 16px;
        }
        .ls-call {
            display: flex; align-items: center; gap: 10px;
        }
        .ls-call .av {
            width: 36px; height: 36px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .ls-call .av::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 1.5px solid var(--signal);
            opacity: 0.4;
            animation: pulse-soft var(--pulse-rhythm) ease-in-out infinite;
        }
        .ls-call .meta { display: flex; flex-direction: column; gap: 2px; }
        .ls-call .meta .n { font: 700 12px/1 var(--sans); color: #fff; }
        .ls-call .meta .m { font: 500 9px/1 var(--mono); color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; }
        .ls-timer { font: 600 13px/1 var(--mono); color: var(--signal); }
        .ls-wave {
            display: flex; align-items: center; justify-content: center;
            gap: 3px;
            height: 90px;
            margin: 10px 0;
        }
        .ls-wave i {
            display: block;
            width: 4px;
            background: linear-gradient(180deg, var(--signal) 0%, var(--signal-2) 100%);
            border-radius: 2px;
            opacity: 0.65;
        }
        .proto-frame.is-active .ls-wave i { animation: ls-bar 1.2s ease-in-out infinite alternate; }
        .proto-frame.is-active .ls-wave i:nth-child(2n) { animation-delay: 100ms; }
        .proto-frame.is-active .ls-wave i:nth-child(3n) { animation-delay: 200ms; }
        .proto-frame.is-active .ls-wave i:nth-child(4n) { animation-delay: 300ms; }
        .proto-frame.is-active .ls-wave i:nth-child(5n) { animation-delay: 400ms; }
        @keyframes ls-bar {
            from { transform: scaleY(0.45); opacity: 0.5; }
            to   { transform: scaleY(1); opacity: 0.95; }
        }
        .ls-bubble {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 11px;
            padding: 10px 12px;
            font: 400 12px/1.4 var(--sans);
            color: rgba(255,255,255,0.88);
            max-width: 86%;
        }
        .ls-bubble.them { align-self: flex-start; border-bottom-left-radius: 3px; }
        .ls-bubble.you {
            align-self: flex-end;
            background: var(--signal);
            border-color: var(--signal);
            color: #fff;
            border-bottom-right-radius: 3px;
        }
        .ls-bubble em { color: var(--signal); font-weight: 600; }

        /* Frame 3 — Feedback card mini */
        .fb-mini { display: flex; flex-direction: column; gap: 14px; }
        .fb-mini-head { display: flex; align-items: center; justify-content: space-between; }
        .fb-mini-head .n { font: 700 13px/1 var(--sans); color: #fff; }
        .fb-mini-head .m { font: 500 10px/1 var(--mono); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
        .fb-mini-head .xp {
            font: 700 11px/1 var(--mono);
            color: var(--signal);
            background: rgba(255,77,46,0.12);
            border: 1px solid rgba(255,77,46,0.3);
            padding: 5px 8px;
            border-radius: 6px;
        }
        .fb-mini-row { display: flex; align-items: center; gap: 18px; padding: 4px 0; }
        .fb-mini-ring {
            position: relative;
            width: 86px; height: 86px;
            flex-shrink: 0;
        }
        .fb-mini-ring svg { transform: rotate(-90deg); }
        .fb-mini-ring svg circle.bg { stroke: rgba(255,255,255,0.08); }
        .fb-mini-ring svg circle.fg {
            stroke: var(--signal);
            stroke-dasharray: 220;
            stroke-dashoffset: 48;
        }
        .fb-mini-ring .v {
            position: absolute; inset: 0;
            display: grid; place-items: center;
            font: 800 28px/1 var(--sans);
            color: #fff;
            letter-spacing: -0.04em;
        }
        .fb-mini-sklist { flex: 1; display: flex; flex-direction: column; gap: 9px; }
        .fb-mini-sk {
            display: grid;
            grid-template-columns: 80px 1fr 28px;
            align-items: center;
            gap: 10px;
            font: 500 11px/1 var(--sans);
            color: rgba(255,255,255,0.75);
        }
        .fb-mini-sk .v { font: 700 11px/1 var(--mono); color: #fff; text-align: right; }
        .fb-mini-sk .bar {
            height: 4px;
            background: rgba(255,255,255,0.06);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }
        .fb-mini-sk .bar::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 100%;
            transform: scaleX(calc(var(--w, 0%) / 100%));
            transform-origin: left center;
            background: linear-gradient(90deg, var(--signal), var(--signal-2));
            border-radius: 2px;
        }
        .fb-mini-tip {
            margin-top: 8px;
            padding: 12px;
            background: rgba(255,77,46,0.08);
            border: 1px solid rgba(255,77,46,0.18);
            border-radius: 10px;
            font: 400 12px/1.45 var(--sans);
            color: rgba(255,255,255,0.85);
        }
        .fb-mini-tip b { display: block; font: 700 9px/1 var(--mono); color: var(--signal); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; font-style: normal; }

        /* Steps list on the right */
        .proto-steps {
            display: flex;
            flex-direction: column;
            gap: 28px;
            position: relative;
        }
        .proto-steps::before {
            content: '';
            position: absolute;
            left: 23px; top: 18px; bottom: 18px;
            width: 2px;
            background: var(--rule);
            border-radius: 1px;
        }
        .proto-steps::after {
            content: '';
            position: absolute;
            left: 23px; top: 18px;
            width: 2px;
            height: var(--progress, 0%);
            background: var(--signal);
            border-radius: 1px;
            transition: height 320ms var(--ease-out);
            z-index: 1;
        }

        .proto-step {
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 18px;
            padding: 22px 24px 22px 0;
            cursor: pointer;
            opacity: 0.42;
            transition: opacity 320ms var(--ease-out);
            position: relative;
            z-index: 2;
        }
        .proto-step.is-active { opacity: 1; }
        .proto-step .ps-num {
            width: 48px; height: 48px;
            border-radius: 50%;
            background: var(--bg);
            border: 2px solid var(--rule);
            display: grid; place-items: center;
            font: 800 16px/1 var(--mono);
            color: var(--ink-3);
            transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out), color 320ms var(--ease-out), transform 320ms var(--ease-out);
        }
        .proto-step.is-active .ps-num {
            background: var(--ink);
            border-color: var(--ink);
            color: #fff;
            transform: scale(1.06);
        }
        .proto-step .ps-content { padding-top: 4px; }
        .proto-step .ps-eyebrow {
            font: 700 10px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--ink-3);
            margin-bottom: 8px;
        }
        .proto-step.is-active .ps-eyebrow { color: var(--signal); }
        .proto-step .ps-title {
            font: 800 26px/1.1 var(--sans);
            letter-spacing: -0.025em;
            color: var(--ink);
            margin-bottom: 10px;
        }
        .proto-step .ps-title em {
            font: 500 1em/1.1 var(--sans);
            color: var(--ink);
        }
        .proto-step.is-active .ps-title em { color: var(--signal); }
        .proto-step .ps-desc {
            font: 400 15px/1.55 var(--sans);
            color: var(--ink-2);
            margin-bottom: 14px;
            max-width: 480px;
        }
        .proto-step .ps-checks {
            display: flex; flex-direction: column; gap: 8px;
        }
        .proto-step .ps-checks li {
            list-style: none;
            display: flex; align-items: center; gap: 10px;
            font: 500 13px/1.4 var(--sans);
            color: var(--ink-2);
        }
        .proto-step .ps-checks li svg {
            width: 14px; height: 14px;
            color: var(--green);
            flex-shrink: 0;
        }

        /* ═══════════════════════════════════════════
           v13 — TRIPLE STAGE STORYBOARD (#comment)
        ═══════════════════════════════════════════ */
        #comment.protocole-v13 {
            padding: var(--section-pad) 0;
            background: var(--bg);
        }
        .proto-shell-v13 {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .proto-storyboard {
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
        }

        /* — Each stage takes ~80vh height, asymmetric 2-col layout — */
        .proto-stage-v13 {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.05fr);
            gap: clamp(40px, 6vw, 88px);
            align-items: center;
            padding: clamp(60px, 9vh, 120px) 0;
            min-height: 70vh;
        }
        .proto-stage-v13.is-reverse {
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
        }
        .proto-stage-v13.is-reverse .proto-text-col { order: 2; }
        .proto-stage-v13.is-reverse .proto-mock-v13 { order: 1; }
        @media (max-width: 980px) {
            .proto-stage-v13,
            .proto-stage-v13.is-reverse {
                grid-template-columns: 1fr;
                gap: 32px;
                min-height: 0;
                padding: 64px 0;
            }
            .proto-stage-v13.is-reverse .proto-text-col { order: 1; }
            .proto-stage-v13.is-reverse .proto-mock-v13 { order: 2; }
        }

        /* — Step number chip in eyebrow row (replaces bg bignum) — */
        .proto-step-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 12px;
            border-radius: 999px;
            background: var(--ink);
            color: #fff;
            font: 800 13px/1 var(--mono);
            letter-spacing: -0.01em;
            margin-right: 10px;
            transform: scale(0.9) rotate(-4deg);
            opacity: 0;
            transition: transform 480ms var(--ease-drawer), opacity 480ms ease-out;
        }
        .proto-stage-v13.is-in .proto-step-chip {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }

        /* — Text column — */
        .proto-text-col {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 22px;
            max-width: 480px;
        }
        .proto-stage-v13.is-reverse .proto-text-col { margin-left: auto; }
        @media (max-width: 980px) {
            .proto-stage-v13.is-reverse .proto-text-col { margin-left: 0; }
        }

        .proto-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font: 700 11px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--signal);
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
        }
        .proto-eyebrow .dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 8px var(--signal);
        }
        .proto-stage-v13.is-in .proto-eyebrow { opacity: 1; transform: translateY(0); transition-delay: 100ms; }

        .proto-title {
            font: 800 clamp(34px, 4.4vw, 56px)/1.05 var(--sans);
            letter-spacing: -0.038em;
            color: var(--ink);
            margin: 0;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
        }
        .proto-title em {
            font: 500 1em/1.05 var(--sans);
            color: var(--signal);
        }
        .proto-stage-v13.is-in .proto-title { opacity: 1; transform: translateY(0); transition-delay: 180ms; }

        .proto-desc {
            font: 400 17px/1.6 var(--sans);
            color: var(--ink-2);
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
        }
        .proto-stage-v13.is-in .proto-desc { opacity: 1; transform: translateY(0); transition-delay: 280ms; }

        .proto-checks-v13 {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 4px;
        }
        .proto-checks-v13 li {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 12px;
            font: 500 14px/1.4 var(--sans);
            color: var(--ink-2);
            opacity: 0;
            transform: translateX(-12px);
            transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
        }
        .proto-checks-v13 li .ck {
            width: 22px; height: 22px;
            border-radius: 50%;
            background: rgba(22, 163, 74, 0.12);
            border: 1px solid rgba(22, 163, 74, 0.4);
            display: grid;
            place-items: center;
            flex-shrink: 0;
        }
        .proto-checks-v13 li .ck svg {
            width: 11px; height: 11px;
            color: var(--green);
        }
        .proto-stage-v13.is-in .proto-checks-v13 li { opacity: 1; transform: translateX(0); }
        .proto-stage-v13.is-in .proto-checks-v13 li:nth-child(1) { transition-delay: 380ms; }
        .proto-stage-v13.is-in .proto-checks-v13 li:nth-child(2) { transition-delay: 440ms; }
        .proto-stage-v13.is-in .proto-checks-v13 li:nth-child(3) { transition-delay: 500ms; }

        /* — Mockup column (dark, immersive) — */
        .proto-mock-v13 {
            position: relative;
            z-index: 2;
            width: 100%;
            aspect-ratio: 4 / 3.2;
            background: linear-gradient(180deg, #0E0E12 0%, #07070B 100%);
            border-radius: 22px;
            overflow: hidden;
            box-shadow:
                0 40px 80px -30px rgba(0,0,0,0.45),
                0 0 0 1px rgba(255,255,255,0.04);
            clip-path: inset(0 0 100% 0);
            transition: clip-path 900ms var(--ease-in-out);
            will-change: clip-path;
        }
        .proto-stage-v13.is-in .proto-mock-v13 {
            clip-path: inset(0 0 0 0);
            transition-delay: 200ms;
        }
        .proto-mock-v13::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(60% 40% at 50% 0%, rgba(255,77,46,0.10), transparent 70%),
                radial-gradient(30% 50% at 100% 100%, rgba(255,77,46,0.04), transparent 70%);
            pointer-events: none;
        }
        .proto-mock-v13 .pm-chrome {
            position: absolute;
            top: 0; left: 0; right: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 13px 18px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            background: rgba(0,0,0,0.25);
        }
        .proto-mock-v13 .pm-chrome .dots { display: flex; gap: 5px; }
        .proto-mock-v13 .pm-chrome .dots i {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
        }
        .proto-mock-v13 .pm-chrome .dots i:nth-child(1) { background: #FF5F57; }
        .proto-mock-v13 .pm-chrome .dots i:nth-child(2) { background: #FEBC2E; }
        .proto-mock-v13 .pm-chrome .dots i:nth-child(3) { background: #28C840; }
        .proto-mock-v13 .pm-chrome .url {
            font: 500 10px/1 var(--mono);
            color: rgba(255,255,255,0.42);
            margin-left: 6px;
            letter-spacing: 0.04em;
        }
        .proto-mock-v13 .pm-body {
            position: absolute;
            top: 38px; left: 0; right: 0; bottom: 0;
            padding: 22px 26px;
            color: #fff;
            display: flex;
            flex-direction: column;
        }

        /* — Mockup 1 : Persona Configurator — */
        .pmock-config {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .pmock-config .cf-title {
            font: 700 15px/1.1 var(--sans);
            letter-spacing: -0.012em;
            color: #fff;
        }
        .pmock-config .cf-title b { color: var(--signal); font-weight: 700; }
        .pmock-config .cf-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 12px;
        }
        .pmock-config .cf-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .pmock-config .cf-field .lbl {
            font: 600 9px/1 var(--mono);
            color: rgba(255,255,255,0.45);
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }
        .pmock-config .cf-field .val {
            padding: 9px 12px;
            font: 500 12px/1.2 var(--sans);
            color: #fff;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px;
        }
        .pmock-config .cf-field.span-2 { grid-column: 1 / -1; }
        .pmock-config .cf-resistance {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px;
        }
        .pmock-config .cf-resistance .lvl {
            font: 700 12px/1 var(--mono);
            color: var(--signal);
        }
        .pmock-config .cf-resistance .bar {
            flex: 1;
            height: 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 2px;
            overflow: hidden;
        }
        .pmock-config .cf-resistance .bar > i {
            display: block;
            height: 100%;
            width: 60%;
            background: linear-gradient(90deg, var(--signal), var(--signal-2));
            border-radius: 2px;
        }
        .pmock-config .cf-ai-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 6px;
            padding: 9px 12px;
            background: rgba(255,77,46,0.12);
            border: 1px solid rgba(255,77,46,0.32);
            border-radius: 10px;
            font: 500 11px/1.3 var(--sans);
            color: rgba(255,255,255,0.92);
        }
        .pmock-config .cf-ai-badge .spark {
            display: inline-grid;
            place-items: center;
            width: 20px; height: 20px;
            border-radius: 50%;
            background: var(--signal);
            flex-shrink: 0;
        }
        .pmock-config .cf-ai-badge .spark svg { width: 11px; height: 11px; color: #fff; }
        .pmock-config .cf-ai-badge b { color: var(--signal); font-weight: 700; }
        .pmock-config .cf-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 11px 18px;
            background: #fff;
            color: var(--ink);
            border-radius: 8px;
            font: 700 12px/1 var(--sans);
            margin-top: auto;
            align-self: flex-end;
        }

        /* — Mockup 2 : Live Call — */
        .pmock-call {
            display: flex;
            flex-direction: column;
            gap: 14px;
            height: 100%;
        }
        .pmock-call .ca-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .pmock-call .ca-persona {
            display: flex; align-items: center; gap: 10px;
        }
        .pmock-call .ca-persona .av {
            position: relative;
            width: 38px; height: 38px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
        }
        .pmock-call .ca-persona .av .live {
            position: absolute;
            bottom: 0; right: 0;
            width: 10px; height: 10px;
            border-radius: 50%;
            background: var(--signal);
            border: 2px solid #0a0a0b;
        }
        .pmock-call .ca-persona .n { font: 700 13px/1.1 var(--sans); color: #fff; }
        .pmock-call .ca-persona .r { font: 500 9px/1 var(--mono); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }
        .pmock-call .ca-timer {
            font: 700 17px/1 var(--mono);
            color: var(--signal);
            font-variant-numeric: tabular-nums;
        }
        .pmock-call .ca-wave {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2.5px;
            height: 64px;
            padding: 12px 0;
        }
        .pmock-call .ca-wave i {
            display: block;
            width: 3px;
            background: linear-gradient(180deg, var(--signal), var(--signal-2));
            border-radius: 2px;
            opacity: 0.75;
            transform-origin: center;
            animation: pmock-wave 1.1s ease-in-out infinite alternate;
        }
        .pmock-call .ca-wave i:nth-child(2n)  { animation-delay: 80ms; }
        .pmock-call .ca-wave i:nth-child(3n)  { animation-delay: 160ms; }
        .pmock-call .ca-wave i:nth-child(5n)  { animation-delay: 240ms; }
        .pmock-call .ca-wave i:nth-child(7n)  { animation-delay: 320ms; }
        @keyframes pmock-wave {
            from { transform: scaleY(0.3); opacity: 0.5; }
            to   { transform: scaleY(1); opacity: 1; }
        }
        .pmock-call .ca-bubbles { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
        .pmock-call .ca-bubble {
            font: 400 12px/1.45 var(--sans);
            padding: 9px 13px;
            border-radius: 11px;
            color: rgba(255,255,255,0.92);
            max-width: 86%;
            letter-spacing: -0.005em;
        }
        .pmock-call .ca-bubble.them {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            border-bottom-left-radius: 3px;
            align-self: flex-start;
        }
        .pmock-call .ca-bubble.you {
            background: var(--signal);
            color: #fff;
            border-bottom-right-radius: 3px;
            align-self: flex-end;
        }
        .pmock-call .ca-bubble em { color: var(--signal); font-weight: 600; }
        .pmock-call .ca-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font: 500 9px/1 var(--mono);
            color: rgba(255,255,255,0.42);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 4px;
        }
        .pmock-call .ca-meta b { color: var(--signal); font-weight: 700; }

        /* — Mockup 3 : Feedback Card — */
        .pmock-feedback {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .pmock-feedback .fb-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }
        .pmock-feedback .fb-head .lbl {
            font: 600 10px/1 var(--mono);
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
            letter-spacing: 0.14em;
        }
        .pmock-feedback .fb-head .xp {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font: 700 11px/1 var(--mono);
            color: var(--signal);
            padding: 5px 9px;
            background: rgba(255,77,46,0.14);
            border: 1px solid rgba(255,77,46,0.32);
            border-radius: 6px;
        }
        .pmock-feedback .fb-row {
            display: grid;
            grid-template-columns: 100px 1fr;
            gap: 18px;
            align-items: center;
        }
        .pmock-feedback .fb-ring {
            position: relative;
            width: 100px; height: 100px;
        }
        .pmock-feedback .fb-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
        .pmock-feedback .fb-ring svg circle.bg { stroke: rgba(255,255,255,0.10); fill: none; stroke-width: 7; }
        .pmock-feedback .fb-ring svg circle.fg { stroke: var(--signal); fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 55; }
        .pmock-feedback .fb-ring .v {
            position: absolute; inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            color: #fff;
        }
        .pmock-feedback .fb-ring .v > span {
            font: 800 30px/1 var(--sans);
            letter-spacing: -0.035em;
            display: block;
        }
        .pmock-feedback .fb-ring .v sup {
            font: 600 9px/1 var(--mono);
            color: rgba(255,255,255,0.45);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin: 0;
            vertical-align: baseline;
            white-space: nowrap;
        }
        .pmock-feedback .fb-bars { display: flex; flex-direction: column; gap: 7px; }
        .pmock-feedback .fb-bars .bar-row {
            display: grid;
            grid-template-columns: 70px 1fr 24px;
            gap: 10px;
            align-items: center;
            font: 600 10px/1 var(--mono);
            color: rgba(255,255,255,0.65);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .pmock-feedback .fb-bars .bar-row .v { color: #fff; text-align: right; font-size: 11px; }
        .pmock-feedback .fb-bars .bar-row .bar {
            height: 3px;
            background: rgba(255,255,255,0.06);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }
        .pmock-feedback .fb-bars .bar-row .bar::before {
            content: '';
            position: absolute;
            inset: 0;
            width: 100%;
            transform: scaleX(0);
            transform-origin: left center;
            background: linear-gradient(90deg, var(--signal), var(--signal-2));
            border-radius: 2px;
        }
        .pmock-feedback .fb-tip {
            margin-top: auto;
            padding: 12px 14px;
            background: rgba(255,77,46,0.10);
            border: 1px solid rgba(255,77,46,0.26);
            border-radius: 11px;
            font: 400 12px/1.5 var(--sans);
            color: rgba(255,255,255,0.92);
            letter-spacing: -0.005em;
        }
        .pmock-feedback .fb-tip b {
            display: block;
            font: 700 9px/1 var(--mono);
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            margin-bottom: 5px;
            font-style: normal;
        }

        /* — Connector : vertical line + falling orange glow particle (loop) — */
        .proto-connector {
            position: relative;
            height: 110px;
            display: flex;
            justify-content: center;
            overflow: hidden;
        }
        .proto-connector .pc-line {
            position: absolute;
            top: 0; bottom: 0;
            left: 50%;
            width: 2px;
            transform: translateX(-50%);
            background: linear-gradient(180deg,
                transparent 0%,
                var(--rule) 12%,
                var(--rule-2) 50%,
                var(--rule) 88%,
                transparent 100%);
        }
        .proto-connector .pc-glow {
            position: absolute;
            top: 0;
            left: 50%;
            width: 8px;
            height: 32px;
            border-radius: 999px;
            transform: translate(-50%, -40px);
            background: radial-gradient(ellipse at center,
                rgba(255,77,46,0.95) 0%,
                rgba(255,77,46,0.55) 35%,
                transparent 75%);
            filter: blur(0.5px);
            box-shadow:
                0 0 16px rgba(255,77,46,0.6),
                0 0 32px rgba(255,77,46,0.25);
            opacity: 0;
            pointer-events: none;
        }
        .proto-connector.is-in .pc-glow {
            animation: pc-fall 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
        }
        @keyframes pc-fall {
            0%   { transform: translate(-50%, -40px); opacity: 0; }
            15%  { opacity: 1; }
            85%  { opacity: 1; }
            100% { transform: translate(-50%, 130px); opacity: 0; }
        }
        .proto-connector .pc-trail {
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 60px;
            transform: translate(-50%, -60px);
            background: linear-gradient(180deg, transparent 0%, var(--signal) 100%);
            opacity: 0;
            pointer-events: none;
            border-radius: 999px;
        }
        .proto-connector.is-in .pc-trail {
            animation: pc-trail 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
        }
        @keyframes pc-trail {
            0%   { transform: translate(-50%, -60px); opacity: 0; }
            20%  { opacity: 0.55; }
            85%  { opacity: 0.55; }
            100% { transform: translate(-50%, 110px); opacity: 0; }
        }
        @media (max-width: 980px) { .proto-connector { height: 70px; } }

        /* — Stage 1 mockup additions : Contexte textarea with typewriter — */
        .pmock-config .cf-context-wrap {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-top: 2px;
        }
        .pmock-config .cf-context-wrap .lbl {
            font: 600 9px/1 var(--mono);
            color: rgba(255,255,255,0.45);
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }
        .pmock-config .cf-textarea {
            min-height: 92px;
            padding: 12px 14px;
            font: 400 12.5px/1.6 var(--sans);
            color: rgba(255,255,255,0.92);
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 10px;
            letter-spacing: -0.005em;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .pmock-config .cf-textarea em { color: var(--signal); font-weight: 500; }
        .pmock-config .cf-textarea .tw-cursor {
            display: inline-block;
            width: 7px;
            height: 14px;
            background: var(--signal);
            vertical-align: text-bottom;
            margin-left: 1px;
            animation: tw-blink 0.85s steps(1) infinite;
            border-radius: 1px;
        }
        @keyframes tw-blink { 50% { opacity: 0; } }

        /* — Stage 3 mockup : extended feedback (sections) — */
        .pmock-feedback .fb-sections {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 4px;
        }
        .pmock-feedback .fb-section {
            padding: 12px 14px;
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 11px;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
        }
        .pmock-feedback .fb-section.is-shown {
            opacity: 1;
            transform: translateY(0);
        }
        .pmock-feedback .fb-section .fb-sec-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font: 700 9px/1 var(--mono);
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            margin-bottom: 8px;
        }
        .pmock-feedback .fb-section .fb-sec-label svg {
            width: 10px; height: 10px;
        }
        .pmock-feedback .fb-section .fb-sec-body {
            font: 400 12px/1.55 var(--sans);
            color: rgba(255,255,255,0.92);
            letter-spacing: -0.005em;
        }
        .pmock-feedback .fb-section .fb-sec-body em {
            color: var(--signal);
            font-weight: 500;
        }
        .pmock-feedback .fb-section .fb-quote {
            font: 400 12.5px/1.5 var(--sans);
            color: rgba(255,255,255,0.95);
            letter-spacing: -0.005em;
        }
        .pmock-feedback .fb-section .fb-quote .hl {
            background: rgba(255,77,46,0.22);
            color: #fff;
            padding: 1px 4px;
            border-radius: 3px;
            font-weight: 500;
        }
        .pmock-feedback .fb-section .fb-quote .dim {
            color: rgba(255,255,255,0.45);
        }
        .pmock-feedback .fb-next {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .pmock-feedback .fb-next li {
            display: flex;
            gap: 8px;
            font: 400 12px/1.5 var(--sans);
            color: rgba(255,255,255,0.86);
            padding-left: 4px;
        }
        .pmock-feedback .fb-next li::before {
            content: '→';
            color: var(--signal);
            font-weight: 700;
            flex-shrink: 0;
        }

        /* Skill bars animate fill from 0 — GPU-accelerated scaleX (origin: left) */
        .pmock-feedback .fb-bars .bar-row .bar::before {
            transition: transform 1100ms var(--ease-out);
        }
        .pmock-feedback.is-in .fb-bars .bar-row .bar::before {
            transform: scaleX(calc(var(--w, 0%) / 100%));
        }
        .pmock-feedback .fb-bars .bar-row:nth-child(1) .bar::before { transition-delay: 150ms; }
        .pmock-feedback .fb-bars .bar-row:nth-child(2) .bar::before { transition-delay: 250ms; }
        .pmock-feedback .fb-bars .bar-row:nth-child(3) .bar::before { transition-delay: 350ms; }
        .pmock-feedback .fb-bars .bar-row:nth-child(4) .bar::before { transition-delay: 450ms; }
        .pmock-feedback .fb-bars .bar-row:nth-child(5) .bar::before { transition-delay: 550ms; }
        @media (prefers-reduced-motion: reduce) {
            .pmock-feedback .fb-bars .bar-row .bar::before {
                transition: none;
                transform: scaleX(calc(var(--w, 0%) / 100%));
            }
        }

        /* Ring fg starts hidden, animates */
        .pmock-feedback .fb-ring svg circle.fg {
            stroke-dashoffset: 251;
            transition: stroke-dashoffset 1400ms var(--ease-out) 200ms;
        }
        .pmock-feedback.is-in .fb-ring svg circle.fg {
            stroke-dashoffset: 55;
        }

        /* For Stage 3 mockup we relax aspect-ratio to fit richer content */
        .proto-mock-v13.pmock-tall {
            aspect-ratio: auto;
            min-height: 580px;
        }
        @media (max-width: 980px) {
            .proto-mock-v13.pmock-tall { min-height: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .proto-bignum,
            .proto-eyebrow,
            .proto-title,
            .proto-desc,
            .proto-checks-v13 li,
            .proto-mock-v13,
            .proto-connector svg .fg {
                opacity: 1 !important;
                transform: none !important;
                clip-path: none !important;
                transition: none !important;
                stroke-dashoffset: 0 !important;
            }
            .pmock-call .ca-wave i { animation: none !important; }
        }

        /* ─── FEEDBACK v2 — Conversation Replay ─── */
        .fb-card-v2 {
            display: flex;
            flex-direction: column;
        }
        .fb-replay-body {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            min-height: 380px;
        }
        @media (max-width: 800px) {
            .fb-replay-body {
                grid-template-columns: 1fr;
                min-height: auto;
            }
        }

        /* ─── Transcript column ─── */
        .fb-transcript {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 18px 16px 28px;
            border-right: 1px solid rgba(255,255,255,0.06);
            overflow: hidden;
        }
        @media (max-width: 800px) {
            .fb-transcript {
                border-right: none;
                border-bottom: 1px solid rgba(255,255,255,0.06);
                max-height: 320px;
            }
        }
        .fb-transcript-fade {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 56px;
            background: linear-gradient(to top, var(--surface-d) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Turn (message row) */
        .fb-turn {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
        }
        .fb-card-v2.is-in .fb-turn { opacity: 1; transform: translateY(0); }
        .fb-card-v2.is-in .fb-turn[data-turn="1"] { transition-delay: 100ms; }
        .fb-card-v2.is-in .fb-turn[data-turn="2"] { transition-delay: 200ms; }
        .fb-card-v2.is-in .fb-turn[data-turn="3"] { transition-delay: 320ms; }
        .fb-card-v2.is-in .fb-turn[data-turn="4"] { transition-delay: 440ms; }
        .fb-card-v2.is-in .fb-turn[data-turn="5"] { transition-delay: 580ms; }
        .fb-card-v2.is-in .fb-turn[data-turn="6"] { transition-delay: 720ms; }

        .fb-turn.you { flex-direction: row-reverse; }

        .fb-turn-ts {
            flex-shrink: 0;
            font: 500 9px/1 var(--mono);
            color: rgba(255,255,255,0.35);
            letter-spacing: 0.06em;
            padding-top: 11px;
            min-width: 34px;
        }
        .fb-turn.you .fb-turn-ts { text-align: right; }

        .fb-bubble {
            position: relative;
            font: 400 13px/1.45 var(--sans);
            color: rgba(255,255,255,0.92);
            padding: 10px 14px;
            border-radius: 14px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.07);
            max-width: 85%;
        }
        .fb-turn.them .fb-bubble { border-bottom-left-radius: 4px; }
        .fb-turn.you .fb-bubble {
            background: linear-gradient(135deg, rgba(255,77,46,0.18) 0%, rgba(255,77,46,0.08) 100%);
            border-color: rgba(255,77,46,0.25);
            border-bottom-right-radius: 4px;
        }
        .fb-who {
            display: block;
            font: 600 10px/1 var(--mono);
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 5px;
        }

        /* Highlight error text */
        .fb-hl-err {
            background: rgba(255,77,46,0.25);
            color: var(--signal);
            padding: 1px 4px;
            border-radius: 3px;
            font-weight: 500;
        }

        /* Annotation badges (inline) */
        .fb-ann {
            position: absolute;
            top: -6px; right: -6px;
            width: 22px; height: 22px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            opacity: 0;
            transform: scale(0.6);
            transition: opacity 280ms var(--ease-out) 600ms, transform 280ms var(--ease-snap) 600ms;
        }
        .fb-card-v2.is-in .fb-ann { opacity: 1; transform: scale(1); }
        .fb-ann svg { width: 12px; height: 12px; }

        .fb-ann-ok {
            background: var(--green);
            color: #fff;
            box-shadow: 0 3px 10px -3px rgba(22,163,74,0.5);
        }
        .fb-ann-warn {
            background: #F59E0B;
            color: #fff;
            box-shadow: 0 3px 10px -3px rgba(245,158,11,0.5);
        }

        /* Annotation tip (below bubble) */
        .fb-ann-tip {
            font: 500 11px/1.4 var(--sans);
            color: rgba(255,255,255,0.65);
            padding: 7px 12px;
            margin-top: 6px;
            margin-left: 44px;
            background: rgba(22,163,74,0.12);
            border-left: 2px solid var(--green);
            border-radius: 0 8px 8px 0;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 350ms var(--ease-out) 750ms, transform 350ms var(--ease-out) 750ms;
        }
        .fb-card-v2.is-in .fb-ann-tip { opacity: 1; transform: translateY(0); }
        .fb-turn.you .fb-ann-tip { margin-left: 0; margin-right: 44px; }

        .fb-ann-tip-warn {
            background: rgba(245,158,11,0.10);
            border-left-color: #F59E0B;
        }
        .fb-tip-label {
            display: block;
            font: 600 9px/1 var(--mono);
            color: #F59E0B;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 4px;
        }

        /* ─── Score panel (right column) ─── */
        .fb-score-panel {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 18px 16px;
        }

        /* Score ring */
        .fb-score-ring {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .fb-score-ring .ring {
            position: relative;
            width: 88px; height: 88px;
        }
        .fb-score-ring .ring svg {
            width: 100%; height: 100%;
            transform: rotate(-90deg);
        }
        .fb-score-ring .ring svg circle.bg {
            stroke: rgba(255,255,255,0.08);
        }
        .fb-score-ring .ring svg circle.fg {
            stroke: var(--signal);
            stroke-dasharray: 264;
            stroke-dashoffset: 264;
            transition: stroke-dashoffset 1200ms var(--ease-out) 400ms;
        }
        .fb-card-v2.is-in .fb-score-ring .ring svg circle.fg {
            /* 78% of 264 = 206, so offset = 264 - 206 = 58 */
            stroke-dashoffset: 58;
        }
        .fb-score-v {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
        }
        .fb-score-v span {
            font: 800 28px/1 var(--sans);
            color: #fff;
            letter-spacing: -0.04em;
        }
        .fb-score-v small {
            font: 500 12px/1 var(--mono);
            color: rgba(255,255,255,0.4);
            align-self: flex-end;
            margin-bottom: 4px;
        }
        .fb-score-meta {
            font: 600 10px/1 var(--mono);
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }

        /* Skills DNA bars */
        .fb-skills {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .fb-skill {
            opacity: 0;
            transform: translateX(-8px);
            transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
        }
        .fb-card-v2.is-in .fb-skill { opacity: 1; transform: translateX(0); }
        .fb-card-v2.is-in .fb-skill[data-skill="1"] { transition-delay: 500ms; }
        .fb-card-v2.is-in .fb-skill[data-skill="2"] { transition-delay: 580ms; }
        .fb-card-v2.is-in .fb-skill[data-skill="3"] { transition-delay: 660ms; }
        .fb-card-v2.is-in .fb-skill[data-skill="4"] { transition-delay: 740ms; }
        .fb-card-v2.is-in .fb-skill[data-skill="5"] { transition-delay: 820ms; }
        .fb-card-v2.is-in .fb-skill[data-skill="6"] { transition-delay: 900ms; }

        .fb-skill-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        .fb-skill-name {
            font: 500 11px/1 var(--sans);
            color: rgba(255,255,255,0.7);
        }
        .fb-skill-val {
            font: 700 12px/1 var(--mono);
            color: var(--signal);
        }
        .fb-skill-val-low { color: #F59E0B; }

        .fb-skill-bar {
            height: 5px;
            background: rgba(255,255,255,0.08);
            border-radius: 3px;
            overflow: hidden;
        }
        .fb-skill-bar i {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--signal) 0%, rgba(255,77,46,0.7) 100%);
            border-radius: 3px;
            transition: width 800ms var(--ease-out);
        }
        .fb-card-v2.is-in .fb-skill-bar i { width: var(--w); }
        .fb-skill-bar-low i {
            background: linear-gradient(90deg, #F59E0B 0%, rgba(245,158,11,0.6) 100%);
        }

        /* Priority tip */
        .fb-priority-tip {
            margin-top: auto;
            padding: 12px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 400ms var(--ease-out) 1000ms, transform 400ms var(--ease-out) 1000ms;
        }
        .fb-card-v2.is-in .fb-priority-tip { opacity: 1; transform: translateY(0); }
        .fb-tip-head {
            display: flex;
            align-items: center;
            gap: 7px;
            font: 600 10px/1 var(--mono);
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 8px;
        }
        .fb-tip-head svg { width: 14px; height: 14px; flex-shrink: 0; }
        .fb-priority-tip p {
            font: 400 12px/1.5 var(--sans);
            color: rgba(255,255,255,0.7);
            margin: 0;
        }

        /* ════════════════════════════════════════════════════
           FEEDBACK v4 — Real-Person Cold-Caller (no card, beige bg)
        ════════════════════════════════════════════════════ */
        .fb-portrait-3d {
            position: relative;
            display: grid;
            place-items: center;
            min-height: 560px;
            padding: 24px 12px;
            perspective: 1400px;
        }
        @media (max-width: 800px) {
            .fb-portrait-3d { min-height: 480px; padding: 16px 8px; }
        }

        /* Soft ambient radial behind the portrait (anchors it on the beige) */
        .fb-portrait-3d::before {
            content: '';
            position: absolute;
            inset: 8% 8% 8% 8%;
            background:
                radial-gradient(60% 70% at 50% 45%, rgba(255,77,46,0.12) 0%, transparent 60%),
                radial-gradient(40% 60% at 70% 80%, rgba(255,138,110,0.10) 0%, transparent 70%);
            filter: blur(8px);
            z-index: 0;
            pointer-events: none;
        }

        /* The photo wrapper — vertical portrait with depth */
        .fb-portrait-wrap {
            position: relative;
            width: clamp(280px, 70%, 420px);
            aspect-ratio: 4 / 5;
            border-radius: 28px;
            overflow: hidden;
            background: var(--bg-2);
            box-shadow:
                0 30px 60px -20px rgba(10,10,11,0.28),
                0 60px 100px -40px rgba(255,77,46,0.18),
                inset 0 0 0 1px rgba(255,255,255,0.6);
            transform: rotateY(-3deg) rotateX(2deg);
            transform-style: preserve-3d;
            animation: fbPortraitIdle 7s ease-in-out infinite;
            will-change: transform;
            z-index: 1;
        }
        @keyframes fbPortraitIdle {
            0%, 100% { transform: rotateY(-3deg) rotateX(2deg) translateY(0); }
            50%      { transform: rotateY(2deg) rotateX(-1deg) translateY(-8px); }
        }
        .fb-portrait-img {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: center 25%;
            display: block;
        }
        /* Top vignette for badge readability */
        .fb-portrait-wrap::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 36%;
            background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, transparent 100%);
            z-index: 2;
            pointer-events: none;
        }
        /* Bottom vignette for caption */
        .fb-portrait-wrap::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 38%;
            background: linear-gradient(0deg, rgba(0,0,0,0.42) 0%, transparent 100%);
            z-index: 2;
            pointer-events: none;
        }

        /* Live status badge — floats top-left, on the photo */
        .fb-live-badge {
            position: absolute;
            top: 18px;
            left: 18px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px 7px 10px;
            background: rgba(10,10,11,0.55);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 999px;
            font: 700 10.5px/1 var(--mono);
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }
        .fb-live-badge .fb-live-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 0 0 rgba(255,77,46,0.55);
            animation: fb3dPulse 1.6s ease-out infinite;
        }
        .fb-live-badge .fb-live-time {
            color: var(--signal);
            margin-left: 4px;
            padding-left: 8px;
            border-left: 1px solid rgba(255,255,255,0.15);
        }
        @keyframes fb3dPulse {
            0%   { box-shadow: 0 0 0 0 rgba(255,77,46,0.55); }
            70%  { box-shadow: 0 0 0 9px rgba(255,77,46,0); }
            100% { box-shadow: 0 0 0 0 rgba(255,77,46,0); }
        }

        /* Bottom-of-photo identity strip */
        .fb-portrait-id {
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 16px;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #fff;
        }
        .fb-portrait-id .id-name {
            font: 700 14.5px/1.15 var(--sans);
            letter-spacing: -0.01em;
            margin-bottom: 3px;
        }
        .fb-portrait-id .id-role {
            font: 500 11px/1 var(--mono);
            color: rgba(255,255,255,0.75);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .fb-portrait-id .id-xp {
            text-align: right;
            font: 700 13px/1.2 var(--sans);
            color: var(--signal);
        }
        .fb-portrait-id .id-xp small {
            display: block;
            font: 500 10px/1 var(--mono);
            color: rgba(255,255,255,0.6);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 3px;
        }

        /* Signal waves emanating from where the phone is (right side of portrait) */
        .fb-portrait-waves {
            position: absolute;
            top: 38%;
            right: 14%;
            z-index: 2;
            width: 0; height: 0;
            pointer-events: none;
        }
        .fb-portrait-waves i {
            position: absolute;
            left: 50%; top: 50%;
            width: 80px; height: 80px;
            margin: -40px 0 0 -40px;
            border-radius: 50%;
            border: 2px solid rgba(255,77,46,0.55);
            opacity: 0;
            animation: fbWave 2.6s ease-out infinite;
        }
        .fb-portrait-waves i:nth-child(2) { animation-delay: 0.85s; }
        .fb-portrait-waves i:nth-child(3) { animation-delay: 1.7s; }
        @keyframes fbWave {
            0%   { transform: scale(0.35); opacity: 0; border-width: 2.5px; }
            25%  { opacity: 0.85; }
            100% { transform: scale(2.4); opacity: 0; border-width: 0.5px; }
        }

        /* Floating phone graphic (overlaid on portrait, right side) */
        .fb-floating-phone {
            position: absolute;
            top: 32%;
            right: 8%;
            z-index: 4;
            width: 78px; height: 152px;
            transform: rotate(-10deg) translate3d(0,0,60px);
            animation: fbPhoneFloat 5s ease-in-out infinite;
            filter: drop-shadow(0 20px 36px rgba(10,10,11,0.45)) drop-shadow(0 0 24px rgba(255,77,46,0.18));
        }
        @keyframes fbPhoneFloat {
            0%, 100% { transform: rotate(-10deg) translate3d(0, 0, 60px); }
            50%      { transform: rotate(-8deg) translate3d(0, -8px, 60px); }
        }
        .fb-floating-phone svg { width: 100%; height: 100%; }
        @media (max-width: 800px) {
            .fb-floating-phone { width: 64px; height: 124px; top: 30%; right: 4%; }
            .fb-portrait-waves { top: 36%; right: 12%; }
            .fb-portrait-waves i { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
        }

        /* Floating insight stickers — light theme (no card, beige bg) */
        .fb-insight {
            position: absolute;
            z-index: 5;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px 10px 11px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 14px;
            box-shadow:
                0 18px 34px -14px rgba(10,10,11,0.18),
                0 4px 10px -4px rgba(10,10,11,0.08),
                0 0 0 1px rgba(255,255,255,0.6) inset;
            animation: fbInsightFloat 5s ease-in-out infinite;
            will-change: transform;
        }
        .fb-insight.insight-1 {
            top: 14%;
            left: -2%;
            animation-delay: 0s;
        }
        .fb-insight.insight-2 {
            top: 52%;
            right: -3%;
            animation-delay: 1.6s;
        }
        .fb-insight.insight-3 {
            bottom: 8%;
            left: 4%;
            animation-delay: 3s;
        }
        @keyframes fbInsightFloat {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-7px); }
        }
        .fb-insight .ins-ico {
            display: grid; place-items: center;
            width: 30px; height: 30px;
            border-radius: 10px;
            flex-shrink: 0;
        }
        .fb-insight .ins-ico svg { width: 16px; height: 16px; }
        .fb-insight.insight-1 .ins-ico { background: var(--signal-soft); color: var(--signal); }
        .fb-insight.insight-2 .ins-ico { background: var(--green-soft); color: var(--green); }
        .fb-insight.insight-3 .ins-ico { background: #FFF4E0; color: #B8761F; }
        .fb-insight .ins-txt {
            display: flex;
            flex-direction: column;
            gap: 2px;
            line-height: 1.15;
        }
        .fb-insight .ins-lbl {
            font: 600 9.5px/1 var(--mono);
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }
        .fb-insight .ins-val {
            font: 700 13px/1.15 var(--sans);
            color: var(--ink);
            letter-spacing: -0.01em;
        }
        .fb-insight.insight-1 .ins-val em { font-style: normal; color: var(--signal); }
        .fb-insight.insight-2 .ins-val em { font-style: normal; color: var(--green); font-weight: 700; }
        @media (max-width: 800px) {
            .fb-insight { padding: 8px 12px 8px 9px; gap: 8px; }
            .fb-insight .ins-ico { width: 26px; height: 26px; }
            .fb-insight .ins-ico svg { width: 14px; height: 14px; }
            .fb-insight .ins-val { font-size: 11.5px; }
            .fb-insight .ins-lbl { font-size: 8.5px; }
            .fb-insight.insight-1 { top: 6%; left: -1%; }
            .fb-insight.insight-2 { top: 48%; right: -2%; }
            .fb-insight.insight-3 { bottom: 4%; left: 4%; }
        }

        /* Reduced-motion safeguards */
        @media (prefers-reduced-motion: reduce) {
            .fb-portrait-wrap,
            .fb-floating-phone,
            .fb-portrait-waves i,
            .fb-insight,
            .fb-live-dot {
                animation: none !important;
            }
            .fb-portrait-wrap { transform: rotateY(-2deg) rotateX(1deg); }
            .fb-floating-phone { transform: rotate(-10deg) translate3d(0,0,60px); }
        }

        /* ════════════════════════════════════════════════════
           FEEDBACK v5 — Orbital Portrait
           Real person at center (circular, masked into bg)
           with 3 concentric rings of orbiting icons.
        ════════════════════════════════════════════════════ */
        .fb-orbit-portrait {
            position: relative;
            display: grid;
            place-items: center;
            width: 100%;
            max-width: 600px;
            aspect-ratio: 1 / 1;
            margin-inline: auto;
            min-height: 560px;
            --orbit-r3: 275px;
            --orbit-r2: 235px;
            --orbit-r1: 200px;
        }
        @media (max-width: 800px) {
            .fb-orbit-portrait {
                max-width: 420px;
                min-height: 420px;
                --orbit-r3: 190px;
                --orbit-r2: 160px;
                --orbit-r1: 135px;
            }
        }

        /* Halo glow behind central portrait */
        .orbit-halo {
            position: absolute;
            top: 50%; left: 50%;
            width: 60%; aspect-ratio: 1/1;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 45%, rgba(255,77,46,0.22) 0%, rgba(255,138,110,0.10) 45%, transparent 70%);
            filter: blur(22px);
            z-index: 0;
            pointer-events: none;
            animation: orbit-halo-pulse 4.5s ease-in-out infinite;
        }
        @keyframes orbit-halo-pulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.95; }
            50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
        }

        /* Concentric dashed rings (rotate as a whole) */
        .orbit-ring {
            position: absolute;
            top: 50%; left: 50%;
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
        }
        .orbit-ring-3 {
            width: 100%; aspect-ratio: 1/1;
            border: 1px dashed rgba(10, 10, 11, 0.10);
            animation: orbit-spin 42s linear infinite;
        }
        .orbit-ring-2 {
            width: 76%; aspect-ratio: 1/1;
            border: 1px dashed rgba(255, 77, 46, 0.22);
            animation: orbit-spin 24s linear infinite reverse;
        }
        .orbit-ring-1 {
            width: 52%; aspect-ratio: 1/1;
            border: 1.5px dashed rgba(255, 77, 46, 0.12);
            animation: orbit-spin 12s linear infinite;
        }
        @keyframes orbit-spin {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to   { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Orbit items — circular badges positioned on the ring */
        .orbit-item {
            position: absolute;
            top: 50%; left: 50%;
            width: 48px; height: 48px;
            border-radius: 50%;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            box-shadow:
                0 10px 22px -8px rgba(10,10,11,0.20),
                0 0 0 1px rgba(255,255,255,0.6) inset;
            display: grid;
            place-items: center;
            color: var(--signal);
        }
        .orbit-item svg { width: 20px; height: 20px; }

        /* Position each item on the ring using --angle + ring radius */
        .orbit-ring-3 .orbit-item {
            transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--orbit-r3) * -1));
        }
        .orbit-ring-2 .orbit-item {
            width: 40px; height: 40px;
            transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--orbit-r2) * -1));
            color: var(--green, #1aa069);
            background: var(--bg-3);
        }
        .orbit-ring-2 .orbit-item svg { width: 17px; height: 17px; }

        /* Inner ring uses simple glowing dots, not pills */
        .orbit-ring-1 .orbit-dot {
            position: absolute;
            top: 50%; left: 50%;
            width: 10px; height: 10px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow:
                0 0 14px rgba(255,77,46,0.7),
                0 0 4px rgba(255,77,46,1);
            transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--orbit-r1) * -1));
            animation: orbit-dot-glow 2.8s ease-in-out infinite;
        }
        .orbit-ring-1 .orbit-dot:nth-child(2) { animation-delay: 0.9s; }
        .orbit-ring-1 .orbit-dot:nth-child(3) { animation-delay: 1.8s; }
        @keyframes orbit-dot-glow {
            0%, 100% { opacity: 0.5; }
            50%      { opacity: 1; }
        }

        /* Central portrait — circular crop, background masked into beige */
        .orbit-center {
            position: relative;
            z-index: 3;
            width: clamp(280px, 60%, 360px);
            aspect-ratio: 1/1;
            border-radius: 50%;
            display: grid;
            place-items: center;
        }
        @media (max-width: 800px) {
            .orbit-center { width: clamp(210px, 60%, 250px); }
        }
        .orbit-portrait {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            box-shadow:
                0 28px 56px -18px rgba(10,10,11,0.32),
                0 0 0 4px var(--bg-2) inset,
                0 0 0 5px rgba(255,77,46,0.25) inset,
                0 0 40px -8px rgba(255,77,46,0.35);
        }
        .orbit-portrait img,
        .orbit-portrait video {
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: 30% 30%;
            display: block;
        }
        /* Vignette mask that fades photo bg into page beige */
        .orbit-portrait::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 40%, transparent 38%, rgba(250,250,247,0.20) 65%, rgba(250,250,247,0.55) 88%, var(--bg-2, #FAFAF7) 100%);
            pointer-events: none;
        }

        /* Pulsing concentric rings around portrait (signal waves) */
        .orbit-pulse {
            position: absolute;
            top: 50%; left: 50%;
            width: 100%; aspect-ratio: 1/1;
            border-radius: 50%;
            border: 2px solid rgba(255, 77, 46, 0.5);
            transform: translate(-50%, -50%);
            z-index: -1;
            opacity: 0;
            animation: orbit-pulse-ring 3s ease-out infinite;
        }
        .orbit-pulse-2 { animation-delay: 1.5s; }
        @keyframes orbit-pulse-ring {
            0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0; border-width: 3px; }
            25%  { opacity: 0.7; }
            100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; border-width: 0.5px; }
        }

        /* Live badge floating on top of orbit */
        .orbit-live {
            position: absolute;
            top: 4%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 14px 7px 11px;
            background: rgba(10, 10, 11, 0.82);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 999px;
            font: 700 10.5px/1 var(--mono);
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            white-space: nowrap;
        }
        .orbit-live-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 0 0 rgba(255,77,46,0.55);
            animation: orbit-live-pulse 1.6s ease-out infinite;
        }
        .orbit-live-time {
            color: var(--signal);
            margin-left: 4px;
            padding-left: 8px;
            border-left: 1px solid rgba(255,255,255,0.18);
        }
        @keyframes orbit-live-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(255,77,46,0.55); }
            70%  { box-shadow: 0 0 0 9px rgba(255,77,46,0); }
            100% { box-shadow: 0 0 0 0 rgba(255,77,46,0); }
        }

        /* Identity strip at bottom of orbit */
        .orbit-id {
            position: absolute;
            bottom: 2%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 10px 16px;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(8px);
            border: 1px solid var(--rule);
            border-radius: 14px;
            box-shadow:
                0 14px 30px -12px rgba(10,10,11,0.20),
                0 0 0 1px rgba(255,255,255,0.7) inset;
            white-space: nowrap;
        }
        .orbit-id-name {
            font: 700 14px/1.15 var(--sans);
            color: var(--ink);
            letter-spacing: -0.01em;
        }
        .orbit-id-role {
            font: 500 10.5px/1 var(--mono);
            color: var(--ink-soft);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 4px;
        }
        .orbit-id-xp {
            font: 700 13px/1.2 var(--sans);
            color: var(--signal);
            text-align: right;
            padding-left: 14px;
            border-left: 1px solid var(--rule);
        }
        .orbit-id-xp small {
            display: block;
            font: 500 9px/1 var(--mono);
            color: var(--ink-soft);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 3px;
        }

        @media (max-width: 800px) {
            .orbit-item { width: 40px; height: 40px; }
            .orbit-item svg { width: 17px; height: 17px; }
            .orbit-ring-2 .orbit-item { width: 34px; height: 34px; }
            .orbit-ring-2 .orbit-item svg { width: 14px; height: 14px; }
            .orbit-id { padding: 8px 12px; gap: 10px; }
            .orbit-id-name { font-size: 12.5px; }
            .orbit-id-role { font-size: 9.5px; }
            .orbit-id-xp { font-size: 11.5px; padding-left: 10px; }
            .orbit-live { padding: 6px 12px 6px 9px; font-size: 9.5px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .orbit-ring, .orbit-halo, .orbit-pulse, .orbit-live-dot, .orbit-ring-1 .orbit-dot {
                animation: none !important;
            }
        }

        /* ─── VS table — row reveal stagger ─── */
        .compare-wrap .compare tbody tr {
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
        }
        .compare-wrap.is-in .compare tbody tr { opacity: 1; transform: translateY(0); }
        .compare-wrap.is-in .compare tbody tr:nth-child(1) { transition-delay: 60ms; }
        .compare-wrap.is-in .compare tbody tr:nth-child(2) { transition-delay: 140ms; }
        .compare-wrap.is-in .compare tbody tr:nth-child(3) { transition-delay: 220ms; }
        .compare-wrap.is-in .compare tbody tr:nth-child(4) { transition-delay: 300ms; }
        .compare-wrap.is-in .compare tbody tr:nth-child(5) { transition-delay: 380ms; }
        .compare-wrap.is-in .compare tbody tr:nth-child(6) { transition-delay: 460ms; }
        .compare-wrap.is-in .compare tbody tr:nth-child(7) { transition-delay: 540ms; }

        /* ─── Pricing PRO tilt (built on .plan.pop) ─── */
        .plan.pop[data-tilt] {
            transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
            will-change: transform;
        }
        .plan.pop[data-tilt]:hover {
            transform: translateY(-14px) perspective(1100px) rotateX(2deg) scale(1.01);
            box-shadow: 0 30px 80px -30px rgba(255,77,46,0.55), 0 0 0 1px var(--surface-d-3);
        }

        /* — Scroll-driven reveal helper for cohesive sections — */
        .reveal-up {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
        }
        .reveal-up.in { opacity: 1; transform: translateY(0); }

        /* ═══════════════════════════════════════════
           v12 — LIVE CALL THEATER (section #action)
        ═══════════════════════════════════════════ */
        #action.theater-v12 { padding: var(--section-pad) 0; background: var(--bg); }
        .theater {
            max-width: 1140px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 36px;
        }

        /* Chapters pill bar */
        .theater-chapters {
            display: inline-flex;
            padding: 6px;
            background: var(--bg-2);
            border: 1px solid var(--rule);
            border-radius: 999px;
            gap: 4px;
        }
        .theater-chapter {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 18px;
            background: transparent;
            border: none;
            border-radius: 999px;
            font: 600 12px/1 var(--sans);
            letter-spacing: -0.005em;
            color: var(--ink-3);
            cursor: pointer;
            transition: background 220ms var(--ease-out), color 220ms var(--ease-out);
            position: relative;
        }
        .theater-chapter .ts {
            font: 600 10px/1 var(--mono);
            color: var(--ink-4);
            letter-spacing: 0.04em;
        }
        @media (hover: hover) and (pointer: fine) {
            .theater-chapter:hover { color: var(--ink); }
        }
        .theater-chapter.is-active {
            background: var(--ink);
            color: #fff;
            box-shadow: 0 6px 14px -6px rgba(0,0,0,0.3);
        }
        .theater-chapter.is-active .ts { color: rgba(255,255,255,0.55); }
        .theater-chapter:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

        /* ─── STAGE — the dark phone-like surface ─── */
        .theater-stage {
            position: relative;
            width: 100%;
            background: linear-gradient(180deg, #0F0F12 0%, #06060A 100%);
            border-radius: 28px;
            overflow: hidden;
            color: #fff;
            box-shadow:
                0 50px 100px -40px rgba(0,0,0,0.5),
                0 0 0 1px rgba(255,255,255,0.05);
            isolation: isolate;
        }
        /* Subtle grid noise via radial gradient */
        .theater-stage::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(40% 30% at 50% 0%, rgba(255,77,46,0.10), transparent 60%),
                radial-gradient(30% 40% at 100% 100%, rgba(255,77,46,0.05), transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        .theater-inner {
            position: relative;
            z-index: 1;
            padding: 30px 36px 32px 36px;
            display: grid;
            grid-template-rows: auto 1fr auto;
            gap: 28px;
            min-height: 560px;
        }
        @media (max-width: 980px) {
            .theater-inner { padding: 22px; min-height: 520px; gap: 20px; }
        }

        /* Topbar : persona left + live + timer right */
        .theater-topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
        }
        .theater-persona {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .theater-persona .ava {
            position: relative;
            width: 48px; height: 48px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .theater-persona .ava::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 1.5px solid var(--signal);
            opacity: 0.4;
            animation: pulse-soft var(--pulse-rhythm) ease-in-out infinite;
        }
        .theater-persona .ava .live-dot {
            position: absolute;
            bottom: 0; right: 0;
            width: 12px; height: 12px;
            border-radius: 50%;
            background: var(--signal);
            border: 2px solid #0a0a0b;
            box-shadow: 0 0 8px var(--signal);
        }
        .theater-persona .meta {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .theater-persona .meta .n {
            font: 700 15px/1.1 var(--sans);
            letter-spacing: -0.01em;
        }
        .theater-persona .meta .r {
            font: 500 10px/1 var(--mono);
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }
        .theater-persona .meta .r .sep {
            display: inline-block;
            width: 3px; height: 3px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            margin: 0 6px;
            vertical-align: middle;
        }

        .theater-status {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .theater-live-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 12px;
            background: rgba(255,77,46,0.14);
            border: 1px solid rgba(255,77,46,0.4);
            border-radius: 999px;
            font: 700 9px/1 var(--mono);
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.16em;
        }
        .theater-live-pill .d {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 8px var(--signal);
            animation: pulse-soft var(--pulse-rhythm) ease-in-out infinite;
        }
        .theater-stage.is-idle .theater-live-pill {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.14);
            color: rgba(255,255,255,0.5);
        }
        .theater-stage.is-idle .theater-live-pill .d {
            background: rgba(255,255,255,0.4);
            box-shadow: none;
            animation: none;
        }
        .theater-timer {
            font: 700 22px/1 var(--mono);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.015em;
            color: #fff;
            min-width: 78px;
            text-align: right;
        }
        .theater-timer .sep { color: rgba(255,255,255,0.4); margin: 0 2px; }
        .theater-stage.is-idle .theater-timer { color: rgba(255,255,255,0.45); }

        /* Middle zone : waveform + transcript stacked */
        .theater-middle {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
            gap: 28px;
            align-items: start;
            min-height: 360px;
        }
        @media (max-width: 980px) {
            .theater-middle { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
        }

        /* Transcript column */
        .theater-transcript {
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-height: 280px;
            position: relative;
        }
        .theater-line {
            display: flex;
            gap: 12px;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
            max-width: 92%;
        }
        .theater-line.is-shown { opacity: 1; transform: translateY(0); }
        .theater-line.them {
            align-self: flex-start;
        }
        .theater-line.you {
            align-self: flex-end;
            flex-direction: row-reverse;
        }
        .theater-line .who {
            flex-shrink: 0;
            font: 600 10px/1 var(--mono);
            color: rgba(255,255,255,0.45);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding-top: 14px;
            min-width: 58px;
        }
        .theater-line.you .who { text-align: right; }
        .theater-line.them .who b { color: rgba(255,255,255,0.85); display: block; margin-bottom: 3px; }
        .theater-line .bubble {
            font: 400 14px/1.5 var(--sans);
            letter-spacing: -0.005em;
            color: rgba(255,255,255,0.95);
            padding: 12px 16px;
            border-radius: 14px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .theater-line.them .bubble { border-bottom-left-radius: 4px; }
        .theater-line.you .bubble {
            background: var(--signal);
            border-color: var(--signal);
            color: #fff;
            border-bottom-right-radius: 4px;
        }
        .theater-line .bubble em {
            font-weight: 600;
        }
        .theater-line.you .bubble em { color: rgba(255,255,255,0.95); }

        /* Side panel : insights + waveform */
        .theater-side {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .theater-waveform {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            height: 86px;
            padding: 18px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 14px;
        }
        .theater-waveform i {
            display: block;
            width: 3px;
            background: linear-gradient(180deg, var(--signal), var(--signal-2));
            border-radius: 2px;
            opacity: 0.5;
            transform: scaleY(0.25);
            transform-origin: center;
            transition: transform 220ms ease-out, opacity 220ms ease-out;
        }
        .theater-stage.is-playing .theater-waveform i {
            animation: theater-wave 800ms ease-in-out infinite alternate;
        }
        @keyframes theater-wave {
            from { transform: scaleY(0.25); opacity: 0.4; }
            to   { transform: scaleY(1); opacity: 1; }
        }
        /* Stagger via nth-child since we can't compute easily */
        .theater-waveform i:nth-child(2n)  { animation-delay: 80ms !important; }
        .theater-waveform i:nth-child(3n)  { animation-delay: 160ms !important; }
        .theater-waveform i:nth-child(5n)  { animation-delay: 240ms !important; }
        .theater-waveform i:nth-child(7n)  { animation-delay: 320ms !important; }
        .theater-waveform i:nth-child(11n) { animation-delay: 400ms !important; }

        .theater-insight {
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(255,77,46,0.16), rgba(255,77,46,0.06));
            border: 1px solid rgba(255,77,46,0.32);
            border-radius: 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
        }
        .theater-insight.is-shown {
            opacity: 1;
            transform: translateY(0);
        }
        .theater-insight .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font: 700 9px/1 var(--mono);
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.14em;
        }
        .theater-insight .tag svg { width: 11px; height: 11px; }
        .theater-insight .body {
            font: 400 13px/1.5 var(--sans);
            color: rgba(255,255,255,0.92);
            letter-spacing: -0.005em;
        }
        .theater-insight .body em {
            color: var(--signal);
            font-weight: 500;
        }

        .theater-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .theater-stat {
            padding: 12px 14px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
        }
        .theater-stat .v {
            font: 800 22px/1 var(--sans);
            color: #fff;
            letter-spacing: -0.03em;
            font-variant-numeric: tabular-nums;
        }
        .theater-stat .v em {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255,255,255,0.55);
            font-style: normal;
            margin-left: 1px;
        }
        .theater-stat .k {
            margin-top: 4px;
            font: 500 10px/1 var(--mono);
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        /* Bottom controls bar — progress line + tech tags + replay */
        .theater-controls {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding-top: 22px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        .theater-progress {
            position: relative;
            height: 3px;
            background: rgba(255,255,255,0.06);
            border-radius: 999px;
            overflow: hidden;
        }
        .theater-progress > i {
            display: block;
            position: absolute;
            top: 0; left: 0; bottom: 0;
            width: 0%;
            background: linear-gradient(90deg, var(--signal) 0%, var(--signal-2) 100%);
            border-radius: 999px;
            transition: width 100ms linear;
        }
        .theater-stage.is-done .theater-progress > i { width: 100% !important; }

        .theater-tech {
            display: flex;
            align-items: center;
            gap: 18px;
            font: 500 11px/1 var(--mono);
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .theater-tech b {
            color: #fff;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            margin-right: 4px;
        }
        .theater-tech .sep {
            width: 3px; height: 3px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
        }
        .theater-replay {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 13px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: 999px;
            color: rgba(255,255,255,0.85);
            font: 600 10px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            cursor: pointer;
            margin-left: auto;
            transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 140ms var(--ease-out);
        }
        .theater-replay:hover {
            background: rgba(255,255,255,0.12);
            border-color: rgba(255,255,255,0.28);
            color: #fff;
        }
        .theater-replay:active { transform: scale(0.97); }
        .theater-replay:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
        .theater-replay svg { width: 11px; height: 11px; }
        @media (max-width: 980px) {
            .theater-tech { flex-wrap: wrap; gap: 12px; font-size: 9px; justify-content: center; }
            .theater-replay { margin-left: 0; }
        }

        /* — Final CTA below the stage — */
        .theater-final-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 26px 16px 18px;
            background: var(--ink);
            color: #fff;
            border-radius: 999px;
            font: 700 15px/1 var(--sans);
            letter-spacing: -0.005em;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 18px -6px rgba(10,10,10,0.3);
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition: transform 160ms var(--ease-out);
        }
        .theater-final-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--signal);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 260ms var(--ease-out);
            z-index: -1;
        }
        @media (hover: hover) and (pointer: fine) {
            .theater-final-cta:hover::before { transform: scaleX(1); }
        }
        .theater-final-cta:active { transform: scale(0.97); }
        .theater-final-cta .ico {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            display: grid; place-items: center;
        }
        .theater-final-cta .ico svg { width: 13px; height: 13px; }
        .theater-final-cta .meta {
            padding-left: 14px;
            border-left: 1px solid rgba(255,255,255,0.22);
            font: 500 11px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.78);
        }

        @media (prefers-reduced-motion: reduce) {
            .theater-waveform i,
            .theater-persona .ava::after,
            .theater-live-pill .d { animation: none !important; }
            .theater-line, .theater-insight { opacity: 1 !important; transform: none !important; transition: none !important; }
        }

        @media (prefers-reduced-motion: reduce) {
            .reveal-lines .line,
            .reveal-up,
            .proto-frame,
            .fb-radar .rd-shape,
            .fb-radar .rd-dot,
            .fb-radar .rd-value,
            .compare-wrap .compare tbody tr,
            .fb-turn,
            .fb-ann,
            .fb-ann-tip,
            .fb-skill,
            .fb-priority-tip,
            .fb-skill-bar i,
            .fb-score-ring .ring svg circle.fg {
                opacity: 1 !important;
                transform: none !important;
                stroke-dashoffset: 0 !important;
                transition: none !important;
                width: var(--w, auto) !important;
            }
            .scroll-progress { display: none; }
            .cast-featured.is-playing .ft-audio .pwave i,
            .ls-call .av::after,
            .proto-frame.is-active .ls-wave i { animation: none !important; }
        }

        /* ═══════════════════════════════════════════
           NOTE DU FONDATEUR (#fondateur)
        ═══════════════════════════════════════════ */
        #fondateur {
            padding: var(--section-pad) 0;
            background: var(--bg);
        }
        #fondateur .shell-narrow { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

        .fnd-card {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
            gap: clamp(28px, 4vw, 56px);
            align-items: flex-start;
            padding: clamp(36px, 5vw, 64px);
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 28px;
            box-shadow: 0 30px 80px -40px rgba(0,0,0,0.25);
            isolation: isolate;
        }
        @media (max-width: 760px) {
            .fnd-card { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
        }
        .fnd-card::before {
            content: '“';
            position: absolute;
            top: -10px; right: 22px;
            font: 800 180px/1 var(--sans);
            color: var(--signal);
            opacity: 0.08;
            pointer-events: none;
            user-select: none;
            z-index: 0;
        }

        .fnd-photo-wrap {
            position: relative;
            z-index: 1;
        }
        .fnd-photo {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 22px;
            background-size: cover;
            background-position: center 20%;
            background-color: var(--bg-2);
            box-shadow: 0 20px 50px -20px rgba(0,0,0,0.3);
        }
        .fnd-stamp {
            position: absolute;
            bottom: -14px; left: -14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            background: var(--ink);
            color: #fff;
            border-radius: 999px;
            font: 700 10px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.14em;
            box-shadow: 0 8px 22px -8px rgba(0,0,0,0.4);
        }
        .fnd-stamp .d {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 8px var(--signal);
        }

        .fnd-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 22px;
        }
        .fnd-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font: 700 10px/1 var(--mono);
            color: var(--signal);
            text-transform: uppercase;
            letter-spacing: 0.16em;
        }
        .fnd-eyebrow::before {
            content: '';
            width: 22px; height: 1.5px;
            background: var(--signal);
            display: inline-block;
        }
        .fnd-title {
            font: 800 clamp(26px, 3.4vw, 38px)/1.15 var(--sans);
            color: var(--ink);
            letter-spacing: -0.03em;
            max-width: 24ch;
        }
        .fnd-title em { color: var(--signal); font-weight: 800; }
        .fnd-body {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .fnd-body p {
            font: 400 16px/1.65 var(--sans);
            color: var(--ink-2);
            letter-spacing: -0.005em;
            max-width: 60ch;
        }
        .fnd-body p b { color: var(--ink); font-weight: 600; }
        .fnd-body p em { color: var(--signal); font-weight: 500; }

        .fnd-signature {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 6px;
        }
        .fnd-sig-name {
            font: 800 28px/1 var(--sans);
            letter-spacing: -0.035em;
            color: var(--ink);
            transform: rotate(-3deg) translateY(-2px);
            display: inline-block;
        }
        .fnd-sig-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--rule-2) 0%, transparent 100%);
            max-width: 100px;
        }

        .fnd-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 12px;
        }
        .fnd-action {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 14px;
            background: var(--bg-2);
            border: 1px solid var(--rule);
            border-radius: 999px;
            font: 600 12px/1 var(--sans);
            color: var(--ink-2);
            text-decoration: none;
            transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 140ms var(--ease-out);
        }
        @media (hover: hover) and (pointer: fine) {
            .fnd-action:hover {
                background: var(--bg-3);
                border-color: var(--ink-3);
                color: var(--ink);
            }
        }
        .fnd-action:active { transform: scale(0.97); }
        .fnd-action svg { width: 14px; height: 14px; }
        .fnd-action.linkedin svg { color: #0077B5; }

        /* ═══════════════════════════════════════════
           TÉMOIGNAGES v2 — Tweet Wall masonry (#temoignages)
        ═══════════════════════════════════════════ */
        #temoignages.testi-v2 { padding: var(--section-pad) 0; background: var(--bg-2); }
        #temoignages.testi-v2 .shell-wide { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

        .testi-wall {
            column-count: 3;
            column-gap: 18px;
            margin-top: 8px;
        }
        @media (max-width: 980px) { .testi-wall { column-count: 2; } }
        @media (max-width: 640px) { .testi-wall { column-count: 1; column-gap: 0; } }

        .testi-card {
            break-inside: avoid;
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 22px 22px 20px;
            margin-bottom: 18px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 18px;
            box-shadow: 0 2px 8px -3px rgba(0,0,0,0.05);
            opacity: 0;
            transform: translateY(16px);
            transition:
                transform 220ms var(--ease-out),
                border-color 220ms var(--ease-out),
                box-shadow 220ms var(--ease-out),
                opacity 600ms var(--ease-out);
        }
        .testi-wall.is-in .testi-card {
            opacity: 1;
            transform: translateY(0);
        }
        .testi-wall.is-in .testi-card:nth-child(1) { transition-delay: 0ms, 0ms, 0ms, 0ms; }
        .testi-wall.is-in .testi-card:nth-child(2) { transition-delay: 0ms, 0ms, 0ms, 60ms; }
        .testi-wall.is-in .testi-card:nth-child(3) { transition-delay: 0ms, 0ms, 0ms, 120ms; }
        .testi-wall.is-in .testi-card:nth-child(4) { transition-delay: 0ms, 0ms, 0ms, 180ms; }
        .testi-wall.is-in .testi-card:nth-child(5) { transition-delay: 0ms, 0ms, 0ms, 240ms; }
        .testi-wall.is-in .testi-card:nth-child(6) { transition-delay: 0ms, 0ms, 0ms, 300ms; }
        .testi-wall.is-in .testi-card:nth-child(7) { transition-delay: 0ms, 0ms, 0ms, 360ms; }
        .testi-wall.is-in .testi-card:nth-child(8) { transition-delay: 0ms, 0ms, 0ms, 420ms; }

        @media (hover: hover) and (pointer: fine) {
            .testi-card:hover {
                transform: translateY(-3px);
                border-color: var(--rule-2);
                box-shadow: 0 18px 36px -16px rgba(0,0,0,0.18);
            }
        }
        .testi-card:focus-within { border-color: var(--ink-3); }

        .testi-head {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .testi-avatar {
            width: 44px; height: 44px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .testi-meta {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
            flex: 1;
        }
        .testi-name {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font: 700 14px/1.1 var(--sans);
            color: var(--ink);
            letter-spacing: -0.01em;
        }
        .testi-name .li {
            display: inline-grid;
            place-items: center;
            width: 14px; height: 14px;
            color: #0077B5;
            flex-shrink: 0;
        }
        .testi-name .li svg { width: 100%; height: 100%; }
        .testi-role {
            font: 500 11px/1.3 var(--mono);
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .testi-stars {
            display: inline-flex;
            gap: 1px;
            flex-shrink: 0;
        }
        .testi-stars svg {
            width: 12px; height: 12px;
            fill: var(--signal);
        }

        .testi-quote {
            font: 500 14.5px/1.55 var(--sans);
            color: var(--ink);
            letter-spacing: -0.005em;
        }
        .testi-quote b { color: var(--ink); font-weight: 700; }
        .testi-quote em {
            color: var(--signal);
            font-weight: 600;
        }

        .testi-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-top: 12px;
            border-top: 1px solid var(--rule);
            margin-top: auto;
        }
        .testi-metric {
            display: inline-flex;
            align-items: baseline;
            gap: 5px;
            font: 500 11px/1 var(--mono);
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .testi-metric b {
            font: 800 16px/1 var(--sans);
            color: var(--signal);
            letter-spacing: -0.02em;
        }
        .testi-date {
            font: 500 10px/1 var(--mono);
            color: var(--ink-4);
            letter-spacing: 0.06em;
        }

        /* Optional accent card (featured visually) */
        .testi-card.accent {
            background: var(--ink);
            color: #fff;
            border-color: var(--ink);
        }
        .testi-card.accent .testi-name { color: #fff; }
        .testi-card.accent .testi-name .li { color: #4DA8E0; }
        .testi-card.accent .testi-role { color: rgba(255,255,255,0.55); }
        .testi-card.accent .testi-quote { color: #fff; }
        .testi-card.accent .testi-quote em { color: var(--signal); }
        .testi-card.accent .testi-foot { border-top-color: rgba(255,255,255,0.12); }
        .testi-card.accent .testi-metric { color: rgba(255,255,255,0.55); }
        .testi-card.accent .testi-date { color: rgba(255,255,255,0.4); }

        /* Bottom CTA strip below the wall */
        .testi-bottom-strip {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 24px;
            margin-top: 40px;
            padding: 20px 26px;
            background: var(--bg-3);
            border: 1px solid var(--rule);
            border-radius: 999px;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }
        .testi-bottom-strip .ts-stat {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
            font: 500 12px/1 var(--mono);
            color: var(--ink-3);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .testi-bottom-strip .ts-stat b {
            font: 800 18px/1 var(--sans);
            color: var(--ink);
            letter-spacing: -0.025em;
        }
        .testi-bottom-strip .ts-sep {
            width: 4px; height: 4px;
            border-radius: 50%;
            background: var(--rule-2);
        }
        .testi-bottom-strip a {
            font: 700 13px/1 var(--sans);
            color: var(--signal);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 200ms var(--ease-out);
        }
        .testi-bottom-strip a:hover { border-bottom-color: var(--signal); }

        @media (prefers-reduced-motion: reduce) {
            .testi-card { opacity: 1 !important; transform: none !important; transition: none !important; }
        }

        /* ═══════════════════════════════════════════
           BEFORE / AFTER REVEAL SLIDER (#declic)
        ═══════════════════════════════════════════ */
        #declic {
            padding: var(--section-pad) 0;
            background: var(--bg);
        }
        #declic .shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
        #declic .section-head { text-align: center; margin-bottom: 40px; }

        .ps-wrap {
            --ps-pos: 50%;
            position: relative;
            width: 100%;
            border-radius: 28px;
            overflow: hidden;
            isolation: isolate;
            box-shadow: 0 30px 80px -40px rgba(0,0,0,0.35);
            user-select: none;
            -webkit-user-select: none;
            touch-action: pan-y;
            min-height: 520px;
        }
        @media (max-width: 720px) {
            .ps-wrap { min-height: auto; }
        }

        .ps-layer {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 48px clamp(28px, 4vw, 56px);
            min-height: 520px;
            box-sizing: border-box;
        }
        @media (max-width: 720px) { .ps-layer { padding: 32px 22px; min-height: 440px; } }

        /* BEFORE — base layer, dark, takes full width */
        .ps-before {
            background: linear-gradient(150deg, #15151a 0%, #0A0A0B 100%);
            color: rgba(255,255,255,0.92);
        }
        .ps-before::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(50% 60% at 100% 0%, rgba(120,120,140,0.06), transparent 70%),
                radial-gradient(40% 40% at 0% 100%, rgba(180,60,40,0.05), transparent 70%);
            pointer-events: none;
        }

        /* AFTER — clipped overlay, light bg with orange accents */
        .ps-after {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(140deg, #FFF8F4 0%, #FFEFE8 60%, #FFE3D7 100%);
            color: var(--ink);
            clip-path: inset(0 0 0 var(--ps-pos));
            will-change: clip-path;
        }
        .ps-wrap.is-dragging .ps-after { transition: none; }
        .ps-after::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(55% 60% at 100% 0%, rgba(255,77,46,0.10), transparent 70%),
                radial-gradient(40% 40% at 0% 100%, rgba(255,180,150,0.18), transparent 70%);
            pointer-events: none;
        }

        /* Layer label badge */
        .ps-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            font: 700 10px/1 var(--mono);
            letter-spacing: 0.16em;
            text-transform: uppercase;
            margin-bottom: 26px;
            align-self: flex-start;
        }
        .ps-before .ps-label {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.14);
            color: rgba(255,255,255,0.6);
        }
        .ps-before .ps-label .icon {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #ff5b5b;
            box-shadow: 0 0 6px rgba(255,91,91,0.6);
        }
        .ps-after .ps-label {
            background: rgba(255,77,46,0.12);
            border: 1px solid rgba(255,77,46,0.35);
            color: var(--signal-2);
        }
        .ps-after .ps-label .icon {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--signal);
            box-shadow: 0 0 8px var(--signal);
        }

        /* Layer title */
        .ps-title {
            font: 800 clamp(26px, 3.2vw, 42px)/1.1 var(--sans);
            letter-spacing: -0.03em;
            margin-bottom: 30px;
            max-width: 90%;
        }
        .ps-before .ps-title { color: #fff; }
        .ps-before .ps-title b { color: rgba(255,255,255,0.55); font-weight: 800; }
        .ps-after .ps-title { color: var(--ink); }
        .ps-after .ps-title b { color: var(--signal); font-weight: 800; }

        /* Bullet list */
        .ps-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 0; margin: 0;
        }
        .ps-list li {
            display: grid;
            grid-template-columns: 28px 1fr;
            gap: 14px;
            align-items: flex-start;
            font: 500 15px/1.5 var(--sans);
            letter-spacing: -0.005em;
        }
        .ps-list li .ico {
            width: 24px; height: 24px;
            border-radius: 50%;
            display: grid; place-items: center;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .ps-list li .ico svg { width: 12px; height: 12px; }
        .ps-list li b { font-weight: 700; }

        .ps-before .ps-list li {
            color: rgba(255,255,255,0.78);
        }
        .ps-before .ps-list li .ico {
            background: rgba(255,91,91,0.14);
            color: #ff7878;
        }
        .ps-before .ps-list li b { color: #fff; }

        .ps-after .ps-list li {
            color: var(--ink-2);
        }
        .ps-after .ps-list li .ico {
            background: rgba(255,77,46,0.14);
            color: var(--signal);
        }
        .ps-after .ps-list li b { color: var(--ink); }

        /* Layer footer stat */
        .ps-stat {
            margin-top: auto;
            padding-top: 26px;
            display: flex;
            align-items: baseline;
            gap: 10px;
        }
        .ps-stat .v {
            font: 800 36px/1 var(--sans);
            letter-spacing: -0.04em;
            font-variant-numeric: tabular-nums;
        }
        .ps-stat .k {
            font: 600 11px/1.2 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            max-width: 200px;
        }
        .ps-before .ps-stat .v { color: rgba(255,255,255,0.95); }
        .ps-before .ps-stat .k { color: rgba(255,255,255,0.5); }
        .ps-after .ps-stat .v { color: var(--signal); }
        .ps-after .ps-stat .k { color: var(--ink-3); }

        /* DRAGGABLE HANDLE — divider line + grip */
        .ps-handle {
            position: absolute;
            top: 0; bottom: 0;
            left: var(--ps-pos);
            width: 4px;
            background: var(--signal);
            transform: translateX(-50%);
            cursor: ew-resize;
            z-index: 10;
            box-shadow: 0 0 24px rgba(255,77,46,0.5);
            transition: background 220ms var(--ease-out);
        }
        .ps-handle:focus-visible {
            outline: none;
            background: var(--signal-2);
            box-shadow: 0 0 32px rgba(255,77,46,0.85);
        }
        .ps-handle::before {
            content: '';
            position: absolute;
            inset: -20px -20px;
            cursor: ew-resize;
        }
        .ps-handle-grip {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--signal);
            color: #fff;
            transform: translate(-50%, -50%);
            display: grid;
            place-items: center;
            box-shadow:
                0 0 0 6px rgba(255,255,255,0.95),
                0 8px 30px -8px rgba(255,77,46,0.65),
                0 0 0 7px rgba(255,77,46,0.25);
            transition: transform 240ms var(--ease-out);
        }
        .ps-handle-grip svg {
            width: 22px; height: 22px;
        }
        @media (hover: hover) and (pointer: fine) {
            .ps-wrap:hover .ps-handle-grip {
                transform: translate(-50%, -50%) scale(1.06);
            }
        }
        .ps-wrap.is-dragging .ps-handle-grip {
            transform: translate(-50%, -50%) scale(1.12);
        }
        .ps-handle-hint {
            position: absolute;
            top: -36px;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px 11px;
            background: var(--ink);
            color: #fff;
            border-radius: 999px;
            font: 700 9px/1 var(--mono);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            white-space: nowrap;
            opacity: 1;
            transition: opacity 320ms ease;
            pointer-events: none;
        }
        .ps-handle-hint::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            width: 8px; height: 8px;
            background: var(--ink);
            transform: translateX(-50%) rotate(45deg);
        }
        .ps-wrap.is-touched .ps-handle-hint { opacity: 0; }

        /* Subtle pulse on the handle to draw attention before user interacts */
        .ps-handle-grip::after {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid var(--signal);
            animation: ps-pulse 2.2s ease-out infinite;
            pointer-events: none;
        }
        .ps-wrap.is-touched .ps-handle-grip::after { animation: none; opacity: 0; }
        @keyframes ps-pulse {
            0%   { transform: scale(0.85); opacity: 0.9; }
            100% { transform: scale(1.6);  opacity: 0; }
        }

        @media (max-width: 720px) {
            .ps-handle-grip { width: 48px; height: 48px; }
            .ps-handle-grip svg { width: 18px; height: 18px; }
            .ps-handle-hint { font-size: 8px; padding: 4px 9px; }
            .ps-stat .v { font-size: 28px; }
            .ps-title { margin-bottom: 22px; }
            .ps-list li { font-size: 14px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .ps-handle-grip::after { animation: none !important; opacity: 0; }
            .ps-after { transition: none !important; }
        }

/* ════════════════════════════════════════════════════
   PHASE 2 — Solutions dropdown + Sub-nav contextuelle + Footer redesign
   Added 2026-05-27
   ════════════════════════════════════════════════════ */

/* ─── Solutions dropdown (in top nav) ─────────────────────── */
.solutions-dd {
    position: relative;
}
.solutions-dd .solutions-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 180ms var(--ease-out);
    font-family: inherit;
}
.solutions-dd .solutions-trigger svg {
    width: 11px; height: 11px;
    transition: transform 220ms var(--ease-out);
}
.solutions-dd .solutions-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, -6px);
    width: 280px;
    background: var(--bg-3);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 12px 36px -10px rgba(10,10,11,0.18), 0 2px 6px rgba(10,10,11,0.06), 0 0 0 1px rgba(255,255,255,0.6) inset;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
    z-index: 100;
}
.solutions-dd:hover .solutions-menu,
.solutions-dd:focus-within .solutions-menu,
.solutions-dd[data-open="true"] .solutions-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.solutions-dd:hover .solutions-trigger svg,
.solutions-dd[data-open="true"] .solutions-trigger svg {
    transform: rotate(180deg);
}
.solutions-dd .solutions-menu::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    width: 12px; height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--bg-3);
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
.solutions-dd .sol-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 10px;
    transition: background 180ms var(--ease-out);
    text-decoration: none;
}
.solutions-dd .sol-item:hover {
    background: var(--bg-2);
}
.solutions-dd .sol-item .sol-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.solutions-dd .sol-item .sol-name svg {
    width: 12px; height: 12px;
    color: var(--signal);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.solutions-dd .sol-item:hover .sol-name svg {
    opacity: 1;
    transform: translateX(0);
}
.solutions-dd .sol-item .sol-desc {
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.4;
    font-family: var(--mono);
}
/* Désactiver le underline rouge hérité de nav.top .links a sur les items du dropdown */
.solutions-dd .sol-item::after { display: none; content: none; }

/* ─── Sub-nav contextuelle (sticky, sous le hero) ──────────── */
.subnav-wrap {
    position: sticky;
    top: 78px;
    z-index: 40;
    padding: 0 32px;
    margin: -28px auto 0;
    pointer-events: none;
}
.subnav {
    max-width: 1180px;
    margin: 0 auto;
    pointer-events: auto;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-shadow: 0 6px 20px -6px rgba(0,0,0,0.06);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.subnav::-webkit-scrollbar { display: none; }
.subnav.is-active {
    opacity: 1;
    transform: translateY(0);
}
.subnav a {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-3);
    padding: 6px 12px;
    border-radius: 999px;
    transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
    white-space: nowrap;
    font-family: var(--mono);
    letter-spacing: 0.01em;
}
@media (hover: hover) and (pointer: fine) {
    .subnav a:hover { color: var(--ink); background: var(--bg-2); }
}
.subnav a.is-current {
    color: var(--ink);
    background: var(--signal-soft);
}
@media (max-width: 800px) {
    .subnav-wrap { padding: 0 16px; }
    .subnav { padding: 6px 10px; gap: 4px; }
    .subnav a { font-size: 11.5px; padding: 5px 10px; }
}

/* ─── Footer v2 — 4 cols (Brand / Solutions / Ressources / Entreprise+Légal) ─── */
footer.foot .grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
}
@media (max-width: 900px) {
    footer.foot .grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}
@media (max-width: 560px) {
    footer.foot .grid { grid-template-columns: 1fr; }
}

/* ─── Lang switch discret en bas du footer ─────────────────── */
footer.foot .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
footer.foot .lang-switch a {
    color: var(--ink-3);
    padding: 2px 4px;
    transition: color 180ms var(--ease-out);
}
footer.foot .lang-switch a.active {
    color: var(--ink);
    font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
    footer.foot .lang-switch a:hover { color: var(--ink); }
}
footer.foot .lang-switch .sep {
    opacity: 0.4;
}

/* ─── Mobile drawer groups (Solutions, ancres locales) ─────── */
.drawer .nav-links .drawer-group {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule);
}
.drawer .nav-links .drawer-group:last-child { border-bottom: 0; }
.drawer .nav-links .drawer-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 8px 0 12px;
}
.drawer .nav-links .drawer-group a {
    border-bottom: 0;
    padding: 12px 0;
}
.drawer .nav-links .drawer-group a:not(:last-child) {
    border-bottom: 1px solid rgba(229, 229, 224, 0.5);
}
.drawer .nav-links .drawer-group a b {
    font-weight: 700;
    color: var(--ink);
}

/* ════════════════════════════════════════════════════
   PHASE 3b — Pain Points (cost cards) + Comment ça marche (4 steps)
   ════════════════════════════════════════════════════ */

.cost-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: var(--head-gap);
}
@media (max-width: 900px) {
    .cost-grid { grid-template-columns: 1fr; gap: 16px; }
}
.cost-card {
    background: var(--bg-3);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 28px 26px;
    transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .cost-card:hover {
        border-color: var(--signal);
        transform: translateY(-3px);
        box-shadow: 0 18px 36px -16px rgba(255,77,46,0.18);
    }
}
.cost-card .cost-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--signal-soft);
    color: var(--signal);
    margin-bottom: 20px;
}
.cost-card .cost-icon svg { width: 22px; height: 22px; }
.cost-card .cost-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}
.cost-card .cost-num {
    font-family: var(--sans);
    font-size: 44px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}
.cost-card .cost-num small {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-3);
    margin-left: 2px;
}
.cost-card .cost-stat-label {
    font: 500 12.5px/1.4 var(--mono);
    color: var(--ink-3);
    letter-spacing: 0.02em;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.cost-card h3 {
    font: 700 18px/1.3 var(--sans);
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.cost-card p {
    font: 400 14px/1.55 var(--sans);
    color: var(--ink-2);
}

.step-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: var(--block-gap) 0;
    border-bottom: 1px solid var(--rule);
}
.step-row:last-child { border-bottom: 0; }
.step-row.step-row-reverse .step-text { order: 2; }
.step-row.step-row-reverse .step-visual { order: 1; }
@media (max-width: 900px) {
    .step-row,
    .step-row.step-row-reverse {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0;
    }
    .step-row.step-row-reverse .step-text,
    .step-row.step-row-reverse .step-visual { order: initial; }
}

.step-text .step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.step-text .step-num {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--ink);
    color: white;
    font: 700 17px/1 var(--sans);
    letter-spacing: -0.02em;
    box-shadow: 0 8px 20px -8px rgba(10,10,11,0.4);
}
.step-text .step-label {
    font: 700 10.5px/1 var(--mono);
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 4px;
}
.step-text .step-sub {
    font: 500 13.5px/1 var(--sans);
    color: var(--ink-3);
}
.step-text h3 {
    font: 700 var(--fs-h2)/1.1 var(--sans);
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    max-width: 540px;
}
.step-text h3 em {
    font-style: normal;
    color: var(--signal);
}
.step-text > p {
    font: 400 15.5px/1.6 var(--sans);
    color: var(--ink-2);
    margin-bottom: 22px;
    max-width: 520px;
}
.step-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.step-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font: 500 14.5px/1.5 var(--sans);
    color: var(--ink);
}
.step-bullets .check {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 7px;
    background: var(--signal-soft);
    color: var(--signal);
    margin-top: 1px;
}
.step-bullets .check svg { width: 13px; height: 13px; }

.step-mockup {
    background: var(--bg-3);
    border: 1px solid var(--rule);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(10,10,11,0.16), 0 2px 8px -2px rgba(10,10,11,0.06);
}
.mockup-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
    background: var(--bg-2);
}
.mockup-dots {
    display: inline-flex;
    gap: 5px;
}
.mockup-dots i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--rule-2);
}
.mockup-dots i:nth-child(1) { background: #FF5F57; }
.mockup-dots i:nth-child(2) { background: #FEBC2E; }
.mockup-dots i:nth-child(3) { background: #28C840; }
.mockup-title {
    font: 600 13px/1 var(--sans);
    color: var(--ink);
    letter-spacing: -0.01em;
    flex: 1;
    text-align: center;
}
.mockup-pill {
    font: 700 10.5px/1 var(--mono);
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--signal-soft);
    color: var(--signal);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mockup-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mockup-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 12px;
}
.mr-avatar {
    width: 32px; height: 32px;
    border-radius: 10px;
}
.mr-name {
    font: 600 13.5px/1.2 var(--sans);
    color: var(--ink);
}
.mr-role {
    font: 500 11.5px/1 var(--mono);
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.mr-pill {
    font: 700 11px/1 var(--mono);
    padding: 4px 8px;
    border-radius: 999px;
}

.step-mockup.mockup-dark {
    background: #0A0A0E;
    border-color: #222226;
    box-shadow: 0 30px 80px -28px rgba(255,77,46,0.18), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.step-mockup.mockup-dark .mockup-head {
    background: #16161A;
    border-bottom-color: #222226;
}
.step-mockup.mockup-dark .mockup-title-dark {
    font: 600 13px/1 var(--mono);
    color: white;
    letter-spacing: 0.04em;
}
.step-mockup.mockup-dark .mockup-sub-dark {
    font: 500 10.5px/1 var(--mono);
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.06em;
}
.step-mockup.mockup-dark .rec-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 12px rgba(255,77,46,0.6);
    animation: rec-pulse 1.5s ease-in-out infinite;
}
@keyframes rec-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.1); }
}
.mockup-cockpit {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #0A0A0E;
}
.cockpit-persona {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}
.cp-avatar {
    width: 40px; height: 40px;
    border-radius: 12px;
}
.cp-name {
    font: 700 14px/1.2 var(--sans);
    color: white;
}
.cp-role {
    font: 500 11px/1 var(--mono);
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.cockpit-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
}
.cockpit-wave i {
    width: 3px;
    height: var(--h, 12px);
    background: linear-gradient(180deg, var(--signal) 0%, #B83216 100%);
    border-radius: 2px;
    animation: cockpit-wave-pulse 1.2s ease-in-out infinite;
}
.cockpit-wave i:nth-child(1) { animation-delay: 0s; }
.cockpit-wave i:nth-child(2) { animation-delay: 0.08s; }
.cockpit-wave i:nth-child(3) { animation-delay: 0.16s; }
.cockpit-wave i:nth-child(4) { animation-delay: 0.24s; }
.cockpit-wave i:nth-child(5) { animation-delay: 0.32s; }
.cockpit-wave i:nth-child(6) { animation-delay: 0.40s; }
.cockpit-wave i:nth-child(7) { animation-delay: 0.48s; }
.cockpit-wave i:nth-child(8) { animation-delay: 0.56s; }
.cockpit-wave i:nth-child(9) { animation-delay: 0.64s; }
@keyframes cockpit-wave-pulse {
    0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
    50% { transform: scaleY(1.4); opacity: 1; }
}
.cockpit-controls {
    display: flex;
    gap: 12px;
    margin: 4px 0;
}
.cc-btn {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: white;
    border: 1px solid rgba(255,255,255,0.08);
}
.cc-btn svg { width: 16px; height: 16px; }
.cc-btn.cc-hangup {
    background: var(--signal);
    border-color: var(--signal);
}
.cockpit-transcript {
    width: 100%;
    margin-top: 8px;
}
.ct-prospect {
    font: 500 12px/1.45 var(--sans);
    color: rgba(255,255,255,0.85);
    padding: 8px 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 6px;
}
.ct-user {
    font: 500 12px/1.45 var(--sans);
    color: rgba(255,255,255,0.6);
    padding: 8px 12px;
    background: rgba(255,77,46,0.10);
    border: 1px solid rgba(255,77,46,0.25);
    border-radius: 10px;
}

.mockup-skills {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.skill {
    display: grid;
    grid-template-columns: 90px 1fr 36px;
    align-items: center;
    gap: 12px;
}
.sk-label {
    font: 500 12.5px/1 var(--sans);
    color: var(--ink-2);
}
.sk-track {
    height: 6px;
    background: var(--bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.sk-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3FCB7C 0%, #16A34A 100%);
    border-radius: 999px;
}
.sk-val {
    font: 700 13px/1 var(--mono);
    color: var(--ink);
    text-align: right;
}
.mockup-tip {
    margin: 0 18px 18px;
    padding: 12px 14px;
    background: var(--signal-soft);
    border-left: 3px solid var(--signal);
    border-radius: 8px;
    font: 400 12.5px/1.5 var(--sans);
    color: var(--ink);
}
.mockup-tip strong { color: var(--signal); font-weight: 700; }

.mockup-team {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.team-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 12px;
}
.tr-avatar {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: white;
    font: 700 12.5px/1 var(--sans);
    letter-spacing: 0.04em;
}
.tr-info { display: flex; flex-direction: column; gap: 3px; }
.tr-name { font: 600 13px/1.2 var(--sans); color: var(--ink); }
.tr-tag { font: 500 11px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.03em; }
.tr-score {
    font: 700 18px/1 var(--sans);
    padding: 6px 10px;
    border-radius: 8px;
    letter-spacing: -0.02em;
}
.tr-score.score-high { background: #DCFCE7; color: #16A34A; }
.tr-score.score-mid  { background: #FFEDD5; color: #C2410C; }
.tr-score.score-low  { background: #FEE2E2; color: #DC2626; }

/* ════════════════════════════════════════════════════
   PHASE 3c — Scenarios grid + Demo form (mid-page)
   ════════════════════════════════════════════════════ */

/* ─── Scenarios catalogue ──────────────────────────────────── */
.scenarios-v1 .scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: var(--head-gap);
}
@media (max-width: 1100px) {
    .scenarios-v1 .scenario-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
    .scenarios-v1 .scenario-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 520px) {
    .scenarios-v1 .scenario-grid { grid-template-columns: 1fr; }
}

.scenario-card {
    position: relative;
    background: var(--bg-3);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 18px 18px 20px;
    transition:
        border-color 240ms var(--ease-out),
        transform 240ms var(--ease-snap),
        box-shadow 240ms var(--ease-out);
    overflow: hidden;
}
.scenario-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,77,46,0) 0%, rgba(255,77,46,0.04) 100%);
    opacity: 0;
    transition: opacity 240ms var(--ease-out);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .scenario-card:hover {
        border-color: var(--signal);
        transform: translateY(-2px);
        box-shadow: 0 14px 32px -12px rgba(255,77,46,0.18);
    }
    .scenario-card:hover::before { opacity: 1; }
    .scenario-card:hover .sc-arrow { opacity: 1; transform: translateX(0); }
}

.sc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}
.sc-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 10.5px/1 var(--mono);
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sc-type svg { width: 13px; height: 13px; }
.sc-diff {
    font: 700 11px/1 var(--mono);
    padding: 4px 7px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.sc-diff.diff-1, .sc-diff.diff-2 { background: #DCFCE7; color: #16A34A; }
.sc-diff.diff-3 { background: #FFEDD5; color: #C2410C; }
.sc-diff.diff-4, .sc-diff.diff-5 { background: #FEE2E2; color: #DC2626; }

.sc-name {
    font: 700 16px/1.2 var(--sans);
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}
.sc-role {
    font: 500 11.5px/1.3 var(--mono);
    color: var(--ink-3);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.sc-mission {
    font: 400 13px/1.5 var(--sans);
    color: var(--ink-2);
}

.scenario-foot {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: var(--bg-3);
    border: 1px dashed var(--rule-2);
    border-radius: 16px;
}
.scenario-foot .sf-pill {
    font: 700 12px/1 var(--mono);
    padding: 8px 12px;
    background: var(--signal-soft);
    color: var(--signal);
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.scenario-foot .sf-text {
    font: 400 14px/1.5 var(--sans);
    color: var(--ink-2);
    flex: 1;
}
@media (max-width: 600px) {
    .scenario-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ─── Demo form section ────────────────────────────────────── */
.demo-section .demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 900px) {
    .demo-section .demo-grid { grid-template-columns: 1fr; gap: 32px; }
}

.demo-info .eyebrow {
    font: 700 11px/1 var(--mono);
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 16px;
}
.demo-info h2 {
    font: 700 var(--fs-h2)/1.1 var(--sans);
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.demo-info h2 em {
    font-style: normal;
    color: var(--signal);
}
.demo-info .demo-lede {
    font: 400 16px/1.6 var(--sans);
    color: var(--ink-2);
    margin-bottom: 32px;
    max-width: 480px;
}

.demo-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 600px) {
    .demo-features { grid-template-columns: 1fr; }
}
.df-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.df-item .df-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--signal-soft);
    color: var(--signal);
}
.df-item .df-ico svg { width: 18px; height: 18px; }
.df-item .df-title {
    font: 600 13.5px/1.2 var(--sans);
    color: var(--ink);
    margin-bottom: 3px;
}
.df-item .df-sub {
    font: 400 12px/1.4 var(--sans);
    color: var(--ink-3);
}

/* ─── Demo card (formulaire) ───────────────────────────────── */
.demo-card {
    position: sticky;
    top: 100px;
    background: var(--bg-3);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 24px 60px -24px rgba(10,10,11,0.18), 0 0 0 1px rgba(255,255,255,0.6) inset;
}
@media (max-width: 900px) {
    .demo-card { position: relative; top: 0; padding: 24px; }
}

.demo-card-head h3 {
    font: 700 22px/1.2 var(--sans);
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.demo-card-head p {
    font: 500 12.5px/1.4 var(--mono);
    color: var(--ink-3);
    letter-spacing: 0.02em;
    margin-bottom: 28px;
}

.demo-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-row {
    display: grid;
    gap: 14px;
}
.form-row-2 {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 500px) {
    .form-row-2 { grid-template-columns: 1fr; }
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-label {
    font: 600 12px/1 var(--sans);
    color: var(--ink-2);
    letter-spacing: -0.005em;
}
.form-field input,
.form-field select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--rule);
    background: var(--bg);
    border-radius: 10px;
    font: 400 14px/1.4 var(--sans);
    color: var(--ink);
    transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}
.form-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 38px;
    cursor: pointer;
}
.form-field input::placeholder {
    color: var(--ink-4);
}
.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--signal);
    background: var(--bg-3);
    box-shadow: 0 0 0 3px rgba(255,77,46,0.12);
}
.form-field input:hover:not(:focus),
.form-field select:hover:not(:focus) {
    border-color: var(--rule-2);
}

.form-submit {
    margin-top: 10px;
    padding: 14px 22px;
    border: none;
    border-radius: 12px;
    background: var(--ink);
    color: white;
    font: 600 15px/1 var(--sans);
    letter-spacing: -0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 200ms var(--ease-out), transform 160ms var(--ease-snap), box-shadow 200ms var(--ease-out);
    box-shadow: 0 6px 14px -4px rgba(10,10,11,0.25);
}
.form-submit svg {
    width: 16px; height: 16px;
    transition: transform 200ms var(--ease-out);
}
.form-submit:hover {
    background: var(--signal);
    box-shadow: 0 10px 22px -6px rgba(255,77,46,0.36);
}
.form-submit:hover svg {
    transform: translateX(3px);
}
.form-submit:active { transform: var(--press); }
.form-submit:disabled {
    background: var(--ink-4);
    cursor: not-allowed;
    box-shadow: none;
}

.form-status {
    min-height: 0;
    font: 500 13px/1.5 var(--sans);
    text-align: center;
    transition: min-height 200ms var(--ease-out), color 200ms var(--ease-out);
}
.form-status.is-success {
    color: #16A34A;
    min-height: 24px;
}
.form-status.is-error {
    color: #DC2626;
    min-height: 24px;
}

.demo-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}
.demo-card-foot span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 500 11px/1 var(--mono);
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.demo-card-foot span svg {
    width: 13px; height: 13px;
    color: var(--signal);
}

/* ═══════════════════════════════════════════════════ */
/* PHASE 3D — LE MOTEUR (Fonctionnalités bento)        */
/* ═══════════════════════════════════════════════════ */

.engine {
    background: var(--bg);
}

/* Hero grid : 2 large cards side-by-side */
.fn-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 880px) {
    .fn-hero-grid { grid-template-columns: 1fr; }
}

/* Taap-style minimal premium */
.fn-hero-card {
    background: #FBFBFB;
    border: none;
    border-radius: 16px;
    padding: 28px;
    transition: background 220ms ease, transform 220ms ease;
    display: flex;
    flex-direction: column;
}
@media (hover: hover) and (pointer: fine) {
    .fn-hero-card:hover {
        background: #F7F6F2;
        transform: translateY(-2px);
    }
}

.fn-hero-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.fn-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #F1F0EA;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fn-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}
.fn-hero-title {
    font: 600 17px/1.3 var(--sans);
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0;
}
.fn-hero-desc {
    font: 400 14.5px/1.55 var(--sans);
    color: var(--ink-3);
    margin: 0 0 22px;
}
.fn-hero-desc b {
    color: var(--ink);
    font-weight: 600;
}

/* Manager mockup — equipe scores */
.fn-mockup-mgr {
    background: var(--bg-2);
    border: none;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 22px;
}
.fnm-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.fnm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-4);
}
.fnm-dot:nth-child(1) { background: #FF5F57; }
.fnm-dot:nth-child(2) { background: #FEBC2E; }
.fnm-dot:nth-child(3) { background: #28C840; }
.fnm-title {
    margin-left: 10px;
    font: 600 12px/1 var(--mono);
    color: var(--ink-3);
    letter-spacing: 0.02em;
}
.fnm-row {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}
.fnm-name {
    font: 500 13px/1 var(--sans);
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fnm-bar-wrap {
    height: 6px;
    background: var(--bg-3);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.fnm-bar-fill {
    display: block;
    height: 100%;
    background: var(--ink);
    border-radius: 99px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fnm-score {
    font: 600 12px/1 var(--mono);
    color: var(--ink);
    text-align: right;
}
.fnm-score.fnm-warn {
    color: var(--signal);
}

/* Chip grid (Manager) */
.fn-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: auto;
}
.fn-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
}
.fn-chip svg {
    width: 14px;
    height: 14px;
    color: var(--signal);
    flex-shrink: 0;
}
.fn-chip span {
    font: 500 12.5px/1 var(--sans);
    color: var(--ink-2);
    white-space: nowrap;
}

/* Cycle de vente — animated steps */
.fn-cycle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--bg-2);
    border: none;
    border-radius: 12px;
    margin-bottom: 18px;
}
.fn-cycle-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-3);
    border: 1px solid var(--rule);
    color: var(--ink-3);
    transition: all 280ms ease;
}
.fn-cycle-step svg {
    width: 14px;
    height: 14px;
}
.fn-cycle-step span {
    font: 600 12.5px/1 var(--sans);
    letter-spacing: -0.005em;
}
.fn-cycle-step.is-active {
    background: var(--ink);
    color: var(--bg-3);
    border-color: var(--ink);
}
.fn-cycle-arrow {
    color: var(--ink-4);
    font: 500 14px/1 var(--mono);
    user-select: none;
}

.fn-cycle-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fn-cycle-bullets li {
    position: relative;
    padding: 8px 0 8px 22px;
    font: 400 14px/1.4 var(--sans);
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule);
}
.fn-cycle-bullets li:last-child {
    border-bottom: none;
}
.fn-cycle-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 12px;
    height: 1px;
    background: var(--signal);
}
.fn-cycle-bullets li b {
    color: var(--ink);
    font-weight: 600;
}

/* Mini grid (3 cards) */
.fn-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 760px) {
    .fn-mini-grid { grid-template-columns: 1fr; }
}
.fn-mini-card {
    background: #FBFBFB;
    border: none;
    border-radius: 16px;
    padding: 24px;
    transition: background 220ms ease, transform 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .fn-mini-card:hover {
        background: #F7F6F2;
        transform: translateY(-2px);
    }
}
.fn-mini-card .fn-icon {
    margin-bottom: 16px;
}
.fn-mini-title {
    font: 600 16px/1.3 var(--sans);
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.fn-mini-desc {
    font: 400 13.5px/1.55 var(--sans);
    color: var(--ink-3);
    margin: 0;
}

/* ═══════════════════════════════════════════════════ */
/* PHASE 3D POLISH — Step 1 photos + Manager dashboard */
/* ═══════════════════════════════════════════════════ */

/* Step 1 mockup avatars with photos */
.mr-avatar.mr-photo {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Step 3 & 4 — Override proto-mock-v13 clip-path + sizing (used outside proto-stage-v13 context) */
.step-visual .proto-mock-v13 {
    clip-path: none !important;
    aspect-ratio: auto !important;
    height: auto !important;
}
.step-visual .proto-mock-v13 .pm-body {
    overflow: visible !important;
    height: auto !important;
}
/* Step 3 — fb-sections gérées par JS via .is-shown class (cascade) */

/* ═══════════════════════════════════════════════════════════════════════════
   Pain cards (Taap-style minimal premium — écoles "Le grand écart pédagogique")
   ═══════════════════════════════════════════════════════════════════════════ */
.cost-card.pain-card {
    background: #FBFBFB;
    border: none;
    border-radius: 16px;
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    box-shadow: none;
    transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1), background 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .cost-card.pain-card:hover {
        background: #F7F6F2;
        transform: translateY(-2px);
    }
}

/* Stat row : icon box + stat number on same line */
.cost-card.pain-card .pc-stat-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.cost-card.pain-card .pc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #F1F0EA;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cost-card.pain-card .pc-icon svg {
    width: 20px;
    height: 20px;
}
.cost-card.pain-card .pc-stat-num {
    font: 700 32px/1 var(--sans);
    color: #111827;
    letter-spacing: -0.025em;
    display: inline-flex;
    align-items: flex-start;
}
.cost-card.pain-card .pc-stat-num sup {
    font: 600 14px/1 var(--sans);
    color: var(--ink-3);
    margin-left: 3px;
    margin-top: 4px;
    letter-spacing: 0;
    vertical-align: top;
}

/* Stat label : one-line description */
.cost-card.pain-card .pc-stat-lbl {
    font: 400 14px/1.45 var(--sans);
    color: var(--ink-3);
    margin: 0 0 24px;
    letter-spacing: -0.005em;
}

/* Title + body */
.cost-card.pain-card .pc-title {
    font: 600 17px/1.3 var(--sans);
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0 0 10px;
}
.cost-card.pain-card .pc-body {
    font: 400 14px/1.6 var(--sans);
    color: var(--ink-3);
    margin: 0;
}

/* Step 4 — Manager dashboard reveal animations (ease-out custom, transform+opacity only) */
.js .pmock-manager .pmgr-row {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 480ms cubic-bezier(0.23, 1, 0.32, 1), transform 480ms cubic-bezier(0.23, 1, 0.32, 1);
}
.js .pmock-manager.is-in .pmgr-row { opacity: 1; transform: translateY(0); }
.js .pmock-manager.is-in .pmgr-row:nth-child(1) { transition-delay: 280ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(2) { transition-delay: 340ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(3) { transition-delay: 400ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(4) { transition-delay: 460ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(5) { transition-delay: 520ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(6) { transition-delay: 580ms; }

.js .pmock-manager .ps-bar {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 540ms cubic-bezier(0.23, 1, 0.32, 1);
}
.js .pmock-manager.is-in .ps-bar { transform: scaleY(1); }
.js .pmock-manager.is-in .pmgr-row:nth-child(1) .ps-bar { transition-delay: 480ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(2) .ps-bar { transition-delay: 540ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(3) .ps-bar { transition-delay: 600ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(4) .ps-bar { transition-delay: 660ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(5) .ps-bar { transition-delay: 720ms; }
.js .pmock-manager.is-in .pmgr-row:nth-child(6) .ps-bar { transition-delay: 780ms; }

.js .pmock-manager .pmgr-alert {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1), transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.js .pmock-manager.is-in .pmgr-alert {
    opacity: 1; transform: translateY(0);
    transition-delay: 1000ms;
}

@media (prefers-reduced-motion: reduce) {
    .js .pmock-manager .pmgr-row,
    .js .pmock-manager .ps-bar,
    .js .pmock-manager .pmgr-alert {
        opacity: 1; transform: none; transition: none;
    }
}

/* Step 4 — Manager dashboard rich mockup */
.pmock-manager {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px;
}

.pmgr-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
.pmgr-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pmgr-stat-alert {
    background: rgba(255, 77, 46, 0.10);
    border-color: rgba(255, 77, 46, 0.25);
}
.pms-val {
    font: 700 18px/1 var(--sans);
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
}
.pmgr-stat-alert .pms-val {
    color: #FF7558;
}
.pms-lbl {
    font: 500 10px/1 var(--mono);
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pmgr-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}
.pmgr-tab {
    font: 500 11px/1 var(--sans);
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 10px;
    border-radius: 7px;
    letter-spacing: 0.005em;
}
.pmgr-tab.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.pmgr-table {
    display: flex;
    flex-direction: column;
}
.pmgr-row {
    display: grid;
    grid-template-columns: 32px 1fr 100px 50px 38px;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 200ms ease;
}
.pmgr-row:last-child { border-bottom: none; }
.pmgr-row:hover { background: rgba(255, 255, 255, 0.02); }
.pmgr-row-alert {
    background: rgba(255, 77, 46, 0.04);
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
}
.pmgr-row-alert:hover { background: rgba(255, 77, 46, 0.07); }

.pmgr-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.pmgr-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pmgr-n {
    font: 600 12.5px/1.2 var(--sans);
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pmgr-sub {
    font: 500 10px/1.2 var(--mono);
    color: rgba(255, 255, 255, 0.40);
    letter-spacing: 0.02em;
}

.pmgr-skills {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
}
.ps-bar {
    display: block;
    width: 6px;
    height: var(--h);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.55));
    border-radius: 2px;
}
.ps-bar.warn {
    background: linear-gradient(180deg, rgba(255, 77, 46, 0.55), #FF4D2E);
}

.pmgr-trend {
    font: 600 11px/1 var(--mono);
    text-align: right;
    letter-spacing: 0.02em;
}
.pmgr-up { color: #5BE5A0; }
.pmgr-down { color: #FF7558; }

.pmgr-score {
    font: 700 14px/1 var(--sans);
    text-align: center;
    padding: 6px 0;
    border-radius: 7px;
    letter-spacing: -0.01em;
}
.pmgr-score.score-high {
    background: rgba(91, 229, 160, 0.15);
    color: #5BE5A0;
}
.pmgr-score.score-mid {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
}
.pmgr-score.score-low {
    background: rgba(255, 77, 46, 0.15);
    color: #FF7558;
}

.pmgr-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 77, 46, 0.08);
    border: 1px solid rgba(255, 77, 46, 0.25);
    border-radius: 10px;
    margin-top: 4px;
}
.pmgr-alert > svg {
    width: 18px;
    height: 18px;
    color: #FF7558;
    flex-shrink: 0;
}
.pmgr-alert > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pmgr-alert b {
    font: 600 12px/1.3 var(--sans);
    color: rgba(255, 255, 255, 0.95);
}
.pmgr-alert span {
    font: 400 11px/1.4 var(--sans);
    color: rgba(255, 255, 255, 0.55);
}
.pmgr-alert em {
    color: #FF7558;
    font-style: normal;
    font-weight: 600;
}
.pmgr-cta {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font: 600 11px/1 var(--sans);
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 180ms ease;
}
.pmgr-cta:hover { background: rgba(255, 255, 255, 0.18); }

/* Responsive — collapse to simpler layout */
@media (max-width: 720px) {
    .pmgr-stats { grid-template-columns: repeat(2, 1fr); }
    .pmgr-row { grid-template-columns: 28px 1fr 38px; }
    .pmgr-row .pmgr-skills,
    .pmgr-row .pmgr-trend { display: none; }
    .pmgr-tabs { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════ */
/* PHASE 3E — Trust band + Cross-link                 */
/* ═══════════════════════════════════════════════════ */

/* Demo-info bullets (used in final demo section) */
.demo-bullets {
    list-style: none;
    padding: 0;
    margin: 22px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.demo-bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 14px/1.45 var(--sans);
    color: var(--ink-2);
}
.demo-bullets .b-ico {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--signal-soft);
    color: var(--signal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.demo-bullets .b-ico svg {
    width: 12px;
    height: 12px;
}
.demo-bullets b {
    color: var(--ink);
    font-weight: 600;
}

/* Comparison table (pricing) */
.cmp-wrap {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 16px;
    background: var(--bg-3);
}
.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font: 400 14px/1.5 var(--sans);
    min-width: 720px;
}
.cmp-table thead th {
    text-align: left;
    padding: 18px 18px;
    font: 700 13px/1.2 var(--sans);
    letter-spacing: -0.005em;
    color: var(--ink);
    border-bottom: 2px solid var(--rule);
    background: var(--bg-2);
}
.cmp-table thead th:first-child { font-weight: 600; color: var(--ink-3); }
.cmp-table thead th.cmp-pop {
    color: var(--signal);
    position: relative;
}
.cmp-pop-tag {
    display: block;
    font: 600 9px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal);
    margin-top: 4px;
}
.cmp-table tbody td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
}
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table tbody td:first-child {
    font-weight: 500;
    color: var(--ink);
}
.cmp-table tbody td.cmp-pop {
    background: rgba(255, 77, 46, 0.04);
    color: var(--ink);
    font-weight: 500;
}
.cmp-table tbody td b {
    color: var(--ink);
    font-weight: 600;
}

/* Nav top — lang toggle FR/EN */
.nav-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
    padding: 4px 8px;
    border-radius: 99px;
    background: var(--bg-2);
}
.nav-lang a {
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.04em;
    color: var(--ink-4);
    padding: 4px 6px;
    border-radius: 6px;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease;
}
.nav-lang a:hover {
    color: var(--ink);
}
.nav-lang a.active {
    color: var(--ink);
    background: var(--bg-3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.nav-lang span {
    color: var(--ink-4);
    font: 600 11px/1 var(--mono);
    user-select: none;
}
@media (max-width: 640px) {
    .nav-lang { display: none; }
}

/* Demo info foot tag (sous bullets) */
.demo-foot-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 99px;
    background: var(--bg-2);
    font: 500 12px/1 var(--sans);
    color: var(--ink-3);
}
.demo-foot-tag .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16A34A;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}


/* Trust band (avant Note du fondateur) */
.trust-band {
    background: var(--bg);
    padding: 36px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
    align-items: center;
}
@media (max-width: 880px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 480px) {
    .trust-grid { grid-template-columns: 1fr; }
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.trust-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-2);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.trust-icon svg {
    width: 18px;
    height: 18px;
}
.trust-item > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.trust-title {
    font: 600 13px/1.2 var(--sans);
    color: var(--ink);
    letter-spacing: -0.005em;
}
.trust-sub {
    font: 500 11px/1.2 var(--mono);
    color: var(--ink-3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Cross-link section (vers solo) */
.cross-link {
    padding: 32px 0 56px;
    background: var(--bg);
}
.cl-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: var(--bg-3);
    border: 1px solid var(--rule);
    border-radius: 16px;
    transition: border-color 220ms ease;
}
.cl-card:hover {
    border-color: var(--ink);
}
.cl-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--signal-soft);
    color: var(--signal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cl-icon svg {
    width: 22px;
    height: 22px;
}
.cl-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    min-width: 0;
}
.cl-text b {
    font: 600 15px/1.3 var(--sans);
    color: var(--ink);
    letter-spacing: -0.005em;
}
.cl-text span {
    font: 400 13px/1.4 var(--sans);
    color: var(--ink-3);
}
.cl-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 99px;
    background: var(--ink);
    color: var(--bg-3);
    font: 600 13px/1 var(--sans);
    letter-spacing: -0.005em;
    transition: transform 220ms ease, background 220ms ease;
    flex-shrink: 0;
}
.cl-cta:hover {
    background: var(--signal);
    transform: translateX(2px);
}
.cl-cta svg {
    width: 14px;
    height: 14px;
}
@media (max-width: 640px) {
    .cl-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .cl-cta { width: 100%; justify-content: center; }
}



/* ═══════════════════════════════════════════════════════════════════════
   MOBILE POLISH (≤640px) — fix overflow/clipping on animated sections.
   Mobile-only (max-width gated) — desktop layout untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Live Call Theater : keep topbar + transcript bubbles inside the card ── */
    .theater-inner { padding: 16px 14px; min-height: 0; gap: 16px; }
    .theater-topbar { flex-wrap: wrap; gap: 10px; }
    .theater-persona { min-width: 0; flex: 1 1 auto; gap: 10px; }
    .theater-persona .ava { width: 40px; height: 40px; }
    .theater-persona .meta { min-width: 0; }
    .theater-persona .meta .r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .theater-status { flex-shrink: 0; gap: 10px; }
    .theater-timer { font-size: 16px; min-width: 0; }
    .theater-middle { min-height: 0; }
    .theater-transcript { min-height: 0; }
    .theater-line { max-width: 100%; min-width: 0; gap: 8px; }
    .theater-line .who { min-width: 40px; padding-top: 12px; font-size: 9px; }
    .theater-line .bubble { min-width: 0; font-size: 13px; padding: 10px 12px; }

    /* ── Feedback showcase : force content within viewport, contain orbit rings ── */
    .feedback-show { grid-template-columns: 1fr; }
    .feedback-show .left { min-width: 0; max-width: 100%; }
    .feedback-show .left p.lede2 { max-width: 100%; }
    .fb-orbit-portrait { max-width: 100%; overflow: hidden; }

    /* ── Protocole v13 storyboard : reveal every stage (scroll anim unreliable on
         mobile) + un-clip the mockups so they show in full ── */
    .proto-stage-v13 { min-height: 0; padding: 36px 0; }
    .proto-stage-v13, .proto-stage-v13 * { opacity: 1 !important; }
    .proto-eyebrow, .proto-title, .proto-step-chip,
    .proto-stage-v13 .proto-text-col > *, .proto-mock-v13 { transform: none !important; }
    .proto-mock-v13, .proto-mock-v13 .proto-frame, .proto-frame {
        height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
    }
}

/* ═══ MOBILE v2 (≤640px) — hero title safety + compact theater ═══ */
@media (max-width: 640px) {
    /* Hero title : never stay hidden if the line-reveal animation doesn't fire on mobile */
    .reveal-lines .line { opacity: 1 !important; transform: none !important; }
    /* Generic reveal classes used across the page : force visible on mobile */
    .reveal:not(.in), [data-split-lines] .line { opacity: 1 !important; transform: none !important; }

    /* Live Call Theater : shrink to ~2-3 exchanges, drop decorative side column */
    .theater-side { display: none !important; }
    .theater-middle { grid-template-columns: 1fr !important; min-height: 0; }
    .theater-stage { min-height: 0; }
    .theater-transcript { min-height: 0 !important; gap: 10px; }
    .theater-transcript .theater-line:nth-child(n+5) { display: none !important; }
    .theater-stats { gap: 16px; }
    .theater-stat .v { font-size: 22px; }

    /* Protocole mockups : full width on mobile */
    .proto-mock-v13, .proto-frame { width: 100% !important; max-width: 100% !important; }
}

/* ═══ MOBILE v2 — theater bubble tightening (prevent right-edge clip) ═══ */
@media (max-width: 640px) {
    .theater-inner { padding: 14px 12px; }
    .theater-line { gap: 7px; }
    .theater-line .who { min-width: 32px; font-size: 8px; }
    .theater-line .bubble { font-size: 12.5px; padding: 9px 11px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

/* ═══ MOBILE v2 — theater final polish (breathing room + wrap tech line) ═══ */
@media (max-width: 640px) {
    .theater-transcript { padding-right: 6px; }
    .theater-line { max-width: 95%; }
    .theater-line.you { max-width: 90%; }
    .theater-tech { flex-wrap: wrap !important; justify-content: center; gap: 6px 12px; font-size: 8px; text-align: center; }
}

/* ═══ MOBILE v3 — protocole mockups : the real fix ═══
   Desktop uses a fixed aspect-ratio + clip-path scroll-reveal on .proto-mock-v13.
   On mobile that (a) clips tall content and (b) hides the mock entirely if the
   reveal class never fires. Force natural height + always-visible. ═══ */
@media (max-width: 640px) {
    .proto-mock-v13 {
        aspect-ratio: auto !important;
        height: auto !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
    .proto-mock-v13 .pm-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ═══ MOBILE v3.1 — protocole mock chrome+body back to normal flow ═══
   pm-chrome/pm-body are position:absolute to fill the desktop aspect-ratio box.
   With aspect-ratio removed on mobile the mock collapses to 0; put them in flow
   so the mock height grows to the content. ═══ */
@media (max-width: 640px) {
    .proto-mock-v13 .pm-chrome,
    .proto-mock-v13 .pm-body {
        position: static !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    }
    .proto-mock-v13 .pm-body { height: auto !important; min-height: 0 !important; overflow: visible !important; }
}