:root { --cream: #FAF7F2; --teal: #0d9488; --teal-dark: #0f766e; }
  html { scroll-behavior: smooth; }
  body { background: var(--cream); font-family: 'Inter', system-ui, sans-serif; color: #1a1a1a; }
  html.dark body { background: #0a0a0a; color: #e5e5e5; }
  html.dark nav { background: rgba(20,20,20,.85) !important; border-color: #2a2a2a !important; }
  html.dark .card { background: #1a1a1a !important; border-color: #2a2a2a !important; }
  html.dark .text-gray-700 { color: #cbd5e0 !important; }
  html.dark .text-gray-600 { color: #a0aec0 !important; }
  html.dark .text-gray-900 { color: #f7fafc !important; }
  .hero-grad { background: linear-gradient(135deg, #0d9488 0%, #0891b2 50%, #1e40af 100%); }
  .card { transition: all .3s; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.1); }
  @keyframes fadeUp { from {opacity:0;transform:translateY(20px)} to {opacity:1;transform:translateY(0)} }
  .fade-up { animation: fadeUp .8s ease forwards; }
</style>

<!-- D456 - Uniform fonts master (DM Sans + Instrument Serif) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<style id="d456-fonts-master">
body, p, button, a, input, label, span, div { font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important; }
h1, h2, .hero-title, .page-hero h1, .page-hero h2 { font-family: 'Instrument Serif', Georgia, serif !important; font-weight: 600; letter-spacing: -.01em; }
h3, h4, h5, h6 { font-family: 'DM Sans', system-ui, sans-serif !important; font-weight: 700; letter-spacing: -.005em; }
strong, b { font-weight: 700; }
/* Anti-leak: hide any element with .internal-only or data-confidential */
[data-confidential="true"], .internal-only, .provider-name { display: none !important; }
</style>
<style id="d450-yacine-override-public">
/* === D450 Yacine: police DM Sans uniforme (Instrument Serif = anomalie) === */
html body, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body [style*="Instrument Serif"], html body [style*="Playfair"], 
html body [style*="font-family"][style*="serif"]:not([style*="sans-serif"]) {
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-style: normal !important;
}
html body h1 { font-weight: 800 !important; letter-spacing: -.025em !important; }
html body h2 { font-weight: 700 !important; letter-spacing: -.015em !important; }
html body h3, html body h4 { font-weight: 600 !important; }
</style>

<style id="d485-hide-duplicates">
/* D486 Yacine RESTAURATION - 3 widgets visibles WEVIA LIVE + WhatsApp + Chat WEVIA */
/* Garde 'Parler a WEVIA' header masque (widget chat suffit) + wr-floating-cta masque (barre enorme) */

/* Widget chat WEVIA (brain) - VISIBLE + repositionne top 70% droite */
.chat-toggle-btn {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    width: 64px !important;
    height: 64px !important;
    right: 24px !important;
    top: 70% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 9988 !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
}
.chat-toggle-btn span { font-size: 30px !important; }

/* WhatsApp - VISIBLE + repositionne top 50% droite */
#weval-whatsapp {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    width: 64px !important;
    height: 64px !important;
    right: 24px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 9989 !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
}
#weval-whatsapp img, #weval-whatsapp svg { width: 32px !important; height: 32px !important; }

/* MASQUE: barre enorme bas (wr-floating-cta couvre 185px de l'ecran) */
.wr-floating-cta { display: none !important; }

/* MASQUE: autres widgets WEVIA flottants concurrents */
#wevia-float-widget, .wevia-float-widget, .weval-gl,
[class*="wevia-floating"]:not(#d483-live-widget):not(.d483-toggle):not(.d479-wevia-floater) {
    display: none !important;
}

/* Mobile: 3 widgets repartis 25% / 50% / 75% */
@media (max-width: 768px) {
    .chat-toggle-btn {
        width: 56px !important; height: 56px !important;
        top: 75% !important; right: 12px !important;
        transform: translateY(-50%) !important;
    }
    .chat-toggle-btn span { font-size: 26px !important; }
    
    #weval-whatsapp {
        width: 56px !important; height: 56px !important;
        top: 50% !important; right: 12px !important;
        transform: translateY(-50%) !important;
    }
    #weval-whatsapp img, #weval-whatsapp svg { width: 28px !important; height: 28px !important; }
}
</style>

<link rel="stylesheet" href="/assets/d518-readability-fix.css?v=520">
<style id="d545-clean-theme-system">
:root { --bg-base: #FAF7F2; --bg-elev: #FFFFFF; --bg-sidebar: #f0ebe1; --bg-elev2: #f5f1e8; --text-primary: #1f2937; --text-secondary: #4b5563; --text-muted: #6b7280; --border-base: #e5e7eb; --teal-dark: #0f766e; --teal-light: #14b8a6; }
html.dark { --bg-base: #0a0e1a; --bg-elev: #111827; --bg-sidebar: #0f172a; --bg-elev2: #1f2937; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border-base: #1f2937; }
html, body { background: var(--bg-base) !important; color: var(--text-primary) !important; transition: background .25s, color .25s; }
.sidebar, aside.sidebar, aside.w-64 { background: var(--bg-sidebar) !important; border-color: var(--border-base) !important; }
.bg-white, .bg-slate-50 { background: var(--bg-elev) !important; }
.bg-gray-50, .bg-gray-100, .bg-slate-100 { background: var(--bg-elev2) !important; }
.bg-gray-900, .bg-slate-900 { background: var(--bg-elev) !important; }
.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-200 { border-color: var(--border-base) !important; }
.text-gray-400, .text-slate-400, .text-gray-500, .text-slate-500 { color: var(--text-muted) !important; }
.text-gray-600, .text-slate-600, .text-gray-700, .text-slate-700 { color: var(--text-secondary) !important; }
.text-gray-800, .text-slate-800, .text-gray-900, .text-slate-900 { color: var(--text-primary) !important; }
header, [class*="topbar"], nav.bg-white { background: var(--bg-elev) !important; border-color: var(--border-base) !important; }
main, .flex-1.overflow-y-auto { background: var(--bg-base) !important; }
.card, [class*="rounded-2xl"].border, [class*="rounded-xl"].border, .card-hover { background: var(--bg-elev) !important; border-color: var(--border-base) !important; }
input, textarea, select { background: var(--bg-elev2) !important; color: var(--text-primary) !important; border-color: var(--border-base) !important; }
.text-teal-700, .text-teal-800 { color: var(--teal-dark) !important; }
html.dark .text-teal-700, html.dark .text-teal-800 { color: var(--teal-light) !important; }
[style*="background-color:#0a0e1a"], [style*="background:#0a0e1a"], [style*="background:#0a0a0f"], [style*="background:#0f172a"], [style*="background:#111827"], [style*="background:#0b0d14"] { background: var(--bg-elev) !important; }
html:not(.dark), html:not(.dark) body { background: #FAF7F2 !important; color: #1f2937 !important; }
html.dark, html.dark body { background: #0a0e1a !important; color: #f1f5f9 !important; }
html:not(.dark) body[data-theme="dark"] { background: #FAF7F2 !important; color: #1f2937 !important; }
[id="d523-iframe-dark-fix"] { display: none !important; }
.bg-gradient-to-br, [class*="from-teal"] { background-image: linear-gradient(135deg, var(--teal-dark), var(--teal-light)) !important; }
#darkToggle, #d543ThemeToggle, #d544ThemeToggle, #d545ThemeToggle { transition: all .2s; border-radius: 8px; padding: 6px 10px; font-size: 18px; cursor: pointer; background: var(--bg-elev2) !important; color: var(--text-primary) !important; border: 1px solid var(--border-base) !important; position: fixed; top: 12px; right: 12px; z-index: 9990; }
#darkToggle:hover, #d543ThemeToggle:hover, #d544ThemeToggle:hover, #d545ThemeToggle:hover { background: var(--bg-elev) !important; transform: scale(1.05); border-color: var(--teal-light) !important; }
</style>
<script id="d545-theme-init">
(function() {
    const saved = localStorage.getItem('weval_theme') || 'light';
    if (saved === 'dark') document.documentElement.classList.add('dark');
    function ensureToggle() {
        let dt = document.getElementById('darkToggle') || document.getElementById('d543ThemeToggle') || document.getElementById('d544ThemeToggle') || document.getElementById('d545ThemeToggle');
        if (!dt) {
            dt = document.createElement('button');
            dt.id = 'd545ThemeToggle';
            dt.setAttribute('aria-label', 'Mode jour/nuit');
            dt.title = 'Mode jour/nuit';
            document.body.appendChild(dt);
        }
        const update = () => { dt.textContent = document.documentElement.classList.contains('dark') ? '☀️' : '🌙'; };
        update();
        if (!dt.dataset.dwired) {
            dt.dataset.dwired = '1';
            dt.addEventListener('click', () => {
                const isDark = document.documentElement.classList.contains('dark');
                const next = isDark ? 'light' : 'dark';
                document.documentElement.classList.toggle('dark', next === 'dark');
                localStorage.setItem('weval_theme', next);
                update();
            });
        }
        const d523 = document.getElementById('d523-iframe-dark-fix');
        if (d523) d523.remove();
        if (document.body.getAttribute('data-theme') === 'dark') document.body.removeAttribute('data-theme');
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', ensureToggle);
    else ensureToggle();
})();
</script>
<style id="d548-unified-theme-final">
/* D548 — UNIFIED THEME SYSTEM (cumul D542-D547 + final safety overrides)
   Garantit jour/nuit cohérent sur TOUTES les pages WEVAL
*/

/* ═══ MODE JOUR (default :root) ═══ */
:root {
    /* Background hierarchy */
    --bg-base: #FAF7F2 !important;
    --bg-elev: #FFFFFF !important;
    --bg-sidebar: #f0ebe1 !important;
    --bg-elev2: #f5f1e8 !important;
    --bg-elev3: #ebe5d6 !important;
    
    /* Legacy backgrounds (editorial luxury) */
    --ink: #FFFFFF !important;
    --ink1: #FAF7F2 !important;
    --ink2: #FFFFFF !important;
    --ink3: #f5f1e8 !important;
    --ink4: #f0ebe1 !important;
    --bg: #FAF7F2 !important;
    --bg-0: #FAF7F2 !important;
    --bg-1: #FFFFFF !important;
    --bg-2: #f5f1e8 !important;
    --bg-3: #f0ebe1 !important;
    --card: #FFFFFF !important;
    --card-bg: #FFFFFF !important;
    --surface: #FFFFFF !important;
    --s1: #FFFFFF !important;
    --s2: #f5f1e8 !important;
    --s3: #f0ebe1 !important;
    
    /* Foreground (TEXT) - DARK readable on light bg */
    --text-primary: #1f2937 !important;
    --text-secondary: #4b5563 !important;
    --text-muted: #6b7280 !important;
    --paper: #1f2937 !important;
    --tx: #1f2937 !important;
    --text: #1f2937 !important;
    --fg: #1f2937 !important;
    --foreground: #1f2937 !important;
    --color: #1f2937 !important;
    --fog: #6b7280 !important;
    --smoke: #9ca3af !important;
    --dim: #6b7280 !important;
    --dim2: #9ca3af !important;
    
    /* Borders */
    --border-base: #e5e7eb !important;
    --border-strong: #d1d5db !important;
    --line: rgba(212, 168, 83, 0.18) !important;
    --line2: rgba(212, 168, 83, 0.28) !important;
    --line3: rgba(212, 168, 83, 0.40) !important;
    --bd: #e5e7eb !important;
    --border: #e5e7eb !important;
    
    /* Accents (preserved) */
    --teal: #0d9488 !important;
    --teal-light: #14b8a6 !important;
    --teal-dark: #0f766e !important;
    --gold: #a57f2e !important;
    --gold-br: #b88a32 !important;
    --gold-dk: #8a661a !important;
}

/* ═══ MODE NUIT (html.dark) ═══ */
html.dark {
    /* Backgrounds dark */
    --bg-base: #0a0e1a !important;
    --bg-elev: #111827 !important;
    --bg-sidebar: #0f172a !important;
    --bg-elev2: #1f2937 !important;
    --bg-elev3: #2d3748 !important;
    
    /* Legacy backgrounds editorial preserved */
    --ink: #0a0e1a !important;
    --ink1: #0a0e1a !important;
    --ink2: #0f1420 !important;
    --ink3: #151b2b !important;
    --ink4: #1a2030 !important;
    --bg: #0a0e1a !important;
    --bg-0: #05060a !important;
    --bg-1: #0b0d15 !important;
    --bg-2: #11141f !important;
    --bg-3: #171b2a !important;
    --card: #111827 !important;
    --card-bg: #111827 !important;
    --surface: #111827 !important;
    --s1: #101018 !important;
    --s2: #16161f !important;
    --s3: #1c1c28 !important;
    
    /* Foreground LIGHT readable on dark */
    --text-primary: #f1f5f9 !important;
    --text-secondary: #cbd5e1 !important;
    --text-muted: #94a3b8 !important;
    --paper: #f4ecd8 !important;
    --tx: #e8e6f0 !important;
    --text: #f1f5f9 !important;
    --fg: #f1f5f9 !important;
    --foreground: #f1f5f9 !important;
    --color: #e8e6f0 !important;
    --fog: #94a3b8 !important;
    --smoke: #64748b !important;
    --dim: #8888aa !important;
    --dim2: #555570 !important;
    
    --border-base: #1f2937 !important;
    --border-strong: #374151 !important;
    --line: rgba(212, 168, 83, 0.12) !important;
    --line2: rgba(212, 168, 83, 0.22) !important;
    --line3: rgba(212, 168, 83, 0.35) !important;
    --bd: rgba(255, 255, 255, 0.06) !important;
    --border: #1f2937 !important;
    
    --gold: #d4a853 !important;
    --gold-br: #e6ba6a !important;
    --gold-dk: #a57f2e !important;
}

/* ═══ Base body styling (cascade-safe) ═══ */
html, body { 
    background: var(--bg-base) !important; 
    color: var(--text-primary) !important; 
    transition: background .25s, color .25s; 
}

/* Tailwind classes remap */
.bg-white, .bg-slate-50 { background: var(--bg-elev) !important; }
.bg-gray-50, .bg-gray-100, .bg-slate-100 { background: var(--bg-elev2) !important; }
.bg-gray-900, .bg-slate-900 { background: var(--bg-elev) !important; }
.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-200 { border-color: var(--border-base) !important; }
.text-gray-400, .text-slate-400, .text-gray-500, .text-slate-500 { color: var(--text-muted) !important; }
.text-gray-600, .text-slate-600, .text-gray-700, .text-slate-700 { color: var(--text-secondary) !important; }
.text-gray-800, .text-slate-800, .text-gray-900, .text-slate-900 { color: var(--text-primary) !important; }
.sidebar, aside.sidebar, aside.w-64 { background: var(--bg-sidebar) !important; border-color: var(--border-base) !important; }
header, nav.bg-white { background: var(--bg-elev) !important; border-color: var(--border-base) !important; }
input, textarea, select { background: var(--bg-elev2) !important; color: var(--text-primary) !important; border-color: var(--border-base) !important; }

/* Hardcoded overrides */
[style*="background-color:#0a0e1a"], [style*="background:#0a0e1a"], [style*="background:#0a0a0f"], [style*="background:#0f172a"], [style*="background:#111827"], [style*="background:#0b0d14"] { background: var(--bg-elev) !important; }
html:not(.dark) [style*="background:#fff"], html:not(.dark) [style*="background-color:#fff"] { background: var(--bg-elev) !important; }
html:not(.dark) body, html:not(.dark) { background: #FAF7F2 !important; color: #1f2937 !important; }
html.dark, html.dark body { background: #0a0e1a !important; color: #f1f5f9 !important; }
html:not(.dark) body[data-theme="dark"] { background: #FAF7F2 !important; color: #1f2937 !important; }
[id="d523-iframe-dark-fix"] { display: none !important; }

/* Toggle button */
#darkToggle, #d543ThemeToggle, #d544ThemeToggle, #d545ThemeToggle, #d548ThemeToggle {
    transition: all .2s; border-radius: 8px; padding: 6px 10px; font-size: 18px;
    cursor: pointer; background: var(--bg-elev2) !important; color: var(--text-primary) !important;
    border: 1px solid var(--border-base) !important;
    position: fixed; top: 12px; right: 12px; z-index: 9990;
}
#darkToggle:hover, #d543ThemeToggle:hover, #d544ThemeToggle:hover, #d545ThemeToggle:hover, #d548ThemeToggle:hover {
    background: var(--bg-elev) !important; transform: scale(1.05); border-color: var(--teal-light) !important;
}

html.dark .cockpit, html.dark .admin-panel { background-color: var(--bg-elev) !important; color: var(--text-primary) !important; }
.bg-gradient-to-br, [class*="from-teal"] { background-image: linear-gradient(135deg, var(--teal-dark), var(--teal-light)) !important; }
</style>
<script id="d548-theme-init">
(function() {
    var saved = localStorage.getItem("weval_theme") || "light";
    if (saved === "dark") document.documentElement.classList.add("dark");
    function ensureToggle() {
        var dt = document.getElementById("darkToggle") || document.getElementById("d543ThemeToggle") || document.getElementById("d544ThemeToggle") || document.getElementById("d545ThemeToggle") || document.getElementById("d548ThemeToggle");
        if (!dt) {
            dt = document.createElement("button");
            dt.id = "d548ThemeToggle";
            dt.title = "Mode jour/nuit";
            document.body.appendChild(dt);
        }
        var update = function() { dt.textContent = document.documentElement.classList.contains("dark") ? "\u2600\ufe0f" : "\ud83c\udf19"; };
        update();
        if (!dt.dataset.dwired) {
            dt.dataset.dwired = "1";
            dt.addEventListener("click", function() {
                var isDark = document.documentElement.classList.contains("dark");
                var next = isDark ? "light" : "dark";
                document.documentElement.classList.toggle("dark", next === "dark");
                localStorage.setItem("weval_theme", next);
                update();
            });
        }
        var d = document.getElementById("d523-iframe-dark-fix");
        if (d) d.remove();
        if (document.body.getAttribute("data-theme") === "dark") document.body.removeAttribute("data-theme");
    }
    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", ensureToggle);
    else ensureToggle();
})();
</script>
<style id="d549-toggle-position-fix">
/* D549 - Smart toggle positioning anti-overlap Logout (#weval-gl z=99990)
   et autres éléments top-right (live-stats, etc.)
   
   Position: à gauche du Logout (right: 90px au lieu de 12px)
   Z-index: 99991 (au-dessus de Logout 99990 si overlap quand même)
*/
#darkToggle, #d543ThemeToggle, #d544ThemeToggle, #d545ThemeToggle, #d548ThemeToggle, #d549ThemeToggle {
    position: fixed !important;
    top: 12px !important;
    right: 90px !important;     /* Décalé à gauche pour laisser place Logout (60px wide) + 18px gap */
    z-index: 99991 !important;  /* Au-dessus de #weval-gl (z=99990) */
    transition: all .2s !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    background: var(--bg-elev2, #f5f1e8) !important;
    color: var(--text-primary, #1f2937) !important;
    border: 1px solid var(--border-base, #e5e7eb) !important;
    line-height: 1 !important;
}
html.dark #darkToggle, html.dark #d543ThemeToggle, html.dark #d544ThemeToggle, 
html.dark #d545ThemeToggle, html.dark #d548ThemeToggle, html.dark #d549ThemeToggle {
    background: #1f2937 !important;
    color: #f1f5f9 !important;
    border-color: #374151 !important;
}
#darkToggle:hover, #d543ThemeToggle:hover, #d544ThemeToggle:hover, 
#d545ThemeToggle:hover, #d548ThemeToggle:hover, #d549ThemeToggle:hover {
    transform: scale(1.08) !important;
    border-color: var(--teal-light, #14b8a6) !important;
}

/* Anti-overlap with admin live-stats top bar (z=9999) */
#live-stats ~ #darkToggle, #live-stats ~ [id*="ThemeToggle"] {
    top: 30px !important;  /* Décalé sous le live-stats bar */
}

/* Anti-overlap with #tgl on agents-archi (autre toggle existant) */
body:has(#tgl) #darkToggle, body:has(#tgl) [id*="ThemeToggle"] {
    right: 130px !important;  /* Décalé encore plus à gauche */
}
</style>
<script id="d549-toggle-smart-position">
(function() {
    function repositionToggle() {
        var toggle = document.getElementById('darkToggle') || 
                     document.getElementById('d543ThemeToggle') ||
                     document.getElementById('d544ThemeToggle') ||
                     document.getElementById('d545ThemeToggle') ||
                     document.getElementById('d548ThemeToggle') ||
                     document.getElementById('d549ThemeToggle');
        if (!toggle) return;
        
        // Detect Logout button (#weval-gl)
        var logout = document.getElementById('weval-gl');
        var logoutVisible = logout && logout.offsetWidth > 0 && 
                           getComputedStyle(logout).display !== 'none' &&
                           getComputedStyle(logout).visibility !== 'hidden';
        
        // Detect other top-right toggles
        var otherToggle = document.getElementById('tgl');
        var liveStats = document.getElementById('live-stats');
        
        // Smart positioning
        var rightOffset = 12;
        var topOffset = 12;
        
        if (logoutVisible) {
            var logoutBox = logout.getBoundingClientRect();
            rightOffset = (window.innerWidth - logoutBox.left) + 8; // 8px gap to left of Logout
        }
        if (otherToggle && otherToggle.offsetWidth > 0) {
            rightOffset += 50; // Décale plus
        }
        if (liveStats && liveStats.offsetHeight > 0) {
            topOffset = liveStats.offsetHeight + 8;
        }
        
        toggle.style.setProperty('top', topOffset + 'px', 'important');
        toggle.style.setProperty('right', rightOffset + 'px', 'important');
        toggle.style.setProperty('z-index', '99991', 'important');
    }
    
    // Run on load + after DOM ready + after late-injected elements
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', repositionToggle);
    } else {
        repositionToggle();
    }
    setTimeout(repositionToggle, 500);   // After Logout injection
    setTimeout(repositionToggle, 1500);  // Safety net
    
    // Watch for Logout dynamic injection
    var obs = new MutationObserver(function(muts) {
        muts.forEach(function(m) {
            m.addedNodes.forEach(function(n) {
                if (n.id === 'weval-gl' || n.id === 'tgl' || n.id === 'live-stats') {
                    setTimeout(repositionToggle, 100);
                }
            });
        });
    });
    if (document.body) obs.observe(document.body, { childList: true });
    
    // Reposition on resize
    window.addEventListener('resize', repositionToggle);
})();
</script>
<style id="d550-extra-vars-fix">
/* D550 - Variables CSS supplémentaires non couvertes par D548
   --fg2, --fg3 (text gris moyen/clair), --bg2 (bg secondary)
*/

/* === MODE JOUR === */
:root {
    --fg2: #4b5563 !important;       /* gris moyen lisible (was #555 acceptable but pâle) */
    --fg3: #6b7280 !important;       /* gris foncé lisible (was #999 INVISIBLE) */
    --fg4: #9ca3af !important;
    --bg2: #FFFFFF !important;        /* secondary background blanc */
    --bg3: #f9fafb !important;
    --bd: #e5e7eb !important;         /* border light */
    --bd2: #d1d5db !important;
    
    /* Other common foreground variants */
    --muted: #6b7280 !important;
    --secondary: #4b5563 !important;
    --tertiary: #9ca3af !important;
    --label: #4b5563 !important;
    --caption: #6b7280 !important;
    --hint: #9ca3af !important;
    
    /* Dark variants for buttons/accent (keep readable) */
    --a: #3730A3 !important;          /* primary accent */
    --al: #6366F1 !important;
    --g: #047857 !important;          /* green */
    --r: #B91C1C !important;          /* red */
    --o: #B45309 !important;          /* orange */
}

/* === MODE NUIT === */
html.dark {
    --fg2: #cbd5e1 !important;
    --fg3: #94a3b8 !important;
    --fg4: #64748b !important;
    --bg2: #111827 !important;
    --bg3: #1f2937 !important;
    --bd: #1f2937 !important;
    --bd2: #374151 !important;
    
    --muted: #94a3b8 !important;
    --secondary: #cbd5e1 !important;
    --tertiary: #94a3b8 !important;
    --label: #cbd5e1 !important;
    --caption: #94a3b8 !important;
    --hint: #94a3b8 !important;
    
    --a: #818cf8 !important;
    --al: #a5b4fc !important;
    --g: #10b981 !important;
    --r: #ef4444 !important;
    --o: #f59e0b !important;
}
</style>
<style id="d551-smart-contrast-fix">
/* D551 - Smart contrast fix systémique
   1. CSS patterns: containers avec bg dark connu → text light forcé
   2. Couvre header/topbar/sections dark sur pages mode JOUR
*/

/* === MODE JOUR : containers dark inline → text light === */
html:not(.dark) [style*="background:#0a0e1a"],
html:not(.dark) [style*="background:#0f172a"],
html:not(.dark) [style*="background:#111827"],
html:not(.dark) [style*="background:#1e293b"],
html:not(.dark) [style*="background:#0c1018"],
html:not(.dark) [style*="background:#080a10"],
html:not(.dark) [style*="background:#14193"],
html:not(.dark) [style*="background:#020617"],
html:not(.dark) [style*="background-color:#0a0e1a"],
html:not(.dark) [style*="background-color:#0f172a"],
html:not(.dark) [style*="background-color:#111827"],
html:not(.dark) [style*="background-color:#1e293b"],
html:not(.dark) [style*="background-color:#0c1018"],
html:not(.dark) [style*="background-color:rgb(15"],
html:not(.dark) [style*="background-color:rgb(8,"],
html:not(.dark) [style*="background-color:rgb(10,"],
html:not(.dark) [style*="background-color:rgb(20,"],
html:not(.dark) [style*="background-color:rgba(8,"],
html:not(.dark) [style*="background-color:rgba(10,"],
html:not(.dark) [style*="background-color:rgba(15,"],
html:not(.dark) [style*="background:rgba(8,"],
html:not(.dark) [style*="background:rgba(15,"] {
    color: #f1f5f9 !important;
}

/* Cascade : children inherit light text */
html:not(.dark) [style*="background:#0a0e1a"] *,
html:not(.dark) [style*="background:#0f172a"] *,
html:not(.dark) [style*="background:#111827"] *,
html:not(.dark) [style*="background:#1e293b"] *,
html:not(.dark) [style*="background-color:#0a0e1a"] *,
html:not(.dark) [style*="background-color:#0f172a"] *,
html:not(.dark) [style*="background-color:#111827"] *,
html:not(.dark) [style*="background-color:#1e293b"] *,
html:not(.dark) [style*="background:rgba(8,"] *,
html:not(.dark) [style*="background:rgba(15,"] *,
html:not(.dark) [style*="background-color:rgba(8,"] *,
html:not(.dark) [style*="background-color:rgba(15,"] * {
    color: #f1f5f9 !important;
}

/* Tailwind dark bg classes */
html:not(.dark) .bg-slate-900, html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-gray-900, html:not(.dark) .bg-gray-800,
html:not(.dark) .bg-zinc-900, html:not(.dark) .bg-neutral-900,
html:not(.dark) .bg-stone-900,
html:not(.dark) .bg-black { color: #f1f5f9 !important; }

html:not(.dark) .bg-slate-900 *, html:not(.dark) .bg-slate-800 *,
html:not(.dark) .bg-gray-900 *, html:not(.dark) .bg-gray-800 * { color: #f1f5f9 !important; }

/* Text-white classes preserved */
html:not(.dark) .text-white { color: #ffffff !important; }
html:not(.dark) .text-white\/80 { color: rgba(255,255,255,0.8) !important; }
html:not(.dark) .text-white\/60 { color: rgba(255,255,255,0.6) !important; }

/* Inverse: containers blanc/cream avec texte qui était hardcoded blanc */
html:not(.dark) [style*="background:#fff"] [style*="color:#fff"],
html:not(.dark) [style*="background:#ffffff"] [style*="color:#ffffff"],
html:not(.dark) [style*="background:white"] [style*="color:white"] {
    color: #1f2937 !important;
}
</style>
<!-- d551 disabled by d556 -->
<style id="d552-enhanced-contrast-fix">
/* D552 - Enhanced contrast fix - patterns supplémentaires + runtime amélioré */

/* === LIGHT TEXT classes hardcoded sur bg cream/blanc === */
html:not(.dark) .text-zinc-50, html:not(.dark) .text-zinc-100, html:not(.dark) .text-zinc-200,
html:not(.dark) .text-slate-50, html:not(.dark) .text-slate-100, html:not(.dark) .text-slate-200,
html:not(.dark) .text-gray-50, html:not(.dark) .text-gray-100, html:not(.dark) .text-gray-200 {
    color: #1f2937 !important;
}

/* === Dark BG variants supplémentaires === */
html:not(.dark) [style*="background:#0c1018"] *,
html:not(.dark) [style*="background:#0e111c"] *,
html:not(.dark) [style*="background:#141933"] *,
html:not(.dark) [style*="background:#0d1117"] *,
html:not(.dark) [style*="background-color:#141933"] *,
html:not(.dark) [style*="background-color:#0d1117"] *,
html:not(.dark) [style*="background:rgb(20,"] *,
html:not(.dark) [style*="background:rgb(30,"] *,
html:not(.dark) [style*="background-color:rgb(20,"] *,
html:not(.dark) [style*="background-color:rgb(30,"] *,
html:not(.dark) [style*="background:rgba(14,"] *,
html:not(.dark) [style*="background:rgba(20,"] *,
html:not(.dark) [style*="background:rgba(30,"] *,
html:not(.dark) [style*="background:rgba(10,10,15"] *,
html:not(.dark) [style*="background-color:rgba(14,"] *,
html:not(.dark) [style*="background-color:rgba(20,"] *,
html:not(.dark) [style*="background-color:rgba(30,"] * {
    color: #f1f5f9 !important;
}

/* === .stat / .phase / .input-group .composer-row classes communes === */
html:not(.dark) .stat,
html:not(.dark) .phase,
html:not(.dark) .phase-header,
html:not(.dark) .input-group:not(.dark),
html:not(.dark) .composer-row,
html:not(.dark) .topbar,
html:not(.dark) .nav-links,
html:not(.dark) .links {
    /* If bg is dark via inline style, force text light */
}

/* === Conteneurs avec .dark suffix === */
html:not(.dark) [class*="-dark"] *,
html:not(.dark) [class*="dark-"]:not(.dark) * {
    color: inherit !important;
}
</style>
<!-- d552 disabled by d556 -->
<style id="d553-surgical-contrast-patterns">
/* D553 - Surgical patterns for known dashboard structures */

/* === Common dashboard stat/phase/composer classes with dark bg === */
html:not(.dark) .stat,
html:not(.dark) .stat *,
html:not(.dark) .phase,
html:not(.dark) .phase *,
html:not(.dark) .phase-header,
html:not(.dark) .phase-header *,
html:not(.dark) .composer-row,
html:not(.dark) .composer-row *,
html:not(.dark) .input-group,
html:not(.dark) .input-group *,
html:not(.dark) .nav-links,
html:not(.dark) .nav-links *,
html:not(.dark) .links,
html:not(.dark) .links *,
html:not(.dark) .topbar:not(.bg-white),
html:not(.dark) .topbar:not(.bg-white) *,
html:not(.dark) .d490-stat-item,
html:not(.dark) .d490-stat-item *,
html:not(.dark) .d491-plan-cta,
html:not(.dark) .d491-plan-cta * {
    color: #f1f5f9 !important;
}

/* Override if these have light bg explicitly */
html:not(.dark) .stat[style*="background:#fff"],
html:not(.dark) .stat[style*="background:white"],
html:not(.dark) .stat[style*="background-color:#fff"] {
    color: #1f2937 !important;
}

/* Light text classes hardcoded sur bg light → force dark */
html:not(.dark) .text-zinc-50, html:not(.dark) .text-zinc-100, html:not(.dark) .text-zinc-200,
html:not(.dark) .text-slate-50, html:not(.dark) .text-slate-100, html:not(.dark) .text-slate-200,
html:not(.dark) .text-gray-50, html:not(.dark) .text-gray-100, html:not(.dark) .text-gray-200 {
    color: #1f2937 !important;
}

/* But preserve inside actual dark containers */
html:not(.dark) .stat .text-zinc-100,
html:not(.dark) .stat .text-slate-100,
html:not(.dark) [class*="dark"] .text-zinc-100,
html:not(.dark) [style*="background:#0a"] .text-zinc-100,
html:not(.dark) [style*="background:#0f"] .text-zinc-100,
html:not(.dark) [style*="background:#11"] .text-zinc-100 {
    color: #f1f5f9 !important;
}

/* === Variants of dark backgrounds === */
html:not(.dark) [style*="background:rgb(15,"] *,
html:not(.dark) [style*="background:rgb(20,"] *,
html:not(.dark) [style*="background:rgb(30,"] *,
html:not(.dark) [style*="background-color:rgb(15,"] *,
html:not(.dark) [style*="background-color:rgb(20,"] *,
html:not(.dark) [style*="background-color:rgb(30,"] *,
html:not(.dark) [style*="background:rgba(8,"] *,
html:not(.dark) [style*="background:rgba(10,"] *,
html:not(.dark) [style*="background:rgba(14,"] *,
html:not(.dark) [style*="background:rgba(15,"] *,
html:not(.dark) [style*="background:rgba(20,"] *,
html:not(.dark) [style*="background:rgba(30,"] *,
html:not(.dark) [style*="background-color:rgba(8,"] *,
html:not(.dark) [style*="background-color:rgba(10,"] *,
html:not(.dark) [style*="background-color:rgba(14,"] *,
html:not(.dark) [style*="background-color:rgba(15,"] *,
html:not(.dark) [style*="background-color:rgba(20,"] *,
html:not(.dark) [style*="background-color:rgba(30,"] * {
    color: #f1f5f9 !important;
}
</style>
<!-- d553 disabled by d556 -->
<style id="d554-anti-flicker">
/* D554 - Skip contrast fix on animated elements (preserve pulse/blink) */
[style*="animation:"] { /* keep their animation */ }

/* Disable our pulse animation that creates blink */
.pulse, .live-indicator, .active, .online {
    animation: none !important;
}
/* Restore pulse intentional only on specific live-dot/pulse-dot */
.live-dot, .pulse-dot, [class*="pulse-only"], [class*="status-pulse"] {
    animation: pulseD60 3s ease-in-out infinite !important;
}
</style>
<script id="d554-runtime-replacement">
/* D554 - Replaces D551/D553 runtime with idempotent non-flickering version */
(function() {
    // Mark this version as loaded
    window.__d554_loaded = true;
    
    // Disable previous runtime observers
    if (window.__d551_obs) try { window.__d551_obs.disconnect(); } catch(e){}
    if (window.__d553_obs) try { window.__d553_obs.disconnect(); } catch(e){}
    
    function getLum(rgb) {
        const m = rgb.match(/\d+/g);
        if (!m || m.length < 3) return 0.5;
        return 0.299*parseInt(m[0])/255 + 0.587*parseInt(m[1])/255 + 0.114*parseInt(m[2])/255;
    }
    
    function getEffBg(el) {
        let cur = el; let depth = 0;
        while (cur && cur.parentElement && depth < 12) {
            const bg = window.getComputedStyle(cur).backgroundColor;
            if (bg && !bg.startsWith('rgba(0, 0, 0, 0')) {
                const m = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?/);
                if (m) {
                    const a = m[4] !== undefined ? parseFloat(m[4]) : 1;
                    if (a >= 0.4) return `rgb(${m[1]}, ${m[2]}, ${m[3]})`;
                }
            }
            cur = cur.parentElement; depth++;
        }
        return 'rgb(255, 255, 255)';
    }
    
    let didRun = false;
    
    function fixContrast() {
        if (didRun) return;  // ← idempotent: ONE pass only
        didRun = true;
        
        const isDark = document.documentElement.classList.contains('dark');
        const all = document.querySelectorAll('*');
        let fixed = 0;
        
        for (const el of all) {
            if (fixed > 1500) break;
            
            const s = window.getComputedStyle(el);
            if (s.display === 'none' || s.visibility === 'hidden') continue;
            if (parseFloat(s.opacity) < 0.4) continue;
            
            // SKIP elements with active animation (anti-flicker preservation)
            if (s.animationName && s.animationName !== 'none') continue;
            
            // Skip already fixed by us
            if (el.dataset.d554fixed === '1') continue;
            
            const text = el.textContent || '';
            if (text.trim().length < 2 || text.trim().length > 200) continue;
            
            const box = el.getBoundingClientRect();
            if (box.width < 10 || box.height < 6) continue;
            
            const fgL = getLum(s.color);
            const effBg = getEffBg(el);
            const bgL = getLum(effBg);
            const contrast = Math.abs(fgL - bgL);
            
            if (contrast < 0.32) {
                const newColor = bgL > 0.5 
                    ? (isDark ? '#f1f5f9' : '#1f2937')
                    : '#f1f5f9';
                
                // Idempotent check: only set if different
                const currentRgb = s.color.match(/\d+/g);
                const newRgb = newColor === '#1f2937' ? [31,41,55] : [241,245,249];
                if (currentRgb && Math.abs(parseInt(currentRgb[0]) - newRgb[0]) < 5) continue;
                
                el.style.setProperty('color', newColor, 'important');
                el.dataset.d554fixed = '1';
                fixed++;
            }
        }
    }
    
    // SINGLE pass after DOM ready (no multi-passes, no continuous observer)
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => setTimeout(fixContrast, 800));
    } else {
        setTimeout(fixContrast, 800);
    }
    
    // Re-run ONLY on theme toggle (class change on html)
    if (document.documentElement) {
        new MutationObserver((muts) => {
            for (const m of muts) {
                if (m.type === 'attributes' && m.attributeName === 'class') {
                    document.querySelectorAll('[data-d554fixed]').forEach(el => {
                        el.removeAttribute('data-d554fixed');
                        el.style.removeProperty('color');
                    });
                    didRun = false;
                    setTimeout(fixContrast, 100);
                    break;
                }
            }
        }).observe(document.documentElement, { attributes: true });
    }
})();
</script>
<style id="d555-kill-all-pulses">
/* D555 - Désactive TOUTES animations infinite platform-wide
   Préserve uniquement les status dots intentionnels (3-4 classes connues)
*/

/* === Force toutes animations one-shot === */
* {
    animation-iteration-count: 1 !important;
    animation-fill-mode: forwards !important;
}

/* === Whitelist : status dots qui DOIVENT pulser intentionnellement === */
.live-dot,
.pulse-dot,
.status-pulse,
.pulse-only,
[class="pulse-dot"],
[class="live-dot"],
.pulse-indicator,
.dot-pulse {
    animation-iteration-count: infinite !important;
}

/* === Kill spécifique des animations longues qui font respirer la page === */
* {
    animation-duration: 0s !important;
}
.live-dot, .pulse-dot, .status-pulse, .pulse-only,
.pulse-indicator, .dot-pulse {
    animation-duration: 2s !important;
}

/* === Override fade-in/slide-up: instant (no animation needed) === */
[class*="fade-in"], [class*="fadeIn"], [class*="fade-up"], [class*="fadeUp"],
[class*="slide-up"], [class*="slideUp"], [class*="enter-"], [class*="reveal"],
[class*="card-fade"], [class*="organic"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* === Disable hover transforms qui peuvent paraître pulser === */
[style*="transform: scale"]:not(:hover) { transform: none !important; }
</style>
</head>
<body>
<!-- NAV -->
<nav class="bg-white/85 backdrop-blur-md sticky top-0 z-40 border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
    <a href="/" class="font-black text-xl tracking-tight" style="color:var(--teal-dark)">WEVAL</a>
    <div class="hidden md:flex gap-7 text-sm font-medium">
      <a href="/advisory.html" class="text-gray-700 hover:text-teal-700 transition">Advisory</a>
      <a href="/ia-souveraine.html" class="text-gray-700 hover:text-teal-700 transition">IA</a>
      <a href="/erp.html" class="text-gray-700 hover:text-teal-700 transition">ERP</a>
      <a href="/cloud.html" class="text-gray-700 hover:text-teal-700 transition">Cloud</a>
      <a href="/data.html" class="text-gray-700 hover:text-teal-700 transition">Data</a>
      <a href="/contact.html" class="text-gray-700 hover:text-teal-700 transition">Contact</a>
    </div>
    <div class="flex items-center gap-3">
      
      
    </div>
  </div>
</nav>
<section class="hero-grad text-white py-24 md:py-32 px-6">
  <div class="max-w-6xl mx-auto text-center">
    <h1 class="text-4xl md:text-6xl lg:text-7xl font-black mb-6 tracking-tight leading-tight">Conseil Stratégique</h1>
    <p class="text-lg md:text-2xl opacity-95 max-w-4xl mx-auto leading-relaxed">Lean Six Sigma · Theory of Constraints · DMAIC — méthodologie rigoureuse, sans variabilité, focus valeur.</p>
    <div class="mt-10 flex flex-wrap gap-4 justify-center">
      <button onclick="window.openCarl()" class="bg-white text-teal-700 hover:bg-gray-100 px-8 py-4 rounded-full font-bold text-lg shadow-lg transition hover:scale-105">Diagnostic Advisory gratuit</button>
      <a href="/contact.html" class="bg-transparent border-2 border-white/40 hover:bg-white/10 text-white px-8 py-4 rounded-full font-semibold text-lg transition">Nous contacter</a>
    </div>
  </div>
</section>
<section class="py-20 px-6 max-w-7xl mx-auto">
  <div class="grid md:grid-cols-2 gap-12 items-center mb-16">
    <div>
      <h2 class="text-3xl md:text-4xl font-black mb-4 text-gray-900">Méthodologie DMAIC + Theory of Constraints</h2>
      <p class="text-gray-600 leading-relaxed text-lg">Define · Measure · Analyze · Improve · Control. Combiné à la <strong>Theory of Constraints</strong> de Goldratt pour identifier et lever les goulots d'étranglement systémiques.</p>
      <p class="text-gray-600 mt-4">Approche pragmatique, mesurée, sans variabilité dans la qualité de livraison.</p>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <div class="card p-5 border border-gray-200 rounded-xl bg-teal-50"><div class="font-bold text-teal-700">Define</div><p class="text-xs text-gray-600 mt-1">Périmètre, objectifs, parties prenantes</p></div>
      <div class="card p-5 border border-gray-200 rounded-xl bg-blue-50"><div class="font-bold text-blue-700">Measure</div><p class="text-xs text-gray-600 mt-1">KPI baseline, benchmark</p></div>
      <div class="card p-5 border border-gray-200 rounded-xl bg-purple-50"><div class="font-bold text-purple-700">Analyze</div><p class="text-xs text-gray-600 mt-1">Root cause, contraintes, leviers</p></div>
      <div class="card p-5 border border-gray-200 rounded-xl bg-orange-50"><div class="font-bold text-orange-700">Improve</div><p class="text-xs text-gray-600 mt-1">Implémentation pilotée par la valeur</p></div>
      <div class="card p-5 col-span-2 border border-gray-200 rounded-xl bg-gray-50"><div class="font-bold text-gray-700">Control &amp; Sustain</div><p class="text-xs text-gray-600 mt-1">Pérennisation, gouvernance, knowledge transfer</p></div>
    </div>
  </div>
</section>

<section class="bg-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl md:text-4xl font-black text-center mb-12 text-gray-900">Domaines d'expertise</h2>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
      <div id="gouvernance" class="card p-6 border border-gray-200 rounded-xl"><h4 class="font-bold mb-2">🏛️ Gouvernance IT</h4><p class="text-sm text-gray-600">COBIT, ITIL, RACI, comités de pilotage.</p></div>
      <div class="card p-6 border border-gray-200 rounded-xl"><h4 class="font-bold mb-2">🔄 Transformation digitale</h4><p class="text-sm text-gray-600">Vision, roadmap, change management.</p></div>
      <div class="card p-6 border border-gray-200 rounded-xl"><h4 class="font-bold mb-2">🤝 M&amp;A</h4><p class="text-sm text-gray-600">Due diligence IT, intégration post-merger.</p></div>
      <div class="card p-6 border border-gray-200 rounded-xl"><h4 class="font-bold mb-2">📋 Audit</h4><p class="text-sm text-gray-600">Audit SI, conformité, sécurité.</p></div>
      <div id="formation" class="card p-6 border border-gray-200 rounded-xl"><h4 class="font-bold mb-2">🎓 Formation</h4><p class="text-sm text-gray-600">Upskilling équipes, IA, ERP, méthodologies.</p></div>
      <div id="recrutement" class="card p-6 border border-gray-200 rounded-xl"><h4 class="font-bold mb-2">👥 Recrutement</h4><p class="text-sm text-gray-600">Sourcing IT, profils rares Maroc/France/Canada.</p></div>
    </div>
  </div>
</section>

<section class="py-20 px-6 max-w-5xl mx-auto text-center">
  <h2 class="text-3xl md:text-4xl font-black mb-6 text-gray-900">Secteurs d'intervention</h2>
  <div class="flex flex-wrap gap-3 justify-center">
    <span class="px-5 py-2 bg-teal-100 text-teal-800 rounded-full font-medium">Banque</span>
    <span class="px-5 py-2 bg-teal-100 text-teal-800 rounded-full font-medium">Assurance</span>
    <span class="px-5 py-2 bg-teal-100 text-teal-800 rounded-full font-medium">Pharma</span>
    <span class="px-5 py-2 bg-teal-100 text-teal-800 rounded-full font-medium">Industrie</span>
    <span class="px-5 py-2 bg-teal-100 text-teal-800 rounded-full font-medium">Retail</span>
    <span class="px-5 py-2 bg-teal-100 text-teal-800 rounded-full font-medium">Services</span>
    <span class="px-5 py-2 bg-teal-100 text-teal-800 rounded-full font-medium">Public</span>
  </div>
</section>
<!-- FOOTER -->
<section style="padding:32px 24px;text-align:center;background:linear-gradient(135deg,#f0f0ff,#faf8f5);border-radius:20px;max-width:900px;margin:24px auto;border:1px solid #E8E2D9"><div style="font-size:13px;color:#3730A3;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Enterprise Agent Platform · WEVIA EM</div><div style="font-family:'Instrument Serif',serif;font-size:24px;font-weight:400;margin-bottom:8px">Agents autonomes WEVIA · Comblement de gaps business · Couverture multi-métiers.</div><p style="color:#555;font-size:14px;margin-bottom:16px">Découvrez comment nos agents IA autonomes comblent les lacunes dans vos processus métier. Multi-ERP. Sur mesure. 7j time-to-market.</p><a href="/demo-agents.html" style="display:inline-block;padding:12px 28px;background:#3730A3;color:#fff;border-radius:60px;font-weight:600;text-decoration:none;font-size:14px;transition:.2s">Explorer la demo interactive</a></section>
<section id="cas-client" style="padding:60px 24px"><div style="max-width:900px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 2px 20px rgba(0,0,0,.06);overflow:hidden;border:1px solid #e5e7eb"><div style="background:linear-gradient(135deg,#0d9488,#1e40af);color:#fff;padding:24px 32px"><h3 style="font-size:20px;font-weight:700;margin:0">ETI industrielle — Diagnostic</h3><p style="opacity:.8;font-size:14px;margin:4px 0 0">Groupe industriel marocain</p></div><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0"><div style="padding:20px;border-right:1px solid #e5e7eb"><div style="font-size:11px;text-transform:uppercase;color:#9ca3af;font-weight:700;margin-bottom:6px">Challenge</div><p style="font-size:14px;color:#374151;margin:0">SI hétérogène, 12 outils non connectés</p></div><div style="padding:20px;border-right:1px solid #e5e7eb"><div style="font-size:11px;text-transform:uppercase;color:#9ca3af;font-weight:700;margin-bottom:6px">Solution</div><p style="font-size:14px;color:#374151;margin:0">Audit DMAIC 6 semaines, Roadmap 18 mois</p></div><div style="padding:20px;background:#f0fdfa"><div style="font-size:11px;text-transform:uppercase;color:#0d9488;font-weight:700;margin-bottom:6px">Résultat</div><p style="font-size:14px;color:#1f2937;font-weight:600;margin:0">Time-to-market -40%. ROI en 9 mois</p></div></div></div><div style="margin-top:24px;text-align:center;background:#f9fafb;border-radius:12px;padding:24px;border:1px solid #e5e7eb;max-width:900px;margin:24px auto"><div style="font-size:11px;text-transform:uppercase;color:#9ca3af;font-weight:700;margin-bottom:8px">Tarifs indicatifs</div><p style="font-size:15px;color:#374151;margin:0 0 16px">Diagnostic: 5K€ | Roadmap: 15-30K€</p><a href="/booking.html" style="display:inline-block;padding:12px 28px;background:#0d9488;color:#fff;border-radius:999px;font-weight:700;text-decoration:none">Demander un devis</a></div></div></section><footer class="bg-gray-900 text-gray-300 py-14 px-6 mt-20">
  <div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-8">
    <div class="md:col-span-2">
      <div class="font-black text-3xl text-white mb-3">WEVAL</div>
      <p class="text-sm opacity-80 leading-relaxed">Paris HQ · Casablanca Delivery · NYC Antenna · International Reach</p>
      <p class="text-xs opacity-60 mt-3">Cabinet Advisory · IA Souveraine · ERP · Cloud · Data</p>
    </div>
    <div>
      <h4 class="font-bold text-white mb-3 text-sm uppercase tracking-wider">Piliers</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="/advisory.html" class="hover:text-teal-400 transition">Advisory</a></li>
        <li><a href="/ia-souveraine.html" class="hover:text-teal-400 transition">IA Souveraine</a></li>
        <li><a href="/erp.html" class="hover:text-teal-400 transition">ERP</a></li>
        <li><a href="/cloud.html" class="hover:text-teal-400 transition">Cloud</a></li>
        <li><a href="/data.html" class="hover:text-teal-400 transition">Data</a></li>
      </ul>
    </div>
    <div>
      <h4 class="font-bold text-white mb-3 text-sm uppercase tracking-wider">Contact</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="/contact.html" class="hover:text-teal-400 transition">Nous contacter</a></li>
        <li><a href="https://linkedin.com/company/weval-consulting" class="hover:text-teal-400 transition">LinkedIn</a></li>
        <li><button onclick="window.openCarl()" class="hover:text-teal-400 transition">💬 WEVIA</button></li>
      </ul>
    </div>
  </div>
  <div class="max-w-7xl mx-auto text-center text-xs opacity-50 mt-10 pt-6 border-t border-gray-800">
    © 2026 WEVAL Consulting · <a href="/mentions-legales.html" class="hover:text-teal-400">Mentions légales</a> · <a href="/rgpd.html" class="hover:text-teal-400">RGPD</a>
  </div>
</footer>

<!-- CARL FLOATING -->


<script>
// Dark toggle (BIEN PLACÉ : nav header gauche du Carl button, NON-CHEVAUCHANT)
const dt = document.getElementById('darkToggle');
const applyTheme = (t) => {
  document.documentElement.classList.toggle('dark', t === 'dark');
  if (dt) dt.textContent = t === 'dark' ? '☀️' : '🌙';
};
const saved = localStorage.getItem('weval_theme');
if (saved) applyTheme(saved);
dt?.addEventListener('click', () => {
  const isDark = document.documentElement.classList.contains('dark');
  const next = isDark ? 'light' : 'dark';
  localStorage.setItem('weval_theme', next);
  applyTheme(next);
});

// Carl widget panel
window.openCarl = () => {
  let p = document.getElementById('carlPanel');
  if (p) { p.remove(); return; }
  p = document.createElement('div');
  p.id = 'carlPanel';
  p.style.cssText = 'position:fixed;bottom:90px;right:24px;width:400px;max-width:calc(100vw - 48px);height:600px;max-height:calc(100vh - 120px);background:white;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);z-index:60;overflow:hidden;';
  p.innerHTML = '<iframe src="/wevia-widget.html" style="width:100%;height:100%;border:none;"></iframe><button onclick="this.parentElement.remove()" style="position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;">✕</button>';
  document.body.appendChild(p);
};

// Fade-up on scroll
const obs = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('fade-up'); });
}, { threshold: 0.1 });
document.querySelectorAll('section, .card').forEach(el => obs.observe(el));
</script>
<style id="d467-contact-modal-css">
/* D467 Contact form modal universel - WEVAL UX premium */
#d467-contact-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    z-index: 99990;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: 'DM Sans', system-ui, sans-serif;
}
#d467-contact-modal.open { display: flex; }
#d467-contact-modal .d467-modal-card {
    background: #ffffff;
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    position: relative;
    animation: d467-pop 280ms ease-out;
}
@keyframes d467-pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#d467-contact-modal .d467-header {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    padding: 24px 28px 20px;
    border-radius: 20px 20px 0 0;
    position: relative;
}
#d467-contact-modal .d467-header h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
}
#d467-contact-modal .d467-header p {
    margin: 0;
    font-size: 14px;
    opacity: 0.92;
}
#d467-contact-modal .d467-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms;
}
#d467-contact-modal .d467-close:hover { background: rgba(255,255,255,0.32); }
#d467-contact-modal .d467-body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#d467-contact-modal label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
#d467-contact-modal input,
#d467-contact-modal textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2937;
    background: #f9fafb;
    transition: border 180ms, background 180ms;
    box-sizing: border-box;
}
#d467-contact-modal input:focus,
#d467-contact-modal textarea:focus {
    outline: none;
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
#d467-contact-modal textarea { min-height: 90px; resize: vertical; }
#d467-contact-modal .d467-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#d467-contact-modal .d467-honeypot { display: none !important; } /* anti-bot */
#d467-contact-modal .d467-submit {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    border: none;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 180ms, box-shadow 180ms, opacity 180ms;
    margin-top: 4px;
}
#d467-contact-modal .d467-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.35); }
#d467-contact-modal .d467-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
#d467-contact-modal .d467-msg {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    display: none;
}
#d467-contact-modal .d467-msg.success { display: block; background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
#d467-contact-modal .d467-msg.error { display: block; background: #fee2e2; color: #991b1b; border: 1px solid #ef4444; }
#d467-contact-modal .d467-rgpd {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    margin-top: 4px;
}
@media (max-width: 520px) {
    #d467-contact-modal .d467-row { grid-template-columns: 1fr; }
    #d467-contact-modal .d467-modal-card { border-radius: 16px; }
}
</style>

<div id="d467-contact-modal" role="dialog" aria-modal="true" aria-labelledby="d467-modal-title">
<div class="d467-modal-card">
<div class="d467-header">
<button class="d467-close" onclick="window.d467CloseContact()" aria-label="Fermer">×</button>
<h2 id="d467-modal-title">🎯 Diagnostic gratuit en 30 minutes</h2>
<p>Identifions vos 3 gaps prioritaires et chiffrons l'impact business attendu.</p>
</div>
<form class="d467-body" id="d467-contact-form" onsubmit="return window.d467SubmitContact(event)">
<div class="d467-msg" id="d467-msg"></div>
<div class="d467-row">
<div>
<label for="d467-name">Nom complet *</label>
<input type="text" id="d467-name" name="name" required maxlength="80" autocomplete="name">
</div>
<div>
<label for="d467-company">Société</label>
<input type="text" id="d467-company" name="company" maxlength="100" autocomplete="organization">
</div>
</div>
<div class="d467-row">
<div>
<label for="d467-email">Email professionnel *</label>
<input type="email" id="d467-email" name="email" required maxlength="120" autocomplete="email">
</div>
<div>
<label for="d467-phone">Téléphone</label>
<input type="tel" id="d467-phone" name="phone" maxlength="30" autocomplete="tel">
</div>
</div>
<div>
<label for="d467-message">Votre besoin *</label>
<textarea id="d467-message" name="message" required maxlength="2000" placeholder="ERP, IA, Cloud, Data… décrivez en quelques mots votre projet ou point de friction."></textarea>
</div>
<input class="d467-honeypot" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
<button type="submit" class="d467-submit" id="d467-submit-btn">Envoyer ma demande →</button>
<div class="d467-rgpd">🔒 Vos données sont traitées de façon confidentielle. RGPD compliant.</div>
</form>
</div>
</div>

<script id="d467-contact-modal-js">
(function(){
    window.d467OpenContact = function(source){
        var m = document.getElementById('d467-contact-modal');
        if (m) {
            m.classList.add('open');
            m.dataset.source = source || (location.pathname || '/');
            document.body.style.overflow = 'hidden';
            setTimeout(function(){ var n = document.getElementById('d467-name'); if (n) n.focus(); }, 200);
        }
    };
    window.d467CloseContact = function(){
        var m = document.getElementById('d467-contact-modal');
        if (m) {
            m.classList.remove('open');
            document.body.style.overflow = '';
        }
    };
    window.d467SubmitContact = function(e){
        e.preventDefault();
        var msg = document.getElementById('d467-msg');
        var btn = document.getElementById('d467-submit-btn');
        var form = document.getElementById('d467-contact-form');
        msg.className = 'd467-msg';
        msg.textContent = '';
        btn.disabled = true;
        btn.textContent = 'Envoi en cours…';
        var data = {
            name: form.name.value.trim(),
            email: form.email.value.trim(),
            company: form.company.value.trim(),
            phone: form.phone.value.trim(),
            message: form.message.value.trim(),
            website: form.website.value, // honeypot
            source_page: document.getElementById('d467-contact-modal').dataset.source || location.pathname
        };
        fetch('/api/contact-form.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        })
        .then(function(r){ return r.json().catch(function(){ return {ok:false, error:'invalid_response'}; }); })
        .then(function(j){
            if (j.ok) {
                msg.className = 'd467-msg success';
                msg.textContent = j.message || '✅ Demande reçue ! Nous revenons vers vous sous 24h.';
                form.reset();
                setTimeout(function(){ window.d467CloseContact(); }, 3500);
            } else {
                msg.className = 'd467-msg error';
                if (j.error === 'rate_limit') {
                    msg.textContent = '⏱️ Merci de patienter quelques secondes avant de renvoyer.';
                } else if (j.error === 'invalid_email') {
                    msg.textContent = '✉️ Email invalide, merci de vérifier.';
                } else if (j.error === 'missing_required_fields') {
                    msg.textContent = '⚠️ Merci de remplir nom, email et message.';
                } else {
                    msg.textContent = '❌ Erreur. Réessayez ou écrivez-nous à info@weval-consulting.com';
                }
                btn.disabled = false;
                btn.textContent = 'Envoyer ma demande →';
            }
        })
        .catch(function(err){
            msg.className = 'd467-msg error';
            msg.textContent = '❌ Connexion impossible. Réessayez ou écrivez à info@weval-consulting.com';
            btn.disabled = false;
            btn.textContent = 'Envoyer ma demande →';
        });
        return false;
    };
    
    // ESC key closes
    document.addEventListener('keydown', function(e){
        if (e.key === 'Escape' && document.getElementById('d467-contact-modal')?.classList.contains('open')) {
            window.d467CloseContact();
        }
    });
    
    // Click outside closes
    document.addEventListener('click', function(e){
        var m = document.getElementById('d467-contact-modal');
        if (m && m.classList.contains('open') && e.target === m) {
            window.d467CloseContact();
        }
    });
    
    // Auto-wire: tous les CTAs href=/contact + data-d466-cta + data-d467-cta open modal
    function wireCTAs(){
        document.querySelectorAll('a[href="/contact"], a[href="/contact/"], [data-d467-cta], [data-d466-cta]').forEach(function(el){
            if (el.dataset.d467Wired === '1') return;
            el.dataset.d467Wired = '1';
            el.addEventListener('click', function(e){
                e.preventDefault();
                window.d467OpenContact(el.dataset.source || location.pathname);
            });
        });
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', wireCTAs);
    } else {
        wireCTAs();
    }
    setTimeout(wireCTAs, 1000);
    setTimeout(wireCTAs, 3000);
    new MutationObserver(wireCTAs).observe(document.body, {childList: true, subtree: true});
})();
</script>

<style id="d467-sticky-cta">
/* D467 Sticky conversion CTA bar - cohérence sur toutes pages publiques (Yacine doctrine) */
#d467-sticky-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    padding: 12px 24px;
    box-shadow: 0 -4px 16px rgba(99,102,241,0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    z-index: 9990;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    transform: translateY(100%);
    transition: transform 300ms ease;
}
#d467-sticky-cta-bar.visible { transform: translateY(0); }
#d467-sticky-cta-bar .msg { font-weight: 500; opacity: 0.95; }
#d467-sticky-cta-bar .cta-btn {
    background: #ffffff;
    color: #6366f1;
    padding: 10px 24px;
    border-radius: 24px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 200ms, box-shadow 200ms;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
#d467-sticky-cta-bar .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
#d467-sticky-cta-bar .close-x {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}
@media (max-width: 768px) {
    #d467-sticky-cta-bar { font-size: 12px; padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
    #d467-sticky-cta-bar .msg { display: none; }
    #d467-sticky-cta-bar .msg-mobile { display: inline; }
    #d467-sticky-cta-bar .cta-btn { padding: 8px 16px; font-size: 13px; }
}
#d467-sticky-cta-bar .msg-mobile { display: none; }
</style>
<div id="d467-sticky-cta-bar" role="region" aria-label="Diagnostic gratuit">
<span class="msg">🎯 Vous avez un projet ERP, IA ou Cloud ? Diagnostic gratuit 30 min, sans engagement.</span>
<span class="msg-mobile">🎯 Diagnostic gratuit 30 min</span>
<button class="cta-btn" onclick="window.d467OpenContact && window.d467OpenContact(location.pathname)" data-d467-cta="sticky">Demander mon diagnostic →</button>
<button class="close-x" onclick="document.getElementById('d467-sticky-cta-bar').classList.remove('visible'); sessionStorage.setItem('d467-cta-closed', '1')" aria-label="Fermer">×</button>
</div>
<script id="d467-sticky-script">
(function(){
    function show(){
        if (sessionStorage.getItem('d467-cta-closed') === '1' || sessionStorage.getItem('d466-cta-closed') === '1') return;
        var bar = document.getElementById('d467-sticky-cta-bar');
        if (bar) bar.classList.add('visible');
    }
    var shown = false;
    function maybeShow(){ if (!shown) { shown = true; show(); } }
    window.addEventListener('scroll', function(){
        if (window.scrollY > document.body.scrollHeight * 0.3) maybeShow();
    }, {passive: true});
    setTimeout(maybeShow, 8000);
})();
</script>

<style id="d470-fab-css">
/* D470 Mobile Floating Action Button - 1-tap conversion mobile */
@media (max-width: 768px) {
    #d470-fab {
        position: fixed;
        bottom: 80px; /* above sticky CTA bar (60-72px) */
        right: 16px;
        z-index: 9988;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        border: none;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(99,102,241,0.45), 0 0 0 4px rgba(255,255,255,0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #ffffff;
        transition: transform 200ms, box-shadow 200ms;
        animation: d470-pulse 3s ease-in-out infinite;
        opacity: 0;
        transform: scale(0.4);
        pointer-events: none;
    }
    #d470-fab.visible {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
    #d470-fab:active {
        transform: scale(0.92);
        box-shadow: 0 4px 12px rgba(99,102,241,0.55);
    }
    #d470-fab .badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #ef4444;
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        padding: 3px 6px;
        border-radius: 10px;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        animation: d470-badge-pop 600ms ease-out 2s forwards;
        opacity: 0;
        transform: scale(0);
    }
    #d470-fab-tooltip {
        position: fixed;
        bottom: 90px;
        right: 88px;
        z-index: 9989;
        background: #1f2937;
        color: #fff;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        font-family: 'DM Sans', sans-serif;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 280ms, transform 280ms;
        pointer-events: none;
    }
    #d470-fab-tooltip.show {
        opacity: 1;
        transform: translateX(0);
    }
    #d470-fab-tooltip::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -6px;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-left-color: #1f2937;
    }
}
/* Hide on desktop */
@media (min-width: 769px) {
    #d470-fab, #d470-fab-tooltip { display: none !important; }
}
@keyframes d470-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(99,102,241,0.45), 0 0 0 4px rgba(255,255,255,0.95); }
    50% { box-shadow: 0 8px 24px rgba(99,102,241,0.65), 0 0 0 4px rgba(255,255,255,0.95), 0 0 0 12px rgba(99,102,241,0.15); }
}
@keyframes d470-badge-pop {
    0% { opacity: 0; transform: scale(0); }
    60% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}
</style>

<button id="d470-fab" data-d470-cta="mobile-fab" aria-label="Réserver mon diagnostic gratuit"
        onclick="window.d467OpenContact && window.d467OpenContact('mobile-fab-d470')">
    <span aria-hidden="true">💬</span>
    <span class="badge">!</span>
</button>
<div id="d470-fab-tooltip" role="tooltip" aria-hidden="true">Diagnostic gratuit 30 min</div>

<script id="d470-fab-js">
(function(){
    if (window.innerWidth > 768) return; // Desktop = noop
    
    var fab = document.getElementById('d470-fab');
    var tooltip = document.getElementById('d470-fab-tooltip');
    if (!fab) return;
    
    var SHOW_AFTER_SCROLL = 600; // px
    var SHOW_AFTER_TIME = 5000; // ms
    var TOOLTIP_DELAY = 8000;
    var shown = false;
    var tooltipShown = false;
    
    function showFAB(){
        if (shown) return;
        shown = true;
        fab.classList.add('visible');
        // Show tooltip after a delay
        setTimeout(function(){
            if (!tooltipShown && tooltip) {
                tooltipShown = true;
                tooltip.classList.add('show');
                tooltip.setAttribute('aria-hidden', 'false');
                // Hide tooltip after 4s
                setTimeout(function(){
                    tooltip.classList.remove('show');
                    tooltip.setAttribute('aria-hidden', 'true');
                }, 4000);
            }
        }, TOOLTIP_DELAY);
    }
    
    // Show after scroll
    window.addEventListener('scroll', function(){
        if (window.scrollY > SHOW_AFTER_SCROLL) showFAB();
    }, {passive: true});
    
    // Show after time
    setTimeout(showFAB, SHOW_AFTER_TIME);
    
    // Hide if user closes session
    if (sessionStorage.getItem('d470-fab-closed') === '1') {
        fab.style.display = 'none';
    }
})();
</script>

<script id="d471-wire-extended">
(function(){
    // D471: extend d467 wire to /contact.html and any /contact* path
    function wireExtended(){
        var sels = ['a[href="/contact.html"]','a[href*="/contact.html"]','a[href="/contact/"]','a[href$="/contact"]','a[href^="/service/"]'];
        sels.forEach(function(sel){
            try {
                document.querySelectorAll(sel).forEach(function(el){
                    if (el.dataset.d471Wired === '1') return;
                    el.dataset.d471Wired = '1';
                    el.addEventListener('click', function(e){
                        if (typeof window.d467OpenContact === 'function') {
                            e.preventDefault();
                            window.d467OpenContact(el.dataset.source || location.pathname);
                        }
                    });
                });
            } catch(err){}
        });
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', wireExtended);
    } else { wireExtended(); }
    setTimeout(wireExtended, 1000);
    setTimeout(wireExtended, 3000);
    new MutationObserver(wireExtended).observe(document.body, {childList: true, subtree: true});
})();
</script>

<style id="d472-a11y-css">
/* D472 A11y improvements */
.d472-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 100000;
    background: #6366f1;
    color: #fff;
    padding: 12px 20px;
    font-weight: 700;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    font-family: 'DM Sans', system-ui, sans-serif;
    transition: top 200ms;
}
.d472-skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}
</style>
<script id="d472-skip-link-injector">
(function(){
    function injectSkip(){
        if (document.getElementById('d472-skip-link')) return;
        var sl = document.createElement('a');
        sl.id = 'd472-skip-link';
        sl.href = '#main';
        sl.className = 'd472-skip-link';
        sl.textContent = 'Aller au contenu principal';
        sl.setAttribute('tabindex', '1');
        // Insert as VERY FIRST child of body
        if (document.body && document.body.firstChild) {
            document.body.insertBefore(sl, document.body.firstChild);
        } else if (document.body) {
            document.body.appendChild(sl);
        }
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSkip);
    } else { injectSkip(); }
    // Re-inject if React removed it
    setInterval(function(){
        var sl = document.getElementById('d472-skip-link');
        if (!sl || sl !== document.body.firstChild) {
            // Remove if exists, then re-add as first
            if (sl) sl.remove();
            injectSkip();
        }
    }, 2000);
})();
</script>
<script id="d472-a11y-perf-js">
(function(){
    var APPLIED = {a11y: false, perf: false, seo: false};
    
    function applyA11y(){
        if (APPLIED.a11y) return;
        // Find main content target if missing
        var main = document.querySelector('main, [role="main"], #main, .main-content');
        if (!main) {
            var firstH1 = document.querySelector('h1');
            if (firstH1) {
                var section = firstH1.closest('section') || firstH1.closest('div');
                if (section && !section.id) section.id = 'main';
            }
        } else if (!main.id) {
            main.id = 'main';
        }
        // ARIA landmark
        if (main && !main.getAttribute('role')) main.setAttribute('role', 'main');
        APPLIED.a11y = true;
    }
    
    function applyPerf(){
        // Add loading="lazy" to all imgs except first 2 (LCP candidate)
        var imgs = document.querySelectorAll('img:not([loading])');
        for (var i = 0; i < imgs.length; i++) {
            if (i < 2) {
                imgs[i].setAttribute('loading', 'eager');
                imgs[i].setAttribute('fetchpriority', 'high');
            } else {
                imgs[i].setAttribute('loading', 'lazy');
                imgs[i].setAttribute('decoding', 'async');
            }
        }
        // ALWAYS run alt fix (React renders new imgs)
        document.querySelectorAll('img:not([alt])').forEach(function(img){
            var fromTitle = img.title || '';
            var fromName = (img.src || '').split('/').pop().split('.')[0].replace(/[-_]/g, ' ');
            img.setAttribute('alt', fromTitle || fromName || 'Image décorative');
        });
        // ALSO fix empty-string alt only for decorative img
        document.querySelectorAll('img[alt=""]').forEach(function(img){
            img.setAttribute('role', 'presentation');
        });
        APPLIED.perf = true;
    }
    
    function applySEO(){
        if (APPLIED.seo) return;
        // Ensure single H1: convert 2nd+ H1 to H2
        var h1s = document.querySelectorAll('h1');
        if (h1s.length > 1) {
            for (var i = 1; i < h1s.length; i++) {
                var h1 = h1s[i];
                // Skip if it's in a section that's clearly subordinate
                var newH = document.createElement('h2');
                // Copy content + classes + attributes
                newH.innerHTML = h1.innerHTML;
                Array.from(h1.attributes).forEach(function(attr){
                    if (attr.name !== 'class') {
                        newH.setAttribute(attr.name, attr.value);
                    }
                });
                if (h1.className) newH.className = h1.className;
                newH.setAttribute('data-d472-from-h1', '1');
                h1.parentNode.replaceChild(newH, h1);
            }
        }
        APPLIED.seo = true;
    }
    
    function apply(){
        applyA11y();
        applyPerf();
        applySEO();
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', apply);
    } else { apply(); }
    setTimeout(apply, 1000);
    setTimeout(apply, 3000);
    
    // Re-apply on DOM mutation (React renders late)
    var observer = new MutationObserver(function(){
        // Don't reset - just re-apply
        APPLIED.a11y = false; APPLIED.perf = false; APPLIED.seo = false;
        apply();
    });
    observer.observe(document.body, {childList: true, subtree: true});
    // Stop heavy observation after 30s
    setTimeout(function(){ observer.disconnect(); }, 30000);
})();
</script>

<script id="d474-service-wire">
(function(){
    // D474: enriched source tracking + FAQ wire
    function enrichServiceSources(){
    // D474 v3: restore href if previously neutralized
    document.querySelectorAll('a[data-original-href][href="javascript:void(0)"]').forEach(function(a){
        var orig = a.dataset.originalHref;
        if (orig) a.setAttribute('href', orig);
    });

        document.querySelectorAll('a[href^="/service/"]').forEach(function(a){
            if (a.dataset.d474Tagged === '1') return;
            a.dataset.d474Tagged = '1';
            // Extract service name from URL
            var match = a.getAttribute('href').match(/\/service\/([a-z-]+)/);
            if (match) a.dataset.source = 'homepage-service-' + match[1];
        });
        // /products link: real page exists with quality content (8 suites métier)
        // Just tag for analytics, do NOT intercept (legitimate navigation)
        document.querySelectorAll('a[href="/products"]').forEach(function(a){
            if (a.dataset.d474Tagged === '1') return;
            a.dataset.d474Tagged = '1';
            a.dataset.source = 'homepage-products-link';
        });
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', enrichServiceSources);
    } else { enrichServiceSources(); }
    setTimeout(enrichServiceSources, 1000);
    setTimeout(enrichServiceSources, 3000);
    new MutationObserver(enrichServiceSources).observe(document.body, {childList: true, subtree: true});
})();
</script>

<style id="d483-live-widget-css">
/* D483/D484 Yacine - Widget LIVE → /demo-agents.html avec mascotte WEVIA + 3 widgets harmonisés droite */
@keyframes d483-pulse-glow {
    0%, 100% { box-shadow: 0 8px 24px rgba(99,102,241,0.35), 0 0 0 0 rgba(168,85,247,0.5); transform: scale(1); }
    50% { box-shadow: 0 12px 32px rgba(99,102,241,0.55), 0 0 0 14px rgba(168,85,247,0); transform: scale(1.04); }
}
@keyframes d483-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes d483-live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes d483-fade-in { from { opacity: 0; transform: translateY(-50%) translateX(20px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }

/* Widget WEVIA (D483) - position TOP 30% droite, taille 64x64 (référence) */
#d483-live-widget {
    position: fixed !important;
    right: 24px !important;
    top: 30% !important;
    transform: translateY(-50%) !important;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    animation: d483-fade-in 600ms ease-out 1s forwards;
}
#d483-live-widget.collapsed { right: -52px !important; }

.d483-orb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #6366f1, #a855f7, #6366f1);
    position: relative;
    animation: d483-pulse-glow 2.6s ease-in-out infinite;
    border: 2px solid rgba(255,255,255,0.95);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(99,102,241,0.35);
}
.d483-orb::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #ddd6fe 70%, #c7d2fe 100%);
    z-index: 1;
}
.d483-orb::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1.5px dashed rgba(99,102,241,0.45);
    animation: d483-orbit 8s linear infinite;
    z-index: 3;
    pointer-events: none;
}
.d483-orb img.d483-mascotte {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: cover;
    object-position: center 22%;
    border-radius: 50%;
    z-index: 2;
}

.d483-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(16,185,129,0.4);
    font-family: 'DM Sans', system-ui, sans-serif;
}
.d483-label .d483-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: d483-live-blink 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255,255,255,0.7);
}

/* UX bouton x amélioré - plus visible, plus joli */
.d483-collapse {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.98);
    border: 1.5px solid rgba(99,102,241,0.4);
    cursor: pointer;
    color: #4f46e5;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: all 200ms;
    z-index: 5;
    padding: 0;
}
.d483-collapse:hover {
    transform: scale(1.15) rotate(90deg);
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.d483-toggle {
    position: fixed;
    right: 12px;
    top: 30%;
    transform: translateY(-50%);
    z-index: 9991;
    width: 28px;
    height: 56px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border: none;
    border-radius: 14px 0 0 14px;
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: -4px 4px 12px rgba(99,102,241,0.3);
}
#d483-live-widget.collapsed ~ .d483-toggle { display: flex; }

/* D484 - Coordination 3 widgets droite : taille uniforme 64x64 + répartis hauteur */
/* WhatsApp (autre Opus) -> taille 64x64 + position 50% */
#weval-whatsapp {
    width: 64px !important;
    height: 64px !important;
    right: 24px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 9989 !important;
    border-radius: 50% !important;
}
#weval-whatsapp img, #weval-whatsapp svg { width: 32px !important; height: 32px !important; }

/* Brain chat (autre Opus) -> taille 64x64 + position 70% */
.chat-toggle-btn {
    width: 64px !important;
    height: 64px !important;
    right: 24px !important;
    top: 70% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 9988 !important;
}
.chat-toggle-btn span { font-size: 30px !important; }

@media (max-width: 768px) {
    #d483-live-widget {
        top: 25% !important;
        right: 12px !important;
        transform: translateY(-50%) !important;
    }
    #d483-live-widget.collapsed { right: -52px !important; top: 25% !important; }
    .d483-toggle { top: 25% !important; }
    
    .d483-orb { width: 56px !important; height: 56px !important; }
    .d483-label { font-size: 9px !important; padding: 2px 7px 2px 5px !important; }
    
    /* Mobile: répartir sur hauteur 25% / 50% / 75% */
    #weval-whatsapp {
        width: 56px !important;
        height: 56px !important;
        top: 50% !important;
        right: 12px !important;
        transform: translateY(-50%) !important;
    }
    #weval-whatsapp img, #weval-whatsapp svg { width: 28px !important; height: 28px !important; }
    
    .chat-toggle-btn {
        width: 56px !important;
        height: 56px !important;
        top: 75% !important;
        right: 12px !important;
        transform: translateY(-50%) !important;
    }
    .chat-toggle-btn span { font-size: 26px !important; }
}
</style>

<a href="/demo-agents.html" id="d483-live-widget" role="complementary" aria-label="Voir l'IA WEVIA en action - Démo live agents" title="Voir WEVIA en action">
    <button class="d483-collapse" aria-label="Réduire" title="Masquer le widget WEVIA" onclick="event.preventDefault();event.stopPropagation();document.getElementById('d483-live-widget').classList.add('collapsed');try{sessionStorage.setItem('d483-collapsed','1')}catch(_){}">×</button>
    <div class="d483-orb">
        <img class="d483-mascotte" src="/assets/wevia-em-mascotte.png" alt="Mascotte WEVIA - Avatar consultant IA" loading="lazy" />
    </div>
    <span class="d483-label"><span class="d483-dot"></span>LIVE</span>
</a>
<button class="d483-toggle" aria-label="Réafficher" title="Afficher widget WEVIA LIVE" onclick="document.getElementById('d483-live-widget').classList.remove('collapsed');try{sessionStorage.removeItem('d483-collapsed')}catch(_){}">›</button>

<script id="d483-live-widget-js">
(function(){
    try {
        if (sessionStorage.getItem('d483-collapsed') === '1') {
            document.getElementById('d483-live-widget').classList.add('collapsed');
        }
    } catch(_){}
})();
</script>

<script id="d485-hide-header-cta">
(function(){
  function hideParlerWevia(){
    document.querySelectorAll('header a, header button, .header-wrapper a, .header-wrapper button, nav a, nav button').forEach(el => {
      const txt = (el.innerText || el.textContent || '').toLowerCase().trim();
      if ((txt.includes('parler') && txt.includes('wevia')) || txt === 'parler à wevia' || txt === 'parler a wevia') {
        el.style.display = 'none';
        el.setAttribute('data-d485-hidden','parler-wevia-header');
      }
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', hideParlerWevia);
  } else {
    hideParlerWevia();
  }
  // Re-run after 2s in case header is dynamic
  setTimeout(hideParlerWevia, 2000);
})();
</script>
<!-- D486 Yacine -->
<a id="weval-whatsapp" href="https://wa.me/33647087627?text=Bonjour%20WEVAL%2C%20je%20souhaite%20en%20savoir%20plus" target="_blank" rel="noopener" title="WhatsApp Support" aria-label="Contacter WEVAL via WhatsApp" style="position:fixed;right:24px;top:50%;width:64px;height:64px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(37,211,102,0.4);z-index:9989;text-decoration:none;transform:translateY(-50%);transition:transform 0.2s">
    <svg viewBox="0 0 32 32" width="32" height="32" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M16.001 3.2c-7.071 0-12.8 5.728-12.8 12.8 0 2.262.591 4.464 1.717 6.4l-1.823 6.673 6.829-1.792c1.866 1.012 3.965 1.541 6.077 1.541 7.072 0 12.8-5.729 12.8-12.8s-5.728-12.822-12.8-12.822zm0 23.394c-1.881 0-3.722-.503-5.323-1.453l-.385-.224-3.974 1.043 1.06-3.879-.247-.398c-1.046-1.66-1.589-3.555-1.589-5.483 0-5.713 4.643-10.357 10.358-10.357 5.714 0 10.358 4.644 10.358 10.357.022 5.714-4.622 10.394-10.358 10.394zm5.692-7.749c-.31-.155-1.832-.91-2.115-1.012-.283-.103-.49-.155-.696.155-.207.31-.798 1.012-.978 1.219-.179.207-.359.232-.669.077-.31-.155-1.31-.486-2.494-1.541-.92-.823-1.541-1.836-1.722-2.146-.18-.31-.019-.476.136-.631.139-.139.31-.359.464-.539.155-.18.207-.31.31-.516.103-.207.052-.388-.026-.539-.077-.155-.696-1.682-.953-2.302-.252-.605-.508-.519-.696-.531l-.594-.01c-.207 0-.539.077-.823.388-.283.31-1.082 1.06-1.082 2.585 0 1.527 1.108 3.001 1.262 3.207.155.207 2.181 3.328 5.286 4.668.738.319 1.314.51 1.762.652.74.234 1.413.202 1.946.121.594-.087 1.831-.748 2.089-1.471.258-.722.258-1.341.181-1.471-.077-.129-.283-.207-.594-.362z"/></svg>
</a>
<button class="chat-toggle-btn" type="button" title="Discuter avec WEVIA" aria-label="Ouvrir le chat WEVIA" onclick="if(typeof window.weviaToggle==='function'){window.weviaToggle()}else if(typeof window.openWeviaChat==='function'){window.openWeviaChat()}else if(typeof window.d467OpenContact==='function'){window.d467OpenContact('chat-toggle-d486')}else{window.location.href='/contact'}" style="position:fixed;right:24px;top:70%;width:64px;height:64px;background:linear-gradient(135deg,#6366f1,#a855f7);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(99,102,241,0.4);z-index:9988;transform:translateY(-50%);transition:transform 0.2s">
    <span style="font-size:30px">🧠</span>
</button>
<!-- D496 Yacine - Toggle FR/EN systémique -->
<style id="d496-i18n-toggle-css">
.language-switcher {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 9996;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(99,102,241,0.18);
    border-radius: 50px;
    cursor: pointer;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #6366f1;
    box-shadow: 0 4px 14px rgba(15,23,42,0.08);
    transition: all 200ms;
    user-select: none;
    letter-spacing: 0.5px;
}
.language-switcher:hover {
    background: rgba(99,102,241,0.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.18);
}
.language-switcher span {
    display: inline-block;
    line-height: 1;
}
.language-switcher::before {
    content: '🌐';
    font-size: 14px;
}
@media (max-width: 768px) {
    .language-switcher { top: 78px; right: 18px; padding: 5px 10px; font-size: 11px; }
}
/* Compatible avec D491 ribbon (qui pousse body de 38px) */
body.d491-ribbon-shown .language-switcher { top: 110px; }
@media (max-width: 768px) {
    body.d491-ribbon-shown .language-switcher { top: 108px; }
}