/* ═══════════════════════════════════════════════════════════
   VISIR CyberSuite — Theme v2.0
   Design System & Global Styles
═══════════════════════════════════════════════════════════ */
:root {
    --bg: #05070B;
    --text: #F2F4F8;
    --text-dim: #9AA3B5;
    --text-faint: #6B738A;
    --accent: #3B76ED;
    --accent-2: #7AA3F5;
    --accent-soft: rgba(59,118,237,0.18);
    --accent-strong: #2F60D6;
    --accent-deep: #23489f;
    --ok: #2FB673;
    --ok-soft: rgba(47,182,115,0.16);
    --warn: #E2A63B;
    --warn-soft: rgba(226,166,59,0.17);
    --crit: #E8556B;
    --crit-soft: rgba(232,85,107,0.17);
    --surface: rgba(255,255,255,0.045);
    --surface-2: rgba(255,255,255,0.075);
    --surface-3: rgba(255,255,255,0.115);
    --border: rgba(255,255,255,0.09);
    --border-strong: rgba(255,255,255,0.2);
    --font-display: 'Sora', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --blur: blur(34px) saturate(180%);
    --blur-sm: blur(20px) saturate(160%);
    --radius: 20px;
    --radius-sm: 13px;
    --glass-shadow: 0 12px 34px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
}

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--font-body); -webkit-font-smoothing: antialiased;
    line-height: 1.6; overflow-x: hidden;
    background-image:
        radial-gradient(1100px 780px at 8% -8%, rgba(59,118,237,.2), transparent 58%),
        radial-gradient(900px 700px at 102% 6%, rgba(47,182,115,.12), transparent 55%);
    background-attachment: fixed;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; }
a { text-decoration: none; color: inherit; transition: color .2s; }
img { max-width: 100%; }

/* Ghost content widths */
.kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin-left: calc(50% - 42.5vw); margin-right: calc(50% - 42.5vw); }
.kg-width-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.kg-width-wide img, .kg-width-full img { width: 100%; height: auto; border-radius: var(--radius); }

/* Flag */
.flag { display: inline-flex; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); flex-shrink: 0; vertical-align: middle; }
.flag span { flex: 1; height: 100%; }


/* ═══════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════ */
.site-nav {
    position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 1000;
    background: rgba(5, 7, 11, 0.6); backdrop-filter: var(--blur);
    border-bottom: 1px solid transparent;
    transition: all .35s ease;
}
.site-nav.is-scrolled {
    height: 56px; background: rgba(5, 7, 11, 0.92);
    border-bottom-color: var(--border);
}
.nav-inner {
    max-width: 1300px; margin: 0 auto; height: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px;
}
.nav-brand {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.nav-logo {
    width: 36px; height: 36px;
    animation: visirBreathe 2.4s ease-in-out infinite;
    transform-origin: center;
}
.site-nav.is-scrolled .nav-logo { width: 28px; height: 28px; }
.nav-wordmark {
    font-family: var(--font-display); font-weight: 800; font-size: 20px;
    letter-spacing: 0.15em; color: #fff;
    text-shadow: 0 2px 12px rgba(59, 118, 237, 0.35);
}
.nav-links {
    display: flex; align-items: center; gap: 8px;
}
.nav-link {
    font-size: 13px; font-weight: 500; color: var(--text-dim);
    padding: 6px 14px; border-radius: 999px;
    transition: all .2s;
}
.nav-link:hover { color: #fff; background: var(--surface); }
.nav-burger {
    display: none; background: none; border: none; cursor: pointer;
    width: 32px; height: 24px; position: relative; padding: 0;
}
.nav-burger span {
    display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px;
    position: absolute; left: 0; transition: all .3s;
}
.nav-burger span:nth-child(1) { top: 2px; }
.nav-burger span:nth-child(2) { top: 11px; }
.nav-burger span:nth-child(3) { top: 20px; }
.nav-burger.is-open span:nth-child(1) { transform: rotate(45deg); top: 11px; }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: rotate(-45deg); top: 11px; }

@keyframes visirBreathe {
    0%, 100% { opacity: .85; transform: scale(.96); filter: drop-shadow(0 0 0 rgba(59,118,237,0)); }
    50% { opacity: 1; transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(59,118,237,.75)); }
}


/* ═══════════════════════════════════════════════════════════
   SHARED: Section Layout
═══════════════════════════════════════════════════════════ */
.section-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-head { text-align: center; max-width: 750px; margin: 0 auto 4rem; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 1rem; }
.section-sub { color: var(--text-dim); font-size: 1.1rem; line-height: 1.6; }
.pill {
    display: inline-block; background: rgba(59,118,237,0.1); color: var(--accent-2);
    border: 1px solid rgba(59,118,237,0.3); padding: 0.3rem 1rem; border-radius: 50px;
    font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em;
    margin-bottom: 1rem;
}


/* ═══════════════════════════════════════════════════════════
   HERO — Cinematic
═══════════════════════════════════════════════════════════ */
.vs-hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 180px 24px 100px;
    overflow: hidden;
    background: #000;
}

/* Cinematic Video Background */
.hero-video-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    overflow: hidden;
}
.hero-video {
    width: 100vw; height: 100vh;
    object-fit: cover;
    opacity: 0.35; /* Keep it dark so text pops */
    transform: scale(1.05); /* Slight zoom to hide edges during parallax */
    animation: slowPan 40s linear alternate infinite;
}
.hero-vignette {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Assombrit les bords pour garder le titre lisible, et fond le bas du hero
       dans la section suivante. Volontairement plus douce que pour une vidéo :
       le fond en canvas est déjà sombre, une vignette trop appuyée l'effacerait. */
    background: radial-gradient(ellipse 78% 68% at center 44%, transparent 34%, rgba(5,7,11,0.52) 100%),
                linear-gradient(to bottom, transparent 0%, rgba(5,7,11,0.3) 70%, rgba(5,7,11,1) 100%);
    z-index: 1;
    pointer-events: none;
}

@keyframes slowPan {
    from { transform: scale(1.05) translate(0, 0); }
    to { transform: scale(1.1) translate(-1%, -1%); }
}
.hero-grid {
    position: absolute; inset: 0; will-change: transform;
    background-image:
        linear-gradient(rgba(59,118,237,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,118,237,0.07) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
    animation: gridPulse 8s ease-in-out infinite;
}
.hero-glow {
    position: absolute; width: 1100px; height: 1100px; top: -300px; left: 50%;
    transform: translateX(-50%); pointer-events: none; will-change: transform;
    background: radial-gradient(circle, rgba(59,118,237,0.15) 0%, rgba(59,118,237,0.04) 40%, transparent 65%);
    animation: glowBreathe 6s ease-in-out infinite;
}
@keyframes glowBreathe { 0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }

.hero-inner { position: relative; z-index: 2; max-width: 850px; }

/* Staggered cinematic entrance */
.hero-inner .pill { animation: heroFadeUp .9s cubic-bezier(.16,1,.3,1) .1s both; }
.hero-title { animation: heroFadeUp 1s cubic-bezier(.16,1,.3,1) .25s both; }
.hero-sub { animation: heroFadeUp 1s cubic-bezier(.16,1,.3,1) .45s both; }
.hero-btns { animation: heroFadeUp .9s cubic-bezier(.16,1,.3,1) .65s both; }
.trust-bar { animation: heroFadeUp .9s cubic-bezier(.16,1,.3,1) .85s both; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(40px) scale(0.97); filter: blur(10px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.hero-title {
    font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 800; color: #fff;
    line-height: 1.05; margin: 24px 0;
}
.hero-sub {
    font-size: clamp(1rem, 2.5vw, 1.3rem); color: var(--text-dim);
    line-height: 1.6; max-width: 700px; margin: 0 auto 40px;
}
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-pill {
    display: inline-flex; align-items: center; font-size: 14px; font-weight: 600;
    padding: 14px 28px; border-radius: 999px; transition: all .3s; cursor: pointer;
    border: 1px solid transparent; text-decoration: none;
}
.btn-accent-pill {
    background: var(--accent); color: #fff;
    box-shadow: 0 4px 20px rgba(59,118,237,.3);
}
.btn-accent-pill:hover { background: #4c81ef; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(59,118,237,.4); }
.btn-ghost-pill {
    background: rgba(255,255,255,0.04); border-color: var(--border-strong); color: #fff;
}
.btn-ghost-pill:hover { background: rgba(255,255,255,0.08); }

@keyframes gridPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }


/* ═══════════════════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════════════════ */
.trust-bar {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 28px; margin-top: 56px; padding: 14px 36px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px; backdrop-filter: var(--blur);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.trust-item {
    display: flex; align-items: center; gap: 10px; font-size: 13px;
    font-weight: 600; color: var(--text-dim);
}
.trust-item b { color: #fff; }
.trust-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.1); }
.trust-anssi {
    height: 28px !important; width: auto !important;
    background: #fff; padding: 2px; border-radius: 5px;
}


/* ═══════════════════════════════════════════════════════════
   OVERVIEW — Counters & Pillars
═══════════════════════════════════════════════════════════ */
.vs-overview { padding: 120px 0 80px; }
.counter-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    margin-bottom: 80px;
}
.counter-box {
    text-align: center; padding: 32px 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); backdrop-filter: var(--blur-sm);
}
.counter-num {
    font-family: var(--font-display); font-size: 3rem; font-weight: 800;
    color: #fff; line-height: 1; margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.counter-val { color: var(--accent-2); }
.counter-sfx { font-size: 1.2rem; color: var(--text-faint); margin-left: 4px; }
.counter-lbl { font-size: 13px; color: var(--text-dim); font-weight: 500; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar {
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(18,44,92,0.2) 0%, rgba(5,7,11,0.5) 100%);
    border: 1px solid rgba(59,118,237,0.15); border-radius: var(--radius);
    backdrop-filter: var(--blur-sm); transition: all .3s;
}
.pillar:hover { border-color: rgba(59,118,237,0.5); transform: translateY(-4px); }
.pillar-ico {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 1.5rem;
    color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.pillar h3 { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: .7rem; }
.pillar p { color: var(--text-dim); font-size: .95rem; line-height: 1.7; }


/* ═══════════════════════════════════════════════════════════
   DEMO SECTION
═══════════════════════════════════════════════════════════ */
.vs-demo { padding: 80px 0 100px; }
.demo-wrapper { max-width: 1200px; margin: 0 auto; }

.visir-demo-app {
    --bg:#05070B; --sidebar: rgba(9,12,19,0.55); --surface: rgba(255,255,255,0.045);
    --surface-2: rgba(255,255,255,0.075); --surface-3: rgba(255,255,255,0.115);
    --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.2);
    --text:#F2F4F8; --text-dim:#9AA3B5; --text-faint:#6B738A;
    --accent:#3B76ED; --accent-2:#7AA3F5; --accent-soft: rgba(59,118,237,0.18);
    --accent-rgb:59,118,237; --accent-strong:#2F60D6; --accent-deep:#23489f;
    --ok:#2FB673; --ok-soft: rgba(47,182,115,0.16);
    --warn:#E2A63B; --warn-soft: rgba(226,166,59,0.17);
    --crit:#E8556B; --crit-soft: rgba(232,85,107,0.17);
    --font-mono:'IBM Plex Mono', monospace;
    --radius-card:20px; --radius-chip:999px; --radius-ctrl:13px;
    --blur-sm: blur(20px) saturate(160%);
    --glass-shadow: 0 12px 34px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);

    position: relative; width: 100%; height: 780px;
    background: var(--bg); color: var(--text); font-size: 14px; text-align: left; line-height: 1.5;
    border-radius: var(--radius); border: 1px solid var(--border-strong);
    box-shadow: 0 30px 80px -20px rgba(59,118,237,.2), 0 0 0 1px rgba(59,118,237,.08);
    display: flex; flex-direction: column; overflow: hidden;
}
.visir-demo-app * { box-sizing: border-box; }
:is(.visir-demo-app, .sp-app) h1, :is(.visir-demo-app, .sp-app) h2, :is(.visir-demo-app, .sp-app) h3, :is(.visir-demo-app, .sp-app) h4 { font-family: var(--font-display) !important; margin: 0 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; }
:is(.visir-demo-app, .sp-app) p { margin: 0 !important; }
:is(.visir-demo-app, .sp-app) button { font-family: inherit; outline: none; border: none; cursor: pointer; }
:is(.visir-demo-app, .sp-app) .tabular { font-variant-numeric: tabular-nums; }

:is(.visir-demo-app, .sp-app) .titlebar { height: 2.75rem; flex-shrink: 0; display: flex; align-items: center; padding: 0 1.1rem; background: var(--sidebar); border-bottom: 1px solid var(--border); backdrop-filter: var(--blur-sm); z-index: 20; }
:is(.visir-demo-app, .sp-app) .titlebar-id { display: flex; align-items: center; gap: .6rem; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; }

:is(.visir-demo-app, .sp-app) .app { display: flex; flex: 1; min-height: 0; width: 100%; }
:is(.visir-demo-app, .sp-app) .sidebar { width: 15.5rem; flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.5rem 1rem; gap: 1.75rem; backdrop-filter: var(--blur-sm); }
:is(.visir-demo-app, .sp-app) .brand { display: flex; align-items: center; gap: .85rem; padding: 0 .35rem; }
:is(.visir-demo-app, .sp-app) .brand-mark { width: 48px; height: 48px; flex-shrink: 0; filter: drop-shadow(0 0 16px rgba(59,118,237,.45)); }
:is(.visir-demo-app, .sp-app) .brand-word { display: flex; flex-direction: column; }
:is(.visir-demo-app, .sp-app) .brand-word b { font-weight: 800; font-size: 19px; letter-spacing: .05em; color: #fff; }
:is(.visir-demo-app, .sp-app) .brand-word span { font-size: 10px; font-weight: 600; color: var(--accent-2); letter-spacing: .16em; }

:is(.visir-demo-app, .sp-app) .nav-group { display: flex; flex-direction: column; gap: 2px; }
:is(.visir-demo-app, .sp-app) .nav-label { font-size: 10px; font-weight: 600; color: var(--text-faint); letter-spacing: .12em; text-transform: uppercase; padding: 0 .9rem; margin-bottom: 6px; }
:is(.visir-demo-app, .sp-app) .nav-item { display: flex; align-items: center; gap: .65rem; padding: .6rem .9rem; border-radius: 13px; color: var(--text-dim); font-size: 13px; font-weight: 500; border: 1px solid transparent; transition: background .15s, color .15s; cursor: pointer; text-align: left; background: transparent; width: 100%; }
:is(.visir-demo-app, .sp-app) .nav-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
:is(.visir-demo-app, .sp-app) .nav-item.is-active { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(59,118,237,.22); }
:is(.visir-demo-app, .sp-app) .lock-tag { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--accent-2); background: var(--accent-soft); border: 1px solid rgba(59,118,237,.25); padding: .1rem .4rem; border-radius: 999px; }

:is(.visir-demo-app, .sp-app) .sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }
:is(.visir-demo-app, .sp-app) .status-chip { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); }
:is(.visir-demo-app, .sp-app) .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); flex-shrink: 0; }

:is(.visir-demo-app, .sp-app) .stage { flex: 1; padding: 2.25rem 2.75rem; overflow-y: auto; overflow-x: hidden; }
:is(.visir-demo-app, .sp-app) .page { display: none; flex-direction: column; gap: 1.75rem; width: 100%; }
:is(.visir-demo-app, .sp-app) .page.is-active { display: flex; }
:is(.visir-demo-app, .sp-app) .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
:is(.visir-demo-app, .sp-app) .eyebrow { font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem; display: block; }
:is(.visir-demo-app, .sp-app) .page-head h1 { font-size: 26px !important; font-weight: 700 !important; }
:is(.visir-demo-app, .sp-app) .meta { font-size: 12.5px; color: var(--text-dim); margin-top: .35rem; font-family: var(--font-mono); }
:is(.visir-demo-app, .sp-app) .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.5rem; backdrop-filter: var(--blur-sm); box-shadow: var(--glass-shadow); }
:is(.visir-demo-app, .sp-app) .panel-title { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.1rem; }
:is(.visir-demo-app, .sp-app) .hero-row { display: grid; grid-template-columns: minmax(260px,1fr) minmax(280px,1.1fr); gap: 1.25rem; }
:is(.visir-demo-app, .sp-app) .form-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.25rem; align-items: start; }
:is(.visir-demo-app, .sp-app) .ent-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1.1rem; align-items: start; }
:is(.visir-demo-app, .sp-app) .btn { display: inline-flex; align-items: center; gap: .5rem; font-size: 12.5px; font-weight: 600; padding: .6rem 1rem; border-radius: 13px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer; }
:is(.visir-demo-app, .sp-app) .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
:is(.visir-demo-app, .sp-app) .btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
:is(.visir-demo-app, .sp-app) .head-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
:is(.visir-demo-app, .sp-app) .field-label { font-size: 10.5px; font-weight: 600; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .45rem; display: block; }
:is(.visir-demo-app, .sp-app) .segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
:is(.visir-demo-app, .sp-app) .segmented button { padding: .5rem .95rem; border-radius: 999px; color: var(--text-dim); font-size: 12px; font-weight: 600; background: transparent; cursor: pointer; }
:is(.visir-demo-app, .sp-app) .segmented button.is-active { background: var(--accent); color: #fff; }
:is(.visir-demo-app, .sp-app) .module-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
:is(.visir-demo-app, .sp-app) .opt { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: 13px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
:is(.visir-demo-app, .sp-app) .opt.is-selected { border-color: var(--accent); background: var(--accent-soft); }
:is(.visir-demo-app, .sp-app) .opt.is-locked { opacity: .5; flex-direction: column; align-items: flex-start; gap: .5rem; cursor: not-allowed; }
:is(.visir-demo-app, .sp-app) .opt-row { display: flex; align-items: center; gap: .6rem; }
:is(.visir-demo-app, .sp-app) .tag { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); background: var(--surface-3); padding: .2rem .45rem; border-radius: 999px; }

:is(.visir-demo-app, .sp-app) .posture-panel { display: flex; align-items: center; gap: 1.6rem; position: relative; overflow: hidden; }
:is(.visir-demo-app, .sp-app) .posture-glow { position: absolute; inset: -40% -10% auto auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(59,118,237,.16), transparent 70%); pointer-events: none; }
:is(.visir-demo-app, .sp-app) .ring-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
:is(.visir-demo-app, .sp-app) .ring-wrap svg { width: 140px; height: 140px; transform: rotate(-90deg); }
:is(.visir-demo-app, .sp-app) .ring-track { fill: none; stroke: var(--surface-3); stroke-width: 11; }
:is(.visir-demo-app, .sp-app) .ring-value { fill: none; stroke: var(--ok); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 408.4; stroke-dashoffset: 408.4; transition: stroke-dashoffset 1.5s cubic-bezier(.3,.9,.4,1); }
:is(.visir-demo-app, .sp-app) .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
:is(.visir-demo-app, .sp-app) .num-row { display: flex; align-items: baseline; gap: 2px; }
:is(.visir-demo-app, .sp-app) .num { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: #fff; }
:is(.visir-demo-app, .sp-app) .pct { font-size: 14px; font-weight: 700; color: var(--text-faint); }
:is(.visir-demo-app, .sp-app) .lbl { font-size: 9px; color: var(--text-faint); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
:is(.visir-demo-app, .sp-app) .ring-anssi-badge { display: block; margin-top: 6px; opacity: .85; text-align: center; }
:is(.visir-demo-app, .sp-app) .ring-anssi-badge img { height: 16px !important; width: auto !important; max-width: 44px !important; object-fit: contain !important; display: inline-block !important; filter: grayscale(.15) !important; }

:is(.visir-demo-app, .sp-app) .posture-stats { display: flex; flex-direction: column; gap: .85rem; flex: 1; min-width: 0; }
:is(.visir-demo-app, .sp-app) .row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
:is(.visir-demo-app, .sp-app) .row .k { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: .5rem; }
:is(.visir-demo-app, .sp-app) .row .v { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: #fff; }
:is(.visir-demo-app, .sp-app) .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

:is(.visir-demo-app, .sp-app) .report-cta { display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem 1.5rem; border-radius: 20px; background: linear-gradient(115deg, var(--accent) 0%, var(--accent-strong) 52%, var(--accent-deep) 100%); color: #fff; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 40px -20px rgba(59,118,237,.85); width: 100%; text-align: left; position: relative; overflow: hidden; cursor: pointer; transition: transform .15s; }
:is(.visir-demo-app, .sp-app) .report-cta:hover { transform: translateY(-2px); }
:is(.visir-demo-app, .sp-app) .rc-sheen { position: absolute; top: 0; bottom: 0; width: 38%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); animation: rcSheen 3.6s ease-in-out infinite; left: -45%; }
@keyframes rcSheen { 0% { left: -45%; } 55%, 100% { left: 115%; } }
:is(.visir-demo-app, .sp-app) .rc-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }

:is(.visir-demo-app, .sp-app) .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
:is(.visir-demo-app, .sp-app) .cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .75rem; cursor: pointer; transition: transform .15s, border-color .15s; }
:is(.visir-demo-app, .sp-app) .cat-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
:is(.visir-demo-app, .sp-app) .cat-top { display: flex; align-items: center; justify-content: space-between; }
:is(.visir-demo-app, .sp-app) .cat-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--accent-2); font-size: 15px; }
:is(.visir-demo-app, .sp-app) .badge { display: inline-flex; align-items: center; gap: .4rem; font-size: 11px; font-weight: 600; padding: .35rem .6rem; border-radius: 999px; }
:is(.visir-demo-app, .sp-app) .badge-ok { color: var(--ok); background: var(--ok-soft); }
:is(.visir-demo-app, .sp-app) .badge-crit { color: var(--crit); background: var(--crit-soft); }
:is(.visir-demo-app, .sp-app) .cat-bar-row { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: .6rem; }
:is(.visir-demo-app, .sp-app) .cat-bar-track { flex: 1; height: 6px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }
:is(.visir-demo-app, .sp-app) .cat-bar-fill { height: 100%; border-radius: 10px; }
:is(.visir-demo-app, .sp-app) .cat-bar-pct { font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
:is(.visir-demo-app, .sp-app) .empty-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; padding: 3rem 1.5rem; color: var(--text-dim); }
:is(.visir-demo-app, .sp-app) .console-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0; }
:is(.visir-demo-app, .sp-app) .console-bar { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
:is(.visir-demo-app, .sp-app) .console-body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; font-family: var(--font-mono); font-size: 12px; line-height: 1.85; }
:is(.visir-demo-app, .sp-app) .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
/* Couleurs des lignes de console. Les classes .ln.ok / .ln.crit / .ln.info
   étaient posées par le HTML et par main.js mais n'avaient aucune règle :
   la console s'affichait entièrement en blanc, ce qui lui enlevait toute
   lisibilité. Mêmes teintes que dans l'application. */
:is(.visir-demo-app, .sp-app) .ln { color: var(--text-dim); }
:is(.visir-demo-app, .sp-app) .ln.ok { color: var(--ok); }
:is(.visir-demo-app, .sp-app) .ln.crit { color: var(--crit); }
:is(.visir-demo-app, .sp-app) .ln.info { color: var(--accent-2); }
:is(.visir-demo-app, .sp-app) .hist-group { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.3rem 1.4rem; }
:is(.visir-demo-app, .sp-app) .hist-run { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
:is(.visir-demo-app, .sp-app) .hist-run:last-child { border-bottom: none; }
:is(.visir-demo-app, .sp-app) .hist-run .ts { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
:is(.visir-demo-app, .sp-app) .hist-run .score { font-weight: 700; font-size: 15px; }
:is(.visir-demo-app, .sp-app) .hist-run .chips { display: flex; gap: .4rem; }
:is(.visir-demo-app, .sp-app) .hist-run .chev { margin-left: auto; color: var(--text-faint); }
:is(.visir-demo-app, .sp-app) .hist-head { margin-bottom: .8rem; }
:is(.visir-demo-app, .sp-app) .hist-head .target { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 13px; color: var(--text-dim); }
:is(.visir-demo-app, .sp-app) .net-card { padding: .9rem; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: .3rem; cursor: pointer; font-size: 12px; color: var(--text-dim); margin-bottom: .5rem; }
:is(.visir-demo-app, .sp-app) .net-card.is-selected { border-color: var(--accent); background: var(--accent-soft); }
:is(.visir-demo-app, .sp-app) .net-card .sc { font-size: 16px; font-weight: 800; }
:is(.visir-demo-app, .sp-app) .empty-note { font-size: 12px; color: var(--text-faint); }

:is(.visir-demo-app, .sp-app) .scan-btn { position: relative; width: 130px; height: 130px; border-radius: 50%; background: linear-gradient(155deg, var(--surface-3), var(--surface)); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto; cursor: pointer; }
:is(.visir-demo-app, .sp-app) .ring-pulse { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ringPulse 2s ease-out infinite; }
@keyframes ringPulse { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.15); opacity: 0; } }
:is(.visir-demo-app, .sp-app) .scan-overlay { position: absolute; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(5,7,11,.6); backdrop-filter: blur(8px); }
:is(.visir-demo-app, .sp-app) .scan-card { width: 420px; padding: 2.5rem 2rem 2rem; border-radius: 28px; background: var(--surface); border: 1px solid var(--border-strong); display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: var(--glass-shadow); }
:is(.visir-demo-app, .sp-app) .scan-radar { position: relative; width: 96px; height: 96px; margin-bottom: .9rem; display: flex; align-items: center; justify-content: center; color: var(--accent-2); }
:is(.visir-demo-app, .sp-app) .scan-radar-rings circle { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-origin: 50px 50px; animation: radarPulse 2.2s ease-out infinite; }
@keyframes radarPulse { 0% { transform: scale(.55); opacity: .8; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes scanSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

:is(.visir-demo-app, .sp-app) .toast { position: absolute; bottom: 1.5rem; right: 1.5rem; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 13px; padding: .85rem 1.1rem; display: flex; align-items: center; gap: .65rem; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); transform: translateY(12px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s; z-index: 500; }
:is(.visir-demo-app, .sp-app) .toast.is-shown { transform: translateY(0); opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   SCROLLYTELLING — Features
═══════════════════════════════════════════════════════════ */
.vs-features { padding: 60px 0 40px; }
.scroll-wrap {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px;
    align-items: flex-start;
}
.scroll-texts { padding-bottom: 40vh; padding-top: 10vh; }
.scroll-step {
    min-height: 80vh; display: flex; flex-direction: column; justify-content: center;
    padding-right: 40px;
    opacity: .2; transform: scale(.97); transition: all .6s cubic-bezier(.25,1,.5,1);
}
.scroll-step.is-active { opacity: 1; transform: scale(1); }
.scroll-num { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: .15em; margin-bottom: 16px; }
.scroll-step h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); color: #fff; margin-bottom: 20px; line-height: 1.15; font-weight: 700; }
.scroll-step p { font-size: 1.05rem; color: var(--text-dim); line-height: 1.7; }
.scroll-privacy {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 20px;
    padding: 14px 18px; border-radius: 14px;
    background: rgba(47,182,115,.08); border: 1px solid rgba(47,182,115,.25);
}
.scroll-privacy b { display: block; font-size: 13px; line-height: 1; margin-bottom: 4px; }
.scroll-privacy span { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

.scroll-visuals {
    position: sticky; top: 0; height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.scroll-panel {
    position: absolute; width: 100%; max-width: 480px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 24px; padding: 36px; opacity: 0; transform: scale(.92) translateY(20px);
    transition: all .55s cubic-bezier(.25,1,.5,1);
    box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.scroll-panel.is-active { opacity: 1; transform: scale(1) translateY(0); }

/* Scroll Panel — Audit Card */
.sp-card { display: flex; flex-direction: column; gap: 16px; }
.sp-card-head { font-size: 12px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.sp-target { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.sp-badge-ok { font-size: 10px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 2px 8px; border-radius: 999px; }
.sp-ring-mini { position: relative; width: 100px; height: 100px; margin: 8px auto; }
.sp-ring-mini svg { width: 100%; height: 100%; }
.sp-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ok); }
.sp-stats-row { display: flex; gap: 12px; justify-content: center; font-size: 12px; font-weight: 600; }
.sp-stat-ok { color: var(--ok); display: flex; align-items: center; gap: 4px; }
.sp-stat-crit { color: var(--crit); display: flex; align-items: center; gap: 4px; }
.sp-stat-total { color: var(--text-faint); margin-left: auto; }

/* Scroll Panel — Terminal */
.sp-terminal { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.sp-term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); }
.sp-dot:first-child { background: var(--crit); }
.sp-dot:nth-child(2) { background: var(--warn); }
.sp-dot:nth-child(3) { background: var(--ok); }
.sp-term-title { font-size: 11px; color: var(--text-faint); margin-left: 8px; font-weight: 600; }
.sp-term-body { padding: 14px; background: #000; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.9; }
.sp-line { color: var(--text-dim); }
.sp-ts { color: var(--text-faint); }
.sp-ok { color: var(--ok); }
.sp-crit { color: var(--crit); }
.sp-info { color: var(--accent-2); }
.sp-blink .sp-cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Scroll Panel — AI */
.sp-ai-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.sp-ai-tag { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }
.sp-code-block { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.sp-code-head { padding: 10px 16px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.sp-code { padding: 16px; margin: 0; background: #000; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.9; white-space: pre-wrap; color: var(--text-dim); }
.sp-comment { color: var(--text-faint); font-style: italic; }
.sp-cmd { color: var(--accent-2); }
.sp-result { color: var(--ok); }

/* Scroll Panel — AD Graph */
.sp-graph { text-align: center; }
.sp-graph-title { font-size: 13px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 24px; }
.sp-nodes { display: flex; flex-direction: column; align-items: center; gap: 0; }
.sp-node { display: inline-flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: #fff; }
.sp-node-sub { font-size: 10px; font-weight: 500; color: var(--text-faint); margin-top: 2px; }
.sp-node-root { background: rgba(59,118,237,.15); border-color: rgba(59,118,237,.4); }
.sp-node-warn { border-color: rgba(226,166,59,.5); background: rgba(226,166,59,.1); }
.sp-node-branches { display: flex; gap: 60px; justify-content: center; padding: 12px 0; }
.sp-branch { width: 1px; height: 30px; background: var(--border-strong); }
.sp-node-row { display: flex; gap: 12px; }

/* Scroll Panel — Sites */
.sp-sites { display: flex; flex-direction: column; gap: 10px; }
.sp-site { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.sp-site.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.sp-site b { color: #fff; font-size: 13px; }
.sp-site-header { display: flex; align-items: center; justify-content: space-between; }
.sp-site-score { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.sp-site-bar { height: 4px; border-radius: 10px; background: var(--surface-3); margin-top: 6px; overflow: hidden; }
.sp-site-bar > div { height: 100%; border-radius: 10px; }

/* Scroll Panel — Report */
.sp-report { display: flex; flex-direction: column; gap: 16px; }
.sp-report-header { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #fff; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sp-report-score { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 0; }
.sp-report-bars { display: flex; flex-direction: column; gap: 10px; }
.sp-rbar { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-dim); }
.sp-rbar span:first-child { width: 110px; text-align: right; flex-shrink: 0; }
.sp-rbar-track { flex: 1; height: 6px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }
.sp-rbar-track > div { height: 100%; border-radius: 10px; }
.sp-rbar-v { width: 36px; font-weight: 700; font-size: 11px; }
.sp-report-footer { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-faint); padding-top: 12px; border-top: 1px solid var(--border); }


/* ═══════════════════════════════════════════════════════════
   MODULES
═══════════════════════════════════════════════════════════ */
.vs-modules { padding: 100px 0; }
.mod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mod-tile {
    display: flex; align-items: center; gap: 20px; padding: 28px 32px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); backdrop-filter: var(--blur-sm);
    transition: all .3s;
}
.mod-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.mod-ico { font-size: 28px; color: var(--accent-2); width: 56px; text-align: center; flex-shrink: 0; }
.mod-info { flex: 1; }
.mod-name { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.mod-info p { font-size: .85rem; color: var(--text-dim); line-height: 1.5; }
.mod-status {
    font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px; flex-shrink: 0;
}
.mod-status.is-available { color: var(--ok); background: var(--ok-soft); }
.mod-status.is-coming { color: var(--text-faint); background: var(--surface-2); }


/* ═══════════════════════════════════════════════════════════
   ARCHITECTURE
═══════════════════════════════════════════════════════════ */
.vs-arch { padding: 100px 0; }
.arch-flow {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px;
    align-items: center; margin-bottom: 40px;
}
.arch-node {
    text-align: center; padding: 32px 24px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); backdrop-filter: var(--blur-sm);
}
.arch-ico {
    width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    color: var(--ac, var(--ok)); background: color-mix(in srgb, var(--ac, var(--ok)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ac, var(--ok)) 25%, transparent);
}
.arch-node h4 { font-size: 1rem; color: #fff; margin-bottom: 8px; }
.arch-node p { font-size: .85rem; color: var(--text-dim); line-height: 1.5; }
.arch-arrow {
    color: var(--text-faint); font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.arch-privacy {
    display: flex; align-items: flex-start; gap: 20px; padding: 28px 32px;
    background: rgba(47,182,115,.06); border: 1px solid rgba(47,182,115,.2);
    border-radius: var(--radius);
}
.arch-privacy-icon {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    color: var(--ok); background: var(--ok-soft);
}
.arch-privacy h4 { font-size: 1rem; color: var(--ok); margin-bottom: 6px; }
.arch-privacy p { font-size: .9rem; color: var(--text-dim); line-height: 1.6; }


/* ═══════════════════════════════════════════════════════════
   PRICING & VERSIONS
═══════════════════════════════════════════════════════════ */
.vs-pricing { padding: 80px 0 100px; }
.pricing-grid {
    max-width: 900px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}
.pricing-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 40px;
    display: flex; flex-direction: column; position: relative;
    transition: transform .35s, box-shadow .35s;
}
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card.premium {
    background: linear-gradient(145deg, var(--surface-2), rgba(59,118,237,.03));
    border-color: rgba(59,118,237,.3);
    box-shadow: 0 20px 40px -10px rgba(59,118,237,.1);
}
.premium-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #fff; padding: 6px 16px; border-radius: 999px;
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 12px rgba(59,118,237,.4);
}
.pricing-header { margin-bottom: 32px; text-align: center; }
.pricing-header h3 { font-size: 1.8rem; margin-bottom: 12px; color: #fff; }
.pricing-price { font-size: 2.5rem; font-family: var(--font-display); font-weight: 700; color: #fff; margin-bottom: 16px; display: flex; justify-content: center; align-items: baseline; gap: 6px; }
.pricing-price span.price-prefix, .pricing-price span.price-suffix { font-size: 0.95rem; font-family: var(--font-body); font-weight: 500; color: var(--text-faint); }
.pricing-header p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; }
.pricing-features {
    list-style: none; padding: 0; margin: 0 0 40px 0; flex: 1;
    display: flex; flex-direction: column; gap: 16px;
}
.pricing-features li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 0.95rem; color: #fff; line-height: 1.4;
}
.pricing-features li i {
    color: var(--ok); font-size: 14px; margin-top: 3px;
}
.pricing-features li.disabled {
    color: var(--text-faint); opacity: 0.7;
}
.pricing-features li.disabled i {
    color: var(--text-faint);
}
.pricing-footer {
    text-align: center; margin-top: auto;
}
.disabled-btn {
    opacity: 0.7; cursor: not-allowed !important; pointer-events: none;
    width: 100%; justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════ */
.vs-faq { padding: 100px 0 120px; }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.faq-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden; transition: border-color .3s;
}
.faq-item.is-open { border-color: rgba(59,118,237,.3); }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #fff;
    text-align: left; gap: 16px;
}
.faq-q:hover { background: rgba(255,255,255,.02); }
.faq-toggle {
    color: var(--text-faint); font-size: 14px; flex-shrink: 0;
    transition: transform .3s;
}
.faq-item.is-open .faq-toggle { transform: rotate(45deg); color: var(--accent); }
.faq-a {
    max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s;
    padding: 0 24px;
}
.faq-item.is-open .faq-a { max-height: 300px; padding: 0 24px 20px; }
.faq-a p { font-size: .9rem; color: var(--text-dim); line-height: 1.7; }


/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer {
    border-top: 1px solid var(--border); padding: 48px 32px;
    background: rgba(5,7,11,.85); backdrop-filter: var(--blur);
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border);
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-name { font-family: var(--font-display); font-size: 18px; letter-spacing: .1em; color: #fff; display: block; }
.footer-tagline { font-size: 11px; color: var(--text-faint); display: block; margin-top: 2px; }
.footer-status { }
.status-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--accent-2);
    background: var(--accent-soft); border: 1px solid rgba(59,118,237,.25);
    padding: 6px 16px; border-radius: 999px;
}
.status-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse { 0%, 100% { opacity: .5; box-shadow: 0 0 0 0 rgba(59,118,237,.4); } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(59,118,237,0); } }

.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--text-faint);
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-faint); transition: color .2s; }
.footer-links a:hover { color: #fff; }


/* ═══════════════════════════════════════════════════════════
   GHOST — Page & Post Content
═══════════════════════════════════════════════════════════ */
.page-wrapper {
    padding: 120px 24px 80px; max-width: 800px; margin: 0 auto;
}
.page-header h1 { font-size: 2.5rem; font-weight: 800; color: #fff; margin-bottom: 16px; }
.page-content, .post-content {
    line-height: 1.7; font-size: 16px; color: var(--text-dim);
}
.page-content h2, .page-content h3, .post-content h2, .post-content h3 { color: #fff; margin: 2rem 0 .8rem; }
.page-content a, .post-content a { color: var(--accent-2); border-bottom: 1px solid rgba(59,118,237,.3); }
.page-content a:hover, .post-content a:hover { color: #fff; }
.page-content img, .post-content img { border-radius: var(--radius); border: 1px solid var(--border); margin: 1.5rem 0; }
.page-content blockquote, .post-content blockquote {
    border-left: 3px solid var(--accent); padding: .8rem 1.2rem; margin: 1.5rem 0;
    background: var(--surface); border-radius: 0 12px 12px 0;
}
.page-content code, .post-content code {
    font-family: var(--font-mono); font-size: .9em;
    background: var(--surface-2); padding: 2px 6px; border-radius: 6px;
}
.page-content pre, .post-content pre {
    background: #000; border: 1px solid var(--border); border-radius: 14px;
    padding: 1.2rem; overflow-x: auto; margin: 1.5rem 0;
}
.page-content pre code, .post-content pre code { background: none; padding: 0; }


/* ═══════════════════════════════════════════════════════════
   CINEMATIC ANIMATIONS & UTILITIES
═══════════════════════════════════════════════════════════ */

/* Base cinematic reveal */
.reveal {
    opacity: 0; transform: translateY(50px) scale(0.97);
    filter: blur(6px);
    transition: opacity .9s cubic-bezier(.16,1,.3,1),
                transform .9s cubic-bezier(.16,1,.3,1),
                filter .9s cubic-bezier(.16,1,.3,1);
}
.reveal.active {
    opacity: 1; transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Directional variants */
.reveal-left { transform: translateX(-60px) scale(0.97); filter: blur(6px); }
.reveal-left.active { transform: translateX(0) scale(1); filter: blur(0); }

.reveal-right { transform: translateX(60px) scale(0.97); filter: blur(6px); }
.reveal-right.active { transform: translateX(0) scale(1); filter: blur(0); }

.reveal-scale { transform: scale(0.88); filter: blur(10px); }
.reveal-scale.active { transform: scale(1); filter: blur(0); }

/* Stagger delays */
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }
.delay-4 { transition-delay: .48s; }

/* Luminous section separators */
.vs-overview::before, .vs-demo::before, .vs-reports::before,
.vs-features::before, .vs-modules::before, .vs-arch::before, .vs-faq::before {
    content: ''; display: block; width: 280px; height: 1px; margin: 0 auto 60px;
    background: linear-gradient(90deg, transparent, rgba(59,118,237,0.5), transparent);
}

/* Counter glow when animated */
.counter-box.is-done .counter-num {
    text-shadow: 0 0 30px rgba(59,118,237,0.4);
    transition: text-shadow .6s ease;
}


/* ═══════════════════════════════════════════════════════════
   REPORTS — Screenshots Section
═══════════════════════════════════════════════════════════ */
.vs-reports { padding: 60px 0 80px; }
.reports-grid {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}
.report-card {
    position: relative; border-radius: var(--radius-card);
    overflow: hidden; border: 1px solid var(--border);
    background: var(--surface); transition: transform .35s, border-color .35s, box-shadow .35s;
    cursor: default;
}
.report-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 20px 50px -15px rgba(59,118,237,.25);
}
.report-frame {
    background: #0a0d14; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; padding: 10px 14px; gap: 7px;
}
.report-frame-dot { width: 11px; height: 11px; border-radius: 50%; }
.report-frame-dot:nth-child(1) { background: #FF5F56; }
.report-frame-dot:nth-child(2) { background: #FFBD2E; }
.report-frame-dot:nth-child(3) { background: #27C93F; }
.report-frame-title {
    margin-left: auto; font-family: var(--font-mono);
    font-size: 11px; color: var(--text-faint); letter-spacing: .03em;
}
.report-card img {
    width: 100%; height: auto; display: block;
    transition: transform .4s ease;
}
.report-card:hover img { transform: scale(1.03); }
.report-info {
    padding: 20px 22px; background: var(--surface);
}
.report-info h3 {
    font-family: var(--font-display); font-size: 1.05rem;
    font-weight: 700; color: #fff; margin-bottom: 6px;
}
.report-info p {
    font-size: .85rem; color: var(--text-dim); line-height: 1.55;
}
.report-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: 11px;
    font-weight: 600; margin-top: 10px;
}
.report-badge.pro { background: rgba(232,85,107,.15); color: #E8556B; border: 1px solid rgba(232,85,107,.3); }
.report-badge.std { background: rgba(59,118,237,.15); color: var(--accent-2); border: 1px solid rgba(59,118,237,.3); }


/* ═══════════════════════════════════════════════════════════
   LANGUAGE BUTTON
═══════════════════════════════════════════════════════════ */
.lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-chip); padding: 5px 14px 5px 10px;
    cursor: pointer; transition: all .25s; font-size: 13px;
    font-weight: 600; color: var(--text); font-family: var(--font-body);
}
.lang-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.lang-flag { font-size: 16px; line-height: 1; }
.lang-label { letter-spacing: .05em; }


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .counter-row { grid-template-columns: repeat(2, 1fr); }
    .pillars { grid-template-columns: 1fr; }
    .arch-flow { grid-template-columns: 1fr; gap: 16px; }
    .arch-arrow { transform: rotate(90deg); }
    .scroll-wrap { grid-template-columns: 1fr; gap: 40px; }
    .scroll-visuals { position: relative; height: auto; top: 0; }
    .scroll-texts { padding: 0; }
    .scroll-step { min-height: auto; margin-bottom: 40px; opacity: 1; transform: none; padding-right: 0; }
    .scroll-panel { position: relative; opacity: 1; transform: none; max-width: 100%; }
    .scroll-panel:not([data-step="1"]) { display: none; }
    .mod-grid { grid-template-columns: 1fr; }
    .reports-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .site-nav { height: 60px; }
    .site-nav.is-scrolled { height: 52px; }
    .nav-links {
        display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
        background: rgba(5,7,11,.97); backdrop-filter: var(--blur);
        flex-direction: column; align-items: center; justify-content: center; gap: 16px;
        padding: 40px;
    }
    .nav-links.is-open { display: flex; }
    .nav-link { font-size: 18px; padding: 12px 24px; }
    .nav-burger { display: block; }
    .lang-btn { margin-top: 12px; padding: 8px 20px; font-size: 15px; }

    /* Hero : 100vh sur un téléphone, barre d'adresse comprise, laisse le
       contenu à l'étroit et repousse la barre de confiance hors de l'écran.
       On le laisse prendre la hauteur de son contenu, avec une hauteur
       minimale confortable. */
    .vs-hero { min-height: auto; padding: 120px 20px 64px; }
    .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
    .hero-sub { font-size: .95rem; padding: 0 8px; }
    .hero-btns { flex-direction: column; gap: 12px; width: 100%; max-width: 300px; }
    .hero-btns .btn-pill { width: 100%; justify-content: center; }
    .trust-bar { flex-direction: column; gap: 12px; padding: 20px; border-radius: 20px; }
    .trust-sep { width: 100%; height: 1px; }
    /* Le halo de 1100 px déborde très largement d'un écran de 375 px : réduit,
       il reste une lueur au lieu d'un aplat bleu sur toute la page. */
    .hero-glow { width: 620px; height: 620px; top: -180px; }

    .counter-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .counter-box { padding: 20px 12px; }
    .counter-num { font-size: 2rem; }

    .section-head h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }

    .visir-demo-app { height: 600px; }
    :is(.visir-demo-app, .sp-app) .app { flex-direction: column; }
    :is(.visir-demo-app, .sp-app) .sidebar {
        width: 100%; height: auto; min-height: unset;
        border-right: none; border-bottom: 1px solid var(--border);
        flex-direction: row; overflow-x: auto; padding: 10px 12px; gap: 6px;
        -webkit-overflow-scrolling: touch;
    }
    :is(.visir-demo-app, .sp-app) .brand { display: none; }
    :is(.visir-demo-app, .sp-app) .nav-group { flex-direction: row; gap: 4px; }
    :is(.visir-demo-app, .sp-app) .nav-label { display: none; }
    :is(.visir-demo-app, .sp-app) .nav-item { padding: 8px 12px; font-size: 12px; white-space: nowrap; border-radius: 10px; }
    :is(.visir-demo-app, .sp-app) .nav-item span { font-size: 11px; }
    :is(.visir-demo-app, .sp-app) .sidebar-bottom { display: none; }
    :is(.visir-demo-app, .sp-app) .form-grid { grid-template-columns: 1fr; }
    :is(.visir-demo-app, .sp-app) .hero-row { grid-template-columns: 1fr; }
    :is(.visir-demo-app, .sp-app) .ent-grid { grid-template-columns: 1fr; }
    :is(.visir-demo-app, .sp-app) .cat-grid { grid-template-columns: 1fr; }
    :is(.visir-demo-app, .sp-app) .stage { padding: 1.2rem; }
    :is(.visir-demo-app, .sp-app) .page-head { flex-direction: column; gap: 12px; align-items: flex-start; }
    :is(.visir-demo-app, .sp-app) .page-head h1 { font-size: 1.3rem !important; }
    :is(.visir-demo-app, .sp-app) .posture-panel { flex-direction: column; align-items: center; text-align: center; }
    :is(.visir-demo-app, .sp-app) .ring-wrap { margin-bottom: 1rem; }
    :is(.visir-demo-app, .sp-app) .report-cta { padding: 14px 16px; }
    :is(.visir-demo-app, .sp-app) .report-cta b { font-size: 14px; }

    .reports-grid { gap: 20px; padding: 0 16px; }
    .report-info { padding: 16px; }
    .report-info h3 { font-size: .95rem; }

    .arch-privacy { flex-direction: column; text-align: center; align-items: center; }
    .footer-top { flex-direction: column; gap: 16px; text-align: center; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 480px) {
    .section-wrap { padding: 0 16px; }
    .counter-row { grid-template-columns: 1fr 1fr; }
    .pillar { padding: 1.5rem; }
    .mod-tile { flex-direction: column; text-align: center; padding: 24px 20px; }
    .mod-status { margin-top: 8px; }

    .visir-demo-app { height: 520px; }
    :is(.visir-demo-app, .sp-app) .stage { padding: 1rem; }
    :is(.visir-demo-app, .sp-app) .page-head h1 { font-size: 1.1rem !important; }
    :is(.visir-demo-app, .sp-app) .eyebrow { font-size: 10px; }
    :is(.visir-demo-app, .sp-app) .meta { font-size: 11px; }
    :is(.visir-demo-app, .sp-app) .posture-stats .row { font-size: 12px; }
    :is(.visir-demo-app, .sp-app) .panel { padding: 1rem; }
    :is(.visir-demo-app, .sp-app) .btn { font-size: 12px; padding: 8px 14px; }
    :is(.visir-demo-app, .sp-app) .cat-card { padding: 12px; }
    :is(.visir-demo-app, .sp-app) .cat-card h4 { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   CINÉMATIQUE — intro, fond animé, parallaxe
   Voir assets/js/cinematic.js pour l'enchaînement.
═══════════════════════════════════════════════════════════════════════ */

/* ─── Rideau d'intro ─────────────────────────────────────────────────── */
body.intro-running { overflow: hidden; }

.vs-intro {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 26px;
    background: #05070B;
    cursor: pointer;
    transition: opacity .85s cubic-bezier(.16,1,.3,1), visibility .85s, transform .85s cubic-bezier(.16,1,.3,1);
    /* Filet de sécurité : le rideau se retire TOUT SEUL en CSS, même si le
       JavaScript ne s'exécute jamais. Sans ça, une erreur de script laisserait
       le visiteur devant un écran noir — le pire scénario possible sur une
       page de vente. Le JS ne fait qu'accélérer et nettoyer le DOM. */
    animation: introAuto .9s cubic-bezier(.16,1,.3,1) 2.1s forwards;
}
/* Le rideau se dissout ET s'agrandit très légèrement : on a l'impression
   d'entrer dans la page plutôt que de voir un calque disparaître. */
.vs-intro.is-leaving {
    opacity: 0; visibility: hidden;
    transform: scale(1.06);
}
@keyframes introAuto {
    to { opacity: 0; visibility: hidden; transform: scale(1.06); }
}

/* Version sobre, pour les postes où les animations sont réduites : le sigle
   apparaît en fondu, déjà plein, sans tracé ni déplacement — et l'intro reste
   visible, au lieu d'être purement supprimée. */
.vs-intro.is-sobre { animation-delay: 1.1s; animation-duration: .6s; }
.vs-intro.is-sobre .vs-intro-mark path,
.vs-intro.is-sobre .vs-intro-mark polygon {
    stroke: none; fill: currentColor;
    stroke-dashoffset: 0;
    animation: introFondu .5s ease-out both;
}
.vs-intro.is-sobre .vs-intro-mark path:nth-child(2) { animation-delay: .08s; }
.vs-intro.is-sobre .vs-intro-mark polygon           { animation-delay: .16s; }
.vs-intro.is-sobre .vs-intro-word { animation: introFondu .5s ease-out .3s both; }
.vs-intro.is-sobre::after { animation: introFondu .6s ease-out both; }
.vs-intro.is-sobre.is-leaving { transform: none; }

@keyframes introFondu { from { opacity: 0; } to { opacity: 1; } }
.vs-intro::after {
    /* Lueur qui monte depuis le sigle pendant le tracé. */
    content: ""; position: absolute; width: 700px; height: 700px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(59,118,237,.20), transparent 62%);
    animation: introGlow 2.1s cubic-bezier(.16,1,.3,1) both;
}
/* Taille proportionnelle à l'écran, pas fixe. Un sigle de 92 px occupe 19 % de
   la largeur d'un téléphone mais seulement 6 % d'un écran de bureau : à taille
   égale en pixels, il paraît trois fois plus petit sur grand écran. Le clamp
   conserve la présence qu'il a sur mobile, quelle que soit la diagonale. */
.vs-intro-mark {
    width: clamp(92px, 15vw, 240px);
    height: clamp(92px, 15vw, 240px);
    position: relative; z-index: 1;
}
/* Chaque branche du sigle se trace ; les longueurs de tracé sont
   volontairement généreuses (620) pour couvrir les trois chemins. */
.vs-intro-mark path,
.vs-intro-mark polygon {
    stroke: #7AA3F5; stroke-width: 6; fill: transparent;
    stroke-dasharray: 620; stroke-dashoffset: 620;
    animation: introDraw 1.15s cubic-bezier(.65,0,.35,1) forwards,
               introFill .55s ease-out 1.05s forwards;
}
.vs-intro-mark path:nth-child(2) { animation-delay: .16s, 1.21s; }
.vs-intro-mark polygon           { animation-delay: .32s, 1.37s; }

.vs-intro-word {
    font-family: var(--font-display); font-weight: 800;
    font-size: 15px; letter-spacing: .48em; text-indent: .48em;
    color: var(--text-dim);
    opacity: 0; animation: introWord .9s cubic-bezier(.16,1,.3,1) 1.25s both;
}

@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introFill {
    from { fill: transparent; }
    to   { fill: currentColor; stroke-opacity: 0; }
}
@keyframes introWord {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes introGlow {
    0%   { opacity: 0; transform: scale(.7); }
    55%  { opacity: 1; }
    100% { opacity: .55; transform: scale(1); }
}

/* Couleurs de remplissage, reprises du sigle de la barre de navigation. */
.vs-intro-mark .m1 { color: #3B76ED; }
.vs-intro-mark .m2 { color: #2450a8; }
.vs-intro-mark .m3 { color: #7AA3F5; }

/* ─── Fond animé du hero ─────────────────────────────────────────────── */
.hero-canvas {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0; animation: canvasIn 2s ease-out .2s forwards;
    transition: opacity .8s ease;
}
/* Si une vraie vidéo démarre, le canvas s'efface pour ne pas doubler le fond. */
.hero-canvas.is-superseded { opacity: 0 !important; }

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

/* Le contenu du hero est piloté au scroll par cinematic.js : on neutralise
   la transition CSS pour éviter qu'elle ne lutte contre le JS. */
.hero-inner { will-change: transform, opacity; }

/* ─── Indicateur de défilement ───────────────────────────────────────── */
.hero-scroll-hint {
    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
    z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px;
    font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-faint);
    animation: hintIn 1s ease-out 1.6s both;
}
.hero-scroll-hint-rail {
    width: 1px; height: 46px; overflow: hidden;
    background: rgba(255,255,255,.12);
}
.hero-scroll-hint-rail::after {
    content: ""; display: block; width: 100%; height: 42%;
    background: linear-gradient(to bottom, transparent, var(--accent-2));
    animation: hintRun 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes hintIn  { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hintRun { from { transform: translateY(-100%); } to { transform: translateY(240%); } }


/* ═══════════════════════════════════════════════════════════════════════
   FONCTIONNALITÉS — panneaux repris de l'application réelle
   Ces panneaux réutilisent les classes de l'app (.panel, .ring-wrap,
   .cat-card, .console-panel, .badge…) déjà définies plus haut pour la
   démo : ce qui défile ici est la vraie interface, pas une maquette.
   Seules les quelques règles d'adaptation au format « panneau » sont ici.
═══════════════════════════════════════════════════════════════════════ */
.sp-app {
    background: linear-gradient(180deg, rgba(12,16,24,.96), rgba(8,11,17,.96));
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}
/* Barre de fenêtre, identique à celle de la démo pour que l'œil reconnaisse
   immédiatement « c'est la même application ». */
.sp-app-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid var(--border);
    font-size: 11px; color: var(--text-faint);
}
.sp-app-bar svg { width: 15px; height: 15px; }
.sp-app-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* Le rendu réel de l'app, réduit à l'échelle du panneau. */
.sp-app .panel { padding: 14px; border-radius: 12px; }
.sp-app .panel-title { font-size: 11px; margin-bottom: 10px; }
.sp-app .ring-wrap { width: 128px; height: 128px; margin: 0 auto; }
/* La règle partagée fixe le SVG à 140px : on le laisse suivre le conteneur
   réduit, sinon l'anneau déborde du panneau. */
.sp-app .ring-wrap svg { width: 100%; height: 100%; }
.sp-app .ring-center .num { font-size: 30px; }
.sp-app .ring-center .pct { font-size: 14px; }
.sp-app .ring-center .lbl { font-size: 10px; }
.sp-app .posture-stats .row { font-size: 11.5px; padding: 5px 0; }
.sp-app .cat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
.sp-app .cat-card { padding: 11px; gap: .5rem; }
.sp-app .cat-card h4 { font-size: 11.5px; line-height: 1.25; }
.sp-app .badge { font-size: 9.5px; padding: 2px 7px; }
.sp-app .console-body { max-height: 232px; font-size: 11.5px; }
.sp-app .ln { padding: 2px 0; }

/* ─── Décors animés de section ───────────────────────────────────────── */
/* Un canvas par section, inséré par cinematic.js. Il se place derrière tout le
   contenu et n'intercepte aucun clic. Le fondu à l'entrée fait que le décor
   « arrive » quand on atteint la section, au lieu d'être déjà là. */
/* Collant plutôt qu'absolu : le décor suit le défilement en restant de la
   taille de l'écran. Une section de 5000 px de haut aurait sinon exigé un
   canvas de 5000 px — soit, en densité 2, une centaine de Mo de mémoire
   graphique pour une seule section, et des à-coups garantis sur mobile.
   La marge négative l'empêche d'occuper de la place dans le flux. */
.section-canvas {
    position: sticky; top: 0;
    width: 100%; height: 100vh;
    margin-bottom: -100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(.16,1,.3,1);
}
.section-canvas.is-on { opacity: 1; }

/* Vidéo de section, déroulée au défilement (cf. monterVideosDefilement).
   Collante et plein écran, comme le canvas qu'elle remplace sur grand écran. */
.section-video {
    position: sticky; top: 0;
    width: 100%; height: 100vh;
    margin-bottom: -100vh;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(.16,1,.3,1);
}
.section-video.is-on { opacity: 1; }
/* Le contenu des sections doit passer AU-DESSUS du décor. */
.vs-overview .section-wrap,
.vs-demo .section-wrap,
.vs-reports .section-wrap,
.vs-features .section-wrap,
.vs-features .scroll-wrap,
.vs-modules .section-wrap,
.vs-arch .section-wrap,
.vs-pricing .section-wrap,
.vs-faq .section-wrap { position: relative; z-index: 1; }

/* ─── Captures réelles de l'application ──────────────────────────────── */
/* Une capture de l'app vaut mieux qu'une reconstitution : ce que voit le
   visiteur est exactement ce qu'il aura après installation, chiffres compris. */
.sp-shot {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0a0d13;
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}
.sp-shot-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 13px;
    background: rgba(255,255,255,.045);
    border-bottom: 1px solid var(--border);
}
.sp-shot-bar i.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.sp-shot-bar .t {
    margin-left: 6px; font-size: 10.5px; letter-spacing: .06em;
    color: var(--text-faint); text-transform: uppercase;
}
.sp-shot img { display: block; width: 100%; height: auto; }
/* Légende sous la capture : rappelle que les chiffres affichés sont ceux d'un
   audit réel, pas une mise en scène. */
.sp-shot-note {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; font-size: 11.5px; color: var(--text-dim);
    border-top: 1px solid var(--border); background: rgba(255,255,255,.02);
}
.sp-shot-note b { color: var(--text); font-weight: 600; }

/* Référence ANSSI affichée sous un contrôle — reprise du rapport. */
.sp-ref {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--accent-2); background: var(--accent-soft);
    padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.sp-rule-row {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.sp-rule-row:last-child { border-bottom: 0; }
.sp-rule-row .sp-rule-name { flex: 1; color: var(--text); line-height: 1.35; }

/* Le graphe de cartographie : nœuds réels reliés en SVG. */
.sp-graph-svg { width: 100%; height: auto; display: block; }
.sp-graph-legend {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 10.5px; color: var(--text-dim);
}
.sp-graph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sp-graph-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

@media (max-width: 1024px) {
    /* Visuels repliés sous leur texte (cf. replierFonctionnalites dans
       cinematic.js) : plus de colonne collante, plus d'alternance. */
    .scroll-wrap.is-stacked { display: block; }
    .scroll-wrap.is-stacked .scroll-texts { padding: 0; }
    .scroll-wrap.is-stacked .scroll-step {
        opacity: 1; transform: none;
        margin-bottom: 72px; min-height: 0; padding: 0;
    }
    /* Le panneau perd son propre cadre : la capture (.sp-shot) porte déjà le
       sien, et les deux superposés donnaient une boîte dans une boîte dont le
       double rembourrage réduisait l'image à 250 px de large. */
    .scroll-panel.is-inline {
        position: static;
        opacity: 1; transform: none;
        margin-top: 22px;
        width: 100%; max-width: none;
        background: none; border: 0; box-shadow: none;
        padding: 0; border-radius: 0;
    }
    .scroll-panel.is-inline .sp-shot,
    .scroll-panel.is-inline .sp-app { width: 100%; }
    .scroll-panel.is-inline img { width: 100%; height: auto; }
}

@media (max-width: 768px) {
    .vs-intro-mark { width: 72px; height: 72px; }
    .vs-intro-word { font-size: 12px; letter-spacing: .36em; text-indent: .36em; }
    .hero-scroll-hint { display: none; }
    .sp-app .cat-grid { grid-template-columns: 1fr; }

    /* Les captures gagnent à déborder des marges du texte sur téléphone :
       quelques pixels de plus changent nettement la lisibilité. */
    .scroll-panel.is-inline { margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); }
    .sp-shot-bar { padding: 7px 11px; }
    .sp-shot-bar .t { font-size: 9.5px; }
    .sp-shot-note { padding: 9px 12px; font-size: 11px; }
}