:root {
            --brand: #0005F8;
            --brand-dark: #0000CC;
            --brand-light: #4D51FF;
            --brand-glow: rgba(0, 5, 248, 0.30);
            --progress: 0%;
            --surface: #F2F2F2;
            --card-border: rgba(0, 0, 0, 0.08);
            --dark: #0A0A0A;
            --muted: #666666;
            --bg: #F2F2F2;
            --radius-sm: 12px;
            --radius: 16px;
            --radius-lg: 32px;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
            --shadow-md: 0 8px 24px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
            --shadow-lg: 0 16px 48px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.03);
            --shadow-xl: 0 32px 80px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.04);
            --shadow-colored: 0 20px 48px var(--brand-glow), 0 8px 24px rgba(0,5,248,0.15);
            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Film grain disabled for scroll performance */

        html {
            background-color: var(--bg);
            margin: 0;
            padding: 0;
            min-height: 100%;
            /* scroll-behavior: smooth removed — handled by JS scrollTo({ behavior: 'smooth' })
               Avoids iOS Safari bug where smooth + overflow-x:hidden blocks first touch scroll.
               overflow-x: hidden kept on body only to avoid dual-container scroll conflict on iOS. */
        }

        body {
            background-color: var(--bg);
            /* Grid pattern removed for scroll performance */
            color: var(--dark);
            font-family: 'Manrope', sans-serif;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            position: relative;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: 'cv11', 'ss01';
            letter-spacing: -0.015em;
        }

        /* ── Design System ── */
        .rounded-2xl, .rounded-3xl { border-radius: var(--radius-lg) !important; }
        .rounded-xl { border-radius: var(--radius) !important; }
        .rounded-full { border-radius: 9999px !important; }

        .shadow-sm { box-shadow: var(--shadow-sm) !important; }
        .shadow-md, .shadow { box-shadow: var(--shadow-md) !important; }
        .shadow-lg { box-shadow: var(--shadow-lg) !important; }
        .shadow-xl, .shadow-2xl { box-shadow: var(--shadow-xl) !important; }
        .hover\:shadow-md:hover { box-shadow: var(--shadow-md) !important; }
        .hover\:shadow-lg:hover { box-shadow: var(--shadow-lg) !important; }

        /* Perf: skip rendering of off-screen sections */
        #realisations, #offres, #process, #apropos, #faq, #contact {
            content-visibility: auto;
            contain-intrinsic-size: auto 800px;
        }
        .border-gray-100 { border-color: rgba(0,0,0,0.05) !important; }

        /* ── Typography — editorial precision ── */
        .font-serif { letter-spacing: -0.03em; }
        .font-sans { letter-spacing: -0.015em; }

        h1, h2, h3 { text-rendering: optimizeLegibility; }

        /* ── Hover refinements ── */
        .hover\:-translate-y-0\.5:hover { transform: translateY(-3px) !important; }

        /* ── Text color system — cool zinc ── */
        .text-gray-500 { color: #71717A !important; }
        .text-gray-600 { color: #52525B !important; }
        .text-gray-400 { color: #A1A1AA !important; }

        .noise { display: none !important; }

        /* ── Marquee — animate parent track ── */
        @keyframes marquee-scroll {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }
        .marquee-track {
            display: inline-flex;
            animation: marquee-scroll 30s linear infinite;
        }
        .marquee-content {
            flex-shrink: 0;
        }

        ::selection {
            background: var(--brand);
            color: white;
        }

        .text-balance { text-wrap: balance; }

        /* ── Glass morphism — refined ── */
        /* Glass morphism — charte §3.1 : bg-white/70 backdrop-blur rounded-full */
        .glass {
            background: rgba(255, 255, 255, 0.70);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        /* ── Buttons — tactile & weighted ── */
        .btn-primary {
            background: var(--brand);
            color: #FFFFFF;
            transition: all 0.4s var(--ease-spring);
            font-weight: 600;
            letter-spacing: -0.01em;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,5,248,0.30);
        }
        .btn-primary:hover {
            background: var(--brand-dark);
            transform: translateY(-3px) scale(1.05);
            box-shadow: var(--shadow-colored);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.5);
            color: var(--dark);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(0,0,0,0.08);
            transition: all 0.4s var(--ease-spring);
            font-weight: 600;
            box-shadow: var(--shadow-sm);
        }
        .btn-secondary:hover {
            border-color: var(--brand);
            color: var(--brand);
            box-shadow: 0 12px 32px rgba(0,5,248,0.15);
            transform: translateY(-3px) scale(1.05);
        }

        .btn-primary:active, .btn-secondary:active { transform: scale(0.96) translateY(0); box-shadow: var(--shadow-sm); }
        .btn-primary:focus-visible, .btn-secondary:focus-visible, nav a:focus-visible {
            outline: 3px solid var(--brand-light);
            outline-offset: 4px;
        }

        /* ── Scroll progress — gradient ── */
        #scroll-progress {
            position: fixed; top: 0; left: 0;
            height: 3px;
            width: var(--progress);
            background: var(--brand);
            z-index: 100;
            transition: width 100ms ease-out;
            box-shadow: 0 0 10px rgba(0,5,248,0.4);
        }

        .popover-positioning { transition: top 150ms ease-out, left 150ms ease-out; }
        .popover-positioning.repositioning { transition: top 250ms cubic-bezier(0.4,0,0.2,1), left 250ms cubic-bezier(0.4,0,0.2,1); }
        .feature-modal-panel.size-changing { transition: opacity 200ms ease, transform 200ms ease, max-width 300ms cubic-bezier(0.4,0,0.2,1) !important; }

        #feature-preview-popover {
            position: absolute; top: 0; left: 0;
            width: 300px;
            max-width: calc(100vw - 2rem);
            background-color: #fff;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
            z-index: 9999;
            pointer-events: none;
            opacity: 0;
            transform: scale(0.97) translateY(6px);
            transition: opacity 180ms ease, transform 180ms ease;
            overflow: hidden;
        }
        #feature-preview-popover.is-visible { opacity: 1; transform: scale(1) translateY(0); }
        .popover-image-container { width: 100%; height: 160px; background-color: var(--surface); }
        .popover-image-container img { width: 100%; height: 100%; object-fit: cover; }
        .popover-content { padding: 1rem 1.125rem; }
        .popover-title {
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 0.9375rem;
            color: var(--dark);
            line-height: 1.2;
            margin-bottom: 0.25rem;
            letter-spacing: -0.02em;
        }
        .popover-description {
            font-size: 0.8125rem;
            color: var(--muted);
            line-height: 1.5;
            font-family: 'Manrope', sans-serif;
        }


        .feature-modal-panel.is-fullscreen {
            width: 100vw;
            height: 100vh;
            max-width: 100vw;
            max-height: 100vh;
            border-radius: 0;
        }

        .feature-modal-panel.is-fullscreen .icon-expand {
            display: none;
        }

        .feature-modal-panel.is-fullscreen .icon-compress {
            display: block;
        }


        .animate-spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes float-slow {

            0%,
            100% {
                transform: translate(0, 0);
            }

            50% {
                transform: translate(0, -8px);
            }
        }

        .animate-float-slow {
            animation: float-slow 4s ease-in-out infinite;
        }

        /* float-subtle defined below (single definition) */

        @keyframes shimmer {
            100% {
                transform: translateX(100%);
            }
        }

        .perspective-500 {
            perspective: 500px;
        }

        .grow-bar {
            width: 0 !important;
            transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
            background: linear-gradient(90deg, var(--brand), var(--brand-light)) !important;
        }

        /* ── Entrance animations — cinematic reveals ── */
        [data-animate] {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.7s var(--ease-out-expo),
                        transform 0.7s var(--ease-out-expo);
        }
        [data-animate="fade-right"] { transform: translateX(-30px); }
        [data-animate="fade-left"] { transform: translateX(30px); }
        [data-animate].is-visible {
            opacity: 1;
            transform: translate(0, 0);
        }

        /* ── Hero GSAP initial states (progressive enhancement) ── */
        .js .hero-el,
        .js .hero-trust { opacity: 0; }
        .js #hero-carousel { opacity: 0; }

        /* Hero swiper */
        .hero-swiper .swiper-pagination-bullet {
            background: white;
            opacity: 0.5;
            width: 6px;
            height: 6px;
        }
        .hero-swiper .swiper-pagination-bullet-active {
            opacity: 1;
            width: 20px;
            border-radius: 3px;
        }

        [data-animate].is-visible .grow-bar {
            width: var(--target-width) !important;
        }

        .content-loading {
            opacity: 0.7;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .content-loaded {
            opacity: 1;
            pointer-events: auto;
            transition: opacity 0.3s ease;
        }


        @media (max-width: 767px) {

            #pricing-swipe-container,
            #chart-swipe-container {
                min-height: 500px;
                position: relative;
                touch-action: pan-y;
                overflow: hidden !important;
                width: 100% !important;
                max-width: 100vw !important;
            }

            #pricing-swipe-container {
                padding-top: 20px;
            }

            #chart-swipe-container {
                min-height: 420px;
            }

            #pricing-swipe-container .pricing-card,
            #chart-swipe-container .chart-card {
                position: absolute;
                width: 100%;
                max-width: 100%;
                height: auto;
                top: 0;
                left: 0;
                transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
                opacity: 0;
                will-change: transform, opacity;
                display: flex;
                flex-direction: column;
            }

            #pricing-swipe-container .pricing-card {
                overflow: visible;
                top: 20px;
                height: auto;
                padding-bottom: 20px;
            }

            #chart-swipe-container .chart-card {
                overflow: hidden;
            }

            #pricing-swipe-container .pricing-card.active,
            #chart-swipe-container .chart-card.active {
                transform: translateX(0) scale(1);
                opacity: 1;
                z-index: 10;
                pointer-events: auto;
            }

            #pricing-swipe-container .pricing-card.next,
            #chart-swipe-container .chart-card.next {
                transform: translateX(80%) scale(0.9);
                opacity: 0;
                z-index: 5;
                pointer-events: none;
            }

            #pricing-swipe-container .pricing-card.prev,
            #chart-swipe-container .chart-card.prev {
                transform: translateX(-80%) scale(0.9);
                opacity: 0;
                z-index: 5;
                pointer-events: none;
            }

            #pricing-dots button.active,
            #chart-dots button.active {
                background-color: var(--brand);
            }
        }


        .pricing-card li {
            transition: transform 0.3s ease-out;
            will-change: transform;
        }

        .pricing-card:hover li {
            transform: translateX(6px);
        }

        .pricing-card:hover li:nth-child(1) {
            transition-delay: 0ms;
        }

        .pricing-card:hover li:nth-child(2) {
            transition-delay: 50ms;
        }

        .pricing-card:hover li:nth-child(3) {
            transition-delay: 100ms;
        }

        .pricing-card:hover li:nth-child(4) {
            transition-delay: 150ms;
        }


        nav a {
            position: relative;
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            width: 0;
            height: 2px;
            border-radius: 2px;
            background: var(--brand);
            transform: translateX(-50%);
            transition: width 0.3s var(--ease-out-expo);
        }
        nav a:hover::after {
            width: 70%;
        }


        @keyframes shimmer-pill {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        .hero-pill {
            background: rgba(0, 5, 248, 0.04);
            border: 1px solid rgba(0, 5, 248, 0.12);
            box-shadow: 0 0 20px rgba(0, 5, 248, 0.06);
        }


        .pulse-ring {
            position: relative;
            z-index: 1;
        }



        .demo-hover .transform.rotate-3 {
            transform: rotate(0deg) !important;
        }

        .demo-hover .transform.-rotate-2 {
            transform: translateY(-2.5rem) rotate(0deg) !important;
        }

        .demo-hover .bg-green-500.absolute.opacity-0 {
            opacity: 1 !important;
            transform: scale(1) !important;
        }

        .demo-hover .h-1\.5 .bg-green-500 {
            width: 100% !important;
        }




        .demo-hover .flex.-space-x-3>div:nth-child(1) {
            transform: scale(1.1) translateX(-0.5rem) !important;
        }

        .demo-hover .flex.-space-x-3>div:nth-child(2) {
            transform: scale(1.1) !important;
        }

        .demo-hover .flex.-space-x-3>div:nth-child(3) {
            transform: scale(1.1) translateX(0.5rem) !important;
        }

        .demo-hover .bg-red-500.opacity-0 {
            opacity: 1 !important;
        }


        .demo-hover .h-1.bg-red-500.w-0 {
            width: 100% !important;
        }

        .demo-hover .group-hover\:scale-125 {
            transform: scale(1.25) !important;
        }


        .demo-hover .flex.gap-\[-8px\] {
            gap: 0.25rem !important;
        }

        .demo-hover .flex.gap-\[-8px\]>div {
            margin-left: 0 !important;
        }


        .demo-hover .bg-surface.max-w-\[160px\] {
            transform: scale(1.1) rotate(2deg) !important;
        }


        .pricing-card.demo-hover li {
            transform: translateX(6px);
        }


        .ai-step-card.demo-hover {
            transform: scale(1.05);
        }

        .ai-catalyst.demo-hover .bg-brand {
            opacity: 0.4 !important;
        }

        .ai-catalyst.demo-hover .text-brand {
            transform: scale(1.1);
        }


        @keyframes float-subtle {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .animate-float-subtle {
            animation: float-subtle 6s ease-in-out infinite;
        }


        /* Configurateur — steps */
        .cfg-step {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .cfg-step.is-leaving-left {
            opacity: 0;
            transform: translateX(-40px);
            position: absolute;
            inset: 0;
        }

        .cfg-step.is-leaving-right {
            opacity: 0;
            transform: translateX(40px);
            position: absolute;
            inset: 0;
        }

        .cfg-step.is-entering {
            opacity: 0;
            transform: translateX(40px);
        }

        .cfg-step.is-entering-reverse {
            opacity: 0;
            transform: translateX(-40px);
        }

        /* Custom Scrollbar */
        .cfg-scrollbar {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        #contact-form-fields {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        .cfg-scrollbar::-webkit-scrollbar { width: 6px; }
        .cfg-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .cfg-scrollbar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 10px; }
        .cfg-scrollbar::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

        /* Progress bar */
        .cfg-progress-fill {
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cfg-progress-dot {
            transition: all 0.3s ease;
        }

        .cfg-progress-dot.is-active {
            background-color: var(--brand);
            color: white;
            transform: scale(1.15);
            box-shadow: 0 0 0 4px rgba(0, 5, 248, 0.15);
        }

        .cfg-progress-dot.is-done {
            background-color: var(--brand);
            color: white;
        }

        /* Option cards */
        .cfg-option {
            transition: all 0.2s ease;
            cursor: pointer;
            user-select: none;
        }
        .cfg-option:active {
            transform: scale(0.98);
        }

        /* Nav buttons */
        .cfg-nav-next {
            transition: all 0.2s ease;
        }

        .cfg-nav-next:hover svg {
            transform: translateX(3px);
        }

        .cfg-nav-next svg {
            transition: transform 0.2s ease;
        }

        /* Mobile bar */
        #sim-mobile-bar {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #sim-mobile-bar.is-visible {
            transform: translateY(0) !important;
        }

        /* Price line animation */
        .cfg-price-line {
            animation: cfg-line-in 0.3s ease both;
        }

        @keyframes cfg-line-in {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Step container */
        .cfg-steps-wrapper {
            position: relative;
            min-height: 280px;
        }
        @keyframes pulseGreen {
            0% { transform: scale(1); opacity: 0.4; }
            100% { transform: scale(1.12); opacity: 0; }
        }
        .animate-pulse-green {
            animation: pulseGreen 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* --- Custom Split-Screen & Modal Styles --- */
        body.mobile-modal-open main,
        body.mobile-modal-open footer {
            transform: scale(0.95);
            transform-origin: top center;
            border-radius: 1.5rem;
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            filter: brightness(0.85);
        }

        main, footer {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        body.mobile-modal-open {
            background-color: #050505;
        }

        /* ── FAQ accordion — animated unfold ── */
        details {
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        details[open] {
            border-color: rgba(0, 5, 248, 0.12) !important;
            box-shadow: 0 2px 12px rgba(0, 5, 248, 0.04), 0 1px 3px rgba(0,0,0,0.02) !important;
        }
        details[open] summary {
            color: var(--brand) !important;
        }
        details summary {
            transition: color 0.2s ease;
            list-style: none;
        }
        details summary::-webkit-details-marker { display: none; }

        .faq-content {
            overflow: hidden;
            transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
            opacity: 0;
            height: 0;
        }
        details[open] .faq-content {
            opacity: 1;
        }

        /* ── Portfolio card overlay gradient ── */
        .portfolio-swiper .swiper-slide .aspect-\[4\/3\]::after,
        .portfolio-swiper .md\:grid .group .aspect-\[4\/3\]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(to top, rgba(0,0,0,0.08), transparent);
            pointer-events: none;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .group:hover .aspect-\[4\/3\]::after { opacity: 0; }

        /* ── Bento card gradient border on hover ── */
        [data-feature-id] {
            position: relative;
        }
        [data-feature-id]::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(0,5,248,0.12), transparent 40%, transparent 60%, rgba(99,102,241,0.08));
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 0;
            pointer-events: none;
        }
        [data-feature-id]:hover::before { opacity: 1; }

        /* ── Footer gradient ── */
        footer#contact {
            background: #0A0A0A !important;
        }

        /* ── Configurator modal animation ── */
        #cfg {
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
        }
        #cfg.cfg-closed {
            transform: translateY(100%);
            opacity: 0;
        }
        #cfg.cfg-open {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        @media (min-width: 1024px) {
            #cfg.cfg-closed {
                transform: translateY(1.5rem) scale(0.97);
            }
        }

        /* ── Pricing Swiper pagination ── */
        .pricing-swiper-pagination .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #d1d5db;
            opacity: 1;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .pricing-swiper-pagination .swiper-pagination-bullet-active {
            background: var(--brand);
            width: 24px;
            border-radius: 4px;
        }

        /* ── Smooth section transitions ── */
        section + section {
            position: relative;
        }