/* ===== Unified Admin Vibe — Mirrors AdminLayout + Dashboard + Settings =====
           Applied as runtime overlay over compiled SPA (all 6 public pages).
           Tokens sourced from tailwind.config.js + AdminLayout.jsx:
           - bg-section-soft-gray #F1F5F9 / card border slate-200/60 / brand #1667A8 #1E7A3C
           - Plus Jakarta Sans (Cairo for ar) / rounded-2xl / shadow-sm
           Covers: / , /vos-besoins , /comment-proceder , /reglementation , /solutions , /contact */

        /* 1. Global canvas & typography — match AdminLayout min-h-screen bg-section-soft-gray */
        html { scroll-behavior: smooth; }
        body {
            background-color: #F1F5F9 !important;
            font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
            color: #111827;
            -webkit-font-smoothing: antialiased;
        }
        html[lang='ar'] body,
        html[lang='ar'] [class*="font-['"] {
            font-family: 'Cairo', 'Plus Jakarta Sans', 'Inter', sans-serif !important;
        }
        [class*="font-['"] {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
        }

        /* 2. Normalize off-palette text → admin slate scale */
        [class*="text-[#111" ] { color: #111827 !important; }
        [class*="text-[#1a1a1a]"] { color: #111827 !important; }
        [class*="text-[#2a2b2e]"] { color: #111827 !important; }
        [class*="text-[#666]"] { color: #64748b !important; }
        [class*="text-[#4b5563]"] { color: #64748b !important; }
        [class*="text-[#237d27]"], [class*="text-[#248838]"], [class*="text-[#0d9488]"] { color: #1E7A3C !important; }
        [class*="text-[#b00b10]"] { color: #dc2626 !important; }
        [class*="border-[#ccc]"] { border-color: #e2e8f0 !important; }
        [class*="border-[#e5e7eb]"] { border-color: rgba(226,232,240,0.6) !important; }

        /* 3. Header — Modern Premium Sticky Glass Navbar */
        [data-name="header"], [data-name="Header"], header[class*="bg-white"][class*="border-[#e5e7eb]"], header {
            position: sticky !important;
            top: 0 !important;
            z-index: 100 !important;
            background: rgba(255, 255, 255, 0.90) !important;
            backdrop-filter: blur(16px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
            border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
            box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
            transition: all 0.25s ease !important;
        }
        header .hidden.md\:flex > div {
            min-height: 64px !important;
            align-items: center !important;
        }
        /* Capsule segmented nav container */
        header nav {
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
            background: #F1F5F9 !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 999px !important;
            padding: 4px 5px !important;
        }
        /* Nav link items */
        header nav a {
            font-family: 'Plus Jakarta Sans', Inter, -apple-system, sans-serif !important;
            font-size: 12.5px !important;
            font-weight: 600 !important;
            letter-spacing: 0.03em !important;
            text-transform: uppercase !important;
            color: #64748b !important;
            background: transparent !important;
            border: 1px solid transparent !important;
            border-radius: 999px !important;
            padding: 6px 16px !important;
            line-height: 1.3 !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
            text-decoration: none !important;
            white-space: nowrap !important;
        }
        html[dir="rtl"] header nav a {
            font-family: Cairo, 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 13.5px !important;
            font-weight: 700 !important;
            letter-spacing: 0 !important;
        }
        /* Inactive Nav link hover */
        header nav a:hover {
            color: #0f172a !important;
            background: rgba(255, 255, 255, 0.85) !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
        }
        /* Active Nav link */
        header nav a[class*="bg-[#ebf5ff]"],
        header nav a[class*="text-[#1667a8]"] {
            color: #1667A8 !important;
            background: #ffffff !important;
            font-weight: 700 !important;
            border: 1px solid rgba(22, 103, 168, 0.15) !important;
            box-shadow: 0 2px 6px rgba(22, 103, 168, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
        }
        /* Language Switcher */
        header button[aria-label="Language"] {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            border-radius: 999px !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            background: #ffffff !important;
            padding: 7px 14px !important;
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            color: #334155 !important;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
            transition: all 0.2s ease !important;
        }
        header button[aria-label="Language"]:hover {
            background: #ffffff !important;
            border-color: rgba(22, 103, 168, 0.35) !important;
            color: #1667A8 !important;
            box-shadow: 0 2px 6px rgba(22, 103, 168, 0.1) !important;
        }
        /* Contact CTA Button */
        header a[href*="/contact"],
        header a[href*="اتصل-بنا"],
        header .flex.items-center.gap-\[16px\] > a,
        header a[class*="bg-[#1667a8]"] {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: linear-gradient(135deg, #1667A8 0%, #0f5288 100%) !important;
            color: #ffffff !important;
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            letter-spacing: 0.03em !important;
            text-transform: uppercase !important;
            padding: 8.5px 22px !important;
            border-radius: 999px !important;
            box-shadow: 0 2px 8px rgba(22, 103, 168, 0.28), 0 1px 2px rgba(22, 103, 168, 0.2) !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            border: none !important;
        }
        html[dir="rtl"] header a[href*="اتصل-بنا"],
        html[dir="rtl"] header a[href*="/contact"],
        html[dir="rtl"] header .flex.items-center.gap-\[16px\] > a {
            font-family: Cairo, 'Plus Jakarta Sans', sans-serif !important;
            letter-spacing: 0 !important;
            font-size: 13.5px !important;
        }
        header a[href*="/contact"]:hover,
        header a[href*="اتصل-بنا"]:hover,
        header .flex.items-center.gap-\[16px\] > a:hover,
        header a[class*="bg-[#1667a8]"]:hover {
            background: linear-gradient(135deg, #1a7bc9 0%, #1667A8 100%) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 18px rgba(22, 103, 168, 0.38) !important;
            color: #ffffff !important;
        }
        header a[href*="/contact"]:active,
        header a[href*="اتصل-بنا"]:active,
        header .flex.items-center.gap-\[16px\] > a:active,
        header a[class*="bg-[#1667a8]"]:active {
            transform: translateY(0) !important;
            box-shadow: 0 2px 4px rgba(22, 103, 168, 0.2) !important;
        }

        /* 4. Badges — pill, brand tint */
        [data-name="hero-badge"], [data-name="badge" i], [data-name="Eyebrow"] {
            border-radius: 999px !important;
            background: rgba(22,103,168,0.10) !important;
            border: 1px solid rgba(22,103,168,0.12) !important;
            padding: 4px 10px !important;
        }
        [data-name="hero-badge"] p, [data-name="badge" i] p, [data-name="Eyebrow"] p,
        div[class*="bg-[#f3f4f6]"][class*="rounded-[4px]"]:not(header *):not(nav *) p {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.08em !important;
            color: #1667A8 !important;
        }
        div[class*="bg-[#f3f4f6]"][class*="rounded-[4px]"]:not(header *):not(nav *) {
            border-radius: 999px !important;
            background: rgba(22,103,168,0.10) !important;
            border: 1px solid rgba(22,103,168,0.12) !important;
        }

        /* 5. Hero & section titles — admin H2 style */
        [data-name$="Header" i] [class*="text-[48px]"],
        [data-name$="Header" i] [class*="text-[40px]"],
        [data-name$="Header" i] [class*="text-[36px]"],
        [data-name$="Header" i] [class*="text-[32px]"],
        [data-name$="Header" i] [class*="text-[28px]"],
        [data-name="hero"] [class*="text-[48px]"],
        [data-name="section-header"] [class*="text-[36px]"] {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
            font-size: clamp(28px, 4vw, 36px) !important;
            font-weight: 800 !important;
            letter-spacing: -0.02em !important;
            line-height: 1.15 !important;
            text-transform: uppercase !important;
            color: #111827 !important;
        }

        /* 6. Buttons — admin primary slate-900 / green brand */
        [class*="bg-[#1667a8]"], [class*="bg-[#237d27]"], [class*="bg-[#248838]"],
        [data-name="btn-primary"], [data-name="cta-primary-btn"] {
            border-radius: 8px !important;
            box-shadow: 0 1px 2px rgba(15,23,42,0.08) !important;
        }
        [class*="bg-[#1667a8]"] { background-color: #0f172a !important; transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important; }
        [class*="bg-[#1667a8]"]:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 20px -8px rgba(15,23,42,0.28) !important; }
        [class*="bg-[#1667a8]"]:hover { background-color: #1e293b !important; }
        [class*="bg-[#237d27]"], [class*="bg-[#248838]"] { background-color: #1E7A3C !important; }
        [class*="bg-[#1667a8]"] > *, [class*="bg-[#237d27]"] > *, [class*="bg-[#248838]"] > * {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.08em !important;
            color: #fff !important;
        }
        a[class*="border-[#1667a8]"], [data-name="btn-outline"], [data-name="cta-secondary-btn"] {
            border: 1px solid #e2e8f0 !important;
            background: #fff !important;
            border-radius: 8px !important;
            box-shadow: 0 1px 2px rgba(15,23,42,0.05) !important;
        }
        a[class*="border-[#1667a8]"] p, [data-name="btn-outline"] p {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            color: #334155 !important;
        }

        /* 7. Cards — Admin card-surface */
        [data-name="card-0"],[data-name="card-1"],[data-name="card-2"],[data-name="card-3"],
        [data-name^="target-"],[data-name^="rapid-card-"],[data-name="product-card"],[data-name="product-card-centered"],
        [data-name^="temp-card-"],[data-name^="Overview-Card-"]:not([data-name="Overview-Cards"]),
        [data-name^="Benefit-Card-"],[data-name^="WhyCard-"],[data-name^="Method-Step-"],[data-name^="Audit-Card-"] {
            background: #fff !important;
            border: 1px solid rgba(226,232,240,0.7) !important;
            border-radius: 16px !important;
            box-shadow: 0 1px 2px rgba(15,23,42,0.05) !important;
            overflow: visible !important;
        }
        [data-name="card-0"] > [class*="absolute"][class*="border"],[data-name="card-1"] > [class*="absolute"][class*="border"],[data-name="card-2"] > [class*="absolute"][class*="border"],[data-name="card-3"] > [class*="absolute"][class*="border"],
        [data-name^="target-"] > [class*="absolute"][class*="border"],[data-name^="rapid-card-"] > [class*="absolute"][class*="border"],[data-name="product-card"] > [class*="absolute"][class*="border"],[data-name^="temp-card-"] > [class*="absolute"][class*="border"],
        [data-name^="Overview-Card-"]:not([data-name="Overview-Cards"]) > [class*="absolute"][class*="border"],
        [data-name^="Benefit-Card-"] > [class*="absolute"][class*="border"],[data-name^="WhyCard-"] > [class*="absolute"][class*="border"],[data-name^="Method-Step-"] > [class*="absolute"][class*="border"],[data-name^="Audit-Card-"] > [class*="absolute"][class*="border"] { border: 0 !important; display: none !important; }
        [data-name="card-0"]:hover,[data-name="card-1"]:hover,[data-name="card-2"]:hover,[data-name="card-3"]:hover,
        [data-name^="target-"]:hover,[data-name^="Benefit-Card-"]:hover,[data-name^="WhyCard-"]:hover,[data-name="Method-Step-"]:hover,[data-name="Audit-Card-"]:hover,[data-name^="Overview-Card-"]:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 28px -10px rgba(15,23,42,0.14), 0 4px 12px -4px rgba(15,23,42,0.08) !important; }

        /* Premium: cards have smooth entry and inner highlight */
        [data-name="card-0"],[data-name="card-1"],[data-name="card-2"],[data-name="card-3"],
        [data-name^="Benefit-Card-"],[data-name^="WhyCard-"] {
            transition: all 0.32s cubic-bezier(0.16,1,0.3,1) !important;
        }
        /* Hero — subtle mesh like Admin Dashboard hero */
        [data-name="hero"] {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            position: relative !important;
        }
        [data-name="hero"]::before {
            content: '' !important;
            position: absolute !important;
            inset: 0 !important;
            background: radial-gradient(600px 300px at 80% -10%, rgba(22,103,168,0.06), transparent 60%), radial-gradient(500px 300px at -10% 100%, rgba(30,122,60,0.05), transparent 60%) !important;
            pointer-events: none !important;
        }

        /* 8. Icon chips */
        [data-name^="icon-placeholder"], [data-name="Icon-Wrapper"] {
            background: rgba(22,103,168,0.10) !important;
            border-color: rgba(22,103,168,0.12) !important;
            border-radius: 12px !important;
        }
        [data-name^="icon-placeholder"] svg path { stroke: #1667A8 !important; }

        /* 9. Section backgrounds */
        [data-name="probleme"], [data-name="Section-Benefits"] { background: #EBF7EE !important; }
        [data-name*="CHR"], [data-name="Section-Detail-1"], [data-name="Section-Detail-3"], [data-name="section-temperature"] { background: #EEF6FC !important; }
        [data-name^="wireframe"]>[data-name]:not([data-name="hero"]):not([data-name="section-hero"]):not([data-name="Section-Hero"]):not([data-name="hero-section"]):not([data-name="hero-outer"]):not([data-name="site-footer"]):not([data-name="Divider-Container"]):not([data-name="newsletter-fond-toile-verre"]):not([data-name*="separateur"]),
        [data-name="01_ACCUEIL"]>[data-name]:not([data-name="hero"]):not([data-name="section-hero"]):not([data-name="Section-Hero"]):not([data-name="hero-section"]):not([data-name="hero-outer"]):not([data-name="site-footer"]):not([data-name="Divider-Container"]):not([data-name="newsletter-fond-toile-verre"]):not([data-name*="separateur"]) {
            padding-top: 36px !important; padding-bottom: 36px !important;
        }

        /* 10. Rows */
        [data-name="cards-row"],[data-name="steps-row"],[data-name="grid"],[data-name="grid-row"],
        [data-name="temp-grid"],[data-name="Overview-Cards"],[data-name="Timeline-Row"],
        [data-name="Method-Timeline"],[data-name="Audit-Columns-Wrapper"],
        [data-name="Detail-1-Row"],[data-name="Detail-2-Row"],[data-name="Detail-3-Row"] {
            align-items: stretch !important; gap: 16px !important; flex-wrap: wrap !important;
        }

        /* 11. Hero images — admin rounded-2xl */
        [data-name="hero-right"] [class*="rounded-[35px]"], [data-name="Hero-Image"] [class*="rounded"] { border-radius: 16px !important; }
        img[class*="h-[214.68%]"], img[class*="h-[217.55%]"], img[class*="h-[120.06%]"], img[class*="h-[118.52%]"] {
            width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: cover !important;
        }

        /* 12. Separators */
        [data-name*="separateur"] [class*="bg-[#1667a8]"] { width: 64px !important; height: 4px !important; background: #1667A8 !important; border-radius: 999px !important; margin: 0 auto !important; }
        [data-name*="separateur"] { display: flex !important; justify-content: center !important; }

        /* 13. Contact forms — admin inputs */
        [data-name="contact-page-wireframe"] input, [data-name="contact-page-wireframe"] textarea, [data-name="contact-page-wireframe"] select {
            border-radius: 8px !important; border: 1px solid #cbd5e1 !important; background: #fff !important; padding: 10px 14px !important; font-size: 14px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
        }
        [data-name="contact-page-wireframe"] input:focus, [data-name="contact-page-wireframe"] textarea:focus { border-color: #1667A8 !important; box-shadow: 0 0 0 3px rgba(22,103,168,0.12) !important; outline: none !important; }
        [data-name="documentation"] > [data-name="Frame"]:not(:first-child) { display: none !important; }

        /* Premium: section reveal — subtle fade */
        [data-name^="wireframe"] > [data-name], [data-name="01_ACCUEIL"] > [data-name] {
            animation: mpt-fade-in 0.5s cubic-bezier(0.16,1,0.3,1) both !important;
        }
        @keyframes mpt-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        /* Form premium focus ring like Admin input-admin */
        [data-name="contact-page-wireframe"] input, [data-name="contact-page-wireframe"] textarea, [data-name="contact-page-wireframe"] select {
            transition: all 0.2s ease !important;
        }
        [data-name="site-footer"] { background: #1B2838 !important; }

        /* 14. Interactive Newsletter Form */
        .mpt-newsletter-form, .mpt-newsletter-form * {
            box-sizing: border-box;
        }
        .mpt-newsletter-form {
            width: 100%;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            align-items: stretch;
            position: relative;
            z-index: 2;
        }
        .mpt-newsletter-row {
            display: flex;
            gap: 12px;
            align-items: stretch;
            width: 100%;
        }
        @media (max-width: 600px) {
            .mpt-newsletter-row {
                flex-direction: column;
            }
        }
        .mpt-newsletter-input {
            flex: 1 1 0%;
            min-width: 0;
            height: 44px;
            padding: 0 16px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            background-color: #ffffff;
            font-family: inherit;
            font-size: 15px;
            color: #111827;
            outline: none;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .mpt-newsletter-input::placeholder {
            color: #9ca3af;
        }
        .mpt-newsletter-input:focus {
            border-color: #1667a8;
            box-shadow: 0 0 0 2px rgba(22, 103, 168, 0.15);
        }
        html[dir="rtl"] .mpt-newsletter-input {
            text-align: right;
        }
        .mpt-newsletter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            padding: 0 28px;
            background-color: #237d27;
            color: #ffffff;
            border: none;
            border-radius: 6px;
            font-family: inherit;
            font-weight: 700;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
            cursor: pointer;
            transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
        }
        .mpt-newsletter-btn:hover {
            background-color: #1b631f;
        }
        .mpt-newsletter-btn:active {
            transform: scale(0.98);
        }
        .mpt-newsletter-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }
        .mpt-newsletter-consent {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            width: 100%;
            cursor: pointer;
            user-select: none;
        }
        .mpt-newsletter-checkbox {
            margin-top: 2px;
            width: 16px;
            height: 16px;
            border-radius: 3px;
            border: 1px solid #d1d5db;
            accent-color: #237d27;
            cursor: pointer;
            flex-shrink: 0;
        }
        .mpt-newsletter-consent-text {
            flex: 1 1 0%;
            font-size: 12px;
            line-height: 1.4;
            color: #1667a8;
        }
        html[dir="rtl"] .mpt-newsletter-consent-text {
            text-align: right;
        }
        .mpt-newsletter-feedback {
            font-size: 13px;
            font-weight: 500;
            padding: 12px 16px;
            border-radius: 6px;
            display: none;
            width: 100%;
            box-sizing: border-box;
        }
        .mpt-newsletter-feedback.is-success {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center;
            text-align: center;
            background-color: rgba(35, 125, 39, 0.10);
            border: 1px solid #237d27;
            color: #1e7a3c;
        }
        .mpt-newsletter-feedback.is-error {
            display: block;
            background-color: #fef2f2;
            border: 1px solid #ef4444;
            color: #dc2626;
        }
        .mpt-newsletter-reset-btn {
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
            font-size: 12px;
            color: #1667a8;
            text-decoration: underline;
            cursor: pointer;
        }
    
        /* ===== RTL — Arabic (html[dir="rtl"]) Premium ===== */
        html[dir="rtl"] body {
            direction: rtl !important;
            text-align: right;
            line-height: 1.75 !important;
        }
        html[dir="rtl"] [class*="font-['"] {
            font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif !important;
            line-height: 1.7 !important;
        }
        /* Disable uppercase + tight tracking for Arabic script */
        html[dir="rtl"] [data-name$="Header" i] [class*="text-["],
        html[dir="rtl"] [data-name="hero"] [class*="text-[48px]"],
        html[dir="rtl"] [data-name="badge" i] p,
        html[dir="rtl"] [data-name="hero-badge"] p,
        html[dir="rtl"] [data-name="Eyebrow"] p,
        html[dir="rtl"] [class*="bg-[#1667a8]"] > *,
        html[dir="rtl"] a[class*="border-[#1667a8]"] p {
            text-transform: none !important;
            letter-spacing: 0 !important;
            font-family: 'Cairo', sans-serif !important;
        }
        html[dir="rtl"] [data-name="navigation"] p,
        html[dir="rtl"] [data-name^="Nav-Link-"] p {
            letter-spacing: 0 !important;
            text-transform: none !important;
            font-family: 'Cairo', sans-serif !important;
            font-weight: 700 !important;
        }
        /* Header in RTL — keep glass but ensure logo stays at inline-start */
        html[dir="rtl"] [data-name="header"] > div,
        html[dir="rtl"] [data-name="Header"] > div {
            direction: rtl;
        }
        /* Hero — mirror: text on right, image on left */
        html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero"] .inline-grid,
        html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero"] > div.inline-grid {
            direction: rtl;
        }
        html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-right"] {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-inline-start: 0 !important;
        }
        /* Force homepage hero to row-reverse on desktop so text right / image left */
        @media (min-width: 1024px) {
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero"] {
                justify-content: center !important;
            }
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero"] > div {
                display: flex !important;
                flex-direction: row !important;
                direction: rtl !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 48px !important;
                width: 100% !important;
                max-width: 1200px !important;
            }
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-left"] {
                width: 56% !important;
                max-width: 620px !important;
                min-width: 0 !important;
                margin: 0 !important;
                flex: 1 1 0 !important;
                align-items: flex-end !important;
                text-align: right !important;
            }
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-left"] [data-name="Frame"] {
                align-items: flex-end !important;
                text-align: right !important;
            }
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-left"] [data-name="Frame"] p {
                text-align: right !important;
            }
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-actions"] {
                justify-content: flex-end !important;
            }
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-right"] {
                width: 44% !important;
                max-width: 520px !important;
                min-width: 0 !important;
                margin: 0 !important;
                flex: 0 0 44% !important;
                display: flex !important;
                flex-direction: column !important;
            }
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-right"] > div,
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-right"] img {
                border-radius: 16px !important;
            }
        }
        @media (max-width: 1023px) {
            html[dir="rtl"] [data-name="01_ACCUEIL"] [data-name="hero-left"] {
                align-items: center !important;
                text-align: center !important;
            }
        }

        /* Regulations Hero — strictly centered column in both LTR and RTL */
        [data-name="wireframe-reglementation"] [data-name="hero"],
        [data-name="wireframe-reglementation"] [data-name="hero"] > div,
        html[dir="rtl"] [data-name="wireframe-reglementation"] [data-name="hero"],
        html[dir="rtl"] [data-name="wireframe-reglementation"] [data-name="hero"] > div {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        [data-name="wireframe-reglementation"] [data-name="hero"] [data-name="Frame"],
        html[dir="rtl"] [data-name="wireframe-reglementation"] [data-name="hero"] [data-name="Frame"] {
            align-items: center !important;
            text-align: center !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        [data-name="wireframe-reglementation"] [data-name="hero"] [class*="w-[720px]"],
        html[dir="rtl"] [data-name="wireframe-reglementation"] [data-name="hero"] [class*="w-[720px]"] {
            margin-left: auto !important;
            margin-right: auto !important;
            width: 100% !important;
            max-width: 720px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }
        html[dir="rtl"] [data-name="wireframe-reglementation"] [data-name="hero"] [class*="w-[720px]"] {
            direction: rtl !important;
        }
        html[dir="rtl"] [data-name="wireframe-reglementation"] [data-name="hero"] input {
            text-align: right !important;
            direction: rtl !important;
        }
        /* Mobile hero — stack naturally, remove left offsets */
        html[dir="rtl"] img[class*="left-["] {
            left: auto !important;
            right: 0 !important;
        }
        html[dir="rtl"] img[class*="h-[214.68%]"],
        html[dir="rtl"] img[class*="h-[217.55%]"],
        html[dir="rtl"] img[class*="h-[120.06%]"],
        html[dir="rtl"] img[class*="h-[118.52%]"] {
            left: auto !important;
            right: 0 !important;
        }
        /* Section headers — right align in RTL */
        html[dir="rtl"] [data-name="section-header"],
        html[dir="rtl"] [data-name*="Header"] {
            text-align: right !important;
        }
        html[dir="rtl"] [data-name="probleme"] [data-name="section-header"],
        html[dir="rtl"] [data-name="Section-Benefits"] [data-name="Benefits-Header"] {
            text-align: center !important; /* keep centered sections centered even in RTL */
        }
        /* Cards — ensure text inside is right-aligned for Arabic */
        html[dir="rtl"] [data-name="card-0"] p,
        html[dir="rtl"] [data-name="card-1"] p,
        html[dir="rtl"] [data-name^="Benefit-Card-"] p,
        html[dir="rtl"] [data-name^="WhyCard-"] p,
        html[dir="rtl"] [data-name="details-right-col"] p {
            text-align: right !important;
        }
        /* Contact form — labels & inputs RTL */
        html[dir="rtl"] [data-name="contact-page-wireframe"] label,
        html[dir="rtl"] [data-name="contact-page-wireframe"] input,
        html[dir="rtl"] [data-name="contact-page-wireframe"] textarea,
        html[dir="rtl"] [data-name="contact-page-wireframe"] select {
            text-align: right !important;
            direction: rtl !important;
        }
        html[dir="rtl"] [data-name="form-left-col"] {
            text-align: right !important;
        }
        /* Footer columns — reverse visual order slightly for RTL balance */
        html[dir="rtl"] [data-name="footer-top"],
        html[dir="rtl"] [data-name="footer-top-grid"] {
            direction: rtl;
        }
        html[dir="rtl"] [data-name="site-footer"] {
            text-align: right;
        }
        /* Newsletter — already has rtl via .mpt-newsletter-input[dir=rtl] but enforce */
        html[dir="rtl"] .mpt-newsletter-consent {
            flex-direction: row-reverse !important;
        }
        /* Fix gradient direction for RTL */
        html[dir="rtl"] [data-name="hero"]::before {
            background: radial-gradient(600px 300px at 20% -10%, rgba(22,103,168,0.06), transparent 60%), radial-gradient(500px 300px at 110% 100%, rgba(30,122,60,0.05), transparent 60%) !important;
        }

        /* 15. Regulations Page Layout, Typography & Responsive Polish */
        /* Hero & Search */
        [data-name="hero"] [class*="w-[720px]"],
        [data-name="hero"] [data-name="Frame"] input {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        [data-name="hero"] [class*="w-[720px]"] {
            width: 100% !important;
            max-width: 720px !important;
        }
        [data-name="hero"] [class*="bg-[#237d27]"] {
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }
        [data-name="hero"] [class*="bg-[#237d27]"]:hover {
            background-color: #1b631f !important;
            transform: translateY(-1px) !important;
        }

        /* "QUE RECHERCHEZ-VOUS ?" 3x2 Grid Layout */
        [data-name="thematiques"] {
            padding-left: clamp(20px, 5vw, 120px) !important;
            padding-right: clamp(20px, 5vw, 120px) !important;
            overflow-x: hidden !important;
            box-sizing: border-box !important;
            width: 100% !important;
        }
        [data-name="thematiques"] > div:last-child {
            display: flex !important;
            flex-direction: column !important;
            gap: 24px !important;
            width: 100% !important;
            max-width: 1200px !important;
        }
        [data-name="thematiques"] > div:last-child > div {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
        }
        @media (max-width: 1024px) {
            [data-name="thematiques"] > div:last-child > div {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="thematiques"] > div:last-child > div {
                grid-template-columns: 1fr !important;
            }
        }
        [data-name="thematiques"] > div:last-child > div > div {
            min-width: 0 !important;
            width: 100% !important;
            flex: none !important;
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 16px !important;
            padding: 28px !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            box-sizing: border-box !important;
        }
        [data-name="thematiques"] > div:last-child > div > div:hover {
            transform: translateY(-4px) !important;
            box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06) !important;
            border-color: rgba(22, 103, 168, 0.35) !important;
        }
        [data-name="thematiques"] > div:last-child > div > div > div[class*="border"] {
            display: none !important;
        }
        [data-name="thematiques"] p,
        [data-name="thematiques"] [class*="text-[16px]"],
        [data-name="thematiques"] [class*="text-[20px]"] {
            word-break: normal !important;
            overflow-wrap: normal !important;
            hyphens: none !important;
            line-height: 1.5 !important;
        }

        /* "À LA UNE" Section — Modern Editorial Showcase Redesign */
        [data-name="alaune"] {
            background: #F8FAFC !important;
            padding-left: clamp(20px, 5vw, 120px) !important;
            padding-right: clamp(20px, 5vw, 120px) !important;
            padding-top: 40px !important;
            padding-bottom: 40px !important;
            border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
            border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
            width: 100% !important;
        }
        [data-name="alaune"] > div {
            max-width: 1200px !important;
            width: 100% !important;
            padding: 0 !important;
        }
        [data-name="alaune"] > div > div {
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 28px !important;
        }
        /* Section Title "À LA UNE" / "في الواجهة" */
        [data-name="alaune"] > div > div > p:first-child {
            font-size: 26px !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            letter-spacing: -0.02em !important;
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }
        [data-name="alaune"] > div > div > p:first-child::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 24px;
            background: #1667A8;
            border-radius: 4px;
        }

        /* 2-Column Grid for Featured Story (62%) + Side Stories (38%) */
        [data-name="alaune"] > div > div > div:last-child {
            display: grid !important;
            grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important;
            gap: 24px !important;
            width: 100% !important;
            align-items: stretch !important;
        }
        @media (max-width: 960px) {
            [data-name="alaune"] > div > div > div:last-child {
                grid-template-columns: 1fr !important;
            }
        }

        /* 1. Main Featured Card */
        [data-name="alaune"] > div > div > div:last-child > div:first-child {
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.95) !important;
            border-radius: 20px !important;
            padding: 0 !important;
            overflow: hidden !important;
            box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: stretch !important;
            min-height: 320px !important;
            gap: 0 !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            cursor: pointer !important;
        }
        [data-name="alaune"] > div > div > div:last-child > div:first-child:hover {
            box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12) !important;
            border-color: rgba(22, 103, 168, 0.4) !important;
            transform: translateY(-3px) !important;
        }
        @media (max-width: 640px) {
            [data-name="alaune"] > div > div > div:last-child > div:first-child {
                flex-direction: column !important;
            }
        }

        /* Featured Image */
        [data-name="alaune"] [data-name="featured-image"] {
            width: 290px !important;
            min-width: 260px !important;
            max-width: 320px !important;
            height: auto !important;
            min-height: 100% !important;
            position: relative !important;
            flex-shrink: 0 !important;
            border-radius: 0 !important;
            margin: 0 !important;
            overflow: hidden !important;
        }
        @media (max-width: 640px) {
            [data-name="alaune"] [data-name="featured-image"] {
                width: 100% !important;
                max-width: 100% !important;
                height: 220px !important;
                min-height: 220px !important;
            }
        }
        [data-name="alaune"] [data-name="featured-image"] img {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 0 !important;
            transition: transform 0.4s ease !important;
        }
        [data-name="alaune"] > div > div > div:last-child > div:first-child:hover [data-name="featured-image"] img {
            transform: scale(1.04) !important;
        }
        [data-name="alaune"] [data-name="featured-image"] > div,
        [data-name="alaune"] [data-name="featured-image"] > div[class*="border"] {
            display: none !important;
        }

        /* Content Container inside Featured Card */
        [data-name="alaune"] > div > div > div:last-child > div:first-child > div:last-child {
            padding: 32px 32px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: flex-start !important;
            gap: 14px !important;
            flex: 1 1 0% !important;
            min-width: 0 !important;
        }
        html[dir="rtl"] [data-name="alaune"] > div > div > div:last-child > div:first-child > div:last-child {
            align-items: flex-start !important;
            text-align: right !important;
        }

        /* Badge in Featured Card */
        [data-name="alaune"] [data-name="featured-image"] ~ div > div:first-child {
            background-color: #EEF6FC !important;
            border: 1px solid #BAE6FD !important;
            border-radius: 6px !important;
            padding: 4px 10px !important;
            width: fit-content !important;
            margin: 0 !important;
        }
        [data-name="alaune"] [data-name="featured-image"] ~ div > div:first-child p {
            color: #1667A8 !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 0.06em !important;
            text-transform: uppercase !important;
            width: auto !important;
            line-height: 1.2 !important;
            margin: 0 !important;
        }

        /* Headline in Featured Card */
        [data-name="alaune"] [data-name="featured-image"] ~ div > p[class*="text-[34px]"],
        [data-name="alaune"] [data-name="featured-image"] ~ div > p:nth-of-type(1) {
            font-size: clamp(20px, 1.8vw, 24px) !important;
            font-weight: 800 !important;
            line-height: 1.38 !important;
            letter-spacing: -0.015em !important;
            color: #0f172a !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            margin: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
        html[dir="rtl"] [data-name="alaune"] [data-name="featured-image"] ~ div > p[class*="text-[34px]"],
        html[dir="rtl"] [data-name="alaune"] [data-name="featured-image"] ~ div > p:nth-of-type(1) {
            font-size: clamp(19px, 1.7vw, 22px) !important;
            line-height: 1.6 !important;
            letter-spacing: 0 !important;
        }

        /* Excerpt in Featured Card */
        [data-name="alaune"] [data-name="featured-image"] ~ div > p[class*="text-[18px]"],
        [data-name="alaune"] [data-name="featured-image"] ~ div > p:nth-of-type(2) {
            font-size: 14.5px !important;
            line-height: 1.6 !important;
            color: #475569 !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            margin: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
        html[dir="rtl"] [data-name="alaune"] [data-name="featured-image"] ~ div > p[class*="text-[18px]"],
        html[dir="rtl"] [data-name="alaune"] [data-name="featured-image"] ~ div > p:nth-of-type(2) {
            font-size: 14px !important;
            line-height: 1.7 !important;
        }

        /* Meta in Featured Card (Date, Reading time) */
        [data-name="alaune"] [data-name="featured-image"] ~ div > div:nth-child(4) {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            color: #94a3b8 !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            margin: 0 !important;
            width: auto !important;
        }
        [data-name="alaune"] [data-name="featured-image"] ~ div > div:nth-child(4) p {
            color: #94a3b8 !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            margin: 0 !important;
            width: auto !important;
            line-height: 1.2 !important;
        }

        /* "Lire l'article" Link in Featured Card */
        [data-name="alaune"] [data-name="featured-image"] ~ div > div:last-child {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding-top: 6px !important;
            margin-top: auto !important;
            width: fit-content !important;
            transition: transform 0.2s ease !important;
        }
        [data-name="alaune"] > div > div > div:last-child > div:first-child:hover [data-name="featured-image"] ~ div > div:last-child {
            transform: translateX(4px) !important;
        }
        html[dir="rtl"] [data-name="alaune"] > div > div > div:last-child > div:first-child:hover [data-name="featured-image"] ~ div > div:last-child {
            transform: translateX(-4px) !important;
        }
        [data-name="alaune"] [data-name="featured-image"] ~ div > div:last-child p {
            color: #1667A8 !important;
            font-weight: 700 !important;
            font-size: 13px !important;
            letter-spacing: 0.03em !important;
            text-transform: uppercase !important;
            margin: 0 !important;
            width: auto !important;
            line-height: 1 !important;
        }
        [data-name="alaune"] [data-name="arrow-right"] svg path {
            stroke: #1667A8 !important;
        }

        /* 2. Side Stories Column */
        [data-name="alaune"] > div > div > div:last-child > div:last-child {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
            width: 100% !important;
            max-width: 100% !important;
            justify-content: stretch !important;
        }

        /* Individual Side Story Card */
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div {
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.95) !important;
            border-radius: 16px !important;
            padding: 24px 28px !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            width: 100% !important;
            box-sizing: border-box !important;
            flex: 1 1 0% !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: flex-start !important;
            gap: 10px !important;
            position: relative !important;
            cursor: pointer !important;
        }
        html[dir="rtl"] [data-name="alaune"] > div > div > div:last-child > div:last-child > div {
            align-items: flex-start !important;
            text-align: right !important;
        }
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.1) !important;
            border-color: rgba(22, 103, 168, 0.35) !important;
        }
        /* Side Card Badge */
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div > div:nth-child(2) > div {
            background-color: #EEF6FC !important;
            border: 1px solid #BAE6FD !important;
            border-radius: 4px !important;
            padding: 2px 8px !important;
            width: fit-content !important;
            margin: 0 !important;
        }
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div > div:nth-child(2) p {
            color: #1667A8 !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            letter-spacing: 0.05em !important;
            text-transform: uppercase !important;
            width: auto !important;
            line-height: 1.2 !important;
            margin: 0 !important;
        }
        /* Side Card Title */
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div > p[class*="text-[16px]"],
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div > p:nth-of-type(1) {
            font-size: 16px !important;
            font-weight: 700 !important;
            line-height: 1.4 !important;
            color: #0f172a !important;
            margin: 0 !important;
            word-break: normal !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
        /* Side Card Description */
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div > p[class*="text-[14px]"],
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div > p:nth-of-type(2) {
            font-size: 13.5px !important;
            line-height: 1.55 !important;
            color: #64748b !important;
            margin: 0 !important;
            word-break: normal !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
        /* Hide awkward green left strip & absolute border divs */
        [data-name="bande-verte-gauche"],
        [data-name="alaune"] [data-name="bande-verte-gauche"],
        [data-name="alaune"] div[class*="bg-[#10b981]"],
        [data-name="alaune"] div[class*="bg-[#059669]"],
        [data-name="alaune"] div[class*="bg-[#16a34a]"] {
            display: none !important;
        }
        [data-name="alaune"] [class*="absolute"][class*="border"] {
            display: none !important;
        }
        [data-name="alaune"] > div > div > div:last-child > div:last-child > div > div:first-child[class*="border"] {
            display: none !important;
        }

        /* "ARTICLES & CONSEILS" Section */
        [data-name="articles"] {
            padding-left: clamp(20px, 5vw, 120px) !important;
            padding-right: clamp(20px, 5vw, 120px) !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        [data-name="articles"] > div:nth-child(2) {
            width: 100% !important;
            max-width: 1200px !important;
        }
        [data-name="articles"] > div:nth-child(2) > div {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
        }
        @media (max-width: 1024px) {
            [data-name="articles"] > div:nth-child(2) > div {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="articles"] > div:nth-child(2) > div {
                grid-template-columns: 1fr !important;
            }
        }
        [data-name="articles"] > div:nth-child(2) > div > div {
            min-width: 0 !important;
            width: 100% !important;
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 16px !important;
            overflow: hidden !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
            transition: all 0.25s ease !important;
        }
        [data-name="articles"] > div:nth-child(2) > div > div:hover {
            transform: translateY(-4px) !important;
            box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12) !important;
        }
        [data-name="articles"] > div:nth-child(2) > div > div > div[class*="border"] {
            display: none !important;
        }

        /* "RÉGLEMENTATION" Accordions */
        [data-name="reglementations"] {
            padding-left: clamp(20px, 5vw, 120px) !important;
            padding-right: clamp(20px, 5vw, 120px) !important;
            width: 100% !important;
        }
        [data-name="reglementations"] > div {
            padding: 80px 0 !important;
            max-width: 1200px !important;
            width: 100% !important;
        }
        [data-name="reglementations"] > div > div:last-child {
            width: 100% !important;
        }
        [data-name="reglementations"] > div > div:last-child > div {
            border: 1px solid rgba(226, 232, 240, 0.85) !important;
            border-radius: 14px !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
            transition: all 0.2s ease !important;
            background: #ffffff !important;
            overflow: hidden !important;
            width: 100% !important;
        }
        [data-name="reglementations"] > div > div:last-child > div:hover {
            border-color: rgba(22, 103, 168, 0.35) !important;
            box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.08) !important;
        }
        [data-name="reglementations"] > div > div:last-child > div > div[class*="border"] {
            display: none !important;
        }

        /* "DOCUMENTATION PRATIQUE" Section */
        [data-name="documentation"] {
            padding-left: clamp(20px, 5vw, 120px) !important;
            padding-right: clamp(20px, 5vw, 120px) !important;
            width: 100% !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
            box-sizing: border-box !important;
        }
        .mpt-documents {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)) !important;
            gap: 20px !important;
            width: 100% !important;
            align-items: stretch !important;
            margin-top: 24px !important;
        }
        .mpt-doc-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 16px;
            padding: 22px;
            display: flex;
            gap: 16px;
            align-items: flex-start;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            box-sizing: border-box;
        }
        .mpt-doc-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.1), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
            border-color: rgba(22, 103, 168, 0.35);
        }
        .mpt-doc-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background-color: #f1f5f9;
            border: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #475569;
            position: relative !important;
            overflow: hidden !important;
        }
        .mpt-doc-icon-box svg {
            position: static !important;
            width: 22px !important;
            height: 22px !important;
            max-width: 22px !important;
            max-height: 22px !important;
            display: block !important;
        }
        .mpt-doc-btn-primary svg,
        .mpt-doc-btn-secondary svg {
            position: static !important;
            width: 14px !important;
            height: 14px !important;
            max-width: 14px !important;
            max-height: 14px !important;
            display: inline-block !important;
            vertical-align: middle !important;
        }
        .mpt-doc-content {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1 1 0%;
            min-width: 0;
        }
        .mpt-doc-badge {
            display: inline-flex;
            align-items: center;
            font-size: 11px;
            font-weight: 600;
            color: #1667a8;
            background-color: #eef6fc;
            padding: 2px 8px;
            border-radius: 4px;
            width: fit-content;
        }
        .mpt-doc-title {
            font-size: 15px;
            font-weight: 700;
            line-height: 1.35;
            color: #0f172a;
            margin: 0;
            word-break: normal;
        }
        .mpt-doc-desc {
            font-size: 13px;
            font-weight: 400;
            line-height: 1.5;
            color: #475569;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .mpt-doc-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 8px;
            padding-top: 6px;
        }
        .mpt-doc-btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            color: #ffffff !important;
            background-color: #1667a8;
            text-decoration: none !important;
            transition: all 0.15s ease;
            box-shadow: 0 1px 2px rgba(22, 103, 168, 0.2);
        }
        .mpt-doc-btn-primary:hover {
            background-color: #115287;
            transform: translateY(-1px);
        }
        .mpt-doc-btn-secondary {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            color: #334155 !important;
            background-color: #f1f5f9;
            border: 1px solid #cbd5e1;
            text-decoration: none !important;
            transition: all 0.15s ease;
        }
        .mpt-doc-btn-secondary:hover {
            background-color: #e2e8f0;
            color: #0f172a !important;
        }

        /* "NOS GUIDES PRATIQUES" & "NOUVEAUTÉS" Sections */
        [data-name="guides"], [data-name="actualites"] {
            padding-left: clamp(20px, 5vw, 120px) !important;
            padding-right: clamp(20px, 5vw, 120px) !important;
            width: 100% !important;
        }
        [data-name="guides"] > div, [data-name="actualites"] , [data-name="a-la-une"] > div {
            max-width: 1200px !important;
            width: 100% !important;
            padding: 80px 0 !important;
        }
        [data-name="guides"] [class*="gap-[24px]"],
        [data-name="actualites"] [class*="gap-[24px]"] , [data-name="a-la-une"] [class*="gap-[24px]"] {
            display: flex !important;
            flex-wrap: wrap !important;
            width: 100% !important;
        }
        [data-name="guides"] [class*="gap-[24px]"] > div,
        [data-name="actualites"] [class*="gap-[24px]"] > div, [data-name="a-la-une"] [class*="gap-[24px]"] > div {
            flex: 1 1 250px !important;
            min-width: 0 !important;
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 16px !important;
            overflow: hidden !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
            transition: all 0.25s ease !important;
        }
        [data-name="guides"] [class*="gap-[24px]"] > div:hover,
        [data-name="actualites"] [class*="gap-[24px]"] > div:hover, [data-name="a-la-une"] [class*="gap-[24px]"] > div:hover {
            transform: translateY(-4px) !important;
            box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12) !important;
        }
        [data-name="guides"] [class*="gap-[24px]"] > div > div[class*="border"],
        [data-name="actualites"] [class*="gap-[24px]"] > div > div[class*="border"], [data-name="a-la-une"] [class*="gap-[24px]"] > div > div[class*="border"] {
            display: none !important;
        }

        /* 16. Contact Page Sidebar Action Buttons Overflow */
        [data-name="details-right-col"] {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        [data-name="details-right-col"] a,
        [data-name="call-button"],
        [data-name="whatsapp-button"],
        [data-name="details-right-col"] [data-name="call-button"],
        [data-name="details-right-col"] [data-name="whatsapp-button"] {
            max-width: 100% !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* 17. RTL Directional Indicators Flip & Cairo Polish */
        html[dir="rtl"] [data-name*="arrow-right"] svg,
        html[dir="rtl"] [data-name*="Arrow-Right"] svg,
        html[dir="rtl"] svg[id*="arrow-right"],
        html[dir="rtl"] [data-name*="chevron-right"] svg,
        html[dir="rtl"] [data-name*="Chevron-Right"] svg {
            transform: scaleX(-1) !important;
        }
        html[dir="rtl"] [data-name="badge" i],
        html[dir="rtl"] [data-name="hero-badge"],
        html[dir="rtl"] [data-name="Eyebrow"] {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: normal !important;
        }
        html[dir="rtl"] [data-name="badge" i] p,
        html[dir="rtl"] [data-name="hero-badge"] p,
        html[dir="rtl"] [data-name="Eyebrow"] p {
            font-family: 'Cairo', sans-serif !important;
            font-weight: 700 !important;
            line-height: 1.4 !important;
        }
        html[dir="rtl"] [class*="bg-[#1667a8]"],
        html[dir="rtl"] [class*="bg-[#237d27]"],
        html[dir="rtl"] [class*="bg-[#248838]"],
        html[dir="rtl"] [data-name="btn-primary"],
        html[dir="rtl"] [data-name="btn-outline"] {
            font-family: 'Cairo', sans-serif !important;
        }

        /* 16. HACCP Section Alignment Fix */
        @media (min-width: 1024px) {
            [data-name="01_ACCUEIL"] [data-name="cards-row"],
            [data-name="01_ACCUEIL"] [data-name="grid"],
            [data-name="01_ACCUEIL"] [data-name="steps-row"] {
                margin-top: 32px !important;
                align-items: stretch !important;
            }
            [data-name="01_ACCUEIL"] [data-name="probleme"] > div,
            [data-name="01_ACCUEIL"] [data-name="Section-Benefits"] > div {
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
            }
        }
    /* </style> */
    /* <script type="module" crossorigin src="/assets/index-BPXVBj8Q.js" defer></script> */
  
    

  
    

  
    

  
    /* Targeted News Section & Gaps Patch */
    /* <style> */
        /* Specifically target the large gaps within the News and Articles sections */
        [data-name="news"], [data-name="articles"] {
            gap: 32px !important; 
            padding-top: 32px !important;
            padding-bottom: 32px !important;
        }
        
        /* Compress the blue separators safely without hiding them completely */
        [data-name*="separateur"], .m-auto.w-16.h-1 {
            margin-top: 32px !important;
            margin-bottom: 32px !important;
        }

        /* Re-apply the Figma card styling to BOTH articles and news */
        [data-name="articles"] > div:nth-child(2) > div > div,
        [data-name="news"] > div:nth-child(2) > div > div {
            display: flex !important;
            flex-direction: column !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child {
            display: flex !important;
            flex-direction: column !important;
            padding: 24px 28px !important;
            gap: 12px !important;
            height: 100% !important;
            box-sizing: border-box !important;
            flex-grow: 1 !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1),
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1) {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            margin: 0 !important;
            margin-bottom: 4px !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) p,
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) span,
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) p,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) span,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1) {
            color: #94a3b8 !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 0.05em !important;
            text-transform: uppercase !important;
            margin: 0 !important;
            line-height: 1.2 !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(2),
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > h3,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(2),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > h3 {
            color: #0f172a !important;
            font-size: 18px !important;
            font-weight: 700 !important;
            line-height: 1.4 !important;
            margin: 0 !important;
            word-break: normal !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(3),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(3) {
            color: #64748b !important;
            font-size: 14px !important;
            line-height: 1.6 !important;
            margin: 0 !important;
            margin-bottom: 16px !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 3 !important;
            line-clamp: 3 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:last-child,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:last-child {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            margin-top: auto !important;
            padding-top: 8px !important;
            width: fit-content !important;
            transition: transform 0.2s ease !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child,
        [data-name="news"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child {
            transform: translateX(4px) !important;
        }
        
        html[dir="rtl"] [data-name="articles"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child,
        html[dir="rtl"] [data-name="news"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child {
            transform: translateX(-4px) !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:last-child p,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:last-child p {
            color: #1667A8 !important;
            font-weight: 700 !important;
            font-size: 13px !important;
            letter-spacing: 0.03em !important;
            text-transform: uppercase !important;
            margin: 0 !important;
            line-height: 1 !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:last-child svg path,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:last-child svg path {
            stroke: #1667A8 !important;
        }

        /* Ensure News grid matches Articles grid */
        [data-name="news"] > div:nth-child(2) > div {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
        }
        @media (max-width: 1024px) {
            [data-name="news"] > div:nth-child(2) > div {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="news"] > div:nth-child(2) > div {
                grid-template-columns: 1fr !important;
            }
        }
        [data-name="news"] > div:nth-child(2) > div > div {
            min-width: 0 !important;
            width: 100% !important;
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 16px !important;
            overflow: hidden !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
            transition: all 0.25s ease !important;
        }
        [data-name="news"] > div:nth-child(2) > div > div:hover {
            transform: translateY(-4px) !important;
            box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12) !important;
        }
        [data-name="news"] > div:nth-child(2) > div > div > div[class*="border"] {
            display: none !important;
        }
    /* </style> */

  
    /* Targeted News Section & Gaps Patch */
    /* <style> */
        /* 1. Safely reduce the massive gaps inside specific sections */
        [data-name="articles"], [data-name="news"], [data-name="actualites"], [data-name="a-la-une"], [data-name="reglementations"], [data-name="documentation"] {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }
        
        [data-name="articles"] > div, [data-name="news"] > div, [data-name="actualites"] > div, [data-name="a-la-une"] > div, [data-name="reglementations"] > div, [data-name="documentation"] > div {
            gap: 32px !important;
        }
        
        [data-name*="separateur"], .m-auto.w-16.h-1 {
            margin-top: 24px !important;
            margin-bottom: 24px !important;
        }

        /* 2. Re-apply the Figma card styling to BOTH articles and news */
        [data-name="articles"] > div:nth-child(2) > div > div,
        [data-name="news"] > div:nth-child(2) > div > div,
        [data-name="actualites"] > div:nth-child(2) > div > div , [data-name="a-la-une"] > div:nth-child(2) > div > div {
            display: flex !important;
            flex-direction: column !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child,
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child , [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child {
            display: flex !important;
            flex-direction: column !important;
            padding: 24px 28px !important;
            gap: 12px !important;
            height: 100% !important;
            box-sizing: border-box !important;
            flex-grow: 1 !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1),
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1),
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1), [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1),
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1) , [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1) {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            margin: 0 !important;
            margin-bottom: 4px !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) p,
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) span,
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) p,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) span,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1),
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) p, [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) p,
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) span, [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > div:nth-child(1) span,
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1) , [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(1) {
            color: #94a3b8 !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 0.05em !important;
            text-transform: uppercase !important;
            margin: 0 !important;
            line-height: 1.2 !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(2),
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > h3,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(2),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > h3,
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(2), [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(2),
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > h3 , [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > h3 {
            color: #0f172a !important;
            font-size: 18px !important;
            font-weight: 700 !important;
            line-height: 1.4 !important;
            margin: 0 !important;
            word-break: normal !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(3),
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(3),
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(3) , [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > p:nth-child(3) {
            color: #64748b !important;
            font-size: 14px !important;
            line-height: 1.6 !important;
            margin: 0 !important;
            margin-bottom: 16px !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 3 !important;
            line-clamp: 3 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:last-child,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:last-child,
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > div:last-child , [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > div:last-child {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            margin-top: auto !important;
            padding-top: 8px !important;
            width: fit-content !important;
            transition: transform 0.2s ease !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child,
        [data-name="news"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child,
        [data-name="actualites"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child , [data-name="a-la-une"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child {
            transform: translateX(4px) !important;
        }
        
        html[dir="rtl"] [data-name="articles"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child,
        html[dir="rtl"] [data-name="news"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child,
        html[dir="rtl"] [data-name="actualites"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child , [data-name="a-la-une"] > div:nth-child(2) > div > div:hover > div:last-child > div:last-child {
            transform: translateX(-4px) !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:last-child p,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:last-child p,
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > div:last-child p , [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > div:last-child p {
            color: #1667A8 !important;
            font-weight: 700 !important;
            font-size: 13px !important;
            letter-spacing: 0.03em !important;
            text-transform: uppercase !important;
            margin: 0 !important;
            line-height: 1 !important;
        }
        
        [data-name="articles"] > div:nth-child(2) > div > div > div:last-child > div:last-child svg path,
        [data-name="news"] > div:nth-child(2) > div > div > div:last-child > div:last-child svg path,
        [data-name="actualites"] > div:nth-child(2) > div > div > div:last-child > div:last-child svg path , [data-name="a-la-une"] > div:nth-child(2) > div > div > div:last-child > div:last-child svg path {
            stroke: #1667A8 !important;
        }

        /* Ensure News grid matches Articles grid */
        [data-name="news"] > div:nth-child(2) > div,
        [data-name="actualites"] > div:nth-child(2) > div , [data-name="a-la-une"] > div:nth-child(2) > div {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
        }
        @media (max-width: 1024px) {
            [data-name="news"] > div:nth-child(2) > div,
            [data-name="actualites"] > div:nth-child(2) > div , [data-name="a-la-une"] > div:nth-child(2) > div {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="news"] > div:nth-child(2) > div,
            [data-name="actualites"] > div:nth-child(2) > div , [data-name="a-la-une"] > div:nth-child(2) > div {
                grid-template-columns: 1fr !important;
            }
        }
        [data-name="news"] > div:nth-child(2) > div > div {
            min-width: 0 !important;
            width: 100% !important;
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 16px !important;
            overflow: hidden !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
            transition: all 0.25s ease !important;
        }
        [data-name="news"] > div:nth-child(2) > div > div:hover {
            transform: translateY(-4px) !important;
            box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12) !important;
        }
        /* ==========================================================================
           Senior Principal Frontend Refinements for Public Pages:
           /vos-besoins, /comment-proceder, /reglementation, /solutions, /contact, /
           ========================================================================== */

        /* 1. Global Zero Overflow & Smooth Scrolling */
        html, body, #root {
            overflow-x: hidden !important;
            max-width: 100vw !important;
        }

        /* 2. Affordance & Interactive Integrity — Zero False Links */
        [data-name="badge"],
        [data-name="hero-badge"],
        [data-name="Eyebrow"],
        [data-name="Icon-Wrapper"],
        [data-name^="icon-placeholder"],
        .mpt-doc-badge,
        .mpt-doc-icon-box,
        [data-name*="step-number" i],
        [data-name*="Step-Number" i],
        [data-name*="Step-Header" i],
        [data-name*="Section-Header" i],
        [data-name="section-header"] {
            cursor: default !important;
            text-decoration: none !important;
        }

        /* 3. Explicit Interactive States — Focus Visible & Touch/Click Affordances */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible,
        header nav a:focus-visible,
        header button:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 3px rgba(22, 103, 168, 0.4) !important;
            border-color: #1667A8 !important;
        }

        a:active:not(.mpt-doc-card),
        button:active {
            transform: translateY(0) scale(0.98) !important;
            transition: transform 0.1s ease !important;
        }

        /* 4. Strict 4px/8px Spacing Grid & Container Alignment across All Pages */
        [data-name^="wireframe-"],
        [data-name="01_ACCUEIL"] {
            width: 100% !important;
            max-width: 100vw !important;
            box-sizing: border-box !important;
        }

        /* Standardize Section Containers to max 1200px */
        [data-name^="wireframe-"] > [data-name] > div,
        [data-name="01_ACCUEIL"] > [data-name] > div {
            max-width: 1200px !important;
            margin-left: auto !important;
            margin-right: auto !important;
            box-sizing: border-box !important;
        }
        /* Exempt /comment-proceder hero from the 1200px cap so the bundle's
           max-w-[1440px] row keeps proper spacing between text and photo. */
        [data-name="wireframe-comment-proceder"] > [data-name="hero-section"] > div {
            max-width: 1440px !important;
        }

        /* 5. Page: /vos-besoins Refinements */
        [data-name="wireframe-vos-besoins"] [data-name="cards-row"],
        [data-name="wireframe-vos-besoins"] [data-name="grid"] {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
        }
        @media (max-width: 1024px) {
            [data-name="wireframe-vos-besoins"] [data-name="cards-row"],
            [data-name="wireframe-vos-besoins"] [data-name="grid"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="wireframe-vos-besoins"] [data-name="cards-row"],
            [data-name="wireframe-vos-besoins"] [data-name="grid"] {
                grid-template-columns: 1fr !important;
            }
        }

        /* Section 04: Cold & Hot Control / Maîtrise du froid & chaud */
        [data-name="section-temperature"] {
            width: 100% !important;
            background-color: #f8fafc !important;
            padding: 60px 0 80px 0 !important;
            box-sizing: border-box !important;
        }

        [data-name="section-temperature"] > div {
            max-width: 1280px !important;
            width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
            padding-left: 24px !important;
            padding-right: 24px !important;
            box-sizing: border-box !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 36px !important;
        }

        /* Prevent vertical text collapse from Tailwind min-content */
        [class*="w-[min-content]"],
        [data-name="section-header"] p,
        [data-name="section-header"] h1,
        [data-name="section-header"] h2,
        [data-name="section-header"] h3,
        [data-name="section-temperature"] [data-name="section-header"] p,
        [data-name="wireframe-vos-besoins"] [data-name="section-header"] p {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            display: block !important;
        }

        [data-name="section-temperature"] [data-name="section-header"] {
            width: 100% !important;
            max-width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
            align-items: flex-start !important;
        }

        [data-name="section-temperature"] [data-name="section-header"] p {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            display: block !important;
        }

        .mpt-temp-cards-grid,
        [data-name="section-temperature"] [data-name="temp-grid"] {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
            align-items: stretch !important;
        }

        @media (max-width: 1100px) {
            .mpt-temp-cards-grid,
            [data-name="section-temperature"] [data-name="temp-grid"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }

        @media (max-width: 640px) {
            .mpt-temp-cards-grid,
            [data-name="section-temperature"] [data-name="temp-grid"] {
                grid-template-columns: 1fr !important;
            }
        }

        [data-name="section-temperature"] [data-name^="temp-card-"] {
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            flex: 1 1 0 !important;
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            background: #ffffff !important;
            border-radius: 12px !important;
            border: 1px solid #e2e8f0 !important;
            padding: 24px !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
            box-sizing: border-box !important;
            position: relative !important;
        }

        [data-name="section-temperature"] [data-name^="temp-card-"]:hover {
            transform: translateY(-4px) !important;
            box-shadow: 0 12px 24px -4px rgba(22, 103, 168, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
            border-color: #93c5fd !important;
        }

        [data-name="section-temperature"] [data-name^="temp-card-"] [data-name="image-placeholder"] {
            height: 190px !important;
            width: 100% !important;
            background: #f8fafc !important;
            border-radius: 8px !important;
            border: 1px solid #f1f5f9 !important;
            overflow: hidden !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative !important;
            margin-bottom: 16px !important;
        }

        [data-name="section-temperature"] [data-name^="temp-card-"] [data-name="image-placeholder"] img {
            object-fit: contain !important;
            max-height: 160px !important;
            max-width: 90% !important;
            width: auto !important;
            height: auto !important;
            margin: auto !important;
            position: relative !important;
        }

        [data-name="section-temperature"] [data-name^="temp-card-"] [data-name="card-info"] {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
            width: 100% !important;
            flex: 1 1 auto !important;
        }

        [data-name="section-temperature"] [data-name^="temp-card-"] [data-name="badge"] {
            display: inline-flex !important;
            width: auto !important;
            max-width: 100% !important;
            background: #f0fdf4 !important;
            border: 1px solid #bbf7d0 !important;
            border-radius: 6px !important;
            padding: 4px 10px !important;
            align-self: flex-start !important;
            box-sizing: border-box !important;
        }

        [data-name="section-temperature"] [data-name^="temp-card-"] [data-name="badge"] p {
            white-space: normal !important;
            word-break: break-word !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            line-height: 1.35 !important;
            color: #166534 !important;
        }

        [data-name="section-temperature"] [data-name^="temp-card-"] [data-name="card-info"] p {
            white-space: normal !important;
            word-break: break-word !important;
            min-width: 0 !important;
            width: 100% !important;
        }

        [data-name="section-temperature"] [data-name="advice-block"] {
            width: 100% !important;
            max-width: 100% !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 24px !important;
            background: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            border-left: 5px solid #1667a8 !important;
            border-radius: 12px !important;
            padding: 24px 32px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
            box-sizing: border-box !important;
            margin-top: 12px !important;
        }

        [data-name="section-temperature"] [data-name="advice-block"] [data-name="advice-text"] {
            white-space: normal !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 6px !important;
        }

        [data-name="section-temperature"] [data-name="advice-block"] [data-name="advice-text"] p {
            white-space: normal !important;
            word-break: break-word !important;
            margin: 0 !important;
        }

        [data-name="section-temperature"] [data-name="advice-block"] [data-name="button"],
        [data-name="section-temperature"] [data-name="advice-block"] a[data-name="button"],
        [data-name="section-temperature"] [data-name="advice-block"] a,
        [data-name="section-temperature"] [data-name="advice-block"] button {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            padding: 14px 28px !important;
            background-color: #1667a8 !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            font-size: 15px !important;
            letter-spacing: 0.02em !important;
            border-radius: 8px !important;
            text-decoration: none !important;
            cursor: pointer !important;
            pointer-events: auto !important;
            transition: all 0.2s ease-in-out !important;
            box-shadow: 0 4px 10px rgba(22, 103, 168, 0.25) !important;
            border: none !important;
            white-space: nowrap !important;
        }

        [data-name="section-temperature"] [data-name="advice-block"] [data-name="button"]:hover,
        [data-name="section-temperature"] [data-name="advice-block"] a[data-name="button"]:hover,
        [data-name="section-temperature"] [data-name="advice-block"] a:hover,
        [data-name="section-temperature"] [data-name="advice-block"] button:hover {
            background-color: #125387 !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 16px rgba(22, 103, 168, 0.35) !important;
        }

        [data-name="section-temperature"] [data-name="advice-block"] [data-name="button"]:active,
        [data-name="section-temperature"] [data-name="advice-block"] a[data-name="button"]:active {
            transform: translateY(0) !important;
        }

        @media (max-width: 768px) {
            [data-name="section-temperature"] [data-name="advice-block"] {
                flex-direction: column !important;
                align-items: flex-start !important;
                padding: 20px !important;
            }
            [data-name="section-temperature"] [data-name="advice-block"] [data-name="button"],
            [data-name="section-temperature"] [data-name="advice-block"] a[data-name="button"],
            [data-name="section-temperature"] [data-name="advice-block"] a,
            [data-name="section-temperature"] [data-name="advice-block"] button {
                width: 100% !important;
                box-sizing: border-box !important;
                text-align: center !important;
            }
        }

        /* 6. Page: /comment-proceder Refinements */
        [data-name="wireframe-comment-proceder"] [data-name="steps-row"],
        [data-name="wireframe-comment-proceder"] [data-name="Timeline-Row"],
        [data-name="wireframe-comment-proceder"] [data-name="Method-Timeline"] {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
            align-items: stretch !important;
        }
        @media (max-width: 1024px) {
            [data-name="wireframe-comment-proceder"] [data-name="steps-row"],
            [data-name="wireframe-comment-proceder"] [data-name="Timeline-Row"],
            [data-name="wireframe-comment-proceder"] [data-name="Method-Timeline"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="wireframe-comment-proceder"] [data-name="steps-row"],
            [data-name="wireframe-comment-proceder"] [data-name="Timeline-Row"],
            [data-name="wireframe-comment-proceder"] [data-name="Method-Timeline"] {
                grid-template-columns: 1fr !important;
            }
        }

        /* Step 05 Traceability & Procedure Steps Refinements */
        [data-name="step-05-section"] {
            width: 100% !important;
            max-width: 100% !important;
            overflow: visible !important;
        }
        [data-name="step-05-section"] > div {
            max-width: 1440px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Traceability Cards Row (Paper & Digital) */
        [data-name="step-05-section"] div[class*="gap-[24px]"]:has(div[class*="bg-white"]),
        [data-name="step-05-section"] div[class*="gap-[16px]"]:has(div[class*="bg-white"]) {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 20px !important;
            width: 100% !important;
        }
        @media (max-width: 768px) {
            [data-name="step-05-section"] div[class*="gap-[24px]"]:has(div[class*="bg-white"]),
            [data-name="step-05-section"] div[class*="gap-[16px]"]:has(div[class*="bg-white"]) {
                grid-template-columns: 1fr !important;
            }
        }

        /* Individual Traceability Cards */
        [data-name="step-05-section"] div[class*="bg-white"][class*="rounded-[8px]"]:not(:has(table)) {
            min-width: 0 !important;
            width: 100% !important;
            padding: 24px !important;
            box-sizing: border-box !important;
            overflow: visible !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
            flex: 1 1 0% !important;
        }

        /* Header row inside card (Icon + Title) */
        [data-name="step-05-section"] div[class*="bg-white"] div[class*="gap-[12px]"],
        [data-name="step-05-section"] div[class*="bg-white"] div[class*="gap-[8px]"] {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 12px !important;
            width: 100% !important;
            min-width: 0 !important;
            flex-wrap: nowrap !important;
        }

        /* Card Titles (e.g. DIGITAL TRACEABILITY / PAPER TRACEABILITY) - Prevent Overflow */
        [data-name="step-05-section"] div[class*="bg-white"] div[class*="gap-[12px]"] p,
        [data-name="step-05-section"] div[class*="bg-white"] div[class*="gap-[8px]"] p,
        [data-name="step-05-section"] div[class*="bg-white"] p[class*="font-bold"]:not([class*="Geist_Mono"]) {
            white-space: normal !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            line-height: 1.3 !important;
            color: #111827 !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

        /* Card Description */
        [data-name="step-05-section"] div[class*="bg-white"] p[class*="font-normal"] {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            white-space: normal !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            line-height: 1.55 !important;
            font-size: 13px !important;
            color: #4b5563 !important;
        }

        /* Step 05 Button: DISCOVER DIGITAL TRACEABILITY */
        [data-name="step-05-section"] [data-name="button"],
        [data-name="step-05-section"] div[class*="bg-[#237d27]"],
        [data-name="step-05-section"] a[class*="bg-[#237d27]"],
        .mpt-btn-green {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background-color: #237d27 !important;
            color: #ffffff !important;
            padding: 14px 28px !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            letter-spacing: 0.03em !important;
            text-transform: uppercase !important;
            cursor: pointer !important;
            user-select: none !important;
            text-decoration: none !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-shadow: 0 4px 12px rgba(35, 125, 39, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        }

        [data-name="step-05-section"] [data-name="button"]:hover,
        [data-name="step-05-section"] div[class*="bg-[#237d27]"]:hover,
        [data-name="step-05-section"] a[class*="bg-[#237d27]"]:hover,
        .mpt-btn-green:hover {
            background-color: #1a631e !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 20px rgba(35, 125, 39, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        }

        [data-name="step-05-section"] [data-name="button"]:active,
        [data-name="step-05-section"] div[class*="bg-[#237d27]"]:active,
        [data-name="step-05-section"] a[class*="bg-[#237d27]"]:active,
        .mpt-btn-green:active {
            transform: translateY(0) !important;
            box-shadow: 0 2px 6px rgba(35, 125, 39, 0.2) !important;
        }

        [data-name="step-05-section"] [data-name="button"] p,
        [data-name="step-05-section"] div[class*="bg-[#237d27]"] p {
            color: #ffffff !important;
            font-weight: 700 !important;
            font-size: 14px !important;
            letter-spacing: 0.03em !important;
            text-transform: uppercase !important;
            cursor: pointer !important;
            margin: 0 !important;
            padding: 0 !important;
            white-space: nowrap !important;
        }

        /* Interactive Buttons in other steps */
        [data-name="step-03-section"] [data-name="button"],
        [data-name="step-04-section"] [data-name="button"],
        [data-name^="step-"] [data-name="button"]:not([class*="bg-[#237d27]"]) {
            cursor: pointer !important;
            user-select: none !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        [data-name="step-03-section"] [data-name="button"]:hover,
        [data-name="step-04-section"] [data-name="button"]:hover,
        [data-name^="step-"] [data-name="button"]:not([class*="bg-[#237d27]"]):hover {
            background-color: rgba(22, 103, 168, 0.08) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 12px rgba(22, 103, 168, 0.15) !important;
        }

        /* 7. Page: /solutions Refinements */
        [data-name="wireframe-solutions"] [data-name="cards-row"],
        [data-name="wireframe-solutions"] [data-name="grid"] {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
        }
        @media (max-width: 1024px) {
            [data-name="wireframe-solutions"] [data-name="cards-row"],
            [data-name="wireframe-solutions"] [data-name="grid"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="wireframe-solutions"] [data-name="cards-row"],
            [data-name="wireframe-solutions"] [data-name="grid"] {
                grid-template-columns: 1fr !important;
            }
        }

        /* --- SIMPLE DAILY USE (4 Steps) Section --- */
        [data-name="Section-HowItWorks"] {
            background: transparent !important;
            padding: 48px 0 56px 0 !important;
            max-width: 1240px !important;
            margin: 0 auto !important;
            width: 100% !important;
        }
        [data-name="Section-HowItWorks"] > div {
            padding: 0 24px !important;
            max-width: 100% !important;
            width: 100% !important;
            gap: 36px !important;
        }

        [data-name="Section-HowItWorks"] [class*="text-[24px]"],
        [data-name="Section-HowItWorks"] [class*="text-[22px]"],
        [data-name="How-Header"] p:first-child {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: clamp(24px, 3.5vw, 32px) !important;
            font-weight: 800 !important;
            letter-spacing: -0.02em !important;
            color: #0f172a !important;
            text-transform: uppercase !important;
            text-align: center !important;
            width: 100% !important;
        }
        [data-name="Section-HowItWorks"] [data-name="Rectangle"] {
            background: linear-gradient(90deg, #1667A8 0%, #1E7A3C 100%) !important;
            height: 4px !important;
            width: 54px !important;
            border-radius: 999px !important;
            margin: 8px auto 0 auto !important;
        }

        /* 4 Steps Grid */
        [data-name="Section-HowItWorks"] [data-name="Timeline-Row"],
        [data-name="steps-grid"] {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 22px !important;
            width: 100% !important;
            align-items: stretch !important;
        }
        @media (max-width: 1024px) {
            [data-name="Section-HowItWorks"] [data-name="Timeline-Row"],
            [data-name="steps-grid"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 18px !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="Section-HowItWorks"] [data-name="Timeline-Row"],
            [data-name="steps-grid"] {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }
        }

        /* Step Card Containers */
        [data-name="Section-HowItWorks"] [data-name^="Step-"],
        [data-name="steps-grid"] > div {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 18px !important;
            padding: 24px 20px !important;
            box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            height: auto !important;
            min-height: 190px !important;
            overflow: visible !important;
            min-width: 0 !important;
            width: 100% !important;
            gap: 14px !important;
            position: relative !important;
        }
        [data-name="Section-HowItWorks"] [data-name^="Step-"]:hover,
        [data-name="steps-grid"] > div:hover {
            transform: translateY(-4px) !important;
            border-color: rgba(30, 122, 60, 0.35) !important;
            box-shadow: 0 14px 30px -8px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(30, 122, 60, 0.08) !important;
        }

        /* Card Header Row (Badge + Track line + Arrow) */
        [data-name="Section-HowItWorks"] [data-name^="Step-"] > div:first-child {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: 100% !important;
            position: relative !important;
            min-height: 40px !important;
        }

        /* Number Badge */
        [data-name="Section-HowItWorks"] [data-name^="Step-"] div[class*="bg-[#237d27]"],
        [data-name="Section-HowItWorks"] [data-name^="Step-"] div[class*="bg-[#1e7a3c]"],
        [data-name="step-number"] {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 38px !important;
            min-width: 38px !important;
            height: 38px !important;
            background: linear-gradient(135deg, #1E7A3C 0%, #156631 100%) !important;
            color: #ffffff !important;
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            letter-spacing: 0.02em !important;
            border-radius: 10px !important;
            box-shadow: 0 3px 8px rgba(30, 122, 60, 0.28) !important;
            flex-shrink: 0 !important;
            position: relative !important;
            z-index: 2 !important;
        }
        [data-name="Section-HowItWorks"] [data-name^="Step-"] div[class*="bg-[#237d27]"] p,
        [data-name="Section-HowItWorks"] [data-name^="Step-"] div[class*="bg-[#1e7a3c]"] p {
            color: #ffffff !important;
            font-weight: 800 !important;
            margin: 0 !important;
            line-height: 1 !important;
            width: auto !important;
        }

        /* Horizontal Connector Line inside Card */
        [data-name="Section-HowItWorks"] [data-name^="Step-"] > div:first-child > div[class*="bg-[#e5e7eb]"] {
            position: relative !important;
            flex: 1 1 auto !important;
            height: 2px !important;
            background: #e2e8f0 !important;
            margin: 0 12px !important;
            left: auto !important;
            right: auto !important;
            top: auto !important;
            display: block !important;
        }

        /* Arrow Icon */
        [data-name="Section-HowItWorks"] [data-name^="Step-"] [data-name="arrow-right"] {
            position: relative !important;
            flex-shrink: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        [data-name="Section-HowItWorks"] [data-name^="Step-"] [data-name="arrow-right"] svg {
            color: #94a3b8 !important;
        }
        html[dir="rtl"] [data-name="Section-HowItWorks"] [data-name^="Step-"] [data-name="arrow-right"] svg {
            transform: scaleX(-1) !important;
        }

        /* Step Card Text Frame */
        [data-name="Section-HowItWorks"] [data-name^="Step-"] > div:last-child {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 8px !important;
            width: 100% !important;
        }

        /* Step Card Titles */
        [data-name="Section-HowItWorks"] [data-name^="Step-"] p[class*="font-bold"]:not(div[class*="bg-[#237d27]"] p) {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.03em !important;
            color: #0f172a !important;
            line-height: 1.35 !important;
            margin: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
            word-break: normal !important;
        }
        html[dir="rtl"] [data-name="Section-HowItWorks"] [data-name^="Step-"] p[class*="font-bold"] {
            font-family: Cairo, 'Plus Jakarta Sans', sans-serif !important;
            letter-spacing: 0 !important;
            font-size: 14.5px !important;
        }

        /* Step Card Descriptions */
        [data-name="Section-HowItWorks"] [data-name^="Step-"] p[class*="font-normal"] {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 13.5px !important;
            font-weight: 450 !important;
            line-height: 1.6 !important;
            color: #64748b !important;
            margin: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
            word-break: normal !important;
        }
        html[dir="rtl"] [data-name="Section-HowItWorks"] [data-name^="Step-"] p[class*="font-normal"] {
            font-family: Cairo, 'Plus Jakarta Sans', sans-serif !important;
            font-size: 13.5px !important;
        }

        /* --- WHY DIGITALIZE YOUR CHECKS Section --- */
        [data-name="Section-Benefits"],
        [data-name="why-digitalize-section"] {
            background: transparent !important;
            padding: 56px 0 64px 0 !important;
            max-width: 1240px !important;
            margin: 0 auto !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 36px !important;
        }

        [data-name="Benefits-Header"] [class*="text-[28px]"],
        [data-name="Benefits-Header"] [class*="text-[22px]"],
        [data-name="Benefits-Header"] p:first-child {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: clamp(24px, 3.5vw, 32px) !important;
            font-weight: 800 !important;
            letter-spacing: -0.02em !important;
            color: #0f172a !important;
            text-transform: uppercase !important;
            text-align: center !important;
            width: 100% !important;
        }
        [data-name="Benefits-Header"] [data-name="Rectangle"] {
            background: linear-gradient(90deg, #1667A8 0%, #1E7A3C 100%) !important;
            height: 4px !important;
            width: 54px !important;
            border-radius: 999px !important;
            margin: 8px auto 0 auto !important;
        }

        /* 3-Column Card Grid */
        [data-name="Section-Benefits"] > div:nth-child(2),
        [data-name="Section-Benefits"] [data-name="Frame"]:has(> [data-name^="Benefit-Card-"]),
        [data-name="features-grid"] {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 24px !important;
            margin: 0 auto !important;
            align-items: stretch !important;
        }
        @media (max-width: 1024px) {
            [data-name="Section-Benefits"] > div:nth-child(2),
            [data-name="Section-Benefits"] [data-name="Frame"]:has(> [data-name^="Benefit-Card-"]),
            [data-name="features-grid"] {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 20px !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="Section-Benefits"] > div:nth-child(2),
            [data-name="Section-Benefits"] [data-name="Frame"]:has(> [data-name^="Benefit-Card-"]),
            [data-name="features-grid"] {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }
        }

        /* Feature / Benefit Cards */
        [data-name^="Benefit-Card-"],
        [data-name^="WhyCard-"],
        [data-name="features-grid"] > div,
        [data-name^="feature-card"] {
            display: flex !important;
            flex-direction: column !important;
            background: #ffffff !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 16px !important;
            padding: 24px 22px !important;
            box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            height: auto !important;
            min-height: 160px !important;
            overflow: visible !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            gap: 10px !important;
        }
        [data-name^="Benefit-Card-"]:hover,
        [data-name^="WhyCard-"]:hover,
        [data-name="features-grid"] > div:hover,
        [data-name^="feature-card"]:hover {
            transform: translateY(-3px) !important;
            border-color: rgba(30, 122, 60, 0.3) !important;
            box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(30, 122, 60, 0.04) !important;
        }

        /* Benefit Card Top Row (Icon + Title) */
        [data-name^="Benefit-Card-"] > [data-name="Frame"] {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            width: 100% !important;
        }
        [data-name^="Benefit-Card-"] svg {
            color: #1E7A3C !important;
            stroke: #1E7A3C !important;
        }
        [data-name^="Benefit-Card-"] p[class*="font-bold"],
        [data-name^="WhyCard-"] p[class*="font-bold"],
        [data-name="feature-title"],
        [data-name^="feature-card"] h3 {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.03em !important;
            color: #0f172a !important;
            margin: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
        }
        [data-name^="Benefit-Card-"] p[class*="font-normal"],
        [data-name="feature-description"],
        [data-name^="feature-card"] p {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 13.5px !important;
            font-weight: 450 !important;
            line-height: 1.6 !important;
            color: #64748b !important;
            margin: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        /* --- SUPPORT DESIGNED FOR THE FIELD (Section-WhyUs) --- */
        [data-name="Section-WhyUs"] {
            background: transparent !important;
            padding: 56px 0 64px 0 !important;
            max-width: 1240px !important;
            margin: 0 auto !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 36px !important;
        }
        [data-name="Section-WhyUs"] > div {
            padding: 0 24px !important;
            max-width: 100% !important;
            width: 100% !important;
            gap: 36px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }

        [data-name="Section-WhyUs"] [class*="text-[28px]"],
        [data-name="Section-WhyUs"] p:first-child {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: clamp(24px, 3.5vw, 32px) !important;
            font-weight: 800 !important;
            letter-spacing: -0.02em !important;
            color: #0f172a !important;
            text-transform: uppercase !important;
            text-align: center !important;
            width: 100% !important;
        }
        [data-name="Section-WhyUs"] [data-name="Rectangle"] {
            background: linear-gradient(90deg, #1667A8 0%, #1E7A3C 100%) !important;
            height: 4px !important;
            width: 54px !important;
            border-radius: 999px !important;
            margin: 8px auto 0 auto !important;
        }

        /* 4-Column Why Cards Grid */
        [data-name="Section-WhyUs"] [data-name="Frame"]:has(> [data-name^="WhyCard-"]),
        [data-name="Section-WhyUs"] > div > div:last-child {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 24px !important;
            width: 100% !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
            align-items: stretch !important;
        }
        @media (max-width: 1024px) {
            [data-name="Section-WhyUs"] [data-name="Frame"]:has(> [data-name^="WhyCard-"]),
            [data-name="Section-WhyUs"] > div > div:last-child {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 20px !important;
            }
        }
        @media (max-width: 640px) {
            [data-name="Section-WhyUs"] [data-name="Frame"]:has(> [data-name^="WhyCard-"]),
            [data-name="Section-WhyUs"] > div > div:last-child {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }
        }

        /* Why Cards */
        [data-name="Section-WhyUs"] [data-name^="WhyCard-"] {
            display: flex !important;
            flex-direction: column !important;
            background: #ffffff !important;
            border: 1px solid rgba(22, 103, 168, 0.18) !important;
            border-radius: 18px !important;
            padding: 26px 22px !important;
            box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(22, 103, 168, 0.04) !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            height: auto !important;
            min-height: 180px !important;
            overflow: visible !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            gap: 12px !important;
        }
        [data-name="Section-WhyUs"] [data-name^="WhyCard-"]:hover {
            transform: translateY(-4px) !important;
            border-color: rgba(22, 103, 168, 0.45) !important;
            box-shadow: 0 14px 30px -8px rgba(22, 103, 168, 0.15), 0 4px 10px rgba(15, 23, 42, 0.06) !important;
        }

        [data-name="Section-WhyUs"] [data-name^="WhyCard-"] p[class*="font-bold"] {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 14.5px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.03em !important;
            color: #1667A8 !important;
            margin: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
        }
        html[dir="rtl"] [data-name="Section-WhyUs"] [data-name^="WhyCard-"] p[class*="font-bold"] {
            font-family: Cairo, 'Plus Jakarta Sans', sans-serif !important;
            font-size: 15px !important;
        }

        [data-name="Section-WhyUs"] [data-name^="WhyCard-"] p[class*="font-normal"] {
            font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
            font-size: 13.5px !important;
            font-weight: 450 !important;
            line-height: 1.6 !important;
            color: #64748b !important;
            margin: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
        }
        html[dir="rtl"] [data-name="Section-WhyUs"] [data-name^="WhyCard-"] p[class*="font-normal"] {
            font-family: Cairo, 'Plus Jakarta Sans', sans-serif !important;
            font-size: 13.5px !important;
        }

/* ========================================================
   OVERRIDE FOR ACTUALITES / NOUVEAUTES 
   The DOM structure is simpler than articles/news.
   Container: [data-name="actualites"] > div:nth-child(2)
   Cards: [data-name="actualites"] > div:nth-child(2) > div
   ======================================================== */

/* 1. Grid Container */
[data-name="actualites"] > div:nth-child(2),
[data-name="a-la-une"] > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    width: 100% !important;
}
@media (max-width: 1024px) {
    [data-name="actualites"] > div:nth-child(2),
    [data-name="a-la-une"] > div:nth-child(2) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    [data-name="actualites"] > div:nth-child(2),
    [data-name="a-la-une"] > div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
}

/* 2. Card itself */
[data-name="actualites"] > div:nth-child(2) > div,
[data-name="a-la-une"] > div:nth-child(2) > div {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    padding: 0 !important;
    height: 100% !important;
    gap: 0 !important;
}
[data-name="actualites"] > div:nth-child(2) > div:hover,
[data-name="a-la-une"] > div:nth-child(2) > div:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12) !important;
}

/* 3. Hide Figma border placeholder */
[data-name="actualites"] > div:nth-child(2) > div > div[aria-hidden],
[data-name="a-la-une"] > div:nth-child(2) > div > div[aria-hidden] {
    display: none !important;
}

/* 4. Image Box */
[data-name="actualites"] > div:nth-child(2) > div > div[data-name="image-box"],
[data-name="a-la-une"] > div:nth-child(2) > div > div[data-name="image-box"] {
    width: 100% !important;
    height: 180px !important;
    flex-shrink: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: relative !important;
}
[data-name="actualites"] > div:nth-child(2) > div > div[data-name="image-box"] img,
[data-name="a-la-une"] > div:nth-child(2) > div > div[data-name="image-box"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 0 !important;
}

/* 5. The Content wrappers inside the card should flow normally */
[data-name="actualites"] > div:nth-child(2) > div > div:not([data-name="image-box"]):not([aria-hidden]),
[data-name="a-la-une"] > div:nth-child(2) > div > div:not([data-name="image-box"]):not([aria-hidden]) {
    display: flex !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* The badge + date row */
[data-name="actualites"] > div:nth-child(2) > div > div:nth-child(3),
[data-name="a-la-une"] > div:nth-child(2) > div > div:nth-child(3) {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

/* The title + text row */
[data-name="actualites"] > div:nth-child(2) > div > div:nth-child(4),
[data-name="a-la-une"] > div:nth-child(2) > div > div:nth-child(4) {
    flex-direction: column !important;
    flex-grow: 1 !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
}

/* The link button row */
[data-name="actualites"] > div:nth-child(2) > div > div:nth-child(5),
[data-name="a-la-une"] > div:nth-child(2) > div > div:nth-child(5) {
    flex-direction: row !important;
    margin-bottom: 28px !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-start !important;
}

/* Hide SVG arrow as requested */
[data-name="actualites"] > div:nth-child(2) > div > div:nth-child(5) > div,
[data-name="a-la-une"] > div:nth-child(2) > div > div:nth-child(5) > div {
    display: none !important;
}

/* Section Padding & Spacing Compression */
[data-name="alaune"] {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}

[data-name="articles"], [data-name="news"], [data-name="actualites"], [data-name="a-la-une"], [data-name="reglementations"], [data-name="documentation"] {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}

[data-name*="separateur"], .m-auto.w-16.h-1 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

/* ===== Interactive Practical Instruction Memo Cards ===== */
.mpt-memo-card {
    cursor: pointer !important;
    position: relative !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease !important;
    border-radius: 10px !important;
}

.mpt-memo-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
    background-color: #ffffff !important;
}

.mpt-memo-card:active {
    transform: translateY(-1px) !important;
}

.mpt-memo-card:focus-visible {
    outline: 2px solid #1667A8 !important;
    outline-offset: 3px !important;
}

.mpt-memo-btn {
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    border-radius: 6px !important;
}

.mpt-memo-btn p {
    transition: color 0.2s ease !important;
}

.mpt-memo-card:hover .mpt-memo-btn,
.mpt-memo-btn:hover {
    background-color: #1667A8 !important;
    border-color: #1667A8 !important;
    box-shadow: 0 4px 12px rgba(22, 103, 168, 0.25) !important;
}

.mpt-memo-card:hover .mpt-memo-btn p,
.mpt-memo-btn:hover p {
    color: #ffffff !important;
}

/* ========================================================
   DEDICATED CONTACT PAGE STYLING (/contact)
   ======================================================== */

[data-name="contact-page-wireframe"] {
    background-color: #ffffff !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

/* 1. Hero Section */
[data-name="contact-page-wireframe"] [data-name="hero-outer"] {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 48px 24px 28px 24px !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

[data-name="contact-page-wireframe"] [data-name="hero-inner"] {
    width: 100% !important;
    max-width: 1200px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 48px !important;
    box-sizing: border-box !important;
}

[data-name="contact-page-wireframe"] [data-name="hero-inner"] [data-name="hero-text-block"],
[data-name="contact-page-wireframe"] [data-name="hero-inner"] > div:first-child {
    flex: 1 1 0 !important;
    max-width: 650px !important;
}

[data-name="contact-page-wireframe"] [data-name="hero-inner"] p:first-child,
[data-name="contact-page-wireframe"] [data-name="hero-text-block"] p:first-child {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="hero-inner"] p:first-child,
html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="hero-text-block"] p:first-child {
    font-family: 'Cairo', sans-serif !important;
    font-size: 34px !important;
}

[data-name="contact-page-wireframe"] [data-name="hero-inner"] p:last-child,
[data-name="contact-page-wireframe"] [data-name="hero-text-block"] p:last-child {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    max-width: 580px !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="hero-inner"] p:last-child,
html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="hero-text-block"] p:last-child {
    font-family: 'Cairo', sans-serif !important;
    font-size: 14.5px !important;
}

[data-name="contact-page-wireframe"] [data-name="hero-inner"] img {
    border-radius: 12px !important;
    object-fit: cover !important;
    width: 380px !important;
    height: auto !important;
    max-height: 220px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

/* 2. Main Section: Form + Coordinates (form-details-outer) */
[data-name="contact-page-wireframe"] [data-name="form-details-outer"] {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 24px 60px 24px !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: none !important;
}

[data-name="contact-page-wireframe"] [data-name="form-details-outer"] > div {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 1200px !important;
    display: flex !important;
    justify-content: center !important;
    border: none !important;
}

[data-name="contact-page-wireframe"] [data-name="form-details-outer"] > div > div[aria-hidden] {
    display: none !important;
}

[data-name="contact-page-wireframe"] [data-name="form-details-inner"] {
    width: 100% !important;
    max-width: 1200px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 48px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* 3. Left Column: Form (form-left-col) */
[data-name="contact-page-wireframe"] [data-name="form-left-col"] {
    flex: 1 1 0 !important;
    max-width: 740px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

[data-name="contact-page-wireframe"] [data-name="form-header"] p:first-child {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 6px !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="form-header"] p:first-child {
    font-family: 'Cairo', sans-serif !important;
    font-size: 24px !important;
}

[data-name="contact-page-wireframe"] [data-name="form-header"] p:last-child {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 13.5px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="form-header"] p:last-child {
    font-family: 'Cairo', sans-serif !important;
    font-size: 13.5px !important;
}

/* Form Inputs, Labels & Fields */
[data-name="contact-page-wireframe"] form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

[data-name="contact-page-wireframe"] label:not([for="contact-consent"]) {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 2px !important;
    display: block !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] label:not([for="contact-consent"]) {
    font-family: 'Cairo', sans-serif !important;
    font-size: 13px !important;
}

/* Consent Checkbox & Text */
[data-name="contact-page-wireframe"] label[for="contact-consent"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    text-transform: none !important;
}

[data-name="contact-page-wireframe"] label[for="contact-consent"] span {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] label[for="contact-consent"] span {
    font-family: 'Cairo', sans-serif !important;
    font-size: 13.5px !important;
}

[data-name="contact-page-wireframe"] input[type="text"],
[data-name="contact-page-wireframe"] input[type="email"],
[data-name="contact-page-wireframe"] input[type="tel"],
[data-name="contact-page-wireframe"] select,
[data-name="contact-page-wireframe"] textarea {
    width: 100% !important;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    color: #111827 !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] input[type="text"],
html[dir="rtl"] [data-name="contact-page-wireframe"] input[type="email"],
html[dir="rtl"] [data-name="contact-page-wireframe"] input[type="tel"],
html[dir="rtl"] [data-name="contact-page-wireframe"] select,
html[dir="rtl"] [data-name="contact-page-wireframe"] textarea {
    font-family: 'Cairo', sans-serif !important;
}

[data-name="contact-page-wireframe"] input:focus,
[data-name="contact-page-wireframe"] select:focus,
[data-name="contact-page-wireframe"] textarea:focus {
    border-color: #1667A8 !important;
    box-shadow: 0 0 0 3px rgba(22, 103, 168, 0.15) !important;
}

[data-name="contact-page-wireframe"] textarea {
    min-height: 110px !important;
    resize: vertical !important;
}

/* Submit Button */
[data-name="contact-page-wireframe"] button[type="submit"] {
    width: 100% !important;
    background: #1e7e34 !important;
    background-color: #1e7e34 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 13px 20px !important;
    height: 48px !important;
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] button[type="submit"] {
    font-family: 'Cairo', sans-serif !important;
    font-size: 15px !important;
}

[data-name="contact-page-wireframe"] button[type="submit"]:hover {
    background-color: #166534 !important;
}

[data-name="contact-page-wireframe"] button[type="submit"]:active {
    transform: scale(0.99) !important;
}

/* 4. Right Column: NOS COORDONNÉES Card (details-right-col) */
[data-name="contact-page-wireframe"] [data-name="details-right-col"] {
    width: 384px !important;
    flex-shrink: 0 !important;
    background: #c7e4fd !important;
    background-color: #c7e4fd !important;
    border-radius: 12px !important;
    border: 1px solid rgba(186, 224, 253, 0.8) !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(22, 103, 168, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    box-sizing: border-box !important;
}

[data-name="contact-page-wireframe"] [data-name="details-right-col"] > div[aria-hidden] {
    display: none !important;
}

[data-name="contact-page-wireframe"] [data-name="details-header"] p {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="details-header"] p {
    font-family: 'Cairo', sans-serif !important;
}

[data-name="contact-page-wireframe"] [data-name="details-right-col"] [data-name="Line"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    height: 1px !important;
    width: 100% !important;
    margin: 2px 0 !important;
}

[data-name="contact-page-wireframe"] [data-name="meta-item"] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

[data-name="contact-page-wireframe"] [data-name="meta-icon"] {
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid rgba(229, 231, 235, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-name="contact-page-wireframe"] [data-name="meta-txt"] p:first-child {
    font-family: 'Geist_Mono', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="meta-txt"] p:first-child {
    font-family: 'Cairo', sans-serif !important;
}

[data-name="contact-page-wireframe"] [data-name="meta-txt"] p:last-child {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="meta-txt"] p:last-child {
    font-family: 'Cairo', sans-serif !important;
}

/* Call & WhatsApp Buttons in Coordinates */
[data-name="contact-page-wireframe"] [data-name="direct-channel-stack"] p:first-child {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 8px !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="direct-channel-stack"] p:first-child {
    font-family: 'Cairo', sans-serif !important;
}

[data-name="contact-page-wireframe"] [data-name="call-button"] {
    background: #ffffff !important;
    border: 1.5px solid #1667A8 !important;
    border-radius: 6px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

[data-name="contact-page-wireframe"] [data-name="call-button"] p {
    color: #1667A8 !important;
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="call-button"] p {
    font-family: 'Cairo', sans-serif !important;
}

[data-name="contact-page-wireframe"] [data-name="call-button"]:hover {
    background: #1667A8 !important;
}

[data-name="contact-page-wireframe"] [data-name="call-button"]:hover p {
    color: #ffffff !important;
}

[data-name="contact-page-wireframe"] [data-name="call-button"]:hover svg path {
    stroke: #ffffff !important;
}

[data-name="contact-page-wireframe"] [data-name="whatsapp-button"] {
    background: #22C55E !important;
    background-color: #22c55e !important;
    border: none !important;
    border-radius: 6px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

[data-name="contact-page-wireframe"] [data-name="whatsapp-button"] p {
    color: #ffffff !important;
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="whatsapp-button"] p {
    font-family: 'Cairo', sans-serif !important;
}

[data-name="contact-page-wireframe"] [data-name="whatsapp-button"]:hover {
    background-color: #16a34a !important;
}

/* 5. Section 3: Bottom CTA Section ("NOUS SOMMES LÀ POUR VOUS AIDER") */
[data-name="contact-page-wireframe"] [data-name="cta-outer"] {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 60px 24px 80px 24px !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-inner"] {
    max-width: 700px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-texts"] p:first-child {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 6px !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="cta-texts"] p:first-child {
    font-family: 'Cairo', sans-serif !important;
    font-size: 26px !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-texts"] p:last-child {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 14.5px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    max-width: 580px !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="cta-texts"] p:last-child {
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-buttons-row"] {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-primary-btn"] {
    background: #111827 !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-primary-btn"] p {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="cta-primary-btn"] p {
    font-family: 'Cairo', sans-serif !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-primary-btn"]:hover {
    background: #1f2937 !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-secondary-btn"] {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-secondary-btn"] > div[aria-hidden] {
    display: none !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-secondary-btn"] p {
    font-family: 'Archivo', 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: #111827 !important;
    text-transform: uppercase !important;
}

html[dir="rtl"] [data-name="contact-page-wireframe"] [data-name="cta-secondary-btn"] p {
    font-family: 'Cairo', sans-serif !important;
}

[data-name="contact-page-wireframe"] [data-name="cta-secondary-btn"]:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}

/* 6. Responsive Mobile & Tablet */
@media (max-width: 1024px) {
    [data-name="contact-page-wireframe"] [data-name="hero-inner"],
    [data-name="contact-page-wireframe"] [data-name="form-details-inner"] {
        flex-direction: column !important;
        gap: 36px !important;
        align-items: stretch !important;
    }
    [data-name="contact-page-wireframe"] [data-name="form-left-col"],
    [data-name="contact-page-wireframe"] [data-name="details-right-col"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    [data-name="contact-page-wireframe"] [data-name="hero-inner"] img {
        width: 100% !important;
        max-width: 450px !important;
        margin: 0 auto !important;
    }
}