/* CSS Variables for Navigation Morphing driven by JS */
        :root {
            --nav-p: 0;
            --scroll-p: 0;
        }

        /* Essential Global Resets */
        body {
            font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
            font-weight: 400;
            letter-spacing: -0.005em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        /* Display utilities — Georgia (system serif, pas de chargement réseau) */
        .font-serif, .font-display {
            font-family: Georgia, ui-serif, serif;
            letter-spacing: -0.015em;
        }
        .font-serif.italic, .italic.font-serif, .display-italic,
        .font-serif .italic, .font-display .italic,
        .font-serif em, .font-display em, .font-serif i, .font-display i {
            font-style: italic;
        }

        /* Premium eyebrow — small caps Manrope */
        .eyebrow {
            font-family: 'Manrope', sans-serif;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: #647488;
        }
        
        /* Premium Grain Overlay */
        .noise-layer {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 9999;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.025;
            mix-blend-mode: multiply;
        }

        /* Sticky header — gentle fade-out on scroll down, brisk reveal on scroll up */
        #site-header {
            transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
                        opacity 0.75s cubic-bezier(0.4, 0, 0.6, 1);
            will-change: transform, opacity;
        }
        #site-header:not(.is-hidden) {
            transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                        opacity 0.6s cubic-bezier(0.4, 0, 0.4, 1);
        }
        #site-header.is-hidden {
            transform: translateY(-60%);
            opacity: 0;
            pointer-events: none;
        }

        /* Wrapper that mirrors morph-nav width so braces can sit at its outer edges */
        .morph-nav-wrap {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            max-width: calc(100% - (var(--nav-p) * clamp(0px, 100% - 1024px, 100vw)));
            margin-top: calc(var(--nav-p) * 1rem);
            transition: all 0.1s linear;
        }

        /* Pill brace delimiters — flank the morphed pill on left/right */
        .nav-pill-brace {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            line-height: 1;
            pointer-events: none;
            user-select: none;
            opacity: var(--nav-p, 0);
            transition: opacity 0.15s linear;
            z-index: 5;
            font-size: clamp(2.4rem, 1.6rem + 1vw, 3rem);
        }
        .nav-pill-brace-left  { left:  -0.42em; }
        .nav-pill-brace-right { right: -0.42em; }
        .nav-pill-brace .brace-char {
            display: inline-block;
            font-family: Georgia, ui-serif, serif;
            font-weight: 400;
            color: #FF5757;
            line-height: 1;
            /* Slight letterpress / mis-registered print offset */
            text-shadow:
                1.5px 1.5px 0 rgba(255, 87, 87, 0.45),
                -0.5px -0.5px 0 rgba(255, 87, 87, 0.25);
        }

        /* Interpolated Morphing Navbar */
        .morph-nav {
            position: relative;
            /* Clip children (scroll progress line) to the morphing pill shape */
            overflow: hidden;
            /* Radius transitions from 0 to 99px (full pill) */
            border-radius: calc(var(--nav-p) * 99px);
            /* Background shifts from transparent cream to near-opaque white */
            background-color: rgba(255, 255, 255, calc(var(--nav-p) * 0.97));
            /* Blur applies dynamically */
            backdrop-filter: blur(calc(var(--nav-p) * 16px));
            -webkit-backdrop-filter: blur(calc(var(--nav-p) * 16px));
            /* Soft premium shadow */
            box-shadow: 0 calc(var(--nav-p) * 10px) calc(var(--nav-p) * 30px) -5px rgba(15, 34, 55, calc(var(--nav-p) * 0.08));
            /* Border transition for crispness vs softness */
            border: 1px solid rgba(15, 34, 55, calc(var(--nav-p) * 0.05));
            transition: all 0.1s linear;
        }

        .scroll-progress-line {
            width: calc(var(--scroll-p) * 100%);
            transition: width 0.1s linear;
        }

        /* Nav dropdown panels — siblings of .morph-nav inside .morph-nav-wrap (which is overflow:visible).
           Anchored absolutely just below the morphing nav. JS sets `left`. */
        .nav-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            z-index: 60;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
            pointer-events: none;
            background: #ffffff;
            border: 1px solid rgba(15, 34, 55, 0.06);
            border-radius: 20px;
            box-shadow:
                0 24px 60px -20px rgba(15, 34, 55, 0.18),
                0 8px 24px -10px rgba(15, 34, 55, 0.10);
            padding: 14px;
        }
        .nav-dropdown.is-open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
            transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
        }
        .nav-dropdown-eyebrow {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(15, 34, 55, 0.45);
            padding: 6px 12px 8px;
            display: block;
        }
        .nav-dropdown-grid {
            display: grid;
            gap: 2px;
        }
        .nav-dropdown[data-menu="outils"] .nav-dropdown-grid {
            grid-template-columns: 1fr 1fr;
            gap: 2px 6px;
        }
        .nav-dropdown-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 600;
            color: #0F2237;
            text-transform: none;
            letter-spacing: -0.005em;
            transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
            white-space: nowrap;
        }
        .nav-dropdown-item:hover {
            background-color: #F9F5F3;
            color: #FF5757;
        }
        .nav-dropdown-item .ph,
        .nav-dropdown-item [class^="ph-"],
        .nav-dropdown-item [class*=" ph-"] {
            font-size: 18px;
            color: rgba(15, 34, 55, 0.55);
            transition: color 0.15s ease, transform 0.2s ease;
            flex-shrink: 0;
        }
        .nav-dropdown-item:hover .ph,
        .nav-dropdown-item:hover [class^="ph-"],
        .nav-dropdown-item:hover [class*=" ph-"] {
            color: #FF5757;
            transform: scale(1.08);
        }

        /* Trigger caret */
        .nav-trigger {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }
        .nav-trigger .nav-caret {
            font-size: 10px;
            opacity: 0.6;
            transition: transform 0.2s ease, opacity 0.15s ease;
        }
        .nav-trigger[aria-expanded="true"] .nav-caret {
            transform: rotate(180deg);
            opacity: 1;
        }
        .nav-trigger[aria-expanded="true"] {
            color: #FF5757;
        }

        @media (prefers-reduced-motion: reduce) {
            .nav-dropdown,
            .nav-dropdown-item,
            .nav-dropdown-item .ph {
                transition: none !important;
            }
        }

        /* Scroll-driven nav compression — padding & logo height interpolate via --nav-p */
        #nav-inner {
            padding-top: calc(1rem - var(--nav-p) * 0.5rem);
            padding-bottom: calc(1rem - var(--nav-p) * 0.5rem);
            transition: padding 0.1s linear;
        }
        #nav-logo {
            height: calc(5rem - var(--nav-p) * 2.25rem);
            transition: height 0.1s linear;
        }

        /* Hand-drawn Underlines */
        .svg-underline {
            position: absolute;
            left: 0;
            width: 100%;
            height: 0.5em;
            bottom: -0.1em;
            z-index: -1;
            overflow: visible;
        }
        .svg-underline path {
            stroke-dasharray: 500;
            stroke-dashoffset: 500;
            animation: drawLine 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            animation-delay: 0.5s;
        }
        @keyframes drawLine {
            to { stroke-dashoffset: 0; }
        }

        /* Intersection Observer Animations */
        .reveal-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Slide-in from the left (used by roadmap timeline nodes for left→right progression) */
        .reveal-left {
            opacity: 0;
            transform: translateX(-40px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-left.is-visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .scatter-card {
            opacity: 0;
            transform: scale(0.9) translateY(20px) rotate(0deg);
            filter: blur(10px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .scatter-card.is-visible {
            opacity: 1;
            filter: blur(0);
            /* Final transform dictated by inline styles/tailwind */
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #F9F5F3; }
        ::-webkit-scrollbar-thumb { background: #0F2237; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #FF5757; }

        /* Roadmap Path Line — clip-path is updated frame-by-frame from JS based on scroll position */
        .clip-draw {
            clip-path: inset(0 100% 0 0);
        }

        /* Roadmap timeline — alternating top/bottom cards with dashed connector to dot (desktop) */
        @media (min-width: 768px) {
            .roadmap-step .roadmap-card {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                margin: 0;
            }
            .roadmap-step.is-top .roadmap-card { bottom: calc(50% + 28px); }
            .roadmap-step.is-bottom .roadmap-card { top: calc(50% + 28px); }
            .roadmap-step .roadmap-connector {
                position: absolute;
                left: 50%;
                width: 0;
                height: 28px;
                border-left: 1.5px dashed rgba(15, 34, 55, 0.28);
                transform: translateX(-50%);
                z-index: 5;
            }
            .roadmap-step.is-top .roadmap-connector { bottom: 50%; }
            .roadmap-step.is-bottom .roadmap-connector { top: 50%; }
            .roadmap-step.is-featured .roadmap-connector {
                border-left-color: rgba(255, 87, 87, 0.55);
                height: 32px;
            }
        }

        /* Hide scrollbars on tabs */
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Architecture section — node connector lines (vertical dotted between flowchart nodes) */
        .node-connector { position: relative; }
        .node-connector::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -14px;
            width: 1.5px;
            height: 14px;
            background: rgba(15, 34, 55, 0.12);
            transform: translateX(-50%);
        }
        .node-connector:last-child::after { display: none; }

        /* Animated dashed flow paths from cards down to engine */
        @keyframes flow-dash { to { stroke-dashoffset: -24; } }
        .path-flow {
            stroke-dasharray: 6 6;
            animation: flow-dash 1.6s linear infinite;
        }

        /* Pillar card hover — subtle background tint (no lift) */
        article.pillar-card {
            background-color: #ffffff;
            transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        article.pillar-card:hover {
            background-color: #F1F4F8; /* light cool grey tint, subtle */
        }

        /* Pillar card flowchart — uniform node min-height for cross-card alignment */
        .pillar-card .view-process > div { min-height: 64px; }

        /* Push toggle button to the bottom of every card (cross-card alignment) */
        .pillar-card .card-toggle { margin-top: auto !important; }

        /* Card view toggle (process / deliverables) */
        .pillar-card[data-view="process"]      .view-process,
        .pillar-card[data-view="deliverables"] .view-deliverables { display: block; }
        .pillar-card[data-view="process"]      .view-deliverables,
        .pillar-card[data-view="deliverables"] .view-process       { display: none; }
        .pillar-card[data-view="process"]      .toggle-label-deliverables,
        .pillar-card[data-view="deliverables"] .toggle-label-process       { display: none; }
        .pillar-card[data-view="deliverables"] .toggle-label-deliverables,
        .pillar-card[data-view="process"]      .toggle-label-process       { display: inline-flex; align-items: center; gap: 0.4rem; }

        /* ===== Mobile-only overrides (alpha v1.x) ===== */

        /* Piliers : afficher uniquement les livrables, masquer process + toggle */
        @media (max-width: 767px) {
            .pillar-card .view-process,
            .pillar-card .card-toggle { display: none !important; }
            .pillar-card .view-deliverables { display: block !important; }
        }

        /* Roadmap "30 jours" : swipe horizontal sur mobile, conserve le pinning desktop */
        @media (max-width: 767px) {
            #roadmap > .relative.h-\[300vh\] { height: auto !important; }
            #roadmap .sticky { position: static !important; height: auto !important; }

            #roadmap .flex.flex-col {
                flex-direction: row !important;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 1rem !important;
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
                scroll-padding-left: 1.5rem;
                scrollbar-width: none;
            }
            #roadmap .flex.flex-col::-webkit-scrollbar { display: none; }

            #roadmap .roadmap-step {
                flex: 0 0 80vw;
                scroll-snap-align: center;
            }

            #roadmap .absolute.left-\[30px\] { display: none; }
            #roadmap .roadmap-step > .md\:hidden.absolute { display: none; }

            #roadmap .roadmap-card { width: 100% !important; margin: 0 !important; }

            /* Force la visibilité (le reveal-node attend un scroll vertical qui ne vient pas en mode swipe) */
            #roadmap .roadmap-step.reveal-node { opacity: 1 !important; transform: none !important; }
        }

        /* Newsletter : masquée sur mobile */
        @media (max-width: 767px) {
            #footer-newsletter { display: none; }
        }

        /* Roadmap nav arrows — légère oscillation horizontale + état grisé */
        #roadmap-prev i,
        #roadmap-next i {
            display: inline-block;
            transform-origin: center;
        }
        #roadmap-prev i { animation: arrow-nudge-left 2.4s ease-in-out infinite; }
        #roadmap-next i { animation: arrow-nudge-right 2.4s ease-in-out infinite; }
        @keyframes arrow-nudge-left {
            0%, 100% { transform: translateX(0); }
            50%      { transform: translateX(-3px); }
        }
        @keyframes arrow-nudge-right {
            0%, 100% { transform: translateX(0); }
            50%      { transform: translateX(3px); }
        }
        #roadmap-nav button.is-disabled {
            opacity: 0.35;
            cursor: default;
            pointer-events: none;
            box-shadow: none;
        }
        #roadmap-nav button.is-disabled i {
            animation: none;
            transform: translateX(0);
        }

        /* Roadmap horizontal timeline thread (mobile) — chevrons indiquant les semaines */
        .timeline-step {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid rgba(15, 34, 55, 0.18);
            color: rgba(15, 34, 55, 0.40);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .timeline-step i { font-size: 12px; line-height: 1; }
        .timeline-step.is-active {
            background: #FF5757;
            border-color: #fff;
            color: #fff;
            box-shadow: 0 0 0 4px rgba(255, 87, 87, 0.2);
            transform: scale(1.08);
        }
        @media (prefers-reduced-motion: reduce) {
            #roadmap-prev i,
            #roadmap-next i { animation: none; }
        }

        /* WhatsApp FAB — pulse unique synchronisé sur le premier zoom in */
        .whatsapp-fab { position: fixed; }
        .whatsapp-fab::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-color: #FF5757;
            opacity: 0;
            z-index: 0;
            pointer-events: none;
            animation: whatsapp-pulse 2.208s cubic-bezier(0.16, 1, 0.3, 1) infinite;
        }
        @keyframes whatsapp-pulse {
            0%   { transform: scale(1);   opacity: 0.55; }
            72%  { transform: scale(1.9); opacity: 0; }
            100% { transform: scale(1.9); opacity: 0; }
        }
        /* Zoom in/out rebondissant — bounce snappy comprimé dans 75% du cycle, puis repos */
        .whatsapp-fab img {
            animation: whatsapp-zoom 2.208s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            transform-origin: center center;
        }
        @keyframes whatsapp-zoom {
            0%   { transform: scale(1); }
            15%  { transform: scale(1.18); }   /* zoom in — pic (le "doigt appuie") */
            34%  { transform: scale(0.92); }   /* rebond principal sous 1 */
            49%  { transform: scale(1.06); }   /* petit ressaut */
            64%  { transform: scale(0.97); }   /* mini-creux */
            75%  { transform: scale(1); }      /* stabilisation */
            100% { transform: scale(1); }      /* repos jusqu'à la prochaine pression */
        }
        @media (prefers-reduced-motion: reduce) {
            .whatsapp-fab::before,
            .whatsapp-fab img { animation: none; }
        }

        /* Funnel chain — CRM toast notification (step 1) */
        .crm-notification {
            background: #1A2942;
            color: #F9F5F3;
            border-radius: 1.25rem;
            padding: 0.9rem 1.1rem;
            width: 100%;
            max-width: 22rem;
            box-shadow: 0 22px 44px -16px rgba(0,0,0,0.65);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .crm-notification-head {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.78rem;
            margin-bottom: 0.5rem;
        }
        .crm-notification-head .crm-brand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background: #FF5757;
            color: #ffffff;
            font-size: 11px;
        }
        .crm-notification-head .crm-title {
            font-weight: 700;
            color: #F9F5F3;
        }
        .crm-notification-head .crm-time {
            margin-left: auto;
            font-style: italic;
            font-size: 0.72rem;
            color: rgba(249,245,243,0.55);
        }
        .crm-notification-head .crm-dots {
            color: rgba(249,245,243,0.55);
            letter-spacing: 0.1em;
            font-size: 0.95rem;
            line-height: 0;
            padding-bottom: 6px;
        }
        .crm-notification-body {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }
        .crm-notification-avatar {
            width: 32px;
            height: 32px;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 800;
            color: #0F2237;
            background: linear-gradient(135deg, #FFD7C2, #FFAFA0);
            flex-shrink: 0;
        }
        .crm-notification-text {
            font-size: 0.85rem;
            line-height: 1.35;
            color: #F9F5F3;
        }
        .crm-notification-text strong { font-weight: 700; }

        /* Funnel chain — dashed outline pill (step 2) */
        .funnel-pill-dashed {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(249,245,243,0.04);
            color: #F9F5F3;
            padding: 0.95rem 2rem;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 1rem;
            border: 1.5px dashed rgba(249,245,243,0.55);
        }

        /* Funnel chain — final solid CTA pill */
        .funnel-pill-final {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            background: #FF5757;
            color: #ffffff;
            padding: 1rem 1.9rem;
            border-radius: 9999px;
            font-weight: 800;
            font-size: 1.05rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow: 0 22px 44px -10px rgba(255,87,87,0.55);
            transition: transform 0.3s ease;
        }
        .funnel-pill-final:hover { transform: translateY(-2px); }
        .funnel-pill-final .check-circle {
            width: 26px;
            height: 26px;
            border-radius: 9999px;
            border: 2px solid #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
        }

        /* Slow rotating dotted ring for engine flywheel */
        @keyframes spin-slow { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
        .animate-spin-slow { animation: spin-slow 24s linear infinite; }

        /* Accordion Custom */
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }
        details[open] .toggle-icon { transform: rotate(90deg); }

        /* ============ Implémentation — Tab system ============ */
        .impl-tabnav {
            display: flex;
            gap: 0.4rem;
            background: rgba(15,34,55,0.05);
            padding: 0.4rem;
            border-radius: 9999px;
            width: 100%;
            overflow-x: auto;
            scrollbar-width: none;
            position: relative;
        }
        .impl-tabnav::-webkit-scrollbar { display: none; }
        @media (min-width: 768px) {
            .impl-tabnav {
                width: fit-content;
                margin-left: auto;
                margin-right: auto;
                overflow: visible;
            }
        }
        .impl-tab-slider {
            position: absolute;
            top: 0.4rem;
            bottom: 0.4rem;
            left: 0;
            width: 0;
            background: #FFFFFF;
            border-radius: 9999px;
            box-shadow: 0 10px 28px -10px rgba(15,34,55,0.22), 0 2px 4px rgba(15,34,55,0.04);
            transform: translateX(0);
            transition: transform 0.55s cubic-bezier(0.65, 0.05, 0.36, 1), width 0.55s cubic-bezier(0.65, 0.05, 0.36, 1);
            z-index: 0;
            pointer-events: none;
        }
        .impl-tab-btn {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1.15rem;
            border-radius: 9999px;
            background: transparent;
            border: none;
            cursor: pointer;
            text-align: left;
            color: rgba(15,34,55,0.58);
            transition: color 0.3s ease;
            white-space: nowrap;
            position: relative;
            z-index: 1;
            font-family: inherit;
        }
        .impl-tab-btn:hover { color: #0F2237; }
        .impl-tab-btn:hover .impl-tab-icon { transform: scale(1.07) rotate(-3deg); }
        .impl-tab-btn:hover .impl-tab-arrow { transform: translateX(4px); opacity: 1; }
        .impl-tab-btn[aria-selected="true"] {
            color: #0F2237;
        }
        .impl-tab-btn[aria-selected="true"] .impl-tab-arrow {
            opacity: 0;
            transform: translateX(6px);
        }
        .impl-tab-icon {
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 0.625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
        }
        .impl-tab-text {
            display: flex;
            flex-direction: column;
            min-width: 0;
            line-height: 1.15;
        }
        .impl-tab-label {
            font-weight: 700;
            font-size: 0.875rem;
            letter-spacing: -0.01em;
        }
        .impl-tab-sub {
            font-size: 0.7rem;
            font-weight: 500;
            opacity: 0.7;
            margin-top: 2px;
        }
        .impl-tab-arrow {
            font-size: 0.9rem;
            margin-left: auto;
            opacity: 0.45;
            transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
        }

        /* Panels */
        .impl-panels {
            position: relative;
            margin-top: 2.75rem;
        }
        .impl-panel {
            display: none;
        }
        .impl-panel.is-active {
            display: block;
            animation: implPanelInFromLeft 0.55s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
        }
        .impl-panel.is-active.from-right {
            animation-name: implPanelInFromRight;
        }
        @keyframes implPanelInFromLeft {
            0%   { opacity: 0; transform: translateX(-56px); filter: blur(6px); }
            55%  { filter: blur(0); }
            100% { opacity: 1; transform: translateX(0); filter: blur(0); }
        }
        @keyframes implPanelInFromRight {
            0%   { opacity: 0; transform: translateX(56px); filter: blur(6px); }
            55%  { filter: blur(0); }
            100% { opacity: 1; transform: translateX(0); filter: blur(0); }
        }
        .impl-panel.is-active > .impl-panel-inner > * {
            opacity: 0;
            animation: implChildInFromLeft 0.55s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
        }
        .impl-panel.is-active.from-right > .impl-panel-inner > * {
            animation-name: implChildInFromRight;
        }
        .impl-panel.is-active > .impl-panel-inner > *:nth-child(1) { animation-delay: 0.05s; }
        .impl-panel.is-active > .impl-panel-inner > *:nth-child(2) { animation-delay: 0.12s; }
        .impl-panel.is-active > .impl-panel-inner > *:nth-child(3) { animation-delay: 0.20s; }
        @keyframes implChildInFromLeft {
            from { opacity: 0; transform: translateX(-28px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes implChildInFromRight {
            from { opacity: 0; transform: translateX(28px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        /* ===== Workflow cards sequential glow (panel "Gagner du temps") ===== */
        .wf-step {
            position: relative;
        }
        .wf-step::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
            animation: wf-pulse 7s ease-in-out infinite;
        }
        @keyframes wf-pulse {
            0%, 12%, 100% {
                box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
            }
            6% {
                box-shadow: 0 0 32px 6px rgba(45, 212, 191, 0.55), 0 0 70px 14px rgba(45, 212, 191, 0.18);
            }
        }
        .wf-step-1::after { animation-delay: 0s; }
        .wf-step-2::after { animation-delay: 0.9s; }
        .wf-step-3::after { animation-delay: 1.8s; }
        .wf-step-4::after { animation-delay: 2.7s; }
        .wf-step-5::after { animation-delay: 3.6s; }
        .wf-step-6::after { animation-delay: 4.5s; }

        @media (prefers-reduced-motion: reduce) {
            .impl-panel.is-active,
            .impl-panel.is-active > .impl-panel-inner > *,
            .impl-tab-btn,
            .impl-tab-icon,
            .impl-tab-arrow,
            .wf-step::after {
                animation: none !important;
                transition: none !important;
            }
        }

        /* ===== Navigation mobile — section accélérateurs (≤ 767px) ===== */
        @media (max-width: 767px) {
            .impl-tabnav { display: none; }

            .impl-mobile-nav {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
                margin-bottom: 1.25rem;
            }

            .impl-mobile-header {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                background: rgba(15,34,55,0.05);
                padding: 0.4rem;
                border-radius: 9999px;
            }

            .impl-mobile-arrow {
                flex-shrink: 0;
                width: 2.5rem;
                height: 2.5rem;
                border-radius: 9999px;
                background: #fff;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(15,34,55,0.65);
                cursor: pointer;
                box-shadow: 0 1px 5px rgba(15,34,55,0.10);
                transition: color 0.2s ease, box-shadow 0.2s ease;
                font-size: 1rem;
            }
            .impl-mobile-arrow:disabled {
                opacity: 0.28;
                cursor: default;
                box-shadow: none;
            }

            .impl-mobile-tab-display {
                flex: 1;
                display: flex;
                align-items: center;
                gap: 0.55rem;
                min-width: 0;
                padding: 0 0.25rem;
            }

            .impl-mobile-icon {
                width: 2rem;
                height: 2rem;
                border-radius: 0.5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                font-size: 1rem;
            }

            .impl-mobile-text {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                line-height: 1.2;
            }

            .impl-mobile-label {
                font-weight: 700;
                font-size: 0.8rem;
                letter-spacing: -0.01em;
                color: #0F2237;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .impl-mobile-sub {
                font-size: 0.65rem;
                color: rgba(15,34,55,0.52);
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .impl-mobile-counter {
                flex-shrink: 0;
                font-size: 0.68rem;
                font-weight: 700;
                color: rgba(15,34,55,0.35);
                letter-spacing: 0.03em;
            }

            .impl-mobile-dots {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0.35rem;
            }

            .impl-mobile-dot {
                height: 0.28rem;
                width: 0.28rem;
                border-radius: 9999px;
                background: rgba(15,34,55,0.2);
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .impl-mobile-dot.is-active {
                background: #FF5757;
                width: 1.2rem;
            }

            /* Swipe area hint */
            .impl-panels {
                touch-action: pan-y;
                user-select: none;
            }

            /* Bottom dots container */
            .impl-mobile-dots-bottom {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0.35rem;
                margin-top: 1.25rem;
            }

            /* Swipe hint tilt — se déclenche une fois au chargement */
            .impl-panels.swipe-hinting .impl-panel.is-active .impl-panel-inner {
                animation: impl-swipe-hint 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
            }
        }

        @keyframes impl-swipe-hint {
            0%   { transform: translateX(0) rotate(0deg); }
            35%  { transform: translateX(10px) rotate(1.8deg); }
            65%  { transform: translateX(-2px) rotate(-0.3deg); }
            100% { transform: translateX(0) rotate(0deg); }
        }

        @media (min-width: 768px) {
            .impl-mobile-nav { display: none; }
            .impl-mobile-dots-bottom { display: none; }
        }
    
.gtm-blog-mobile{display:none}@media(max-width:767px){.gtm-blog-mobile{display:inline-flex;color:#0F2237;font-size:12px;font-weight:700}.gtm-top-links{gap:12px!important}#nav-logo{height:58px;width:auto}}