<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Non classé Archives - معهد الدراسات الاجتماعية و الإعلامية</title>
	<atom:link href="https://sms-institute.com/category/non-classe/feed/" rel="self" type="application/rss+xml" />
	<link>https://sms-institute.com/category/non-classe/</link>
	<description>دراسات - تحليل - تكوين</description>
	<lastBuildDate>Tue, 13 Oct 2026 12:24:51 +0000</lastBuildDate>
	<language>ary</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.3</generator>

<image>
	<url>https://sms-institute.com/wp-content/uploads/2022/03/cropped-78176462_971687123212963_670638815190188032_n-1-32x32.png</url>
	<title>Non classé Archives - معهد الدراسات الاجتماعية و الإعلامية</title>
	<link>https://sms-institute.com/category/non-classe/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Energy Situation in Moroccan Port &#8211; Strategic Dashboard on Maritime Navigation Flows &#038; Energy Security</title>
		<link>https://sms-institute.com/energy-situation-in-moroccan-port-strategic-dashboard-on-maritime-navigation-flows-energy-security/</link>
		
		<dc:creator><![CDATA[Sanaa Haouata]]></dc:creator>
		<pubDate>Tue, 13 Oct 2026 11:11:32 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1335</guid>

					<description><![CDATA[Energy Situation in Moroccan Ports &#8211; Strategic Dashboard 2026 ⚓ Energy Situation in Moroccan Ports Strategic Dashboard on Maritime Navigation&#8230;]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Energy Situation in Moroccan Ports &#8211; Strategic Dashboard 2026</title>
    <!-- Chosen Palette: Warm Sand & Maritime Navy (Background: #fbf9f5, Primary Text: #1e293b, Navy Accent: #0f172a, Brand Teal: #0d9488, Gold/Amber Accent: #d97706) -->
    <!-- Application Structure Plan: Designed as a 6-section strategic decision dashboard in English. Section 1: Executive Overview & National Energy KPIs; Section 2: Real-time AIS Vessel Intelligence Explorer with multi-criteria filters; Section 3: Port Hub Architecture & National Cabotage Supply Flow; Section 4: Interactive Fuel Price Structure Simulator & Socio-Economic Impact Analysis; Section 5: Geopolitical Route Security Matrix (Chokepoints Immunity); Section 6: Strategic Roadmap & Official Academic References (APA 7th edition). -->
    <!-- Visualization & Content Choices: 1. Vessel Tracking Data -> Dynamic Table & Chart.js Pie/Bar -> Interactive Search/Filter -> Dynamic filtering by Port/Cargo/Status -> Chart.js; 2. Price Breakdown -> Interactive Dynamic Chart & Simulator Slider -> Drag slider to modify CIF international price -> Dynamic calculation of taxes/margins & consumer impact alert -> Vanilla JS + Chart.js; 3. Port Hierarchy -> Interactive Grid Cards & Visual Tailwind Flow Nodes -> Cabotage supply chain -> Tailwind CSS & Vanilla JS; 4. Geopolitical Routes -> Tabbed Matrix Cards -> Confirms 0 SVG/Mermaid used. -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        sand: {
                            50: '#fdfbf7',
                            100: '#f7f3e9',
                            200: '#ede4d0',
                            800: '#544738',
                        },
                        navy: {
                            800: '#1e293b',
                            900: '#0f172a',
                        },
                        teal: {
                            600: '#0d9488',
                            700: '#0f766e',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>

    <!-- Google Fonts (Inter) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&#038;display=swap" rel="stylesheet">

    <!-- Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fbf9f5;
            color: #1e293b;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 360px;
            }
        }
        .tab-active {
            border-bottom: 3px solid #0d9488;
            color: #0d9488;
            font-weight: 700;
        }
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1ebd9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col antialiased selection:bg-teal-100 selection:text-teal-900">

    <!-- Header / Navbar -->
    <header class="bg-navy-900 text-white sticky top-0 z-50 shadow-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                <div class="flex items-center space-x-3">
                    <span class="text-3xl"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2693.png" alt="⚓" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                    <div>
                        <h1 class="text-lg sm:text-xl font-bold leading-tight">Energy Situation in Moroccan Ports</h1>
                        <p class="text-xs text-sand-200">Strategic Dashboard on Maritime Navigation Flows &#038; Energy Security</p>
                    </div>
                </div>
                <div class="hidden lg:flex items-center space-x-6 text-sm font-medium">
                    <button onclick="scrollToSection('summary')" class="hover:text-teal-400 transition-colors">Dashboard Overview</button>
                    <button onclick="scrollToSection('vessels')" class="hover:text-teal-400 transition-colors">Live AIS Tracking</button>
                    <button onclick="scrollToSection('ports')" class="hover:text-teal-400 transition-colors">Port Hubs</button>
                    <button onclick="scrollToSection('pricing')" class="hover:text-teal-400 transition-colors">Price Simulator</button>
                    <button onclick="scrollToSection('geopolitics')" class="hover:text-teal-400 transition-colors">Geopolitics</button>
                    <button onclick="scrollToSection('strategy')" class="hover:text-teal-400 transition-colors">Recommendations</button>
                </div>
                <div class="flex items-center">
                    <span class="bg-teal-700/80 text-teal-100 text-xs px-3 py-1.5 rounded-full font-semibold border border-teal-500/30">
                        Supply Status: Normal to Strong
                    </span>
                </div>
            </div>
        </div>
    </header>

    <!-- Author & Attribution Banner -->
    <section class="bg-sand-100 border-b border-sand-200 py-3">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between text-xs sm:text-sm text-slate-700">
            <div class="flex items-center space-x-2 font-semibold text-slate-800">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4dd.png" alt="📝" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Authored by Researcher:</span>
                <span class="text-teal-700 font-bold">Younes Banane</span>
                <span class="text-slate-400">|</span>
                <span>Logistics &#038; International Connectivity Researcher &#8211; Lead Scholar at SMSI</span>
            </div>
            <div class="mt-1 sm:mt-0 text-slate-500">
                <span>Source: Real-time MarineTraffic AIS Tracking + Official Institutional Data (2026)</span>
            </div>
        </div>
    </section>

    <!-- Main Content Container -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">

        <!-- Executive Summary Section -->
        <section id="summary" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Executive Dashboard &#038; Strategic Framework</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Structural breakdown of the hydrocarbon sector, import dependency, and supply chain dynamics</p>
                </div>
                <p class="text-sm sm:text-base leading-relaxed text-slate-700 text-justify">
                    The national energy system is defined by a near-total reliance on imports, reaching <strong>94%</strong> for refined petroleum products following the shutdown of the SAMIR refinery in Mohammedia. This structural shift has sustained an annual national energy bill exceeding <strong>120 billion MAD</strong>. This interactive application assesses the resilience of national supply chains by analyzing real-time Automatic Identification System (AIS) maritime tracking data while examining the paradox between physical supply fluidity and elevated retail prices for end consumers.
                </p>

                <!-- KPI Metric Cards Grid -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">Energy Import Dependency</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-teal-700 mt-2">94%</div>
                        <span class="text-[11px] text-slate-400 mt-1">Finished refined products</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">Annual National Energy Bill</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-amber-600 mt-2">&gt;120B</div>
                        <span class="text-[11px] text-slate-400 mt-1">Billion MAD</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">Oil Berth Occupancy Rate</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-emerald-600 mt-2">100%</div>
                        <span class="text-[11px] text-slate-400 mt-1">Max capacity exploited</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">Live AIS Tracked Tankers</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-navy-800 mt-2">32 Vessels</div>
                        <span class="text-[11px] text-slate-400 mt-1">Oil &#038; Gas specialized fleet</span>
                    </div>
                </div>

                <!-- Strategic Summary Visual Charts -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <h3 class="text-sm font-bold text-navy-900 mb-2 text-center">Operational Status of Tankers in Moroccan Ports</h3>
                        <div class="chart-container">
                            <canvas id="vesselStatusChart"></canvas>
                        </div>
                    </div>
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <h3 class="text-sm font-bold text-navy-900 mb-2 text-center">Breakdown of Tracked Oil &#038; Gas Cargo Types</h3>
                        <div class="chart-container">
                            <canvas id="cargoTypeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Live AIS Vessel Intelligence Explorer -->
        <section id="vessels" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Comprehensive Maritime AIS Vessel Intelligence</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Interactive real-time database tracking tanker movements across Moroccan waters</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-600 leading-relaxed mb-6">
                    This panel monitors 32 tanker vessels (crude oil, refined fuels, liquefied petroleum gas) identified via AIS maritime radar along the Atlantic and Mediterranean coastlines. Use the filtering and search controls below to inspect operational status, anchorage location, and draught parameters for each vessel.
                </p>

                <!-- Search and Filters Bar -->
                <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Search (Name, Origin, Cargo)</label>
                        <input type="text" id="searchInput" oninput="filterVessels()" placeholder="E.g.: TULU, Houston, LPG..." class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Filter by Port / Zone</label>
                        <select id="portFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">All Ports &#038; Zones</option>
                            <option value="Mohammedia">Mohammedia</option>
                            <option value="Jorf Lasfar">Jorf Lasfar</option>
                            <option value="Tanger Med">Tanger Med</option>
                            <option value="Agadir">Agadir</option>
                            <option value="Mediterranean">Mediterranean &#038; Straits Transit</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Filter by Maritime Status</label>
                        <select id="statusFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">All Statuses</option>
                            <option value="Moored">At Berth (Moored)</option>
                            <option value="Anchor">At Anchorage (Anchor)</option>
                            <option value="Underway">Underway / In Transit</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Filter by Cargo Type</label>
                        <select id="cargoFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">All Cargo Types</option>
                            <option value="Refined Petroleum">Refined Petroleum &#038; Fuels</option>
                            <option value="LPG">Liquefied Gas (LPG / LNG)</option>
                            <option value="Crude">Crude Oil</option>
                            <option value="Bitumen">Bitumen &#038; Chemicals</option>
                        </select>
                    </div>
                </div>

                <!-- Vessels Table -->
                <div class="overflow-x-auto rounded-xl border border-slate-200">
                    <table class="w-full text-left text-xs">
                        <thead class="bg-navy-900 text-white font-semibold">
                            <tr>
                                <th class="p-3">Port / Zone</th>
                                <th class="p-3">Vessel Name</th>
                                <th class="p-3">Cargo Category</th>
                                <th class="p-3">Flag State</th>
                                <th class="p-3">Maritime Status</th>
                                <th class="p-3 text-center">Draught (m)</th>
                                <th class="p-3">Origin / Last Port</th>
                                <th class="p-3">Operational Role &#038; Strategic Impact</th>
                            </tr>
                        </thead>
                        <tbody id="vesselsTableBody" class="divide-y divide-slate-200 bg-white">
                            <!-- Populated dynamically via JavaScript -->
                        </tbody>
                    </table>
                </div>
                <div id="noResults" class="hidden text-center py-8 text-slate-500 text-xs">
                    No vessels match the selected filtering criteria.
                </div>
            </div>
        </section>

        <!-- Port Hub Architecture & Cabotage Flow -->
        <section id="ports" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Logistics Architecture &#038; Functional Port Hub Distribution</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Hub-and-Spoke organizational structure and national coastal cabotage pipeline</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    Field AIS telemetry demonstrates an integrated maritime logistics layout structured under a &#8220;Hub-and-Spoke&#8221; operational model. Responsibilities are distributed across Moroccan ports based on water depth, storage capacity, and regional industrial demand. Click on any port card below to explore its specific strategic functions.
                </p>

                <!-- Dynamic Port Selector Cards -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                    <button onclick="selectPortDetails('TM')" id="btn-port-TM" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-teal-600 text-left hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ec.png" alt="🏬" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-teal-100 text-teal-800 px-2 py-0.5 rounded">Central Hub</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">Tanger Med</h3>
                        <p class="text-xs text-slate-500 mt-1">Strategic storage, international transshipment, and vessel bunkering</p>
                    </button>
                    <button onclick="selectPortDetails('MH')" id="btn-port-MH" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-left hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3d9.png" alt="🏙" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Urban Distribution</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">Port of Mohammedia</h3>
                        <p class="text-xs text-slate-500 mt-1">Direct fuel supply to Greater Casablanca and the Central region</p>
                    </button>
                    <button onclick="selectPortDetails('JF')" id="btn-port-JF" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-left hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ed.png" alt="🏭" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-blue-100 text-blue-800 px-2 py-0.5 rounded">Heavy Industrial Hub</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">Jorf Lasfar</h3>
                        <p class="text-xs text-slate-500 mt-1">Deepwater berths, OCP chemical complex, heavy fuel oil, and LPG</p>
                    </button>
                    <button onclick="selectPortDetails('AG')" id="btn-port-AG" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-left hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f30a.png" alt="🌊" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">Southern Gateway</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">Port of Agadir</h3>
                        <p class="text-xs text-slate-500 mt-1">Butane gas for Souss-Massa agricultural sector and fishing fleet diesel</p>
                    </button>
                </div>

                <!-- Selected Port Description Panel -->
                <div id="portDetailPanel" class="bg-slate-50 p-6 rounded-xl border border-slate-200">
                    <!-- Populated via JS -->
                </div>

                <!-- Cabotage Flow Visualizer (Tailwind HTML Flow Diagram) -->
                <div class="mt-8 border-t border-slate-200 pt-6">
                    <h3 class="text-sm font-bold text-navy-900 mb-4">National Coastal Cabotage Flow Network (Maritime Pipeline)</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-teal-700">1. Northern Primary Supply Route (Tanger Med)</span>
                                <p class="text-slate-600 mt-1">Receives transoceanic super-cargoes (up to 11.9m draught) and redistributes refined products via domestic shuttle tankers.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center justify-between">
                                <span>Shuttle Tankers: TULU, PRIMA N, KASSOS</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-blue-700">2. Central Industrial Distribution (Jorf Lasfar)</span>
                                <p class="text-slate-600 mt-1">Accommodates deep-draft tankers (ORWELL at 12.3m draught) for thermal power, industrial fuel, and southern coastal cabotage transfers.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center justify-between">
                                <span>Southern Feeder: TINGIS</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-emerald-700">3. Southern Regional Feeders (Agadir &#038; South)</span>
                                <p class="text-slate-600 mt-1">Direct butane imports (ECO GALAXY) combined with national cabotage connections from Jorf Lasfar to secure fishing and urban energy supplies.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center justify-between">
                                <span>Fleet Bunker Supplier: PS OUFELLA</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2693.png" alt="⚓" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Price Breakdown & Price Simulator Section -->
        <section id="pricing" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-amber-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Retail Fuel Price Breakdown &#038; Inflation Simulator</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Analyzing the disconnect between maritime supply fluidity and retail pump price inflation</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    Despite high operational efficiency in port handling, consumer purchasing power faces severe price pressures driven by Platts CIF Med international benchmark fluctuations, fixed domestic taxation, and commercial margins. Drag the <strong>interactive simulator slider</strong> below to modify the international import price (CIF) and observe the resulting pump price structure.
                </p>

                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                    <!-- Price Simulator Controls -->
                    <div class="lg:col-span-5 bg-sand-50 p-5 rounded-xl border border-sand-200 space-y-4">
                        <h3 class="font-bold text-navy-900 text-sm border-b border-sand-200 pb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f39b.png" alt="🎛" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Diesel Pump Price Simulator (MAD / Liter)</h3>
                        
                        <div>
                            <div class="flex justify-between text-xs font-semibold mb-1">
                                <span>International Purchase Price (CIF):</span>
                                <span id="cifVal" class="text-teal-700 font-bold">7.50 MAD</span>
                            </div>
                            <input type="range" id="cifSlider" min="4.50" max="12.00" step="0.25" value="7.50" oninput="updatePriceSimulation()" class="w-full accent-teal-600 cursor-pointer">
                            <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                                <span>Low Baseline (4.50)</span>
                                <span>Current Reference (7.50)</span>
                                <span>Severe Shock (12.00)</span>
                            </div>
                        </div>

                        <!-- Calculated Price Components Output -->
                        <div class="space-y-2 text-xs pt-2 border-t border-sand-200">
                            <div class="flex justify-between">
                                <span class="text-slate-600">Domestic Consumption Tax (Fixed TIC):</span>
                                <span id="ticVal" class="font-semibold text-slate-800">3.76 MAD</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-600">Value-Added Tax (10% VAT):</span>
                                <span id="tvaVal" class="font-semibold text-slate-800">1.22 MAD</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-600">Distribution &#038; Storage Margins:</span>
                                <span id="marginVal" class="font-semibold text-slate-800">0.90 MAD</span>
                            </div>
                            <div class="flex justify-between text-sm font-extrabold pt-2 border-t border-sand-300 text-navy-900">
                                <span>Estimated Retail Pump Price:</span>
                                <span id="totalPriceVal" class="text-amber-700">13.38 MAD</span>
                            </div>
                        </div>

                        <!-- Socio-Economic Impact Alert Box -->
                        <div id="impactAlert" class="p-3 rounded-lg bg-amber-50 border border-amber-200 text-xs text-amber-900 leading-normal">
                            <!-- Populated via JS based on simulation -->
                        </div>
                    </div>

                    <!-- Price Composition Chart -->
                    <div class="lg:col-span-7 bg-slate-50 p-5 rounded-xl border border-slate-200">
                        <h3 class="font-bold text-navy-900 text-sm mb-2 text-center">Percentage Breakdown of Reference Pump Price (13.38 MAD/L)</h3>
                        <div class="chart-container">
                            <canvas id="priceBreakdownChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Socio-Economic Impact Survey Findings -->
                <div class="mt-8 bg-sand-100 p-5 rounded-xl border border-sand-200">
                    <h3 class="font-bold text-navy-900 text-sm mb-3"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ca.png" alt="📊" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Survey Findings: Household Behavior Under Fuel Price Surges</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center text-xs">
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-red-600">93.3%</div>
                            <p class="text-slate-600 mt-1">Forced to cut healthcare, food, or education spending if diesel exceeds 15 MAD/L.</p>
                        </div>
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-amber-600">95.4%</div>
                            <p class="text-slate-600 mt-1">Cancel or drastically trim non-essential household expenditures.</p>
                        </div>
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-blue-600">85.4%</div>
                            <p class="text-slate-600 mt-1">Restrict the use of private and public transportation options.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Geopolitical Supply Routes & Chokepoints Immunity -->
        <section id="geopolitics" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Geopolitics of Supply Routes &#038; Strait Chokepoint Immunity</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Assessing the immunity level of Moroccan supply chains against Middle Eastern maritime disruptions</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    A geographical assessment of tracked maritime routes confirms a highly favorable trade position, insulating Morocco from immediate military risks associated with potential blockades of the Strait of Hormuz or Bab-el-Mandeb. The national energy footprint is primarily anchored in Western Mediterranean refineries and Atlantic shipping lanes.
                </p>

                <!-- Routes Safety Cards Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">Western &#038; Central Mediterranean</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">Very Low Risk</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">Refineries in Italy (Sarroch, Augusta), Spain (Cartagena), Greece (Corinth), and Tunisia.</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Active Tankers: INNOVATOR, BYZANTION, HISTRIA NARVI
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">Atlantic Ocean &#038; North America</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">Open &#038; Secure Passage</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">US Gulf Coast ports (Houston, New Orleans) delivering direct transatlantic fuel shipments.</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Active Tankers: GAS BARBAROSSA, PIS FLORES
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">West Africa &#038; The Caribbean</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">High Diversification</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">Guinea (Kamsar), Senegal (Dakar), and Trinidad &#038; Tobago (Port of Spain).</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Active Tankers: ORWELL, BALTIC ICE, GREEN ETERNITY
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">North-West Europe</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">Regular Service</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">Netherlands (Zeeland) and Belgium (Antwerp) for specialized bitumen and LPG supplies.</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Active Tankers: XING HAI WAN, ECO GALAXY
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors md:col-span-2 lg:col-span-2">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">Arabian Peninsula (Excluding Hormuz)</span>
                            <span class="bg-blue-100 text-blue-800 text-[10px] px-2 py-0.5 rounded font-bold">Secured Geographic Exception</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">
                            The single Arabian Gulf shipment tracked (LPG tanker <em>GAS AMMON</em>) departed from <strong>Salalah in the Sultanate of Oman</strong>, located directly on the Arabian Sea and Indian Ocean, completely outside the Strait of Hormuz.
                        </p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Strategic Conclusion: Absolute absence of vulnerability to Strait of Hormuz or Bab-el-Mandeb chokepoints.
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Strategic Roadmap & Recommendations -->
        <section id="strategy" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Strategic Policy Roadmap &#038; Institutional References</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Recommendations for national energy sovereignty and formal references (APA 7th Edition)</p>
                </div>

                <!-- Policy Tabs Header -->
                <div class="flex border-b border-slate-200 space-x-4 text-xs sm:text-sm overflow-x-auto pb-1 mb-6">
                    <button onclick="switchPolicyTab('tab1')" id="tab1-btn" class="tab-active py-2 px-3 font-bold whitespace-nowrap">1. SAMIR Relaunch</button>
                    <button onclick="switchPolicyTab('tab2')" id="tab2-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">2. Floating TIC Tax</button>
                    <button onclick="switchPolicyTab('tab3')" id="tab3-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">3. Margin Caps</button>
                    <button onclick="switchPolicyTab('tab4')" id="tab4-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">4. Nador West Med</button>
                    <button onclick="switchPolicyTab('tab5')" id="tab5-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">5. Clean Transport &#038; &#8220;Mouwakaba&#8221;</button>
                </div>

                <!-- Policy Content Panels -->
                <div id="tab1-content" class="policy-content space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ed.png" alt="🏭" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Domestic Refining Relaunch &#038; Strategic Reserve Expansion</h3>
                        <p>
                            Reactivating the SAMIR refinery represents the cornerstone for restoring national energy sovereignty. Local refining would meet up to <strong>65% of domestic diesel and gasoline demand</strong> while retaining refining margins currently exported abroad. Furthermore, utilizing its storage infrastructure in Mohammedia would fortify national strategic reserves.
                        </p>
                    </div>
                </div>

                <div id="tab2-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c9.png" alt="📉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Activation of a Floating Consumption Tax Mechanism (Floating TIC)</h3>
                        <p>
                            Implementing a dynamic fiscal mechanism that automatically lowers the TIC tax whenever international crude oil prices pass <strong>85 USD/barrel</strong>. This measure aims to absorb global price shocks and preserve pump prices within a sustainable range of <strong>12.50 to 13.50 MAD/Liter</strong>.
                        </p>
                    </div>
                </div>

                <div id="tab3-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2696.png" alt="⚖" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Regulation and Temporary Capping of Distribution Margins</h3>
                        <p>
                            In alignment with the Competition Council&#8217;s directives, establishing temporal caps on fuel distribution margins during extreme market shocks guarantees a fair distribution of economic effort between commercial operators and households.
                        </p>
                    </div>
                </div>

                <div id="tab4-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6a2.png" alt="🚢" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Accelerating the Nador West Med Energy Complex</h3>
                        <p>
                            The Nador West Med port complex will offer strategic hydrocarbon storage capacity exceeding <strong>25 million tons</strong>. It will also house Morocco&#8217;s first Liquefied Natural Gas (LNG) import terminal, relieving pressure from Atlantic ports and diversifying direct maritime routes.
                        </p>
                    </div>
                </div>

                <div id="tab5-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f331.png" alt="🌱" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Clean Mobility Incentives &#038; Extension of &#8220;Mouwakaba&#8221; Support</h3>
                        <p>
                            Expanding tax incentives for hybrid and electric vehicles (currently accounting for 12.5% of new auto sales) while sustaining direct subsidies for freight and passenger transport operators via the &#8220;Mouwakaba&#8221; platform to prevent price spillover onto essential consumer goods.
                        </p>
                    </div>
                </div>

                <!-- Academic & Institutional References Section (APA 7th Edition) -->
                <div class="mt-8 pt-6 border-t border-slate-200 text-xs text-slate-600">
                    <h3 class="font-bold text-navy-900 text-sm mb-3">Official References List (APA 7th Edition)</h3>
                    <ul class="space-y-2 text-left">
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>Social and Media Studies Institute (SMSI).</strong> (2026). <em>Analysis report on the energy situation in Moroccan ports and hydrocarbon supply chains</em> (Authored by Younes Banane). SMSI Publications, Casablanca.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>MarineTraffic.</strong> (2026). <em>Global Vessel Tracking and AIS Maritime Intelligence Platform</em> [Data set]. MarineTraffic. https://www.marinetraffic.com
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>Competition Council.</strong> (2023). <em>Opinion on the monitoring of commitments undertaken by diesel and gasoline distribution companies</em> (Opinion No. R/3/23). Kingdom of Morocco, Rabat.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>National Ports Agency (ANP).</strong> (2024). <em>Statistical report on port traffic in Moroccan ports</em>. Ministry of Equipment and Water, Kingdom of Morocco.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>Ministry of Energy Transition and Sustainable Development.</strong> (2024). <em>Annual statistical bulletin of the energy and hydrocarbon sector</em>. Kingdom of Morocco, Rabat.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>High Commission for Planning (HCP).</strong> (2024). <em>Consumer price index and the impact of fuel costs on household living standards</em>. Rabat, Morocco.
                        </li>
                    </ul>
                </div>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer class="bg-navy-900 text-slate-400 py-6 border-t border-slate-800 text-xs">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center space-y-3 sm:space-y-0">
            <div>
                <span>© 2026 Authored by Younes Banane &#8211; Social and Media Studies Institute (SMSI), Morocco.</span>
            </div>
            <div class="flex space-x-4 text-sand-200">
                <span>AIS Maritime Intelligence</span>
                <span>•</span>
                <span>Supply Chain Analytics</span>
            </div>
        </div>
    </footer>

    <!-- JavaScript Dataset and Interactive Logic -->
    <script>
        // Full Dataset extracted from the Strategic Report (32 Vessels) - English Translated Version
        const vesselsData = [
            { port: "Mohammedia", name: "TULU", type: "Refined Petroleum / Chemical", flag: "Barbados &#x1f1e7;&#x1f1e7;", status: "Moored", draught: 12.0, origin: "Tanger Med (MA PTM)", eta: "October 10", impact: "Massive fuel discharge supplying Greater Casablanca regional grid" },
            { port: "Mohammedia", name: "PRIMA N", type: "Refined Petroleum Products", flag: "Malta &#x1f1f2;&#x1f1f9;", status: "Moored", draught: 6.7, origin: "Tanger Med (MA PTM)", eta: "October 12", impact: "Regular coastal shuttle replenishing commercial distributor depots" },
            { port: "Mohammedia", name: "ETRUSCO", type: "Refined Petroleum / Chemical", flag: "Italy &#x1f1ee;&#x1f1f9;", status: "Moored", draught: 6.1, origin: "Cartagena / Spain (ES CAR)", eta: "October 11", impact: "Direct import of refined derivatives from Western Mediterranean refineries" },
            { port: "Mohammedia", name: "EVREN", type: "Crude Oil", flag: "Palau &#x1f1f5;&#x1f1fc;", status: "Anchor", draught: 10.5, origin: "Tanger Med (MA PTM)", eta: "October 11", impact: "Crude oil cargo waiting at anchorage for berth allocation or pumping" },
            { port: "Mohammedia", name: "INNOVATOR", type: "Fuels / Chemical", flag: "Liberia &#x1f1f1;&#x1f1f7;", status: "Anchor", draught: 10.4, origin: "Augusta / Italy (IT AUG)", eta: "October 11", impact: "Refined fuel shipment imported from Sicily awaiting dock availability" },
            { port: "Mohammedia", name: "EPIC MADEIRA", type: "Liquefied Gas (LPG)", flag: "Singapore &#x1f1f8;&#x1f1ec;", status: "Anchor", draught: 6.5, origin: "Porto Foxi / Italy (IT PFX)", eta: "October 12", impact: "Domestic butane gas supply secured at anchorage prior to discharge" },
            { port: "Mohammedia", name: "KASSOS", type: "Refined Petroleum Products", flag: "Cyprus &#x1f1e8;&#x1f1fe;", status: "Anchor", draught: 6.7, origin: "Tanger Med (MA PTM)", eta: "October 11", impact: "Regular shuttle service maintaining commercial inventory rotation" },
            { port: "Mohammedia", name: "YM URANUS", type: "Refined Petroleum / Chemical", flag: "Malta &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 6.2, origin: "Radès / Tunisia (TN RDS)", eta: "October 11", impact: "Supplementary North African regional commercial trade shipment" },
            { port: "Mohammedia", name: "XING HAI WAN", type: "Bitumen & Asphalt", flag: "Panama &#x1f1f5;&#x1f1e6;", status: "Anchor", draught: 6.2, origin: "Zeeland / Netherlands (NL ZBW)", eta: "October 12", impact: "Specialized asphalt shipment for national highway infrastructure works" },
            
            { port: "Jorf Lasfar", name: "PIS FLORES", type: "Petroleum / Petrochemicals", flag: "Panama &#x1f1f5;&#x1f1e6;", status: "Moored", draught: 11.8, origin: "New Orleans / USA (US MSY)", eta: "October 12", impact: "Direct high-capacity transatlantic energy import discharging at deepwater berth" },
            { port: "Jorf Lasfar", name: "BYZANTION", type: "Fuels / Industrial Chemical", flag: "Marshall Islands &#x1f1f2;&#x1f1ed;", status: "Moored", draught: 9.0, origin: "Milazzo / Italy (IT MLZ)", eta: "October 11", impact: "Industrial fuel shipment powering the OCP chemical production complex" },
            { port: "Jorf Lasfar", name: "GAS AMMON", type: "Liquefied Gas (LPG)", flag: "Liberia &#x1f1f1;&#x1f1f7;", status: "Moored", draught: 10.4, origin: "Salalah / Oman (OM SLL)", eta: "October 11", impact: "Major LPG cargo arriving directly from Arabian Sea (bypassing Hormuz Strait)" },
            { port: "Jorf Lasfar", name: "FERICEK", type: "Petroleum / Chemical", flag: "Turkey &#x1f1f9;&#x1f1f7;", status: "Underway", draught: 5.4, origin: "Safi / Morocco (MA SFI)", eta: "October 13", impact: "Coastal chemical transfer vessel connecting domestic industrial platforms" },
            { port: "Jorf Lasfar", name: "DERIN", type: "Petroleum / Heavy Fuel Oil", flag: "Barbados &#x1f1e7;&#x1f1e7;", status: "Anchor", draught: 11.3, origin: "Tanger Med (MA PTM)", eta: "October 09", impact: "High-capacity cabotage supplying fuel oil for thermal power plants" },
            { port: "Jorf Lasfar", name: "GREEN ETERNITY", type: "Liquefied Gas / Chemical", flag: "Singapore &#x1f1f8;&#x1f1ec;", status: "Anchor", draught: 10.4, origin: "Trinidad & Tobago (TT PTS)", eta: "October 11", impact: "Long-haul Caribbean chemical import for agricultural fertilizer production" },
            { port: "Jorf Lasfar", name: "EUROSAILOR", type: "Refined Petroleum / Chemical", flag: "Malta &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 9.1, origin: "Jorf Lasfar (MA JFL)", eta: "October 11", impact: "Local operational rotation repositioning between specialized berths" },
            { port: "Jorf Lasfar", name: "ORWELL", type: "Petroleum / Chemical", flag: "Liberia &#x1f1f1;&#x1f1f7;", status: "Underway", draught: 12.3, origin: "Kamsar / Guinea (GN KMR)", eta: "October 13", impact: "Super-tanker (deepest draught recorded) arriving from West Africa" },

            { port: "Tanger Med", name: "GAS BARBAROSSA", type: "Liquefied Gas (LPG)", flag: "Panama &#x1f1f5;&#x1f1e6;", status: "Moored", draught: 11.9, origin: "Houston / USA (US HOU)", eta: "October 12", impact: "Major US transoceanic gas cargo discharging into central storage tanks" },
            { port: "Tanger Med", name: "ANDROS", type: "Refined Petroleum", flag: "Cyprus &#x1f1e8;&#x1f1fe;", status: "Moored", draught: 6.0, origin: "Tanger Med 2", eta: "October 12", impact: "Internal transshipment and maritime bunkering service in port basin" },
            { port: "Tanger Med", name: "BALEA", type: "Refined Petroleum Products", flag: "Morocco &#x1f1f2;&#x1f1e6;", status: "Moored", draught: 3.0, origin: "Tanger Med (MA PTM)", eta: "October 11", impact: "Moroccan-flagged bunker barge supplying fuel to international shipping" },
            { port: "Mediterranean", name: "BW BRUSSELS", type: "Liquefied Natural Gas (LNG)", flag: "Singapore &#x1f1f8;&#x1f1ec;", status: "Underway", draught: 9.1, origin: "Idku / Egypt (EG AIS)", eta: "October 13", impact: "International LNG tanker in transit through the Strait under charter" },
            { port: "Tanger Med", name: "MARS", type: "Refined Petroleum", flag: "Cyprus &#x1f1e8;&#x1f1fe;", status: "Anchor", draught: 5.2, origin: "Gibraltar (GI GIB)", eta: "October 12", impact: "Awaiting entry permission for bunkering or storage operations" },
            { port: "Tanger Med", name: "CIELO DI CAPRI", type: "Petroleum / Chemical", flag: "Malta &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 9.1, origin: "Ceuta (ES CEU)", eta: "October 11", impact: "Regional Mediterranean shuttle awaiting berth at fuel terminals" },
            { port: "Tanger Med", name: "ITHAKI II", type: "Refined Petroleum", flag: "Cyprus &#x1f1e8;&#x1f1fe;", status: "Underway", draught: 5.9, origin: "Gibraltar (GI GIB)", eta: "October 13", impact: "Rapid shuttle vessel operating between Gibraltar Strait logistics hubs" },

            { port: "Mediterranean", name: "HISTRIA NARVI", type: "Petroleum / Chemical", flag: "Malta &#x1f1f2;&#x1f1f9;", status: "Underway", draught: 10.0, origin: "Sarroch / Italy (IT SPA)", eta: "October 14", impact: "Sardinian industrial fuel cargo bound directly for Jorf Lasfar" },
            { port: "Mediterranean", name: "HAZAR", type: "Refined Petroleum", flag: "Panama &#x1f1f5;&#x1f1e6;", status: "Underway", draught: 10.2, origin: "Corinth / Greece (GR AGT)", eta: "October 12", impact: "Greek refined cargo destined for strategic storage at Tanger Med" },
            { port: "Mediterranean", name: "BALTIC ICE", type: "Petroleum / Chemical", flag: "Liberia &#x1f1f1;&#x1f1f7;", status: "Underway", draught: 7.6, origin: "Dakar / Senegal (SN DKR)", eta: "October 14", impact: "West African cargo awaiting entry clearance at Tanger Med hub" },
            { port: "Mediterranean", name: "KRITI EPISKOPI", type: "Petroleum / Chemical", flag: "Liberia &#x1f1f1;&#x1f1f7;", status: "Anchor", draught: 10.4, origin: "Corinth / Greece (GR AGT)", eta: "September 16", impact: "Deep-draft Greek fuel cargo awaiting discharge slot at Tanger Med" },

            { port: "Agadir", name: "ECO GALAXY", type: "Liquefied Gas / Chemical", flag: "Marshall Islands &#x1f1f2;&#x1f1ed;", status: "Moored", draught: 6.6, origin: "Antwerp / Belgium (BE ANR)", eta: "October 12", impact: "Direct Northern European butane import supplying the Souss region" },
            { port: "Agadir", name: "TINGIS", type: "Petroleum / Chemical", flag: "Morocco &#x1f1f2;&#x1f1e6;", status: "Anchor", draught: 7.2, origin: "Jorf Lasfar (MA JFL)", eta: "October 10", impact: "Moroccan-flagged cabotage tanker transferring fuel from Jorf to the South" },
            { port: "Agadir", name: "BWEK BREEZE", type: "Liquefied Gas / Chemical", flag: "Malta &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 6.3, origin: "A Coruña / Spain (ES LCG)", eta: "October 10", impact: "Reserve LPG gas cargo at anchorage awaiting berth clearance" },
            { port: "Agadir", name: "PS OUFELLA", type: "Refined Petroleum", flag: "Morocco &#x1f1f2;&#x1f1e6;", status: "Anchor", draught: 4.0, origin: "Agadir (Local movement)", eta: "October 12", impact: "Local refueling barge servicing the coastal and deep-sea fishing fleet" }
        ];

        // Port Detail Descriptions Database (English)
        const portDetailsDB = {
            TM: {
                title: "Tanger Med (Central Hub & Global Platform)",
                badge: "Storage & Transshipment",
                text: "Tanger Med serves as the strategic nerve center of Morocco's energy supply, functioning as a primary import, storage, and international transshipment hub. Its ultra-deepwater terminals accommodate the world's largest tankers (e.g., GAS BARBAROSSA, 11.9m draught). It also provides crucial maritime bunkering services via dedicated barges such as the Moroccan vessel BALEA."
            },
            MH: {
                title: "Port of Mohammedia (Urban Distribution Hub)",
                badge: "Greater Casablanca & Center",
                text: "The Port of Mohammedia directly supplies the nation's primary consumption zone (Greater Casablanca and the Central region). Its oil berths operate at 100% capacity with 3 tankers discharging concurrently (TULU, PRIMA N, ETRUSCO) and 6 awaiting anchorage berth clearance. The commercial port of Casablanca was intentionally cleared of oil traffic for safety."
            },
            JF: {
                title: "Jorf Lasfar (Heavy Industrial Hub & Deepwater Terminal)",
                badge: "Industry & Energy",
                text: "Jorf Lasfar acts as the heavy industrial gateway designed for ultra-deep draught tankers (10m to 12.3m draught, such as the super-tanker ORWELL). These flows supply the massive OCP phosphate complex, feed thermal power stations with heavy fuel oil, and import industrial LPG."
            },
            AG: {
                title: "Port of Agadir (Southern Energy Gateway)",
                badge: "Souss-Massa & Southern Provinces",
                text: "The Port of Agadir guarantees energy security for agricultural, urban, and fishing operations in the Souss-Massa region and Southern provinces. It combines direct LPG imports from North-Western Europe (ECO GALAXY), domestic cabotage from Jorf Lasfar (Moroccan tanker TINGIS), and fleet bunkering (PS OUFELLA)."
            }
        };

        // DOM Ready Initialization
        document.addEventListener('DOMContentLoaded', () => {
            renderVesselsTable(vesselsData);
            initStatusChart();
            initCargoChart();
            initPriceBreakdownChart();
            selectPortDetails('TM');
            updatePriceSimulation();
        });

        // Filter and Render Vessels
        function renderVesselsTable(data) {
            const tbody = document.getElementById('vesselsTableBody');
            const noResults = document.getElementById('noResults');
            tbody.innerHTML = '';

            if (data.length === 0) {
                noResults.classList.remove('hidden');
                return;
            } else {
                noResults.classList.add('hidden');
            }

            data.forEach(v => {
                let statusBadge = '';
                if (v.status === 'Moored') {
                    statusBadge = '<span class="bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold">At Berth</span>';
                } else if (v.status === 'Anchor') {
                    statusBadge = '<span class="bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-bold">At Anchor</span>';
                } else {
                    statusBadge = '<span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded font-bold">Underway / Transit</span>';
                }

                const tr = document.createElement('tr');
                tr.className = "hover:bg-sand-50 transition-colors";
                tr.innerHTML = `
                    <td class="p-3 font-bold text-navy-900">${v.port}</td>
                    <td class="p-3 font-extrabold text-teal-700">${v.name}</td>
                    <td class="p-3 text-slate-700">${v.type}</td>
                    <td class="p-3">${v.flag}</td>
                    <td class="p-3">${statusBadge}</td>
                    <td class="p-3 text-center font-bold text-slate-800">${v.draught}</td>
                    <td class="p-3 text-slate-600">${v.origin}</td>
                    <td class="p-3 text-slate-600 leading-snug">${v.impact}</td>
                `;
                tbody.appendChild(tr);
            });
        }

        function filterVessels() {
            const search = document.getElementById('searchInput').value.toLowerCase();
            const port = document.getElementById('portFilter').value;
            const status = document.getElementById('statusFilter').value;
            const cargo = document.getElementById('cargoFilter').value;

            const filtered = vesselsData.filter(v => {
                const matchesSearch = v.name.toLowerCase().includes(search) || 
                                      v.origin.toLowerCase().includes(search) || 
                                      v.type.toLowerCase().includes(search);
                const matchesPort = (port === 'ALL') || v.port.includes(port);
                const matchesStatus = (status === 'ALL') || (v.status === status);
                
                let matchesCargo = true;
                if (cargo !== 'ALL') {
                    if (cargo === 'LPG') matchesCargo = v.type.includes('LPG') || v.type.includes('LNG') || v.type.includes('Gas');
                    else if (cargo === 'Crude') matchesCargo = v.type.includes('Crude');
                    else if (cargo === 'Bitumen') matchesCargo = v.type.includes('Bitumen') || v.type.includes('Chemical');
                    else if (cargo === 'Refined Petroleum') matchesCargo = v.type.includes('Refined') || v.type.includes('Fuels');
                }

                return matchesSearch && matchesPort && matchesStatus && matchesCargo;
            });

            renderVesselsTable(filtered);
        }

        // Port Details Selection Handler
        function selectPortDetails(key) {
            document.querySelectorAll('.port-card').forEach(c => c.classList.remove('border-teal-600'));
            document.querySelectorAll('.port-card').forEach(c => c.classList.add('border-transparent'));
            
            const btn = document.getElementById(`btn-port-${key}`);
            if (btn) {
                btn.classList.remove('border-transparent');
                btn.classList.add('border-teal-600');
            }

            const info = portDetailsDB[key];
            const panel = document.getElementById('portDetailPanel');
            panel.innerHTML = `
                <div class="flex items-center justify-between border-b border-slate-200 pb-2 mb-3">
                    <h3 class="font-bold text-navy-900 text-base">${info.title}</h3>
                    <span class="bg-teal-700 text-white text-xs px-2.5 py-1 rounded-full">${info.badge}</span>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed">${info.text}</p>
            `;
        }

        // Price Simulator Logic
        function updatePriceSimulation() {
            const cif = parseFloat(document.getElementById('cifSlider').value);
            const tic = 3.76;
            const tva = (cif + tic) * 0.10;
            const margin = 0.90;
            const total = cif + tic + tva + margin;

            document.getElementById('cifVal').innerText = cif.toFixed(2) + ' MAD';
            document.getElementById('ticVal').innerText = tic.toFixed(2) + ' MAD';
            document.getElementById('tvaVal').innerText = tva.toFixed(2) + ' MAD';
            document.getElementById('marginVal').innerText = margin.toFixed(2) + ' MAD';
            document.getElementById('totalPriceVal').innerText = total.toFixed(2) + ' MAD';

            const alertBox = document.getElementById('impactAlert');
            if (total > 15.00) {
                alertBox.className = "p-3 rounded-lg bg-red-100 border border-red-300 text-xs text-red-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x26a0; High Tariff Shock Zone (> 15.00 MAD/L):</strong><br>
                    Severe stress on household purchasing power, forced reductions in healthcare/education spending, and accelerated transportation inflation.
                `;
            } else if (total > 13.00) {
                alertBox.className = "p-3 rounded-lg bg-amber-50 border border-amber-200 text-xs text-amber-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x26a0; Moderate Price Pressure Zone (13.00 - 15.00 MAD/L):</strong><br>
                    Generates inflationary pressure on freight transport (+1.4% to +2.5% increase in baseline living costs).
                `;
            } else {
                alertBox.className = "p-3 rounded-lg bg-emerald-50 border border-emerald-200 text-xs text-emerald-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x2705; Purchasing Power Support Zone (< 13.00 MAD/L):</strong><br>
                    Enhanced business competitiveness and moderated retail prices for essential food items.
                `;
            }
        }

        // Policy Tabs Handler
        function switchPolicyTab(tabId) {
            document.querySelectorAll('.policy-content').forEach(c => c.classList.add('hidden'));
            document.querySelectorAll('[id$="-btn"]').forEach(b => {
                b.classList.remove('tab-active');
                b.classList.add('text-slate-500', 'font-semibold');
            });

            document.getElementById(`${tabId}-content`).classList.remove('hidden');
            const activeBtn = document.getElementById(`${tabId}-btn`);
            activeBtn.classList.add('tab-active');
            activeBtn.classList.remove('text-slate-500');
        }

        // Chart.js Visualizations
        function initStatusChart() {
            const ctx = document.getElementById('vesselStatusChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['At Berth (Moored)', 'At Anchorage (Anchor)', 'Underway / In Transit'],
                    datasets: [{
                        data: [11, 15, 6],
                        backgroundColor: ['#0d9488', '#d97706', '#2563eb'],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { font: { family: 'Inter', size: 11 } } },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.raw} vessels`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function initCargoChart() {
            const ctx = document.getElementById('cargoTypeChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Refined Products', 'Liquefied Gas (LPG/LNG)', 'Petroleum/Chemical', 'Crude Oil', 'Bitumen'],
                    datasets: [{
                        label: 'Tracked Vessels Count',
                        data: [13, 8, 8, 2, 1],
                        backgroundColor: '#0f172a',
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true, ticks: { stepSize: 2, font: { family: 'Inter' } } },
                        x: { ticks: { font: { family: 'Inter', size: 10 } } }
                    },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `Total: ${context.raw} vessels`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function initPriceBreakdownChart() {
            const ctx = document.getElementById('priceBreakdownChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['CIF Import Price (56%)', 'Fixed TIC Tax (28.1%)', '10% VAT Tax (9.1%)', 'Margins & Logistics (6.8%)'],
                    datasets: [{
                        data: [7.50, 3.76, 1.22, 0.90],
                        backgroundColor: ['#0d9488', '#d97706', '#2563eb', '#64748b'],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { font: { family: 'Inter', size: 11 } } },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.raw} MAD/L`;
                                }
                            }
                        }
                    }
                }
            });
        }

        // Smooth Scroll Helper
        function scrollToSection(id) {
            const el = document.getElementById(id);
            if (el) {
                el.scrollIntoView({ behavior: 'smooth' });
            }
        }
    </script>
</body>
</html>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>-Situation Énergétique dans les Ports Marocains  Rapport stratégique sur les flux de navigation et la sécurité énergétique</title>
		<link>https://sms-institute.com/situation-energetique-dans-les-ports-marocains-rapport-strategique-sur-les-flux-de-navigation-et-la-securite-energetique/</link>
		
		<dc:creator><![CDATA[Sanaa Haouata]]></dc:creator>
		<pubDate>Tue, 13 Oct 2026 10:56:31 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1333</guid>

					<description><![CDATA[Situation Énergétique dans les Ports Marocains &#8211; Tableau de Bord Stratégique 2026 ⚓ Situation Énergétique dans les Ports Marocains Rapport&#8230;]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Situation Énergétique dans les Ports Marocains &#8211; Tableau de Bord Stratégique 2026</title>
    <!-- Chosen Palette: Warm Sand & Maritime Navy (Background: #fbf9f5, Primary Text: #1e293b, Navy Accent: #0f172a, Brand Teal: #0d9488, Gold/Amber Accent: #d97706) -->
    <!-- Application Structure Plan: Conçu sous la forme d'un tableau de bord décisionnel en 6 sections interactives traduites en français. Section 1: Vue d'ensemble stratégique et KPIs énergétiques nationaux. Section 2: Explorateur AIS de la flotte de navires en temps réel avec filtres multi-critères. Section 3: Architecture des pôles portuaires et flux de cabotage national. Section 4: Simulateur interactif de décomposition des prix des carburants et impact socio-économique. Section 5: Matrice géopolitique de sécurité des routes d'approvisionnement (immunité face aux détroits d'Hormuz et Bab-el-Mandeb). Section 6: Plan d'action stratégique et références institutionnelles officielles (APA 7ème édition). -->
    <!-- Visualization & Content Choices: 1. Vessel Tracking Data -> Dynamic Table & Chart.js Pie/Bar -> Interactive Search/Filter -> Dynamic filtering by Port/Cargo/Status -> Chart.js; 2. Price Breakdown -> Interactive Dynamic Chart & Simulator Slider -> Drag slider to modify CIF international price -> Dynamic calculation of taxes/margins & consumer impact alert -> Vanilla JS + Chart.js; 3. Port Hierarchy -> Interactive Grid Cards & Visual Tailwind Flow Nodes -> Cabotage supply chain -> Tailwind CSS & Vanilla JS; 4. Geopolitical Routes -> Tabbed Matrix Cards -> Confirms 0 SVG/Mermaid used. -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        sand: {
                            50: '#fdfbf7',
                            100: '#f7f3e9',
                            200: '#ede4d0',
                            800: '#544738',
                        },
                        navy: {
                            800: '#1e293b',
                            900: '#0f172a',
                        },
                        teal: {
                            600: '#0d9488',
                            700: '#0f766e',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>

    <!-- Google Fonts (Inter) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&#038;display=swap" rel="stylesheet">

    <!-- Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fbf9f5;
            color: #1e293b;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 360px;
            }
        }
        .tab-active {
            border-bottom: 3px solid #0d9488;
            color: #0d9488;
            font-weight: 700;
        }
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1ebd9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col antialiased selection:bg-teal-100 selection:text-teal-900">

    <!-- Header / Navbar -->
    <header class="bg-navy-900 text-white sticky top-0 z-50 shadow-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                <div class="flex items-center space-x-3">
                    <span class="text-3xl"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2693.png" alt="⚓" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                    <div>
                        <h1 class="text-lg sm:text-xl font-bold leading-tight">Situation Énergétique dans les Ports Marocains</h1>
                        <p class="text-xs text-sand-200">Rapport stratégique sur les flux de navigation et la sécurité énergétique</p>
                    </div>
                </div>
                <div class="hidden lg:flex items-center space-x-6 text-sm font-medium">
                    <button onclick="scrollToSection('summary')" class="hover:text-teal-400 transition-colors">Tableau de Bord</button>
                    <button onclick="scrollToSection('vessels')" class="hover:text-teal-400 transition-colors">Suivi Maritime AIS</button>
                    <button onclick="scrollToSection('ports')" class="hover:text-teal-400 transition-colors">Pôles Portuaires</button>
                    <button onclick="scrollToSection('pricing')" class="hover:text-teal-400 transition-colors">Simulateur de Prix</button>
                    <button onclick="scrollToSection('geopolitics')" class="hover:text-teal-400 transition-colors">Géopolitique</button>
                    <button onclick="scrollToSection('strategy')" class="hover:text-teal-400 transition-colors">Recommandations</button>
                </div>
                <div class="flex items-center">
                    <span class="bg-teal-700/80 text-teal-100 text-xs px-3 py-1.5 rounded-full font-semibold border border-teal-500/30">
                        Niveau d&#8217;approvisionnement: Normal à Fort
                    </span>
                </div>
            </div>
        </div>
    </header>

    <!-- Author & Attribution Banner -->
    <section class="bg-sand-100 border-b border-sand-200 py-3">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between text-xs sm:text-sm text-slate-700">
            <div class="flex items-center space-x-2 font-semibold text-slate-800">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4dd.png" alt="📝" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Rédigé par le chercheur:</span>
                <span class="text-teal-700 font-bold">Younes Banane</span>
                <span class="text-slate-400">|</span>
                <span>Chercheur en logistique et connectivité internationale &#8211; Chercheur principal à l&#8217;SMSI</span>
            </div>
            <div class="mt-1 sm:mt-0 text-slate-500">
                <span>Source: Suivi AIS MarineTraffic en temps réel + Données institutionnelles officielles (2026)</span>
            </div>
        </div>
    </section>

    <!-- Main Content Container -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">

        <!-- Executive Summary Section -->
        <section id="summary" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Tableau de Bord Exécutif &#038; Cadrage Stratégique</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Décomposition structurelle du secteur des hydrocarbures, dépendance aux importations et chaînes d&#8217;approvisionnement</p>
                </div>
                <p class="text-sm sm:text-base leading-relaxed text-slate-700 text-justify">
                    Le système énergétique national se caractérise par une quasi-totale dépendance aux importations, atteignant <strong>94%</strong> pour les produits pétroliers raffinés à la suite de l&#8217;arrêt forcé de la raffinerie SAMIR à Mohammedia. Cela a entraîné un renchérissement annuel continu de la facture énergétique dépassant <strong>120 milliards de dirhams</strong>. Cette application interactive vise à évaluer la résilience des chaînes d&#8217;approvisionnement nationales en analysant les données de suivi maritime en temps réel (AIS) et en décryptant le paradoxe entre l&#8217;efficacité du ravitaillement physique et la flambée des prix pour le consommateur final.
                </p>

                <!-- KPI Metric Cards Grid -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">Taux de Dépendance Énergétique</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-teal-700 mt-2">94%</div>
                        <span class="text-[11px] text-slate-400 mt-1">Produits raffinés finis</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">Facture Énergétique Annuelle</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-amber-600 mt-2">&gt;120B</div>
                        <span class="text-[11px] text-slate-400 mt-1">Milliards de MAD</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">Occupation des Postes Pétroliers</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-emerald-600 mt-2">100%</div>
                        <span class="text-[11px] text-slate-400 mt-1">Capacité maximale exploitée</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">Flotte Suivie en Temps Réel (AIS)</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-navy-800 mt-2">32 Navires</div>
                        <span class="text-[11px] text-slate-400 mt-1">Pétroliers &#038; Gaziers spécialisés</span>
                    </div>
                </div>

                <!-- Strategic Summary Visual Charts -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <h3 class="text-sm font-bold text-navy-900 mb-2 text-center">Statut Opérationnel des Navires dans les Ports Marocains</h3>
                        <div class="chart-container">
                            <canvas id="vesselStatusChart"></canvas>
                        </div>
                    </div>
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <h3 class="text-sm font-bold text-navy-900 mb-2 text-center">Répartition des Cargaisons Pétrolières et Gazières Suivies</h3>
                        <div class="chart-container">
                            <canvas id="cargoTypeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Live AIS Vessel Intelligence Explorer -->
        <section id="vessels" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Suivi Maritime Exhaustif du Trafic des Navires (AIS)</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Base de données interactive en temps réel du trafic de navires-citernes dans les eaux marocaines</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-600 leading-relaxed mb-6">
                    Ce panneau fournit le suivi précis de 32 navires-citernes (pétrole brut, produits raffinés, gaz liquéfié) identifiés par radar maritime AIS sur les côtes atlantiques et méditerranéennes. Utilisez les options de filtrage et de recherche ci-dessous pour explorer le statut opérationnel, le mouillage et le tirant d&#8217;eau de chaque navire.
                </p>

                <!-- Search and Filters Bar -->
                <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Recherche (Nom, Origine, Cargaison)</label>
                        <input type="text" id="searchInput" oninput="filterVessels()" placeholder="Ex: TULU, Houston, Gaz..." class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Filtrer par Port / Zone</label>
                        <select id="portFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">Tous les ports &#038; zones</option>
                            <option value="Mohammedia">Mohammedia</option>
                            <option value="Jorf Lasfar">Jorf Lasfar</option>
                            <option value="Tanger Med">Tanger Med</option>
                            <option value="Agadir">Agadir</option>
                            <option value="Méditerranée">Voie Méditerranéenne &#038; Détroit</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Filtrer par Statut Maritime</label>
                        <select id="statusFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">Tous les statuts</option>
                            <option value="Moored">À quai (Moored)</option>
                            <option value="Anchor">En zone de mouillage (At Anchor)</option>
                            <option value="Underway">En route / Transit / Manœuvre</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Filtrer par Type de Cargaison</label>
                        <select id="cargoFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">Tous les types de cargaisons</option>
                            <option value="Produits pétroliers">Produits pétroliers / Carburants</option>
                            <option value="LPG">Gaz liquéfié (GPL / GNL)</option>
                            <option value="Brut">Pétrole brut (Crude Oil)</option>
                            <option value="Bitume">Bitume &#038; Produits chimiques</option>
                        </select>
                    </div>
                </div>

                <!-- Vessels Table -->
                <div class="overflow-x-auto rounded-xl border border-slate-200">
                    <table class="w-full text-left text-xs">
                        <thead class="bg-navy-900 text-white font-semibold">
                            <tr>
                                <th class="p-3">Port / Zone</th>
                                <th class="p-3">Nom du Navire</th>
                                <th class="p-3">Type de Cargaison</th>
                                <th class="p-3">Pavillon</th>
                                <th class="p-3">Statut Maritime</th>
                                <th class="p-3 text-center">Tirant d&#8217;eau (m)</th>
                                <th class="p-3">Origine / Port Précédent</th>
                                <th class="p-3">Rôle Opérationnel &#038; Impact Logistique</th>
                            </tr>
                        </thead>
                        <tbody id="vesselsTableBody" class="divide-y divide-slate-200 bg-white">
                            <!-- Populated dynamically via JavaScript -->
                        </tbody>
                    </table>
                </div>
                <div id="noResults" class="hidden text-center py-8 text-slate-500 text-xs">
                    Aucun navire ne correspond aux critères de recherche sélectionnés.
                </div>
            </div>
        </section>

        <!-- Port Hub Architecture & Cabotage Flow -->
        <section id="ports" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Analyse Logistique et Répartition Fonctionnelle des Pôles Portuaires</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Intégration du modèle &#8220;Hub-and-Spoke&#8221; et de la navigation de cabotage national</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    Les données de terrain révèlent une structure logistique intégrée fonctionnant selon le modèle &#8220;Hub-and-Spoke&#8221;. Les rôles sont répartis entre les ports marocains en fonction des capacités d&#8217;accueil, du tirant d&#8217;eau et des infrastructures industrielles. Cliquez sur un pôle portuaire ci-dessous pour découvrir ses spécificités.
                </p>

                <!-- Dynamic Port Selector Cards -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                    <button onclick="selectPortDetails('TM')" id="btn-port-TM" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-teal-600 text-left hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ec.png" alt="🏬" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-teal-100 text-teal-800 px-2 py-0.5 rounded">Hub Central</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">Tanger Med</h3>
                        <p class="text-xs text-slate-500 mt-1">Stockage stratégique, transbordement et avitaillement des navires (Bunkering)</p>
                    </button>
                    <button onclick="selectPortDetails('MH')" id="btn-port-MH" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-left hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3d9.png" alt="🏙" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Distribution Urbaine</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">Port de Mohammedia</h3>
                        <p class="text-xs text-slate-500 mt-1">Approvisionnement du pôle urbain du Grand Casablanca et du Centre</p>
                    </button>
                    <button onclick="selectPortDetails('JF')" id="btn-port-JF" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-left hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ed.png" alt="🏭" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-blue-100 text-blue-800 px-2 py-0.5 rounded">Pôle Industriel Lourd</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">Jorf Lasfar</h3>
                        <p class="text-xs text-slate-500 mt-1">Eaux profondes, complexe OCP, fioul industriel et gaz de pétrole liquéfié</p>
                    </button>
                    <button onclick="selectPortDetails('AG')" id="btn-port-AG" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-left hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f30a.png" alt="🌊" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">Portail du Sud</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">Port d&#8217;Agadir</h3>
                        <p class="text-xs text-slate-500 mt-1">Gaz butane pour la région Souss-Massa et carburant de la flotte de pêche</p>
                    </button>
                </div>

                <!-- Selected Port Description Panel -->
                <div id="portDetailPanel" class="bg-slate-50 p-6 rounded-xl border border-slate-200">
                    <!-- Populated via JS -->
                </div>

                <!-- Cabotage Flow Visualizer (Tailwind HTML Flow Diagram) -->
                <div class="mt-8 border-t border-slate-200 pt-6">
                    <h3 class="text-sm font-bold text-navy-900 mb-4">Schéma des Flux de Navigation de Cabotage National (Pipeline Maritime)</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-teal-700">1. Ligne d&#8217;Approvisionnement Nord (Tanger Med)</span>
                                <p class="text-slate-600 mt-1">Réception des super-cargaisons transocéaniques (tirant d&#8217;eau jusqu&#8217;à 11,9m) et rediffusion via barges et caboteurs.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center justify-between">
                                <span>Navires navettes: TULU, PRIMA N, KASSOS</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-blue-700">2. Ligne de Distribution Centre (Jorf Lasfar)</span>
                                <p class="text-slate-600 mt-1">Accueil des pétroliers géants (ORWELL avec 12,3m de tirant d&#8217;eau) et redistribution pétrolière vers le Centre et le Sud.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center justify-between">
                                <span>Liaison Sud: TINGIS</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-emerald-700">3. Ligne d&#8217;Alimentation Sud (Agadir &#038; Sud)</span>
                                <p class="text-slate-600 mt-1">Réception directe (ECO GALAXY) et connexion de cabotage avec Jorf Lasfar pour sécuriser le butane et le carburant de pêche.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center justify-between">
                                <span>Ravitaillement flotte: PS OUFELLA</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2693.png" alt="⚓" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Price Breakdown & Price Simulator Section -->
        <section id="pricing" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-amber-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Décomposition de la Structure des Prix et Simulateur d&#8217;Inflation</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Analyse du paradoxe entre abondance physique du carburant et hausse des prix à la pompe</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    Malgré la grande fluidité logistique dans les ports marocains, le pouvoir d&#8217;achat fait face à des tensions sur les prix répercutant les fluctuations du marché Platts CIF Med, la fiscalité et les marges. Utilisez le <strong>simulateur interactif</strong> ci-dessous pour modifier le prix international à l&#8217;importation (CIF) et observer son impact immédiat sur le prix final à la pompe.
                </p>

                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                    <!-- Price Simulator Controls -->
                    <div class="lg:col-span-5 bg-sand-50 p-5 rounded-xl border border-sand-200 space-y-4">
                        <h3 class="font-bold text-navy-900 text-sm border-b border-sand-200 pb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f39b.png" alt="🎛" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Simulateur du prix du Gazole (MAD / Litre)</h3>
                        
                        <div>
                            <div class="flex justify-between text-xs font-semibold mb-1">
                                <span>Prix d&#8217;achat international CIF:</span>
                                <span id="cifVal" class="text-teal-700 font-bold">7.50 MAD</span>
                            </div>
                            <input type="range" id="cifSlider" min="4.50" max="12.00" step="0.25" value="7.50" oninput="updatePriceSimulation()" class="w-full accent-teal-600 cursor-pointer">
                            <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                                <span>Stabilité (4.50)</span>
                                <span>Référence (7.50)</span>
                                <span>Choc sévère (12.00)</span>
                            </div>
                        </div>

                        <!-- Calculated Price Components Output -->
                        <div class="space-y-2 text-xs pt-2 border-t border-sand-200">
                            <div class="flex justify-between">
                                <span class="text-slate-600">Taxe Intérieure de Consommation (TIC fixe):</span>
                                <span id="ticVal" class="font-semibold text-slate-800">3.76 MAD</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-600">Taxe sur la Valeur Ajoutée (TVA 10%):</span>
                                <span id="tvaVal" class="font-semibold text-slate-800">1.22 MAD</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-600">Marges de distribution &#038; logistique:</span>
                                <span id="marginVal" class="font-semibold text-slate-800">0.90 MAD</span>
                            </div>
                            <div class="flex justify-between text-sm font-extrabold pt-2 border-t border-sand-300 text-navy-900">
                                <span>Prix final estimé à la pompe:</span>
                                <span id="totalPriceVal" class="text-amber-700">13.38 MAD</span>
                            </div>
                        </div>

                        <!-- Socio-Economic Impact Alert Box -->
                        <div id="impactAlert" class="p-3 rounded-lg bg-amber-50 border border-amber-200 text-xs text-amber-900 leading-normal">
                            <!-- Populated via JS based on simulation -->
                        </div>
                    </div>

                    <!-- Price Composition Chart -->
                    <div class="lg:col-span-7 bg-slate-50 p-5 rounded-xl border border-slate-200">
                        <h3 class="font-bold text-navy-900 text-sm mb-2 text-center">Structure en pourcentage du prix de référence (13,38 MAD/L)</h3>
                        <div class="chart-container">
                            <canvas id="priceBreakdownChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Socio-Economic Impact Survey Findings -->
                <div class="mt-8 bg-sand-100 p-5 rounded-xl border border-sand-200">
                    <h3 class="font-bold text-navy-900 text-sm mb-3"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ca.png" alt="📊" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Résultats d&#8217;enquête: Comportement des ménages lors de la hausse des carburants</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center text-xs">
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-red-600">93.3%</div>
                            <p class="text-slate-600 mt-1">Sont contraints de réduire leurs dépenses de santé, d&#8217;alimentation ou d&#8217;éducation si le prix dépasse 15 MAD.</p>
                        </div>
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-amber-600">95.4%</div>
                            <p class="text-slate-600 mt-1">Annulent ou réduisent fortement leurs dépenses non essentielles.</p>
                        </div>
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-blue-600">85.4%</div>
                            <p class="text-slate-600 mt-1">Restreignent l&#8217;utilisation des moyens de transport individuels et collectifs.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Geopolitical Supply Routes & Chokepoints Immunity -->
        <section id="geopolitics" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Géopolitique des Voies d&#8217;Approvisionnement et Sécurité des Détroits</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Évaluation du degré d&#8217;immunité des chaînes de ravitaillement marocaines face aux tensions au Moyen-Orient</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    L&#8217;analyse des routes maritimes montre un positionnement géographique favorable mettant le Maroc à l&#8217;abri des répercussions militaires directes d&#8217;un éventuel blocage du détroit d&#8217;Hormuz ou de Bab-el-Mandeb. Le pays s&#8217;appuie sur une flotte évoluant principalement en Méditerranée occidentale et sur l&#8217;Océan Atlantique.
                </p>

                <!-- Routes Safety Cards Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">Méditerranée Occidentale &#038; Centrale</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">Risque très faible</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">Raffineries d&#8217;Italie (Sarroch, Augusta), d&#8217;Espagne (Carthagène), de Grèce (Corinthe) et de Tunisie.</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Navires: INNOVATOR, BYZANTION, HISTRIA NARVI
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">Océan Atlantique &#038; Amérique du Nord</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">Route ouverte &#038; sécurisée</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">Ports du Golfe du Mexique aux États-Unis (Houston, Nouvelle-Orléans).</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Navires: GAS BARBAROSSA, PIS FLORES
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">Afrique de l&#8217;Ouest &#038; Caraïbes</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">Diversification forte</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">Guinée (Kamsar), Sénégal (Dakar), et Trinité-et-Tobago (Port-d&#8217;Espagne).</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Navires: ORWELL, BALTIC ICE, GREEN ETERNITY
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">Europe du Nord-Ouest</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">Ligne régulière</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">Pays-Bas (Zeeland) et Belgique (Anvers) pour le bitume et le GPL spécialisé.</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Navires: XING HAI WAN, ECO GALAXY
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors md:col-span-2 lg:col-span-2">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">Péninsule Arabique (Hors Hormuz)</span>
                            <span class="bg-blue-100 text-blue-800 text-[10px] px-2 py-0.5 rounded font-bold">Exception géographique sécurisée</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">
                            La cargaison en provenance du Golfe (navire <em>GAS AMMON</em>) est partie du port de <strong>Salalah dans le Sultanat d&#8217;Oman</strong>, directement situé sur la mer d&#8217;Arabie et l&#8217;Océan Indien, c&#8217;est-à-dire en dehors du détroit d&#8217;Hormuz.
                        </p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            Conclusion: Absence de dépendance directe vis-à-vis du détroit d&#8217;Hormuz ou de Bab-el-Mandeb.
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Strategic Roadmap & Recommendations -->
        <section id="strategy" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-l-4 border-teal-600 pl-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">Feuille de Route Stratégique et Références Officielle</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">Recommandations pour la souveraineté énergétique et références académiques (APA 7th Edition)</p>
                </div>

                <!-- Policy Tabs Header -->
                <div class="flex border-b border-slate-200 space-x-4 text-xs sm:text-sm overflow-x-auto pb-1 mb-6">
                    <button onclick="switchPolicyTab('tab1')" id="tab1-btn" class="tab-active py-2 px-3 font-bold whitespace-nowrap">1. Raffinerie SAMIR</button>
                    <button onclick="switchPolicyTab('tab2')" id="tab2-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">2. TIC Flottante</button>
                    <button onclick="switchPolicyTab('tab3')" id="tab3-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">3. Plafonnement des Marges</button>
                    <button onclick="switchPolicyTab('tab4')" id="tab4-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">4. Nador West Med</button>
                    <button onclick="switchPolicyTab('tab5')" id="tab5-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">5. Transport Propre &#038; &#8220;Mouwakaba&#8221;</button>
                </div>

                <!-- Policy Content Panels -->
                <div id="tab1-content" class="policy-content space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ed.png" alt="🏭" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Relance du raffinage local et sécurisation du stockage stratégique</h3>
                        <p>
                            La réactivation de la raffinerie SAMIR constitue le pilier d&#8217;une souveraineté énergétique retrouvée. Le raffinage local permettrait de couvrir jusqu&#8217;à <strong>65% de la demande nationale</strong> en gazole et essence, tout en conservant les marges de raffinage actuellement captées à l&#8217;étranger. L&#8217;utilisation de ses capacités de stockage à Mohammedia permettrait en outre de sécuriser les réserves stratégiques du pays.
                        </p>
                    </div>
                </div>

                <div id="tab2-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c9.png" alt="📉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Activation de la Taxe Intérieure de Consommation Flottante (TIC Flottante)</h3>
                        <p>
                            Mise en place d&#8217;un mécanisme fiscal flexible prévoyant la baisse temporaire de la TIC dès que le prix du baril de pétrole franchit le seuil de <strong>85 USD</strong>. L&#8217;objectif est d&#8217;absorber les chocs d&#8217;inflation et de maintenir le prix à la pompe dans une fourchette soutenable de <strong>12,50 à 13,50 MAD/Litre</strong>.
                        </p>
                    </div>
                </div>

                <div id="tab3-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2696.png" alt="⚖" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Encadrement et plafonnement des marges de distribution</h3>
                        <p>
                            En alignement avec les avis du Conseil de la Concurrence, il convient d&#8217;encadrer les marges des sociétés de distribution pendant les périodes de fortes tensions internationales afin de partager l&#8217;effort entre acteurs économiques et ménages, et d&#8217;éviter les décalages de répercussion des baisses de cours mondiaux.
                        </p>
                    </div>
                </div>

                <div id="tab4-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6a2.png" alt="🚢" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Accélération du complexe portuaire &#8220;Nador West Med&#8221;</h3>
                        <p>
                            Le port de Nador West Med offrira des capacités de stockage stratégique dépassant <strong>25 millions de tonnes</strong>. Il abritera également le premier terminal national d&#8217;importation de gaz naturel liquéfié (GNL), soulageant ainsi la façade atlantique et diversifiant les liaisons directes.
                        </p>
                    </div>
                </div>

                <div id="tab5-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f331.png" alt="🌱" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Promotion de la mobilité propre et renforcement du dispositif &#8220;Mouwakaba&#8221;</h3>
                        <p>
                            Élargir les incitations fiscales pour les véhicules hybrides et électriques (dont la part atteint 12,5% des ventes) et pérennisations du soutien direct aux professionnels du transport routier via la plateforme &#8220;Mouwakaba&#8221; afin de contenir la répercussion des coûts sur les produits de première nécessité.
                        </p>
                    </div>
                </div>

                <!-- Academic & Institutional References Section (APA 7th Edition) -->
                <div class="mt-8 pt-6 border-t border-slate-200 text-xs text-slate-600">
                    <h3 class="font-bold text-navy-900 text-sm mb-3">Liste des Références Officielle (APA 7th Edition)</h3>
                    <ul class="space-y-2 text-left">
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>Institut d&#8217;Études Sociales et Média (SMSI).</strong> (2026). <em>Rapport d&#8217;analyse de la situation énergétique dans les ports marocains et des chaînes d&#8217;approvisionnement des hydrocarbures</em> (Rédigé par Younes Banane). Publications de l&#8217;SMSI, Casablanca.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>MarineTraffic.</strong> (2026). <em>Global Vessel Tracking and AIS Maritime Intelligence Platform</em> [Jeu de données]. MarineTraffic. https://www.marinetraffic.com
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>Conseil de la Concurrence.</strong> (2023). <em>Avis relatif au suivi des engagements pris par les sociétés de distribution de gazole et d&#8217;essence</em> (Avis n° R/3/23). Royaume du Maroc, Rabat.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>Agence Nationale des Ports (ANP).</strong> (2024). <em>Rapport statistique du trafic portuaire dans les ports marocains</em>. Ministère de l&#8217;Équipement et de l&#8217;Eau, Royaume du Maroc.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>Ministère de la Transition Énergétique et du Développement Durable.</strong> (2024). <em>Bulletin statistique annuel du secteur des hydrocarbures et de l&#8217;énergie</em>. Royaume du Maroc, Rabat.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>Haut-Commissariat au Plan (HCP).</strong> (2024). <em>Indice des prix à la consommation et impact du coût des carburants sur le niveau de vie des ménages</em>. Rabat, Maroc.
                        </li>
                    </ul>
                </div>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer class="bg-navy-900 text-slate-400 py-6 border-t border-slate-800 text-xs">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center space-y-3 sm:space-y-0">
            <div>
                <span>© 2026 Rédigé par Younes Banane &#8211; Institut d&#8217;Études Sociales et Média (SMSI), Maroc.</span>
            </div>
            <div class="flex space-x-4 text-sand-200">
                <span>Intelligence Maritime AIS</span>
                <span>•</span>
                <span>Analyse des Chaînes d&#8217;Approvisionnement</span>
            </div>
        </div>
    </footer>

    <!-- JavaScript Dataset and Interactive Logic -->
    <script>
        // Full Dataset extracted from the Strategic Report (32 Vessels) - French Version
        const vesselsData = [
            { port: "Mohammedia", name: "TULU", type: "Produits pétroliers / Chimique", flag: "Barbade &#x1f1e7;&#x1f1e7;", status: "Moored", draught: 12.0, origin: "Tanger Med (MA PTM)", eta: "10 Octobre", impact: "Déchargement massif pour alimenter le réseau de la région du Grand Casablanca" },
            { port: "Mohammedia", name: "PRIMA N", type: "Produits pétroliers raffinés", flag: "Malte &#x1f1f2;&#x1f1f9;", status: "Moored", draught: 6.7, origin: "Tanger Med (MA PTM)", eta: "12 Octobre", impact: "Cabotage régulier pour approvisionner les dépôts des distributeurs" },
            { port: "Mohammedia", name: "ETRUSCO", type: "Produits pétroliers / Chimique", flag: "Italie &#x1f1ee;&#x1f1f9;", status: "Moored", draught: 6.1, origin: "Carthagène / Espagne (ES CAR)", eta: "11 Octobre", impact: "Importation directe de dérivés raffinés des raffineries de Méditerranée occidentale" },
            { port: "Mohammedia", name: "EVREN", type: "Pétrole brut (Crude Oil)", flag: "Palaos &#x1f1f5;&#x1f1fc;", status: "Anchor", draught: 10.5, origin: "Tanger Med (MA PTM)", eta: "11 Octobre", impact: "Cargaison de pétrole brut en attente d'accostage ou de pompage vers les réservoirs" },
            { port: "Mohammedia", name: "INNOVATOR", type: "Carburants / Chimique", flag: "Libéria &#x1f1f1;&#x1f1f7;", status: "Anchor", draught: 10.4, origin: "Augusta / Italie (IT AUG)", eta: "11 Octobre", impact: "Cargaison de carburant raffiné importée de Sicile en attente de quai" },
            { port: "Mohammedia", name: "EPIC MADEIRA", type: "Gaz liquéfié (GPL)", flag: "Singapour &#x1f1f8;&#x1f1ec;", status: "Anchor", draught: 6.5, origin: "Porto Foxi / Italie (IT PFX)", eta: "12 Octobre", impact: "Sécurisation du gaz butane domestique et industriel en attente de déchargement" },
            { port: "Mohammedia", name: "KASSOS", type: "Produits pétroliers raffinés", flag: "Chypre &#x1f1e8;&#x1f1fe;", status: "Anchor", draught: 6.7, origin: "Tanger Med (MA PTM)", eta: "11 Octobre", impact: "Ligne de cabotage régulière assurant la rotation des stocks commerciaux" },
            { port: "Mohammedia", name: "YM URANUS", type: "Produits pétroliers / Chimique", flag: "Malte &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 6.2, origin: "Radès / Tunisie (TN RDS)", eta: "11 Octobre", impact: "Approvisionnement commercial complémentaire inter-maghrébin" },
            { port: "Mohammedia", name: "XING HAI WAN", type: "Bitume & Asphalte", flag: "Panama &#x1f1f5;&#x1f1e6;", status: "Anchor", draught: 6.2, origin: "Zeeland / Pays-Bas (NL ZBW)", eta: "12 Octobre", impact: "Cargaison spécialisée pour les projets d'infrastructures routières" },
            
            { port: "Jorf Lasfar", name: "PIS FLORES", type: "Pétrole / Pétrochimie", flag: "Panama &#x1f1f5;&#x1f1e6;", status: "Moored", draught: 11.8, origin: "Nouvelle-Orléans / USA (US MSY)", eta: "12 Octobre", impact: "Importation transatlantique directe à forte capacité pour le secteur énergétique" },
            { port: "Jorf Lasfar", name: "BYZANTION", type: "Carburants / Chimique industriel", flag: "Îles Marshall &#x1f1f2;&#x1f1ed;", status: "Moored", draught: 9.0, origin: "Milazzo / Italie (IT MLZ)", eta: "11 Octobre", impact: "Approvisionnement pour le fonctionnement du complexe industriel OCP" },
            { port: "Jorf Lasfar", name: "GAS AMMON", type: "Gaz liquéfié (GPL)", flag: "Libéria &#x1f1f1;&#x1f1f7;", status: "Moored", draught: 10.4, origin: "Salalah / Oman (OM SLL)", eta: "11 Octobre", impact: "Cargaison majeure de GPL en provenance de la mer d'Arabie (hors détroit d'Hormuz)" },
            { port: "Jorf Lasfar", name: "FERICEK", type: "Pétrole / Chimique", flag: "Turquie &#x1f1f9;&#x1f1f7;", status: "Underway", draught: 5.4, origin: "Safi / Maroc (MA SFI)", eta: "13 Octobre", impact: "Liaison côtière pour le transfert de produits chimiques entre plateformes" },
            { port: "Jorf Lasfar", name: "DERIN", type: "Produits pétroliers / Fioul lourd", flag: "Barbade &#x1f1e7;&#x1f1e7;", status: "Anchor", draught: 11.3, origin: "Tanger Med (MA PTM)", eta: "09 Octobre", impact: "Cabotage haute capacité pour alimenter les centrales électriques" },
            { port: "Jorf Lasfar", name: "GREEN ETERNITY", type: "Gaz liquéfié / Chimique", flag: "Singapour &#x1f1f8;&#x1f1ec;", status: "Anchor", draught: 10.4, origin: "Trinité-et-Tobago (TT PTS)", eta: "11 Octobre", impact: "Importations caribéennes longue distance pour l'industrie des engrais" },
            { port: "Jorf Lasfar", name: "EUROSAILOR", type: "Produits pétroliers / Chimique", flag: "Malte &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 9.1, origin: "Jorf Lasfar (MA JFL)", eta: "11 Octobre", impact: "Rotation opérationnelle locale et repositionnement vers postes spécialisés" },
            { port: "Jorf Lasfar", name: "ORWELL", type: "Pétrole / Chimique", flag: "Libéria &#x1f1f1;&#x1f1f7;", status: "Underway", draught: 12.3, origin: "Kamsar / Guinée (GN KMR)", eta: "13 Octobre", impact: "Super-tanker (plus fort tirant d'eau enregistré) en provenance d'Afrique de l'Ouest" },

            { port: "Tanger Med", name: "GAS BARBAROSSA", type: "Gaz liquéfié (GPL)", flag: "Panama &#x1f1f5;&#x1f1e6;", status: "Moored", draught: 11.9, origin: "Houston / USA (US HOU)", eta: "12 Octobre", impact: "Déchargement d'une cargaison américaine majeure dans les réservoirs de stockage" },
            { port: "Tanger Med", name: "ANDROS", type: "Produits pétroliers", flag: "Chypre &#x1f1e8;&#x1f1fe;", status: "Moored", draught: 6.0, origin: "Tanger Med 2", eta: "12 Octobre", impact: "Transbordement interne et service de bunkering dans le bassin portuaire" },
            { port: "Tanger Med", name: "BALEA", type: "Produits pétroliers raffinés", flag: "Maroc &#x1f1f2;&#x1f1e6;", status: "Moored", draught: 3.0, origin: "Tanger Med (MA PTM)", eta: "11 Octobre", impact: "Barge marocaine spécialisée dans le ravitaillement des navires (Bunkering)" },
            { port: "Méditerranée", name: "BW BRUSSELS", type: "Gaz naturel liquéfié (GNL)", flag: "Singapour &#x1f1f8;&#x1f1ec;", status: "Underway", draught: 9.1, origin: "Idku / Égypte (EG AIS)", eta: "13 Octobre", impact: "Méthanier international en transit dans le détroit sous affrètement" },
            { port: "Tanger Med", name: "MARS", type: "Produits pétroliers", flag: "Chypre &#x1f1e8;&#x1f1fe;", status: "Anchor", draught: 5.2, origin: "Gibraltar (GI GIB)", eta: "12 Octobre", impact: "En attente d'entrée pour avitaillement ou opérations de bunkering" },
            { port: "Tanger Med", name: "CIELO DI CAPRI", type: "Pétrole / Chimique", flag: "Malte &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 9.1, origin: "Ceuta (ES CEU)", eta: "11 Octobre", impact: "Cargaison régionale dans le détroit en attente d'accostage aux dépôts" },
            { port: "Tanger Med", name: "ITHAKI II", type: "Produits pétroliers", flag: "Chypre &#x1f1e8;&#x1f1fe;", status: "Underway", draught: 5.9, origin: "Gibraltar (GI GIB)", eta: "13 Octobre", impact: "Rotation navette rapide entre les plateformes logistiques du détroit" },

            { port: "Méditerranée", name: "HISTRIA NARVI", type: "Pétrole / Chimique", flag: "Malte &#x1f1f2;&#x1f1f9;", status: "Underway", draught: 10.0, origin: "Sarroch / Italie (IT SPA)", eta: "14 Octobre", impact: "Carburant industriel de Sardaigne à destination directe de Jorf Lasfar" },
            { port: "Méditerranée", name: "HAZAR", type: "Produits pétroliers", flag: "Panama &#x1f1f5;&#x1f1e6;", status: "Underway", draught: 10.2, origin: "Corinthe / Grèce (GR AGT)", eta: "12 Octobre", impact: "Cargaison raffinée grecque destinée au stockage à Tanger Med" },
            { port: "Méditerranée", name: "BALTIC ICE", type: "Pétrole / Chimique", flag: "Libéria &#x1f1f1;&#x1f1f7;", status: "Underway", draught: 7.6, origin: "Dakar / Sénégal (SN DKR)", eta: "14 Octobre", impact: "Cargaison d'Afrique de l'Ouest en attente d'autorisation d'entrée à Tanger" },
            { port: "Méditerranée", name: "KRITI EPISKOPI", type: "Pétrole / Chimique", flag: "Libéria &#x1f1f1;&#x1f1f7;", status: "Anchor", draught: 10.4, origin: "Corinthe / Grèce (GR AGT)", eta: "16 Septembre", impact: "Cargaison grecque à fort tirant d'eau en attente de déchargement à Tanger" },

            { port: "Agadir", name: "ECO GALAXY", type: "Gaz liquéfié / Chimique", flag: "Îles Marshall &#x1f1f2;&#x1f1ed;", status: "Moored", draught: 6.6, origin: "Anvers / Belgique (BE ANR)", eta: "12 Octobre", impact: "Importation directe de gaz butane pour la consommation de la région Souss" },
            { port: "Agadir", name: "TINGIS", type: "Pétrole / Chimique", flag: "Maroc &#x1f1f2;&#x1f1e6;", status: "Anchor", draught: 7.2, origin: "Jorf Lasfar (MA JFL)", eta: "10 Octobre", impact: "Ligne de cabotage national transférant du carburant de Jorf vers le Sud" },
            { port: "Agadir", name: "BWEK BREEZE", type: "Gaz liquéfié / Chimique", flag: "Malte &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 6.3, origin: "La Corogne / Espagne (ES LCG)", eta: "10 Octobre", impact: "Cargaison de gaz liquéfié de réserve en attente de libération du poste" },
            { port: "Agadir", name: "PS OUFELLA", type: "Produits pétroliers", flag: "Maroc &#x1f1f2;&#x1f1e6;", status: "Anchor", draught: 4.0, origin: "Agadir (Mouvement local)", eta: "12 Octobre", impact: "Ravitaillement de la flotte de pêche côtière et hauturière" }
        ];

        // Port Detail Descriptions Database (French)
        const portDetailsDB = {
            TM: {
                title: "Tanger Med (Hub Central & Plateforme Internationale)",
                badge: "Stockage & Transbordement",
                text: "Tanger Med constitue le cœur battant du réseau d'approvisionnement national en tant que hub d'importation globale, de stockage stratégique et de transbordement. Ses quais à très grands tirants d'eau accueillent les plus grands navires-citernes (ex: GAS BARBAROSSA, tirant de 11,9m). Le port assure également le ravitaillement en combustible marin (Bunkering) via des barges comme le navire marocain BALEA."
            },
            MH: {
                title: "Port de Mohammedia (Pôle de Distribution Urbaine)",
                badge: "Grand Casablanca & Centre",
                text: "Le port de Mohammedia assure la distribution directe vers le principal bassin de consommation du pays (Grand Casablanca et région Centre). Ses postes pétroliers tournent à pleine capacité avec 3 navires en déchargement simultané (TULU, PRIMA N, ETRUSCO) et 6 en attente au mouillage. Le port marchand de Casablanca a été volontairement libéré du trafic des hydrocarbures par mesure de sécurité."
            },
            JF: {
                title: "Jorf Lasfar (Pôle Industriel Lourd & Eaux Profondes)",
                badge: "Industrie & Énergie",
                text: "Jorf Lasfar remplit le rôle de pôle industriel pour les navires à très fort tirant d'eau (10m à plus de 12,3m pour le super-tanker ORWELL). Ces flux répondent aux besoins massifs du complexe phosphatique OCP, approvisionnent les centrales thermiques en fioul lourd et fournissent le gaz butane à grande échelle."
            },
            AG: {
                title: "Port d'Agadir (Portail Énergétique du Sud)",
                badge: "Souss-Massa & Provinces du Sud",
                text: "Le port d'Agadir sécurise l'approvisionnement des secteurs agricole, urbain et de la pêche dans la région Souss-Massa et les provinces du Sud. Il combine l'importation directe de GPL depuis l'Europe du Nord (navire ECO GALAXY), le cabotage depuis Jorf Lasfar (navire marocain TINGIS) et le ravitaillement des chalutiers (navire PS OUFELLA)."
            }
        };

        // DOM Ready Initialization
        document.addEventListener('DOMContentLoaded', () => {
            renderVesselsTable(vesselsData);
            initStatusChart();
            initCargoChart();
            initPriceBreakdownChart();
            selectPortDetails('TM');
            updatePriceSimulation();
        });

        // Filter and Render Vessels
        function renderVesselsTable(data) {
            const tbody = document.getElementById('vesselsTableBody');
            const noResults = document.getElementById('noResults');
            tbody.innerHTML = '';

            if (data.length === 0) {
                noResults.classList.remove('hidden');
                return;
            } else {
                noResults.classList.add('hidden');
            }

            data.forEach(v => {
                let statusBadge = '';
                if (v.status === 'Moored') {
                    statusBadge = '<span class="bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold">À quai</span>';
                } else if (v.status === 'Anchor') {
                    statusBadge = '<span class="bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-bold">Au mouillage</span>';
                } else {
                    statusBadge = '<span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded font-bold">En route / Transit</span>';
                }

                const tr = document.createElement('tr');
                tr.className = "hover:bg-sand-50 transition-colors";
                tr.innerHTML = `
                    <td class="p-3 font-bold text-navy-900">${v.port}</td>
                    <td class="p-3 font-extrabold text-teal-700">${v.name}</td>
                    <td class="p-3 text-slate-700">${v.type}</td>
                    <td class="p-3">${v.flag}</td>
                    <td class="p-3">${statusBadge}</td>
                    <td class="p-3 text-center font-bold text-slate-800">${v.draught}</td>
                    <td class="p-3 text-slate-600">${v.origin}</td>
                    <td class="p-3 text-slate-600 leading-snug">${v.impact}</td>
                `;
                tbody.appendChild(tr);
            });
        }

        function filterVessels() {
            const search = document.getElementById('searchInput').value.toLowerCase();
            const port = document.getElementById('portFilter').value;
            const status = document.getElementById('statusFilter').value;
            const cargo = document.getElementById('cargoFilter').value;

            const filtered = vesselsData.filter(v => {
                const matchesSearch = v.name.toLowerCase().includes(search) || 
                                      v.origin.toLowerCase().includes(search) || 
                                      v.type.toLowerCase().includes(search);
                const matchesPort = (port === 'ALL') || v.port.includes(port);
                const matchesStatus = (status === 'ALL') || (v.status === status);
                
                let matchesCargo = true;
                if (cargo !== 'ALL') {
                    if (cargo === 'LPG') matchesCargo = v.type.includes('GPL') || v.type.includes('GNL') || v.type.includes('Gaz');
                    else if (cargo === 'Brut') matchesCargo = v.type.includes('brut') || v.type.includes('Crude');
                    else if (cargo === 'Bitume') matchesCargo = v.type.includes('Bitume') || v.type.includes('Chimique');
                    else if (cargo === 'Produits pétroliers') matchesCargo = v.type.includes('Produits') || v.type.includes('Carburants');
                }

                return matchesSearch && matchesPort && matchesStatus && matchesCargo;
            });

            renderVesselsTable(filtered);
        }

        // Port Details Selection Handler
        function selectPortDetails(key) {
            document.querySelectorAll('.port-card').forEach(c => c.classList.remove('border-teal-600'));
            document.querySelectorAll('.port-card').forEach(c => c.classList.add('border-transparent'));
            
            const btn = document.getElementById(`btn-port-${key}`);
            if (btn) {
                btn.classList.remove('border-transparent');
                btn.classList.add('border-teal-600');
            }

            const info = portDetailsDB[key];
            const panel = document.getElementById('portDetailPanel');
            panel.innerHTML = `
                <div class="flex items-center justify-between border-b border-slate-200 pb-2 mb-3">
                    <h3 class="font-bold text-navy-900 text-base">${info.title}</h3>
                    <span class="bg-teal-700 text-white text-xs px-2.5 py-1 rounded-full">${info.badge}</span>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed">${info.text}</p>
            `;
        }

        // Price Simulator Logic
        function updatePriceSimulation() {
            const cif = parseFloat(document.getElementById('cifSlider').value);
            const tic = 3.76;
            const tva = (cif + tic) * 0.10;
            const margin = 0.90;
            const total = cif + tic + tva + margin;

            document.getElementById('cifVal').innerText = cif.toFixed(2) + ' MAD';
            document.getElementById('ticVal').innerText = tic.toFixed(2) + ' MAD';
            document.getElementById('tvaVal').innerText = tva.toFixed(2) + ' MAD';
            document.getElementById('marginVal').innerText = margin.toFixed(2) + ' MAD';
            document.getElementById('totalPriceVal').innerText = total.toFixed(2) + ' MAD';

            const alertBox = document.getElementById('impactAlert');
            if (total > 15.00) {
                alertBox.className = "p-3 rounded-lg bg-red-100 border border-red-300 text-xs text-red-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x26a0; Zone de choc tarifaire très élevé (> 15.00 MAD/L):</strong><br>
                    Impact lourd sur le pouvoir d'achat des ménages, réduction contrainte des dépenses de santé/éducation et forte hausse de l'inflation logistique.
                `;
            } else if (total > 13.00) {
                alertBox.className = "p-3 rounded-lg bg-amber-50 border border-amber-200 text-xs text-amber-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x26a0; Zone de tension modérée sur les prix (13.00 - 15.00 MAD/L):</strong><br>
                    Génération d'une pression inflationniste sur le transport routier de marchandises (+1.4% à +2.5% sur le coût de la vie).
                `;
            } else {
                alertBox.className = "p-3 rounded-lg bg-emerald-50 border border-emerald-200 text-xs text-emerald-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x2705; Zone de stabilité et de soutien au pouvoir d'achat (< 13.00 MAD/L):</strong><br>
                    Amélioration de la compétitivité économique des entreprises et modération des prix des produits de première nécessité.
                `;
            }
        }

        // Policy Tabs Handler
        function switchPolicyTab(tabId) {
            document.querySelectorAll('.policy-content').forEach(c => c.classList.add('hidden'));
            document.querySelectorAll('[id$="-btn"]').forEach(b => {
                b.classList.remove('tab-active');
                b.classList.add('text-slate-500', 'font-semibold');
            });

            document.getElementById(`${tabId}-content`).classList.remove('hidden');
            const activeBtn = document.getElementById(`${tabId}-btn`);
            activeBtn.classList.add('tab-active');
            activeBtn.classList.remove('text-slate-500');
        }

        // Chart.js Visualizations
        function initStatusChart() {
            const ctx = document.getElementById('vesselStatusChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['À quai (Moored)', 'Zone de mouillage (At Anchor)', 'En route / Transit (Underway)'],
                    datasets: [{
                        data: [11, 15, 6],
                        backgroundColor: ['#0d9488', '#d97706', '#2563eb'],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { font: { family: 'Inter', size: 11 } } },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.raw} navires`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function initCargoChart() {
            const ctx = document.getElementById('cargoTypeChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Produits raffinés', 'Gaz liquéfié (GPL/GNL)', 'Pétrole/Chimique', 'Pétrole brut', 'Bitume'],
                    datasets: [{
                        label: 'Nombre de navires suivis',
                        data: [13, 8, 8, 2, 1],
                        backgroundColor: '#0f172a',
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true, ticks: { stepSize: 2, font: { family: 'Inter' } } },
                        x: { ticks: { font: { family: 'Inter', size: 10 } } }
                    },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `Total: ${context.raw} navires`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function initPriceBreakdownChart() {
            const ctx = document.getElementById('priceBreakdownChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['Prix CIF International (56%)', 'Taxe TIC Fixe (28.1%)', 'Taxe TVA 10% (9.1%)', 'Marges & Logistique (6.8%)'],
                    datasets: [{
                        data: [7.50, 3.76, 1.22, 0.90],
                        backgroundColor: ['#0d9488', '#d97706', '#2563eb', '#64748b'],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { font: { family: 'Inter', size: 11 } } },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.raw} MAD/L`;
                                }
                            }
                        }
                    }
                }
            });
        }

        // Smooth Scroll Helper
        function scrollToSection(id) {
            const el = document.getElementById(id);
            if (el) {
                el.scrollIntoView({ behavior: 'smooth' });
            }
        }
    </script>
</body>
</html>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>الوضعية الطاقية بالموانئ المغربية &#8211; تقرير حول تدفقات الملاحة و مؤشرات الامن الطاقي</title>
		<link>https://sms-institute.com/%d8%a7%d9%84%d9%88%d8%b6%d8%b9%d9%8a%d8%a9-%d8%a7%d9%84%d8%b7%d8%a7%d9%82%d9%8a%d8%a9-%d8%a8%d8%a7%d9%84%d9%85%d9%88%d8%a7%d9%86%d8%a6-%d8%a7%d9%84%d9%85%d8%ba%d8%b1%d8%a8%d9%8a%d8%a9-%d8%aa%d9%82/</link>
		
		<dc:creator><![CDATA[Sanaa Haouata]]></dc:creator>
		<pubDate>Tue, 13 Oct 2026 10:44:38 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1329</guid>

					<description><![CDATA[الوضعية الطاقية بالموانئ المغربية &#8211; لوحة التحليل الاستراتيجي 2026 ⚓ الوضعية الطاقية بالموانئ المغربية تقرير استراتيجي حول تدفقات الملاحة ومؤشرات&#8230;]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الوضعية الطاقية بالموانئ المغربية &#8211; لوحة التحليل الاستراتيجي 2026</title>
    <!-- Chosen Palette: Warm Sand & Maritime Navy (Background: #fbf9f5, Primary Text: #1e293b, Navy Accent: #0f172a, Brand Teal: #0d9488, Gold/Amber Accent: #d97706) -->
    <!-- Application Structure Plan: Designed as a 6-section interactive intelligence dashboard. Section 1: Executive KPI Overview with key national energy metrics. Section 2: Real-time Vessel Intelligence Explorer with full multi-criteria filterable dataset. Section 3: Port Hub Architecture & Cabotage Flow visualizer. Section 4: Interactive Fuel Price Decomposition Simulator with dynamic socio-economic survey impact feedback. Section 5: Geopolitical Supply Route Security Matrix comparing international chokepoints. Section 6: Policy Action Plan with verified official institutional references (APA 7th). Chosen to convert complex maritime AIS tracking and econometric models into a clear, exploratory experience. -->
    <!-- Visualization & Content Choices: 1. Vessel Tracking Data -> Dynamic Table & Chart.js Pie/Bar -> Interactive Search/Filter -> Instant filter by Port/Cargo/Status -> Chart.js; 2. Price Breakdown -> Dynamic Interactive Stacked Bar & Simulator Slider -> Drag slider to modify CIF international price -> Dynamic calculation of taxes/margins & consumer alert threshold -> Custom Vanilla JS + Chart.js; 3. Port Hierarchy -> Interactive Grid Cards & Visual Tailwind Flow Nodes -> Shows Cabotage supply chain -> Pure Tailwind CSS & JS; 4. Geopolitical Routes -> Tabbed Matrix Cards -> Confirms 0 SVG/Mermaid used. -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        sand: {
                            50: '#fdfbf7',
                            100: '#f7f3e9',
                            200: '#ede4d0',
                            800: '#544738',
                        },
                        navy: {
                            800: '#1e293b',
                            900: '#0f172a',
                        },
                        teal: {
                            600: '#0d9488',
                            700: '#0f766e',
                        }
                    },
                    fontFamily: {
                        cairo: ['Cairo', 'sans-serif'],
                    }
                }
            }
        }
    </script>

    <!-- Google Fonts (Cairo) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&#038;display=swap" rel="stylesheet">

    <!-- Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        body {
            font-family: 'Cairo', sans-serif;
            background-color: #fbf9f5;
            color: #1e293b;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 360px;
            }
        }
        .tab-active {
            border-bottom: 3px solid #0d9488;
            color: #0d9488;
            font-weight: 700;
        }
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1ebd9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col antialiased selection:bg-teal-100 selection:text-teal-900">

    <!-- Header / Navbar -->
    <header class="bg-navy-900 text-white sticky top-0 z-50 shadow-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                <div class="flex items-center space-x-3 space-x-reverse">
                    <span class="text-3xl"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2693.png" alt="⚓" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                    <div>
                        <h1 class="text-lg sm:text-xl font-bold leading-tight">الوضعية الطاقية بالموانئ المغربية</h1>
                        <p class="text-xs text-sand-200">تقرير استراتيجي حول تدفقات الملاحة ومؤشرات الأمن الطاقي</p>
                    </div>
                </div>
                <div class="hidden lg:flex items-center space-x-6 space-x-reverse text-sm font-medium">
                    <button onclick="scrollToSection('summary')" class="hover:text-teal-400 transition-colors">اللوحة التنفيذية</button>
                    <button onclick="scrollToSection('vessels')" class="hover:text-teal-400 transition-colors">الرصد الملاحي</button>
                    <button onclick="scrollToSection('ports')" class="hover:text-teal-400 transition-colors">الأقطاب المينائية</button>
                    <button onclick="scrollToSection('pricing')" class="hover:text-teal-400 transition-colors">محاكي الأسعار</button>
                    <button onclick="scrollToSection('geopolitics')" class="hover:text-teal-400 transition-colors">الجغرافيا السياسية</button>
                    <button onclick="scrollToSection('strategy')" class="hover:text-teal-400 transition-colors">التوصيات والمراجع</button>
                </div>
                <div class="flex items-center">
                    <span class="bg-teal-700/80 text-teal-100 text-xs px-3 py-1.5 rounded-full font-semibold border border-teal-500/30">
                        مستوى الإمداد: عادي إلى قوي
                    </span>
                </div>
            </div>
        </div>
    </header>

    <!-- Author & Research Attribution Banner -->
    <section class="bg-sand-100 border-b border-sand-200 py-3">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between text-xs sm:text-sm text-slate-700">
            <div class="flex items-center space-x-2 space-x-reverse font-semibold text-slate-800">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4dd.png" alt="📝" class="wp-smiley" style="height: 1em; max-height: 1em;" /> إعداد الباحث:</span>
                <span class="text-teal-700 font-bold">يونس بنان</span>
                <span class="text-slate-400">|</span>
                <span>باحث في اللوجستيك والربط الدولي وباحث رئيسي بمعهد الدراسات الاجتماعية والإعلامية</span>
            </div>
            <div class="mt-1 sm:mt-0 text-slate-500">
                <span>المصدر: تتبع الرصد الملاحي اللحظي MarineTraffic + معطيات المؤسسات الوطنية الرسمية (2026)</span>
            </div>
        </div>
    </section>

    <!-- Main Content Container -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">

        <!-- Executive Summary Section -->
        <section id="summary" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-r-4 border-teal-600 pr-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">اللوحة التنفيذية والإطار التأطيري</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">تفكيك البنية الهيكلية لقطاع المحروقات والتبعية الاستيرادية وسلاسل التوريد الميدانية</p>
                </div>
                <p class="text-sm sm:text-base leading-relaxed text-slate-700 text-justify">
                    تتسم المنظومة الطاقية بالحقينة الوطنية بتبعية استيرادية شبه كاملة تصل إلى <strong>94%</strong> من حاجياتها من المواد البترولية المكررة، وذلك عقب التوقف القسري لنشاط مصفاة &#8220;سامير&#8221; بمدينة المحمدية. وقد أفضى ذلك إلى تضخم سنوي مستمر في فاتورة الطاقة تجاوز <strong>120 مليار درهم</strong>. يهدف هذا التطبيق التفاعلي إلى تقييم مناعة سلاسل الإمداد الوطنية عبر تحليل بيانات التتبع الملاحي اللحظي (AIS) وتفكيك المفارقة القائمة بين كفاءة التموين المادي واشتعال الأسعار للمستهلك النهائي.
                </p>

                <!-- KPI Metric Cards Grid -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">نسبة التبعية الاستيرادية</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-teal-700 mt-2">94%</div>
                        <span class="text-[11px] text-slate-400 mt-1">منتجات مكررة جاهزة</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">فاتورة الطاقة السنوية</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-amber-600 mt-2">&gt;120B</div>
                        <span class="text-[11px] text-slate-400 mt-1">مليار درهم مغربي</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">إشغال أرصفة المحروقات</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-emerald-600 mt-2">100%</div>
                        <span class="text-[11px] text-slate-400 mt-1">طاقة استيعابية قصوى</span>
                    </div>
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 flex flex-col justify-between">
                        <span class="text-xs text-slate-500 font-semibold">الأسطول المرصود (AIS)</span>
                        <div class="text-2xl sm:text-3xl font-extrabold text-navy-800 mt-2">32 سفينة</div>
                        <span class="text-[11px] text-slate-400 mt-1">ناقلة طاقة متخصصة</span>
                    </div>
                </div>

                <!-- Strategic Summary Visual Charts -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <h3 class="text-sm font-bold text-navy-900 mb-2 text-center">توزيع الوضعية التشغيلية للناقلات بالموانئ المغربية</h3>
                        <div class="chart-container">
                            <canvas id="vesselStatusChart"></canvas>
                        </div>
                    </div>
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <h3 class="text-sm font-bold text-navy-900 mb-2 text-center">توزيع الحمولات النفطية والغازية المرصودة</h3>
                        <div class="chart-container">
                            <canvas id="cargoTypeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Live AIS Vessel Intelligence Explorer -->
        <section id="vessels" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-r-4 border-teal-600 pr-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">الرصد الميداني الشامل لحركة الناقلات (AIS)</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">قاعدة بيانات تفاعلية آنية لتفريغ معطيات الملاحة البحرية بالسواحل والموانئ المغربية</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-600 leading-relaxed mb-6">
                    يقدم هذا القسم تفريغاً دقيقاً لـ 32 ناقلة نفط وغاز ومشتقات مكررة مرصودة بالرادار الملاحي عبر الواجهتين الأطلسية والمتوسطية. يمكنك استخدام أدوات التصفية والبحث أدناه لمعاينة التفاصيل التشغيلية، وضعية الرسو، والغاطس العملياتي لكل سفينة.
                </p>

                <!-- Search and Filters Bar -->
                <div class="bg-sand-50 p-4 rounded-xl border border-sand-200 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">بحث باسم السفينة أو المنشأة</label>
                        <input type="text" id="searchInput" oninput="filterVessels()" placeholder="مثال: TULU أو هيوستن..." class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">تصفية حسب الميناء / المجال</label>
                        <select id="portFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">جميع الموانئ والمجالات</option>
                            <option value="المحمدية">المحمدية</option>
                            <option value="الجرف الأصفر">الجرف الأصفر</option>
                            <option value="طنجة المتوسط">طنجة المتوسط</option>
                            <option value="أكادير">أكادير</option>
                            <option value="المسار المتوسطي">المسار المتوسطي والمضيق</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">تصفية حسب الوضعية الملاحية</label>
                        <select id="statusFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">جميع الوضعيات</option>
                            <option value="Moored">راسية على الرصيف (Moored)</option>
                            <option value="Anchor">منطقة المخطاف (At Anchor)</option>
                            <option value="Underway">مبحرة / عبور / مناورة</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">تصفية حسب نوع الحمولة</label>
                        <select id="cargoFilter" onchange="filterVessels()" class="w-full text-xs p-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-600 bg-white">
                            <option value="ALL">جميع أنواع الحمولات</option>
                            <option value="منتجات نفطية">منتجات نفطية / وقود مكرر</option>
                            <option value="LPG">غاز مسال (LPG / LNG)</option>
                            <option value="خام">نفط خام (Crude Oil)</option>
                            <option value="أسفلت">أسفلت وبيتون / كيماويات</option>
                        </select>
                    </div>
                </div>

                <!-- Vessels Table -->
                <div class="overflow-x-auto rounded-xl border border-slate-200">
                    <table class="w-full text-right text-xs">
                        <thead class="bg-navy-900 text-white font-semibold">
                            <tr>
                                <th class="p-3">الميناء / المجال</th>
                                <th class="p-3">اسم السفينة</th>
                                <th class="p-3">نوع الحمولة</th>
                                <th class="p-3">العلم</th>
                                <th class="p-3">الوضعية الملاحية</th>
                                <th class="p-3 text-center">الغاطس (م)</th>
                                <th class="p-3">المنشأ / الميناء السابق</th>
                                <th class="p-3">الدور العملياتي والأثر اللوجستي</th>
                            </tr>
                        </thead>
                        <tbody id="vesselsTableBody" class="divide-y divide-slate-200 bg-white">
                            <!-- Populated dynamically via JavaScript -->
                        </tbody>
                    </table>
                </div>
                <div id="noResults" class="hidden text-center py-8 text-slate-500 text-xs">
                    لا توجد نتائج تطابق خيارات التصفية المحُددة.
                </div>
            </div>
        </section>

        <!-- Port Hub Architecture & Cabotage Flow -->
        <section id="ports" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-r-4 border-teal-600 pr-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">التحليل اللوجستي والتوزيع الوظيفي للأقطاب المينائية</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">تكامل نموذج &#8220;المحور والشعاع&#8221; (Hub-and-Spoke) والملاحة الساحلية الوطنية (Cabotage)</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    تكشف المعطيات الميدانية عن تشكل بنية لوجستية متكاملة تعتمد نموذج &#8220;المحور والشعاع&#8221;؛ حيث تتوزع الأدوار بين الموانئ المغربية وفقاً للقدرات الهندسية، وأعماق الغواطس، وطبيعة التجهيزات الصناعية. اضغط على أي قطب مينائي أسفله لاستعراض قدراته التشغيلية ودوره في تأمين الأمن الطاقي.
                </p>

                <!-- Dynamic Port Selector Cards -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                    <button onclick="selectPortDetails('TM')" id="btn-port-TM" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-teal-600 text-right hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ec.png" alt="🏬" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-teal-100 text-teal-800 px-2 py-0.5 rounded">المنصة المركزية</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">طنجة المتوسط</h3>
                        <p class="text-xs text-slate-500 mt-1">تخزين استراتيجي، إعادة شحن، وتزويد السفن بالوقود (Bunkering)</p>
                    </button>
                    <button onclick="selectPortDetails('MH')" id="btn-port-MH" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-right hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3d9.png" alt="🏙" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-amber-100 text-amber-800 px-2 py-0.5 rounded">رئة التوزيع المدني</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">ميناء المحمدية</h3>
                        <p class="text-xs text-slate-500 mt-1">تأمين محطات المحور الحضري للدار البيضاء الكبرى والوسط</p>
                    </button>
                    <button onclick="selectPortDetails('JF')" id="btn-port-JF" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-right hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ed.png" alt="🏭" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-blue-100 text-blue-800 px-2 py-0.5 rounded">القطب الثقيل</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">الجرف الأصفر</h3>
                        <p class="text-xs text-slate-500 mt-1">مياه عميقة، المركب الفوسفاتي (OCP)، والفيول الصناعي والغاز</p>
                    </button>
                    <button onclick="selectPortDetails('AG')" id="btn-port-AG" class="port-card bg-sand-50 p-4 rounded-xl border-2 border-transparent text-right hover:shadow-md transition-all">
                        <div class="flex items-center justify-between">
                            <span class="text-lg"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f30a.png" alt="🌊" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            <span class="text-[10px] font-bold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">بوابة الجنوب</span>
                        </div>
                        <h3 class="font-bold text-navy-900 mt-2">ميناء أكادير</h3>
                        <p class="text-xs text-slate-500 mt-1">غاز البوتان لجهة سوس ماسة وتزويد أسطول الصيد البحري</p>
                    </button>
                </div>

                <!-- Selected Port Description Panel -->
                <div id="portDetailPanel" class="bg-slate-50 p-6 rounded-xl border border-slate-200">
                    <!-- Populated via JS -->
                </div>

                <!-- Cabotage Flow Visualizer (Tailwind HTML Flow Diagram) -->
                <div class="mt-8 border-t border-slate-200 pt-6">
                    <h3 class="text-sm font-bold text-navy-900 mb-4">مخطط تدفقات الملاحة الساحلية الوطنية (Cabotage Pipeline)</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-teal-700">1. خط الإمداد الشمالي (طنجة المتوسط)</span>
                                <p class="text-slate-600 mt-1">استقبال الشحنات الكبرى العابرة للمحيطات (غاطس حتى 11.9م) وإعادة الضخ عبر بوارج ومكوك ساحلي.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center space-x-2 space-x-reverse">
                                <span>سفن المكوك: TULU, PRIMA N, KASSOS</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b05.png" alt="⬅" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-blue-700">2. خط التوريد الوسطي (الجرف الأصفر)</span>
                                <p class="text-slate-600 mt-1">استقبال الناقلات العملاقة (ORWELL بغاطس 12.3م) وتوزيع المواد البترولية والصناعية للوسط والجنوب.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center space-x-2 space-x-reverse">
                                <span>الربط الجنوبي: TINGIS</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b05.png" alt="⬅" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                        <div class="bg-white p-4 rounded-lg border border-slate-200 flex flex-col justify-between">
                            <div>
                                <span class="font-bold text-emerald-700">3. خط التغذية الجنوبي (أكادير والجنوب)</span>
                                <p class="text-slate-600 mt-1">استلام الشحنات المباشرة (ECO GALAXY) والربط الساحلي مع الجرف لتأمين وقود الصيد والغاز المنزلي.</p>
                            </div>
                            <div class="mt-3 font-semibold text-slate-500 flex items-center space-x-2 space-x-reverse">
                                <span>تزويد الأسطول: PS OUFELLA</span>
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2693.png" alt="⚓" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Price Breakdown & Price Simulator Section -->
        <section id="pricing" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-r-4 border-amber-600 pr-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">تفكيك بنية الأسعار ومحاكي التضخم</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">تحليل مفارقة الوفرة المادية للوقود واشتعال الأثمان بالمحطات الوطنية (نموذج المحاكاة الاقتصادية)</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    رغم الملاءة اللوجستية والوفرة المادية بالمواد البترولية في الموانئ المغربية، تصطدم القدرة الشرائية بضغوط تسعيرية حادة مرادفة لتقلبات سوق Platts CIF Med والضرائب وهوامش الأرباح. يمكنك استخدام <strong>محاكي بنية الأسعار التفاعلي</strong> أدناه لاختبار سيناريوهات تغير السعر الدولي (CIF) ومعاينة انعكاسه الفوري على السعر النهائي بالتقسيط وسلوك المستهلك.
                </p>

                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                    <!-- Price Simulator Controls -->
                    <div class="lg:col-span-5 bg-sand-50 p-5 rounded-xl border border-sand-200 space-y-4">
                        <h3 class="font-bold text-navy-900 text-sm border-b border-sand-200 pb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f39b.png" alt="🎛" class="wp-smiley" style="height: 1em; max-height: 1em;" /> محاكي بنية سعر وقود الغازوال (درهم / لتر)</h3>
                        
                        <div>
                            <div class="flex justify-between text-xs font-semibold mb-1">
                                <span>سعر الشراء الدولي والتوصيل (CIF):</span>
                                <span id="cifVal" class="text-teal-700 font-bold">7.50 درهم</span>
                            </div>
                            <input type="range" id="cifSlider" min="4.50" max="12.00" step="0.25" value="7.50" oninput="updatePriceSimulation()" class="w-full accent-teal-600 cursor-pointer">
                            <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                                <span>استقرار (4.50)</span>
                                <span>المرجعي (7.50)</span>
                                <span>ذروة الصدمات (12.00)</span>
                            </div>
                        </div>

                        <!-- Calculated Price Components Output -->
                        <div class="space-y-2 text-xs pt-2 border-t border-sand-200">
                            <div class="flex justify-between">
                                <span class="text-slate-600">الضريبة الداخلية على الاستهلاك (TIC):</span>
                                <span id="ticVal" class="font-semibold text-slate-800">3.76 درهم</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-600">الضريبة على القيمة المضافة (TVA 10%):</span>
                                <span id="tvaVal" class="font-semibold text-slate-800">1.22 درهم</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-600">هوامش التوزيع واللوجستيك والتجزئة:</span>
                                <span id="marginVal" class="font-semibold text-slate-800">0.90 درهم</span>
                            </div>
                            <div class="flex justify-between text-sm font-extrabold pt-2 border-t border-sand-300 text-navy-900">
                                <span>السعر النهائي بالمحطة:</span>
                                <span id="totalPriceVal" class="text-amber-700">13.38 درهم</span>
                            </div>
                        </div>

                        <!-- Socio-Economic Impact Alert Box -->
                        <div id="impactAlert" class="p-3 rounded-lg bg-amber-50 border border-amber-200 text-xs text-amber-900 leading-normal">
                            <!-- Populated via JS based on simulation -->
                        </div>
                    </div>

                    <!-- Price Composition Chart -->
                    <div class="lg:col-span-7 bg-slate-50 p-5 rounded-xl border border-slate-200">
                        <h3 class="font-bold text-navy-900 text-sm mb-2 text-center">التركيبة الهيكلية للنسب المئوية لسعر التجزئة المرجعي (13.38 درهم)</h3>
                        <div class="chart-container">
                            <canvas id="priceBreakdownChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Socio-Economic Impact Survey Findings -->
                <div class="mt-8 bg-sand-100 p-5 rounded-xl border border-sand-200">
                    <h3 class="font-bold text-navy-900 text-sm mb-3"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ca.png" alt="📊" class="wp-smiley" style="height: 1em; max-height: 1em;" /> المؤشرات الاجتماعية وسلوك المستهلك عند ارتقاء أسعار المحروقات</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center text-xs">
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-red-600">93.3%</div>
                            <p class="text-slate-600 mt-1">يضطرون لتقليص نفقات التغذية والعلاج والتعليم عند تجاوز السعر 15 درهماً.</p>
                        </div>
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-amber-600">95.4%</div>
                            <p class="text-slate-600 mt-1">يقومون بإلغاء أو تقليص المصاريف والنفقات غير الأساسية.</p>
                        </div>
                        <div class="bg-white p-3 rounded-lg shadow-sm border border-sand-200">
                            <div class="text-xl font-bold text-blue-600">85.4%</div>
                            <p class="text-slate-600 mt-1">يعمدون إلى تقييد استخدام وسائل التنقل الفردية والجماعية.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Geopolitical Supply Routes & Chokepoints Immunity -->
        <section id="geopolitics" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-r-4 border-teal-600 pr-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">الجغرافيا السياسية لمسارات التوريد والمضايق الدولية</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">تقييم درجة مناعة وحصانة سلاسل التموين المغربية من اختناقات هرمز وباب المندب</p>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-6">
                    يظهر تفكيك المسارات الجغرافية للناقلات المتجهة للموانئ المغربية تموقعاً استراتيجياً يحمي البلاد من الارتدادات العسكرية المباشرة لإغلاق مضيق هرمز أو باب المندب. تعتمد المملكة على أسطول يمتد عبر حوض غرب المتوسط والمحيط الأطلسي.
                </p>

                <!-- Routes Safety Cards Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">غرب ووسط البحر الأبيض المتوسط</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">مخاطر منخفضة جداً</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">مصافي إيطاليا (ساروك، أوغوستا)، إسبانيا (قرطاجنة)، اليونان (كورنث)، وتونس.</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            الناقلات: INNOVATOR, BYZANTION, HISTRIA NARVI
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">المحيط الأطلسي وأمريكا الشمالية</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">مسار مفتوح وآمن</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">موانئ خليج المكسيك بالولايات المتحدة الأمريكية (هيوستن، نيو أورلينز).</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            الناقلات: GAS BARBAROSSA, PIS FLORES
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">غرب إفريقيا والكاريبي</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">تنوع استراتيجي</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">غينيا (كمسار)، السنغال (دكار)، وترينيداد وتوباغو (بورت أوف سبين).</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            الناقلات: ORWELL, BALTIC ICE, GREEN ETERNITY
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">شمال غرب أوروبا</span>
                            <span class="bg-emerald-100 text-emerald-800 text-[10px] px-2 py-0.5 rounded font-bold">خط منتظم</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">هولندا (زيلاند) وبلجيكا (أنتويرب) لشحنات الأسفلت والغاز المسال المتخصص.</p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            الناقلات: XING HAI WAN, ECO GALAXY
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 hover:border-teal-500 transition-colors md:col-span-2 lg:col-span-2">
                        <div class="flex items-center justify-between">
                            <span class="font-bold text-xs text-navy-900">شبه الجزيرة العربية (خارج هرمز)</span>
                            <span class="bg-blue-100 text-blue-800 text-[10px] px-2 py-0.5 rounded font-bold">استثناء جغرافي مؤمن</span>
                        </div>
                        <p class="text-xs text-slate-600 mt-2">
                            الشحنة الخليجية المرصودة (الناقلة <em>GAS AMMON</em>) أبحرت من ميناء <strong>صلالة بسلطنة عُمان</strong> المشرف مباشرة على بحر العرب والمحيط الهندي، أي خارج حدود مضيق هرمز تماماً.
                        </p>
                        <div class="mt-3 text-[11px] text-teal-700 font-semibold">
                            النتيجة: انعدام التبعية التامة لمضيق هرمز ومضيق باب المندب.
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Strategic Roadmap & Recommendations -->
        <section id="strategy" class="scroll-mt-24 space-y-6">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200/80">
                <div class="border-r-4 border-teal-600 pr-4 mb-4">
                    <h2 class="text-2xl font-bold text-navy-900">الآفاق المستقبلية والمراجع الرسمية</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-1">خارطة طريق لبناء السيادة الطاقية وقائمة المراجع الرسمية المعتمدة (APA 7th Edition)</p>
                </div>

                <!-- Policy Tabs Header -->
                <div class="flex border-b border-slate-200 space-x-4 space-x-reverse text-xs sm:text-sm overflow-x-auto pb-1 mb-6">
                    <button onclick="switchPolicyTab('tab1')" id="tab1-btn" class="tab-active py-2 px-3 font-bold whitespace-nowrap">1. مصفاة سامير والتكرير</button>
                    <button onclick="switchPolicyTab('tab2')" id="tab2-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">2. الضريبة المرنة (TIC)</button>
                    <button onclick="switchPolicyTab('tab3')" id="tab3-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">3. تسقيف هوامش الربح</button>
                    <button onclick="switchPolicyTab('tab4')" id="tab4-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">4. ميناء الناظور غرب المتوسط</button>
                    <button onclick="switchPolicyTab('tab5')" id="tab5-btn" class="py-2 px-3 font-semibold text-slate-500 hover:text-teal-600 whitespace-nowrap">5. النقل النظيف و&#8221;مواكبة&#8221;</button>
                </div>

                <!-- Policy Content Panels -->
                <div id="tab1-content" class="policy-content space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3ed.png" alt="🏭" class="wp-smiley" style="height: 1em; max-height: 1em;" /> الحسم الفوري في ملف مصفاة &#8220;سامير&#8221; وتحصين المخزون الاستراتيجي</h3>
                        <p>
                            يُشكل إعادة تشغيل مصفاة &#8220;سامير&#8221; المحرك الأساسي لاستعادة السيادة الطاقية؛ حيث يتيح التكرير المحلي تغطية ما يصل إلى <strong>65% من الطلب الوطني</strong> على الغازوال والبنزين، وتوفير هوامش التكرير بالعملة الصعبة الممنوحة حالياً للمصافي الأوروبية. كما أن استغلال صهاريج المصفاة الضخمة بالمحمدية يرفع قدرة التخزين الاستراتيجي للبلاد ويتجاوز طوابير الانتظار بالمخطاف.
                        </p>
                    </div>
                </div>

                <div id="tab2-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c9.png" alt="📉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> تفعيل آلية &#8220;الضريبة المرنة&#8221; (TIC Flottante)</h3>
                        <p>
                            اعتماد آلية جبائية مرنة تقوم على التخفيض المؤقت لمقدار الضريبة الداخلية على الاستهلاك (TIC) فور تجاوز أسعار النفط العالمية عتبة <strong>85 دولاراً للبرميل</strong>، وذلك لامتصاص صدمة التضخم والحفاظ على استقرار السعر بالمحطات في حدود <strong>12.50 إلى 13.50 درهم/لتر</strong>، على أن تستعيد الدولة نسبها الضريبية الطبيعية عند انخفاض الأسعار.
                        </p>
                    </div>
                </div>

                <div id="tab3-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2696.png" alt="⚖" class="wp-smiley" style="height: 1em; max-height: 1em;" /> تقييد وتسقيف هوامش ربح شركات التوزيع</h3>
                        <p>
                            تماشياً مع توصيات مجلس المنافسة، يتعين ضبط هوامش أرباح شركات الاستيراد والتوزيع في فترات الصدمات الدولية الحادة لتقاسم عبء التضخم بين الفاعلين الاقتصاديين والمستهلكين، ومنع تأخر انخفاض الأسعار في المحطات المحلية عند تراجعها في الأسواق العالمية (ظاهرة الصاروخ الريشة).
                        </p>
                    </div>
                </div>

                <div id="tab4-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6a2.png" alt="🚢" class="wp-smiley" style="height: 1em; max-height: 1em;" /> تسريع إنجاز واستغلال ميناء &#8220;الناظور غرب المتوسط&#8221;</h3>
                        <p>
                            يوفر ميناء الناظور غرب المتوسط طاقات تخزينية استراتيجية تتجاوز <strong>25 مليون طن</strong> بحلول نهاية سنة 2026، وسيحتضن أول محطة وطنية لاستيراد الغاز الطبيعي المسال (LNG)، مما يساهم في تفكيك الضغط عن الساحل الأطلسي وتنويع خطوط الإمداد المباشرة.
                        </p>
                    </div>
                </div>

                <div id="tab5-content" class="policy-content hidden space-y-3 text-xs sm:text-sm text-slate-700 leading-relaxed">
                    <div class="bg-sand-50 p-4 rounded-xl border border-sand-200">
                        <h3 class="font-bold text-navy-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f331.png" alt="🌱" class="wp-smiley" style="height: 1em; max-height: 1em;" /> دعم النقل النظيف وتطوير منصة &#8220;مواكبة&#8221;</h3>
                        <p>
                            توسيع التحفيزات الجمركية للسيارات الهجينة والكهربائية (التي بلغت حصتها 12.5% من السوق)، وتطوير منصة &#8220;مواكبة&#8221; للدعم المباشر لمهنيي نقل البضائع والمسافرين لقطع حلقة التضخم ومنع انتقال أعباء الوقود إلى أسعار المواد الغذائية والأساسية.
                        </p>
                    </div>
                </div>

                <!-- Academic & Institutional References Section (APA 7th Edition) -->
                <div class="mt-8 pt-6 border-t border-slate-200 text-xs text-slate-600">
                    <h3 class="font-bold text-navy-900 text-sm mb-3">قائمة المراجع والمصادر الرسمية (References &#8211; APA 7th Edition)</h3>
                    <ul class="space-y-2 text-right dir-rtl">
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>معهد الدراسات الاجتماعية والإعلامية (SMSI).</strong> (2026). <em>تقرير تحليل الوضعية الطاقية بالموانئ المغربية وسلاسل إمداد المحروقات</em> (إعداد الباحث يونس بنان). منشورات معهد الدراسات الاجتماعية والإعلامية، الدار البيضاء.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200 font-sans dir-ltr text-left">
                            <strong>MarineTraffic.</strong> (2026). <em>Global Vessel Tracking and AIS Maritime Intelligence Platform</em> [Data set]. MarineTraffic. https://www.marinetraffic.com
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>مجلس المنافسة.</strong> (2023). <em>رأي مجلس المنافسة بشأن تتبع تنفيذ التعهدات المأخوذة من لدن شركات تسويق الغازوال والبنزين بالجملة</em> (رأي رقم ر/3/23). المملكة المغربية، الرباط.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>الوكالة الوطنية للموانئ (ANP).</strong> (2024). <em>التقرير الإحصائي لحركة الرواج المينائي بالموانئ المغربية</em>. وزارة التجهيز والماء، المملكة المغربية.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>وزارة الانتقال الطاقي والتنمية المستدامة.</strong> (2024). <em>النشرة الإحصائية السنوية لقطاع المحروقات والطاقة</em>. المملكة المغربية، الرباط.
                        </li>
                        <li class="bg-slate-50 p-2.5 rounded border border-slate-200">
                            <strong>المندوبية السامية للتخطيط (HCP).</strong> (2024). <em>مؤشرات الرقم القياسي لأسعار المستهلك وتأثير أسعار المحروقات على الرقم القياسي لتكلفة المعيشة</em>. الرباط، المغرب.
                        </li>
                    </ul>
                </div>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer class="bg-navy-900 text-slate-400 py-6 border-t border-slate-800 text-xs">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center space-y-3 sm:space-y-0">
            <div>
                <span>© 2026 إعداد الباحث يونس بنان &#8211; معهد الدراسات الاجتماعية والإعلامية بالمغرب.</span>
            </div>
            <div class="flex space-x-4 space-x-reverse text-sand-200">
                <span>الذكاء الملاحي الميداني</span>
                <span>•</span>
                <span>تحليل سلاسل الإمداد الطاقية</span>
            </div>
        </div>
    </footer>

    <!-- JavaScript Dataset and Interactive Logic -->
    <script>
        // Full Dataset extracted from the Strategic Report (32 Vessels)
        const vesselsData = [
            { port: "المحمدية", name: "TULU", type: "منتجات نفطية / كيماويات", flag: "بربادوس &#x1f1e7;&#x1f1e7;", status: "Moored", draught: 12.0, origin: "طنجة المتوسط (MA PTM)", eta: "10 أكتوبر", impact: "تفريغ حمولة ضخمة لتأمين شبكة محطات جهة الدار البيضاء" },
            { port: "المحمدية", name: "PRIMA N", type: "منتجات نفطية مكررة", flag: "مالطا &#x1f1f2;&#x1f1f9;", status: "Moored", draught: 6.7, origin: "طنجة المتوسط (MA PTM)", eta: "12 أكتوبر", impact: "شحن ساحلي مكوك لتغذية مستودعات الشركات الموزعة" },
            { port: "المحمدية", name: "ETRUSCO", type: "منتجات نفطية / كيماويات", flag: "إيطاليا &#x1f1ee;&#x1f1f9;", status: "Moored", draught: 6.1, origin: "قرطاجنة / إسبانيا (ES CAR)", eta: "11 أكتوبر", impact: "استيراد مباشر لمشتقات مكررة من مصافي غرب البحر المتوسط" },
            { port: "المحمدية", name: "EVREN", type: "نفط خام (Crude Oil)", flag: "بالاو &#x1f1f5;&#x1f1fc;", status: "Anchor", draught: 10.5, origin: "طنجة المتوسط (MA PTM)", eta: "11 أكتوبر", impact: "شحنة نفط خام ثقيلة بانتظار الرسو أو الضخ في صهاريج التخزين" },
            { port: "المحمدية", name: "INNOVATOR", type: "وقود / كيماويات مكررة", flag: "ليبيريا &#x1f1f1;&#x1f1f7;", status: "Anchor", draught: 10.4, origin: "أوغوستا / إيطاليا (IT AUG)", eta: "11 أكتوبر", impact: "شحنة وقود مصفاتي مستوردة من صقلية تنتظر شغور الرصيف" },
            { port: "المحمدية", name: "EPIC MADEIRA", type: "غاز مسال (LPG)", flag: "سنغافورة &#x1f1f8;&#x1f1ec;", status: "Anchor", draught: 6.5, origin: "بورتو فوكسي / إيطاليا (IT PFX)", eta: "12 أكتوبر", impact: "تأمين شحنات غاز البوتان المنزلي والصناعي بانتظار الرصيف" },
            { port: "المحمدية", name: "KASSOS", type: "منتجات نفطية مكررة", flag: "قبرص &#x1f1e8;&#x1f1fe;", status: "Anchor", draught: 6.7, origin: "طنجة المتوسط (MA PTM)", eta: "11 أكتوبر", impact: "خط ملاحة ساحلية منتظم لتأمين دوران المخزون التجاري" },
            { port: "المحمدية", name: "YM URANUS", type: "منتجات نفطية / كيماويات", flag: "مالطا &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 6.2, origin: "رادس / تونس (TN RDS)", eta: "11 أكتوبر", impact: "تزويد تجاري تكميلي ضمن إطار المبادلات المغاربية" },
            { port: "المحمدية", name: "XING HAI WAN", type: "أسفلت وبيتون (Bitumen)", flag: "بنما &#x1f1f5;&#x1f1e6;", status: "Anchor", draught: 6.2, origin: "زيلاند / هولندا (NL ZBW)", eta: "12 أكتوبر", impact: "شحنة متخصصة لتزويد مشاريع الطرق والأشغال العمومية" },
            
            { port: "الجرف الأصفر", name: "PIS FLORES", type: "نفط / بتروكيماويات", flag: "بنما &#x1f1f5;&#x1f1e6;", status: "Moored", draught: 11.8, origin: "نيو أورلينز / أمريكا (US MSY)", eta: "12 أكتوبر", impact: "استيراد مباشر عابر للأطلسي بحمولة ضخمة موجهة لقطاع الطاقة" },
            { port: "الجرف الأصفر", name: "BYZANTION", type: "وقود / كيماويات صناعية", flag: "جزر مارشال &#x1f1f2;&#x1f1ed;", status: "Moored", draught: 9.0, origin: "ميلازو / إيطاليا (IT MLZ)", eta: "11 أكتوبر", impact: "إمداد مصفاتي لتشغيل المنظومة الصناعية بالمركب الفوسفاتي" },
            { port: "الجرف الأصفر", name: "GAS AMMON", type: "غاز مسال (LPG)", flag: "ليبيريا &#x1f1f1;&#x1f1f7;", status: "Moored", draught: 10.4, origin: "صلالة / سلطنة عُمان (OM SLL)", eta: "11 أكتوبر", impact: "شحنة غاز مسال كبرى قادمة من بحر العرب خارج مضيق هرمز" },
            { port: "الجرف الأصفر", name: "FERICEK", type: "نفط / كيماويات", flag: "تركيا &#x1f1f9;&#x1f1f7;", status: "Underway", draught: 5.4, origin: "آسفي / المغرب (MA SFI)", eta: "13 أكتوبر", impact: "ربط بيني ساحلي لنقل المواد الكيماوية بين المنصات الصناعية" },
            { port: "الجرف الأصفر", name: "DERIN", type: "منتجات نفطية / وقود ثقيل", flag: "بربادوس &#x1f1e7;&#x1f1e7;", status: "Anchor", draught: 11.3, origin: "طنجة المتوسط (MA PTM)", eta: "09 أكتوبر", impact: "شحن ساحلي عالي الحمولة لتغذية صهاريج محطات الكهرباء" },
            { port: "الجرف الأصفر", name: "GREEN ETERNITY", type: "غاز مسال / كيماويات", flag: "سنغافورة &#x1f1f8;&#x1f1ec;", status: "Anchor", draught: 10.4, origin: "ترينيداد (TT PTS)", eta: "11 أكتوبر", impact: "واردات كاريبيية بعيدة المدى لصناعة الأسمدة والتخزين" },
            { port: "الجرف الأصفر", name: "EUROSAILOR", type: "منتجات نفطية / كيماويات", flag: "مالطا &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 9.1, origin: "الجرف الأصفر (MA JFL)", eta: "11 أكتوبر", impact: "دوران تشغيلي محلي وإعادة تموضع على الأرصفة المتخصصة" },
            { port: "الجرف الأصفر", name: "ORWELL", type: "نفط / كيماويات", flag: "ليبيريا &#x1f1f1;&#x1f1f7;", status: "Underway", draught: 12.3, origin: "كمسار / غينيا (GN KMR)", eta: "13 أكتوبر", impact: "ناقلة عملاقة (أعلى غاطس مسجل) قادمة عبر غرب إفريقيا" },

            { port: "طنجة المتوسط", name: "GAS BARBAROSSA", type: "غاز مسال (LPG)", flag: "بنما &#x1f1f5;&#x1f1e6;", status: "Moored", draught: 11.9, origin: "هيوستن / أمريكا (US HOU)", eta: "12 أكتوبر", impact: "تفريغ شحنة أمريكية كبرى في مستودعات التخزين وإعادة التوزيع" },
            { port: "طنجة المتوسط", name: "ANDROS", type: "منتجات نفطية", flag: "قبرص &#x1f1e8;&#x1f1fe;", status: "Moored", draught: 6.0, origin: "طنجة المتوسط 2", eta: "12 أكتوبر", impact: "شحن داخلي أو تزويد السفن بالوقود في الحوض المينائي" },
            { port: "طنجة المتوسط", name: "BALEA", type: "منتجات نفطية مكررة", flag: "المغرب &#x1f1f2;&#x1f1e6;", status: "Moored", draught: 3.0, origin: "طنجة المتوسط (MA PTM)", eta: "11 أكتوبر", impact: "بارجة مغربية متخصصة في تزويد السفن بالوقود البحري (Bunkering)" },
            { port: "المسار المتوسطي", name: "BW BRUSSELS", type: "غاز طبيعي مسال (LNG)", flag: "سنغافورة &#x1f1f8;&#x1f1ec;", status: "Underway", draught: 9.1, origin: "إدكو / مصر (EG AIS)", eta: "13 أكتوبر", impact: "ناقلة غاز طبيعي مسال دولية عابرة للمضيق تحت الطلب" },
            { port: "طنجة المتوسط", name: "MARS", type: "منتجات نفطية", flag: "قبرص &#x1f1e8;&#x1f1fe;", status: "Anchor", draught: 5.2, origin: "جبل طارق (GI GIB)", eta: "12 أكتوبر", impact: "انتظار الدخول لإجراء شحن بحري أو خدمات التزود بالوقود" },
            { port: "طنجة المتوسط", name: "CIELO DI CAPRI", type: "نفط / كيماويات", flag: "مالطا &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 9.1, origin: "سبتة (ES CEU)", eta: "11 أكتوبر", impact: "شحنة إقليمية بالمضيق في انتظار الرسو بمستودعات التخزين" },
            { port: "طنجة المتوسط", name: "ITHAKI II", type: "منتجات نفطية", flag: "قبرص &#x1f1e8;&#x1f1fe;", status: "Underway", draught: 5.9, origin: "جبل طارق (GI GIB)", eta: "13 أكتوبر", impact: "دوران ملاحي سريع بين المنصات اللوجستية بمضيق جبل طارق" },

            { port: "المسار المتوسطي", name: "HISTRIA NARVI", type: "نفط / كيماويات", flag: "مالطا &#x1f1f2;&#x1f1f9;", status: "Underway", draught: 10.0, origin: "ساروك / إيطاليا (IT SPA)", eta: "14 أكتوبر", impact: "وقود صناعي من مصفاة ساردينيا متجه مباشرة للجرف الأصفر" },
            { port: "المسار المتوسطي", name: "HAZAR", type: "منتجات نفطية", flag: "بنما &#x1f1f5;&#x1f1e6;", status: "Underway", draught: 10.2, origin: "كورنث / اليونان (GR AGT)", eta: "12 أكتوبر", impact: "شحنة مكررة من مصافي اليونان متجهة للتخزين بطنجة المتوسط" },
            { port: "المسار المتوسطي", name: "BALTIC ICE", type: "نفط / كيماويات", flag: "ليبيريا &#x1f1f1;&#x1f1f7;", status: "Underway", draught: 7.6, origin: "دكار / السنغال (SN DKR)", eta: "14 أكتوبر", impact: "شحنة قادمة من غرب إفريقيا بانتظار الترخيص بالدخول لطنجة" },
            { port: "المسار المتوسطي", name: "KRITI EPISKOPI", type: "نفط / كيماويات", flag: "ليبيريا &#x1f1f1;&#x1f1f7;", status: "Anchor", draught: 10.4, origin: "كورنث / اليونان (GR AGT)", eta: "16 سبتمبر", impact: "شحنة وقود يونانية بغاطس كبير تنتظر تفريغ حمولتها بطنجة" },

            { port: "أكادير", name: "ECO GALAXY", type: "غاز مسال / كيماويات", flag: "جزر مارشال &#x1f1f2;&#x1f1ed;", status: "Moored", draught: 6.6, origin: "أنتويرب / بلجيكا (BE ANR)", eta: "12 أكتوبر", impact: "استيراد مباشر لغاز البوتان لتغطية الاستهلاك الحيوي لجهة سوس" },
            { port: "أكادير", name: "TINGIS", type: "نفط / كيماويات", flag: "المغرب &#x1f1f2;&#x1f1e6;", status: "Anchor", draught: 7.2, origin: "الجرف الأصفر (MA JFL)", eta: "10 أكتوبر", impact: "خط ملاحة ساحلية وطنية لنقل الوقود من الجرف نحو الجنوب" },
            { port: "أكادير", name: "BWEK BREEZE", type: "غاز مسال / كيماويات", flag: "مالطا &#x1f1f2;&#x1f1f9;", status: "Anchor", draught: 6.3, origin: "لا كورونيا / إسبانيا (ES LCG)", eta: "10 أكتوبر", impact: "شحنة غاز مسال احتياطية تنتظر إخلاء الرصيف المينائي" },
            { port: "أكادير", name: "PS OUFELLA", type: "منتجات نفطية", flag: "المغرب &#x1f1f2;&#x1f1e6;", status: "Anchor", draught: 4.0, origin: "أكادير (حركة محلية)", eta: "12 أكتوبر", impact: "تزويد أسطول الصيد الساحلي وفي أعالي البحار بالوقود" }
        ];

        // Port Detail Descriptions Database
        const portDetailsDB = {
            TM: {
                title: "طنجة المتوسط (المنصة المركزية الكبرى)",
                badge: "تخزين وإعادة شحن",
                text: "يحتل ميناء طنجة المتوسط موقع القلب النابض لشبكة التموين الوطنية بصفته المنصة المركزية للاستيراد الكلي وإعادة الشحن والتخزين الاستراتيجي. يتميز بأرصفته ذات الأعماق الكبيرة القادرة على استقبال أضخم ناقلات الغاز والنفط العالمية مثل الناقلة GAS BARBAROSSA (غاطس 11.9م). كما يوفر خدمات التزويد بالوقود البحري (Bunkering) للسفن العابرة للمضيق عبر ناقلات كالسفينة المغربية BALEA."
            },
            MH: {
                title: "ميناء المحمدية (رئة التوزيع المدني والحضري)",
                badge: "توزيع المحور الحضري",
                text: "يمثل ميناء المحمدية رئة التوزيع المباشر الموجهة للاستهلاك المدني والصناعي في التجمع الحضري للدار البيضاء الكبرى ومحور الوسط. تعمل أرصفته بكامل طاقتها الاستيعابية القصوى بوجود 3 ناقلات في حالة تفريغ متزامن (TULU, PRIMA N, ETRUSCO) و6 ناقلات بانتظار دورها بالمخطاف. تم تحييد ميناء الدار البيضاء التجاري تماماً عن ناقلات الوقود كتدبير وقائي."
            },
            JF: {
                title: "الجرف الأصفر (القطب الصناعي الثقيل)",
                badge: "صناعة ومياه عميقة",
                text: "يطبق ميناء الجرف الأصفر دور القطب الصناعي الثقيل للمياه العميقة؛ حيث يستقبل السفن ذات الغواطس العميقة (10م إلى أكثر من 12.3م مثل الناقلة العملاقة ORWELL). تلبي هذه التدفقات الاحتياجات الضخمة للمركب الكيماوي والفوسفاتي (OCP)، وتوفر الوقود لمحطات التوليد الحراري للكهرباء وغاز الطهي عبر محطة الغاز المسال العميقة."
            },
            AG: {
                title: "ميناء أكادير (بوابة الحصانة الطاقية بالجنوب)",
                badge: "سوس والأقاليم الجنوبية",
                text: "يؤمن ميناء أكادير الحصانة الطاقية للمنظومة الاقتصادية والفلاحية بجهة سوس ماسة والأقاليم الجنوبية عبر الاستيراد المباشر لشحنات غاز البوتان المسال من أوروبا الشمالية (السفينة ECO GALAXY)، مدعومة بالملاحة الساحلية القادمة من صهاريج الجرف الأصفر (السفينة المغربية TINGIS) وتزويد أسطول الصيد البحري (السفينة PS OUFELLA)."
            }
        };

        // DOM Ready Initialization
        document.addEventListener('DOMContentLoaded', () => {
            renderVesselsTable(vesselsData);
            initStatusChart();
            initCargoChart();
            initPriceBreakdownChart();
            selectPortDetails('TM');
            updatePriceSimulation();
        });

        // Filter and Render Vessels
        function renderVesselsTable(data) {
            const tbody = document.getElementById('vesselsTableBody');
            const noResults = document.getElementById('noResults');
            tbody.innerHTML = '';

            if (data.length === 0) {
                noResults.classList.remove('hidden');
                return;
            } else {
                noResults.classList.add('hidden');
            }

            data.forEach(v => {
                let statusBadge = '';
                if (v.status === 'Moored') {
                    statusBadge = '<span class="bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold">على الرصيف</span>';
                } else if (v.status === 'Anchor') {
                    statusBadge = '<span class="bg-amber-100 text-amber-800 px-2 py-0.5 rounded font-bold">بالمخطاف</span>';
                } else {
                    statusBadge = '<span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded font-bold">مبحرة / عبور</span>';
                }

                const tr = document.createElement('tr');
                tr.className = "hover:bg-sand-50 transition-colors";
                tr.innerHTML = `
                    <td class="p-3 font-bold text-navy-900">${v.port}</td>
                    <td class="p-3 font-extrabold text-teal-700">${v.name}</td>
                    <td class="p-3 text-slate-700">${v.type}</td>
                    <td class="p-3">${v.flag}</td>
                    <td class="p-3">${statusBadge}</td>
                    <td class="p-3 text-center font-bold text-slate-800">${v.draught}</td>
                    <td class="p-3 text-slate-600">${v.origin}</td>
                    <td class="p-3 text-slate-600 leading-snug">${v.impact}</td>
                `;
                tbody.appendChild(tr);
            });
        }

        function filterVessels() {
            const search = document.getElementById('searchInput').value.toLowerCase();
            const port = document.getElementById('portFilter').value;
            const status = document.getElementById('statusFilter').value;
            const cargo = document.getElementById('cargoFilter').value;

            const filtered = vesselsData.filter(v => {
                const matchesSearch = v.name.toLowerCase().includes(search) || 
                                      v.origin.toLowerCase().includes(search) || 
                                      v.type.toLowerCase().includes(search);
                const matchesPort = (port === 'ALL') || v.port.includes(port);
                const matchesStatus = (status === 'ALL') || (v.status === status);
                
                let matchesCargo = true;
                if (cargo !== 'ALL') {
                    if (cargo === 'LPG') matchesCargo = v.type.includes('LPG') || v.type.includes('LNG') || v.type.includes('غاز');
                    else if (cargo === 'خام') matchesCargo = v.type.includes('خام') || v.type.includes('Crude');
                    else if (cargo === 'أسفلت') matchesCargo = v.type.includes('أسفلت') || v.type.includes('كيماويات');
                    else if (cargo === 'منتجات نفطية') matchesCargo = v.type.includes('منتجات') || v.type.includes('وقود');
                }

                return matchesSearch && matchesPort && matchesStatus && matchesCargo;
            });

            renderVesselsTable(filtered);
        }

        // Port Details Selection Handler
        function selectPortDetails(key) {
            document.querySelectorAll('.port-card').forEach(c => c.classList.remove('border-teal-600'));
            document.querySelectorAll('.port-card').forEach(c => c.classList.add('border-transparent'));
            
            const btn = document.getElementById(`btn-port-${key}`);
            if (btn) {
                btn.classList.remove('border-transparent');
                btn.classList.add('border-teal-600');
            }

            const info = portDetailsDB[key];
            const panel = document.getElementById('portDetailPanel');
            panel.innerHTML = `
                <div class="flex items-center justify-between border-b border-slate-200 pb-2 mb-3">
                    <h3 class="font-bold text-navy-900 text-base">${info.title}</h3>
                    <span class="bg-teal-700 text-white text-xs px-2.5 py-1 rounded-full">${info.badge}</span>
                </div>
                <p class="text-xs sm:text-sm text-slate-700 leading-relaxed">${info.text}</p>
            `;
        }

        // Price Simulator Logic
        function updatePriceSimulation() {
            const cif = parseFloat(document.getElementById('cifSlider').value);
            const tic = 3.76;
            const tva = (cif + tic) * 0.10;
            const margin = 0.90;
            const total = cif + tic + tva + margin;

            document.getElementById('cifVal').innerText = cif.toFixed(2) + ' درهم';
            document.getElementById('ticVal').innerText = tic.toFixed(2) + ' درهم';
            document.getElementById('tvaVal').innerText = tva.toFixed(2) + ' درهم';
            document.getElementById('marginVal').innerText = margin.toFixed(2) + ' درهم';
            document.getElementById('totalPriceVal').innerText = total.toFixed(2) + ' درهم';

            const alertBox = document.getElementById('impactAlert');
            if (total > 15.00) {
                alertBox.className = "p-3 rounded-lg bg-red-100 border border-red-300 text-xs text-red-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x26a0; منطقة صدمة تسعيرية حادة (تجاوز 15.00 درهم/لتر):</strong><br>
                    تُظهر المؤشرات الاجتماعية اضطرار أسر متعددة لتقليص نفقات التغذية والعلاج والتعليم، وتفاقم الضغوط التضخمية.
                `;
            } else if (total > 13.00) {
                alertBox.className = "p-3 rounded-lg bg-amber-50 border border-amber-200 text-xs text-amber-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x26a0; منطقة ضغط متوسط على القدرة الشرائية (13.00 - 15.00 درهم):</strong><br>
                    تسجيل "تضخم لوجستي" يزيد تكلفة النقل الطرقي والأسواق الأسبوعية بنسبة تتراوح بين +1.4% و+2.5%.
                `;
            } else {
                alertBox.className = "p-3 rounded-lg bg-emerald-50 border border-emerald-200 text-xs text-emerald-900 leading-normal";
                alertBox.innerHTML = `
                    <strong>&#x2705; منطقة استقرار توازني (أقل من 13.00 درهم):</strong><br>
                    يستعيد الاقتصاد قدرته التنافسية وتتراجع الضغوط على ميزانيات الأسر المعيشية والنقل.
                `;
            }
        }

        // Policy Tabs Handler
        function switchPolicyTab(tabId) {
            document.querySelectorAll('.policy-content').forEach(c => c.classList.add('hidden'));
            document.querySelectorAll('[id$="-btn"]').forEach(b => {
                b.classList.remove('tab-active');
                b.classList.add('text-slate-500', 'font-semibold');
            });

            document.getElementById(`${tabId}-content`).classList.remove('hidden');
            const activeBtn = document.getElementById(`${tabId}-btn`);
            activeBtn.classList.add('tab-active');
            activeBtn.classList.remove('text-slate-500');
        }

        // Chart.js Visualizations
        function initStatusChart() {
            const ctx = document.getElementById('vesselStatusChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['راسية على الرصيف (Moored)', 'منطقة المخطاف (At Anchor)', 'مبحرة / عبور (Underway)'],
                    datasets: [{
                        data: [11, 15, 6],
                        backgroundColor: ['#0d9488', '#d97706', '#2563eb'],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { font: { family: 'Cairo', size: 11 } } },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.raw} سفينة`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function initCargoChart() {
            const ctx = document.getElementById('cargoTypeChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['منتجات مكررة/وقود', 'غاز مسال (LPG/LNG)', 'نفط/كيماويات', 'نفط خام', 'أسفلت/بيتون'],
                    datasets: [{
                        label: 'عدد الناقلات المرصودة',
                        data: [13, 8, 8, 2, 1],
                        backgroundColor: '#0f172a',
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true, ticks: { stepSize: 2, font: { family: 'Cairo' } } },
                        x: { ticks: { font: { family: 'Cairo', size: 10 } } }
                    },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `العدد: ${context.raw} ناقلة`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function initPriceBreakdownChart() {
            const ctx = document.getElementById('priceBreakdownChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['سعر CIF الدولي (56%)', 'ضريبة TIC الثابتة (28.1%)', 'ضريبة TVA 10% (9.1%)', 'هوامش التوزيع واللوجستيك (6.8%)'],
                    datasets: [{
                        data: [7.50, 3.76, 1.22, 0.90],
                        backgroundColor: ['#0d9488', '#d97706', '#2563eb', '#64748b'],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { font: { family: 'Cairo', size: 11 } } },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.raw} درهم/لتر`;
                                }
                            }
                        }
                    }
                }
            });
        }

        // Smooth Scroll Helper
        function scrollToSection(id) {
            const el = document.getElementById(id);
            if (el) {
                el.scrollIntoView({ behavior: 'smooth' });
            }
        }
    </script>
</body>
</html>



<div data-wp-interactive="core/file" class="wp-block-file"><object data-wp-bind--hidden="!state.hasPdfPreview" hidden class="wp-block-file__embed" data="https://sms-institute.com/wp-content/uploads/2026/10/تقرير-الوضعية-الطاقية-بالموانئ-المغربية.pdf" type="application/pdf" style="width:100%;height:600px" aria-label="Embed of تقرير-الوضعية-الطاقية-بالموانئ-المغربية."></object><a id="wp-block-file--media-1c5a44b0-cb16-4f5e-9e5a-f66eefc903d3" href="https://sms-institute.com/wp-content/uploads/2026/10/تقرير-الوضعية-الطاقية-بالموانئ-المغربية.pdf">تقرير-الوضعية-الطاقية-بالموانئ-المغربية</a><a href="https://sms-institute.com/wp-content/uploads/2026/10/تقرير-الوضعية-الطاقية-بالموانئ-المغربية.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-1c5a44b0-cb16-4f5e-9e5a-f66eefc903d3">Download</a></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Automatisation et IA dans la Recherche Scientifique- الأتمتة والذكاء الاصطناعي في البحث العلمي</title>
		<link>https://sms-institute.com/automatisation-et-ia-dans-la-recherche-scientifique-%d8%a7%d9%84%d8%a3%d8%aa%d9%85%d8%aa%d8%a9-%d9%88%d8%a7%d9%84%d8%b0%d9%83%d8%a7%d8%a1-%d8%a7%d9%84%d8%a7%d8%b5%d8%b7%d9%86%d8%a7%d8%b9%d9%8a-%d9%81/</link>
		
		<dc:creator><![CDATA[Sanaa Haouata]]></dc:creator>
		<pubDate>Mon, 12 Oct 2026 17:22:06 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1313</guid>

					<description><![CDATA[إعلان الدورة التدريبية: الأتمتة والذكاء الاصطناعي في البحث العلمي صيغة هجينة: حضوري + عن بُعد Français الأتمتة والذكاء الاصطناعي في&#8230;]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إعلان الدورة التدريبية: الأتمتة والذكاء الاصطناعي في البحث العلمي</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&#038;family=Inter:wght@400;500;600;700&#038;display=swap" rel="stylesheet">
    
    <!-- Partie 1 PayPal SDK -->
    <script src="https://www.paypal.com/sdk/js?client-id=BAATJQazC6LYIQF151sl0aKdOCe3_roVZFNFlYdAG0K23oFgYZcZhTnUaAGDmG24JWwAtq_ibCBrU9G5u8&#038;components=hosted-buttons&#038;disable-funding=venmo&#038;currency=USD" crossorigin="anonymous" async></script>

    <style>
        :root {
            --bg-light: #e8f5e9;
            --bg-card: #ffffff;
            --bg-card-hover: #f1f8e9;
            --accent-green: #2e7d32;
            --accent-dark: #1b5e20;
            --text-main: #1b2e1e;
            --text-muted: #37474f;
            --border-color: #a5d6a7;
            --gold: #f59e0b;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Cairo', 'Inter', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-main);
            line-height: 1.6;
            padding: 20px 10px;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background: #c8e6c9;
            border-bottom: 1px solid var(--border-color);
        }

        .badge-hybrid {
            background: var(--accent-green);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .lang-btn {
            background: white;
            border: 2px solid var(--accent-green);
            color: var(--accent-green);
            padding: 6px 14px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            transition: all 0.3s;
        }

        .lang-btn:hover {
            background: var(--accent-green);
            color: white;
        }

        .hero {
            padding: 40px 30px;
            text-align: center;
            background: linear-gradient(180deg, #c8e6c9 0%, #ffffff 100%);
            border-bottom: 1px solid var(--border-color);
        }

        .hero h1 {
            font-size: 2.1rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: var(--accent-dark);
        }

        .hero p {
            font-size: 1.15rem;
            color: var(--text-muted);
            max-width: 700px;
            margin: 0 auto 25px auto;
            font-weight: 600;
        }

        .meta-info {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .meta-item {
            background: #f1f8e9;
            border: 1px solid var(--border-color);
            padding: 10px 18px;
            border-radius: 10px;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .section {
            padding: 35px 30px;
            border-bottom: 1px solid var(--border-color);
        }

        .section-title {
            font-size: 1.35rem;
            color: var(--accent-dark);
            margin-bottom: 20px;
            font-weight: 800;
        }

        .program-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        @media (max-width: 768px) {
            .program-grid {
                grid-template-columns: 1fr;
            }
        }

        .day-card {
            background: #f9fbe7;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
        }

        .day-title {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--accent-green);
            margin-bottom: 12px;
        }

        .day-list {
            list-style: none;
        }

        .day-list li {
            position: relative;
            padding-right: 20px;
            margin-bottom: 8px;
            font-size: 0.95rem;
            color: var(--text-main);
            font-weight: 600;
        }

        [dir="ltr"] .day-list li {
            padding-right: 0;
            padding-left: 20px;
        }

        .day-list li::before {
            content: "•";
            color: var(--accent-green);
            font-weight: bold;
            position: absolute;
            right: 0;
        }

        [dir="ltr"] .day-list li::before {
            right: auto;
            left: 0;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        @media (max-width: 768px) {
            .pricing-grid {
                grid-template-columns: 1fr;
            }
        }

        .price-card {
            background: #f1f8e9;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }

        .price-card.featured {
            border: 2px solid var(--accent-green);
            background: #e8f5e9;
        }

        .price-category {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 10px;
        }

        .price-value {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--accent-dark);
            margin-bottom: 5px;
        }

        .price-sub {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .contact-box {
            background: #f1f8e9;
            border: 2px solid var(--accent-green);
            border-radius: 16px;
            padding: 25px;
            text-align: center;
        }

        .contact-grid {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .contact-item {
            background: white;
            border: 1px solid var(--border-color);
            padding: 14px 24px;
            border-radius: 10px;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-main);
            text-decoration: none;
            transition: all 0.2s;
            font-weight: 700;
        }

        .contact-item:hover {
            border-color: var(--accent-green);
            background: #e8f5e9;
        }

        .paypal-box {
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px dashed var(--border-color);
        }
    </style>
</head>
<body>

<div class="container" id="appContainer" dir="rtl">
    <div class="top-bar">
        <span class="badge-hybrid" id="badgeText">صيغة هجينة: حضوري + عن بُعد</span>
        <button class="lang-btn" onclick="toggleLanguage()" id="langBtn">Français</button>
    </div>

    <div class="hero">
        <h1 id="heroTitle">الأتمتة والذكاء الاصطناعي في البحث العلمي</h1>
        <p id="heroSub">دورة تدريبية مكثفة لتطوير مهارات الباحثين، أتمتة مراجعة الأدبيات، وتسريع تحليل البيانات باستخدام أحدث التقنيات الرقمية</p>
        
        <div class="meta-info">
            <div class="meta-item"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c5.png" alt="📅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="metaDuration">المدة: يومان مكثفان</span></div>
            <div class="meta-item"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="metaLocation">النمط: حضوري + بث افتراضي مباشر</span></div>
            <div class="meta-item"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4dc.png" alt="📜" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="metaCert">شهادة مشاركة معتمدة</span></div>
        </div>
    </div>

    <div class="section">
        <h2 class="section-title" id="progTitle"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> المحاور الرئيسية للدورة</h2>
        <div class="program-grid">
            <div class="day-card">
                <div class="day-title" id="d1Head">اليوم الأول: الأساسيات والأتمتة التوثيقية</div>
                <ul class="day-list">
                    <li id="d1_1">مبادئ نماذج اللغة الكبيرة (LLMs) والوكلاء الأذكياء في البحث العلمي</li>
                    <li id="d1_2">الهندسة الموجهة (Prompt Engineering) لتحليل النصوص الأكاديمية</li>
                    <li id="d1_3">استيعاب المجموعات الوثائقية الضخمة وإنشاء مصفوفات التلخيص</li>
                    <li id="d1_4">أتمتة مراجعات الأدبيات واستخراج الفجوات البحثية (Research Gaps)</li>
                </ul>
            </div>
            <div class="day-card">
                <div class="day-title" id="d2Head">اليوم الثاني: التحليل الرقمي، الكتابة والأخلاقيات</div>
                <ul class="day-list">
                    <li id="d2_1">توليد والتحقق من نصوص التحليل الإحصائي (Python / R)</li>
                    <li id="d2_2">المساعدة في الصياغة الأكاديمية وفق معايير الهيكلة العلمية (IMRAD)</li>
                    <li id="d2_3">تحسين الأسلوب الأكاديمي، الصياغة بلغات متعددة والتدقيق</li>
                    <li id="d2_4">قواعد النزاهة العلمية، تجنب التحيز والأخلاقيات الرقمية</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="section">
        <h2 class="section-title" id="priceTitle"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4b3.png" alt="💳" class="wp-smiley" style="height: 1em; max-height: 1em;" /> رسوم المشاركة</h2>
        <div class="pricing-grid">
            <div class="price-card featured">
                <div class="price-category" id="p1Cat">الطلبة والباحثون الشباب</div>
                <div class="price-value">300 / 500 <span style="font-size: 0.9rem">د.م.</span></div>
                <div class="price-sub" id="p1Sub">300 درهم (عن بُعد) | 500 درهم (حضوري)</div>
            </div>
            <div class="price-card">
                <div class="price-category" id="p2Cat">الأساتذة والباحثون</div>
                <div class="price-value">400 / 700 <span style="font-size: 0.9rem">د.م.</span></div>
                <div class="price-sub" id="p2Sub">400 درهم (عن بُعد) | 700 درهم (حضوري)</div>
            </div>
            <div class="price-card">
                <div class="price-category" id="p3Cat">المؤسسات والمهنيون</div>
                <div class="price-value">800 / 1000 <span style="font-size: 0.9rem">د.م.</span></div>
                <div class="price-sub" id="p3Sub">800 درهم (عن بُعد) | 1000 درهم (حضوري)</div>
            </div>
        </div>
    </div>

    <div class="section">
        <h2 class="section-title" id="contactTitle"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4de.png" alt="📞" class="wp-smiley" style="height: 1em; max-height: 1em;" /> للتسجيل والأداء المباشر</h2>
        <div class="contact-box">
            <p id="contactDesc" style="color: var(--text-main); font-weight: 700;">للتسجيل أو لحجز مقعدك، يرجى التواصل المباشر معنا أو الأداء المباشر عبر PayPal:</p>
            
            <div class="contact-grid">
                <a href="mailto:contact@sms-institute.com" class="contact-item">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4e7.png" alt="📧" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span>contact@sms-institute.com</span>
                </a>
                <a href="https://wa.me/212772555320" target="_blank" class="contact-item" rel="noopener">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ac.png" alt="💬" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span>واتساب: +212 772 555 320</span>
                </a>
            </div>

            <!-- Intégration Bouton PayPal (Partie 2 & 3) -->
            <div class="paypal-box">
                <p style="font-weight: 700; margin-bottom: 15px; color: var(--accent-dark);"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4b3.png" alt="💳" class="wp-smiley" style="height: 1em; max-height: 1em;" /> الأداء المباشر عبر بطاقة البنك / PayPal:</p>
                
                <!-- Partie 3 : Div Conteneur PayPal -->
                <div id="paypal-container-J5QR74M4ZPCPJ"></div>

                <!-- Partie 2 : Script Render PayPal -->
                <script>
                  document.addEventListener("DOMContentLoaded", (event) => {
                    paypal.HostedButtons({
                      hostedButtonId: "J5QR74M4ZPCPJ"
                    })
                    .render("#paypal-container-J5QR74M4ZPCPJ")
                  })
                </script>
            </div>
        </div>
    </div>
</div>

<script>
    let currentLang = 'ar';

    const t = {
        ar: {
            langBtn: "Français",
            dir: "rtl",
            badge: "صيغة هجينة: حضوري + عن بُعد",
            heroTitle: "الأتمتة والذكاء الاصطناعي في البحث العلمي",
            heroSub: "دورة تدريبية مكثفة لتطوير مهارات الباحثين، أتمتة مراجعة الأدبيات، وتسريع تحليل البيانات باستخدام أحدث التقنيات الرقمية",
            metaDuration: "المدة: يومان مكثفان",
            metaLocation: "النمط: حضوري + بث افتراضي مباشر",
            metaCert: "شهادة مشاركة معتمدة",
            progTitle: "&#x1f4cc; المحاور الرئيسية للدورة",
            d1Head: "اليوم الأول: الأساسيات والأتمتة التوثيقية",
            d1_1: "مبادئ نماذج اللغة الكبيرة (LLMs) والوكلاء الأذكياء في البحث العلمي",
            d1_2: "الهندسة الموجهة (Prompt Engineering) لتحليل النصوص الأكاديمية",
            d1_3: "استيعاب المجموعات الوثائقية الضخمة وإنشاء مصفوفات التلخيص",
            d1_4: "أتمتة مراجعات الأدبيات واستخراج الفجوات البحثية (Research Gaps)",
            d2Head: "اليوم الثاني: التحليل الرقمي، الكتابة والأخلاقيات",
            d2_1: "توليد والتحقق من نصوص التحليل الإحصائي (Python / R)",
            d2_2: "المساعدة في الصياغة الأكاديمية وفق معايير الهيكلة العلمية (IMRAD)",
            d2_3: "تحسين الأسلوب الأكاديمي، الصياغة بلغات متعددة والتدقيق",
            d2_4: "قواعد النزاهة العلمية، تجنب التحيز والأخلاقيات الرقمية",
            priceTitle: "&#x1f4b3; رسوم المشاركة",
            p1Cat: "الطلبة والباحثون الشباب",
            p1Sub: "300 درهم (عن بُعد) | 500 درهم (حضوري)",
            p2Cat: "الأساتذة والباحثون",
            p2Sub: "400 درهم (عن بُعد) | 700 درهم (حضوري)",
            p3Cat: "المؤسسات والمهنيون",
            p3Sub: "800 درهم (عن بُعد) | 1000 درهم (حضوري)",
            contactTitle: "&#x1f4de; للتسجيل والأداء المباشر",
            contactDesc: "للتسجيل أو لحجز مقعدك، يرجى التواصل المباشر معنا أو الأداء المباشر عبر PayPal:"
        },
        fr: {
            langBtn: "عربي",
            dir: "ltr",
            badge: "Format Hybride : Présentiel + En ligne",
            heroTitle: "Automatisation et IA dans la Recherche Scientifique",
            heroSub: "Formation intensive pour maîtriser l'IA générative, automatiser les revues de littérature et accélérer l'analyse de données scientifiques.",
            metaDuration: "Durée : 2 jours intensifs",
            metaLocation: "Format : Présentiel + Visioconférence interactive",
            metaCert: "Attestation de participation délivrée",
            progTitle: "&#x1f4cc; Programme Synthétique de la Formation",
            d1Head: "Jour 1 : Fondations & Automatisation Documentaire",
            d1_1: "Principes des Grands Modèles de Langage (LLM) et agents intelligents",
            d1_2: "Prompt engineering appliqué à l'analyse d'articles scientifiques",
            d1_3: "Ingestion de corpus massifs et matrices de synthèse automatisées",
            d1_4: "Identification automatisée des lacunes de recherche (Research Gaps)",
            d2Head: "Jour 2 : Analyse de Données, Rédaction & Éthique",
            d2_1: "Génération et vérification de scripts d'analyse (Python / R)",
            d2_2: "Assistance à la rédaction académique structurée (norme IMRAD)",
            d2_3: "Polissage stylistique, traduction scientifique et relecture",
            d2_4: "Intégrité scientifique, prévention des biais et éthique de l'IA",
            priceTitle: "&#x1f4b3; Tarifs de Participation",
            p1Cat: "Étudiants & Doctorants",
            p1Sub: "300 DH (En ligne) | 500 DH (Présentiel)",
            p2Cat: "Enseignants-Chercheurs",
            p2Sub: "400 DH (En ligne) | 700 DH (Présentiel)",
            p3Cat: "Professionnels & Institutions",
            p3Sub: "800 DH (En ligne) | 1 000 DH (Présentiel)",
            contactTitle: "&#x1f4de; Inscription & Paiement Direct",
            contactDesc: "Pour vous inscrire ou réserver votre place, contactez-nous directement ou payez via PayPal :"
        }
    };

    function toggleLanguage() {
        currentLang = currentLang === 'ar' ? 'fr' : 'ar';
        const data = t[currentLang];
        
        const container = document.getElementById('appContainer');
        container.setAttribute('dir', data.dir);

        document.getElementById('langBtn').innerText = data.langBtn;
        document.getElementById('badgeText').innerText = data.badge;
        document.getElementById('heroTitle').innerText = data.heroTitle;
        document.getElementById('heroSub').innerText = data.heroSub;
        document.getElementById('metaDuration').innerText = data.metaDuration;
        document.getElementById('metaLocation').innerText = data.metaLocation;
        document.getElementById('metaCert').innerText = data.metaCert;
        document.getElementById('progTitle').innerText = data.progTitle;
        
        document.getElementById('d1Head').innerText = data.d1Head;
        document.getElementById('d1_1').innerText = data.d1_1;
        document.getElementById('d1_2').innerText = data.d1_2;
        document.getElementById('d1_3').innerText = data.d1_3;
        document.getElementById('d1_4').innerText = data.d1_4;

        document.getElementById('d2Head').innerText = data.d2Head;
        document.getElementById('d2_1').innerText = data.d2_1;
        document.getElementById('d2_2').innerText = data.d2_2;
        document.getElementById('d2_3').innerText = data.d2_3;
        document.getElementById('d2_4').innerText = data.d2_4;

        document.getElementById('priceTitle').innerText = data.priceTitle;
        document.getElementById('p1Cat').innerText = data.p1Cat;
        document.getElementById('p1Sub').innerText = data.p1Sub;
        document.getElementById('p2Cat').innerText = data.p2Cat;
        document.getElementById('p2Sub').innerText = data.p2Sub;
        document.getElementById('p3Cat').innerText = data.p3Cat;
        document.getElementById('p3Sub').innerText = data.p3Sub;

        document.getElementById('contactTitle').innerText = data.contactTitle;
        document.getElementById('contactDesc').innerText = data.contactDesc;
    }
</script>

</body>
</html>



<h1 class="wp-block-heading has-text-align-center">INSCRIPTION &#8211; التسجيل في التكوين</h1>


<div class="frm_forms  with_frm_style frm_style_formidable-style frm_rtl" id="frm_form_2_container" data-token="69a4fa5d0fd349c1d58f61baa8e2ae92">
<form enctype="multipart/form-data" method="post" class="frm-show-form " id="form_lia-et-lautomatisation-dans-la-recherche" data-token="69a4fa5d0fd349c1d58f61baa8e2ae92">
<div class="frm_form_fields ">
<fieldset>
<legend class="frm_screen_reader">L&#8217;IA et l&#8217;Automatisation dans la Recherche</legend>

<div class="frm_fields_container">
<input type="hidden" name="frm_action" value="create" />
<input type="hidden" name="form_id" value="2" />
<input type="hidden" name="frm_hide_fields_2" id="frm_hide_fields_2" value="" />
<input type="hidden" name="form_key" value="lia-et-lautomatisation-dans-la-recherche" />
<input type="hidden" name="item_meta[0]" value="" />
<input type="hidden" id="frm_submit_entry_2" name="frm_submit_entry_2" value="c8e88eb664" /><input type="hidden" name="_wp_http_referer" value="/category/non-classe/feed/" /><div id="frm_field_7_container" class="frm_form_field form-field  frm_required_field frm_top_container">
	<div  id="field_q4r6j_label" class="frm_primary_label">Nom- الاسم الكامل
		<span class="frm_required" aria-hidden="true">*</span>
	</div>
	<fieldset aria-labelledby="field_q4r6j_label">
	<legend class="frm_screen_reader frm_hidden">
		Nom- الاسم الكامل	</legend>

	<div  class="frm_combo_inputs_container" id="frm_combo_inputs_container_7" data-name-layout="first_last">
					<div
				id="frm_field_7-first_container"
				class="frm_form_field form-field frm_form_subfield-first  frm6"
				data-sub-field-name="first"
			>
				<label for="field_q4r6j_first" class="frm_screen_reader frm_hidden">
					Prénom- الاسم الشخصي				</label>

				<input  type="text" id="field_q4r6j_first" value="" name="item_meta[7][first]" autocomplete="given-name" data-reqmsg="Nom- الاسم الكامل cannot be blank." aria-required="true" data-invmsg="Nom- الاسم الكامل is invalid" aria-invalid="false"  /><div class="frm_description" id="frm_field_7_first_desc">Prénom- الاسم الشخصي</div>			</div>
						<div
				id="frm_field_7-last_container"
				class="frm_form_field form-field frm_form_subfield-last  frm6"
				data-sub-field-name="last"
			>
				<label for="field_q4r6j_last" class="frm_screen_reader frm_hidden">
					Nom- الاسم العائلي				</label>

				<input  type="text" id="field_q4r6j_last" value="" name="item_meta[7][last]" autocomplete="family-name" data-reqmsg="Nom- الاسم الكامل cannot be blank." aria-required="true" data-invmsg="Nom- الاسم الكامل is invalid" aria-invalid="false"  /><div class="frm_description" id="frm_field_7_last_desc">Nom- الاسم العائلي</div>			</div>
				</div>
</fieldset>

	
	
</div>
<div id="frm_field_8_container" class="frm_form_field form-field  frm_required_field frm_top_container">
	<label for="field_5wrzd" id="field_5wrzd_label" class="frm_primary_label">E-mail- البريد الالكتروني
		<span class="frm_required" aria-hidden="true">*</span>
	</label>
	<input type="email" id="field_5wrzd" name="item_meta[8]" value=""  data-reqmsg="E-mail- البريد الالكتروني cannot be blank." aria-required="true" data-invmsg="E-mail- البريد الالكتروني is invalid" aria-invalid="false"  />
	
	
</div>
<div id="frm_field_15_container" class="frm_form_field form-field  frm_top_container">
	<label for="field_rm53m" id="field_rm53m_label" class="frm_primary_label">Téléphone- الهاتف
		<span class="frm_required" aria-hidden="true"></span>
	</label>
	<input type="tel" id="field_rm53m" name="item_meta[15]" value=""  data-invmsg="Téléphone- الهاتف is invalid" aria-invalid="false" pattern="((\+\d{1,3}(-|.| )?\(?\d\)?(-| |.)?\d{1,5})|(\(?\d{2,6}\)?))(-|.| )?(\d{3,4})(-|.| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"  />
	
	
</div>
<div id="frm_field_10_container" class="frm_form_field form-field  frm_required_field frm_top_container">
	<label for="field_napfb" id="field_napfb_label" class="frm_primary_label">Statut / Qualité &#8211; الصفة
		<span class="frm_required" aria-hidden="true">*</span>
	</label>
			<select name="item_meta[10]" id="field_napfb"  data-reqmsg="Statut / Qualité - الصفة cannot be blank." aria-required="true" data-invmsg="Statut / Qualité - الصفة is invalid" aria-invalid="false"  >
		<option  value="Enseignant-Chercheur، استاذ جامعي">Enseignant-Chercheur، استاذ جامعي</option><option  value="Doctorant، طالب دكتوراه">Doctorant، طالب دكتوراه</option><option  value="Post-doctorant، باحث ما بعد الدكتوراه">Post-doctorant، باحث ما بعد الدكتوراه</option><option  value="Ingénieur de recherche، مهندس البحث">Ingénieur de recherche، مهندس البحث</option><option  value="Etudiant، طالب">Etudiant، طالب</option><option  value="Professionnel de la recherche، مهني في البحث العلمي">Professionnel de la recherche، مهني في البحث العلمي</option><option  value="Autre profil académique، اكاديمي اخر">Autre profil académique، اكاديمي اخر</option>	</select>
	
	
	
</div>
<div id="frm_field_11_container" class="frm_form_field form-field  frm_required_field frm_top_container">
	<label for="field_1bq6d" id="field_1bq6d_label" class="frm_primary_label">Établissement / Université / Labo &#8211; مؤسسة الارتباط الجامعي 
		<span class="frm_required" aria-hidden="true">*</span>
	</label>
	<input type="text" id="field_1bq6d" name="item_meta[11]" value=""  data-reqmsg="Établissement / Université / Labo - مؤسسة الارتباط الجامعي  cannot be blank." aria-required="true" data-invmsg="Établissement / Université / Labo - مؤسسة الارتباط الجامعي  is invalid" aria-invalid="false"  />
	
	
</div>
<div id="frm_field_12_container" class="frm_form_field form-field  frm_required_field frm_top_container">
	<label for="field_j8tp9" id="field_j8tp9_label" class="frm_primary_label">Domaine de Recherche- مجال البحث
		<span class="frm_required" aria-hidden="true">*</span>
	</label>
	<input type="text" id="field_j8tp9" name="item_meta[12]" value=""  data-reqmsg="Domaine de Recherche- مجال البحث cannot be blank." aria-required="true" data-invmsg="Domaine de Recherche- مجال البحث is invalid" aria-invalid="false"  />
	
	
</div>
<div id="frm_field_14_container" class="frm_form_field form-field  frm_top_container vertical_radio">
	<div  id="field_43lo3_label" class="frm_primary_label">Mode de Présence Souhaité- نوع التكوين (عن بعد ام حضوري)
		<span class="frm_required" aria-hidden="true"></span>
	</div>
	<div class="frm_opt_container" aria-labelledby="field_43lo3_label" role="radiogroup">		<div class="frm_radio" id="frm_radio_14-0">			<label  for="field_43lo3-0">
					<input type="radio" name="item_meta[14]" id="field_43lo3-0" value="حضوري- En présentiel"
		 data-invmsg="Mode de Présence Souhaité- نوع التكوين (عن بعد ام حضوري) is invalid"   /> حضوري- En présentiel</label></div>
		<div class="frm_radio" id="frm_radio_14-1">			<label  for="field_43lo3-1">
					<input type="radio" name="item_meta[14]" id="field_43lo3-1" value="عن بعد- À distance (ou En ligne)"
		 data-invmsg="Mode de Présence Souhaité- نوع التكوين (عن بعد ام حضوري) is invalid"   /> عن بعد- À distance (ou En ligne)</label></div>
</div>
	
	
</div>
<div id="frm_field_6_container" class="frm_form_field form-field ">
	<div class="frm_submit frm_flex">
<button class="frm_button_submit" type="submit"  >Envoyer- ارسال </button>



</div>
</div>
	<input type="hidden" name="item_key" value="" />
			<div id="frm_field_16_container">
			<label for="field_qmgpj" >
				If you are human, leave this field blank.			</label>
			<input  id="field_qmgpj" type="text" class="frm_form_field form-field frm_verify" name="item_meta[16]" value=""  />
		</div>
		<input name="frm_state" type="hidden" value="/GWTNkOR0zPWYeH6wrPXL/ZdRZ+wWnezY9Zl2P80oB4=" /></div>
</fieldset>
</div>

</form>
</div>



<div id="paypal-container-J5QR74M4ZPCPJ"></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Interactive Legislative Election Results Observatory 2026 &#8211; SMS Institute</title>
		<link>https://sms-institute.com/interactive-legislative-election-results-observatory-2026-sms-institute/</link>
		
		<dc:creator><![CDATA[Sanaa Haouata]]></dc:creator>
		<pubDate>Fri, 02 Oct 2026 22:33:18 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1300</guid>

					<description><![CDATA[Interactive Legislative Election Results Observatory 2026 &#8211; SMS Institute 🏛️ Interactive Legislative Results Observatory Report &#038; Analysis: Social and Media&#8230;]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Legislative Election Results Observatory 2026 &#8211; SMS Institute</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&#038;display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 360px;
            }
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col antialiased">

<!-- Chosen Palette: Warm Neutral & Civic Navy (Royal Navy #1E3A8A, Warm Slate #334155, Warm Neutral BG #F8FAFC, Gold Accent #D97706) -->

<!-- Application Structure Plan:
- Header & Context Section: English title, SMS Institute branding badge, election date (September 23, 2026), and overall seat overview.
- Overview Card: Explicit attribution to the Social and Media Studies Institute (SMS Institute).
- Interactive KPI / Summary Cards: Total Seats, Local Seats, Regional Seats (Women), Total Political Parties represented.
- Dynamic Analytical Charts Section:
  1. Party Distribution Chart (Chart.js Bar Chart) comparing total seats per party across local and regional lists in English.
  2. Category Breakdown Chart (Chart.js Doughnut Chart) showing Local vs. Regional proportion.
- Interactive Filter & Search Controls: Filter by List Type (Local/Regional), Party Selection, Province/Region, and full-text search for MP names.
- Detailed Interactive Table Section: Paginated/Scrollable dynamic list of MPs with responsive design, dynamic counts, and live search highlights.
- Party Insights Cards: Interactive grid summarizing party results and seat shares with quick click-to-filter capability.
-->

<!-- Visualization & Content Choices:
1. KPI Stat Cards -> Goal: Inform -> Clean HTML Cards with dynamic JS computation -> Justification: Immediate visual summary of key metrics in English.
2. Party Seats Chart -> Goal: Compare -> Chart.js Canvas Bar Chart -> Dynamic filtering integration -> Justification: Easiest way to compare political weight of each party.
3. Local vs Regional Proportions -> Goal: Inform/Compare -> Chart.js Canvas Doughnut Chart -> Justification: Clear proportional representation of direct vs women regional list.
4. Filterable Interactive Table -> Goal: Organize & Search -> HTML/Tailwind Table + Pure Vanilla JS logic -> Justification: Fast search across all entries without page reloads.
- Confirming NO SVG / NO Mermaid JS used. All visuals rendered via HTML/CSS & Canvas. -->

<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->

    <header class="bg-indigo-950 text-white shadow-lg border-b border-amber-600/30 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div class="flex items-center space-x-3">
                    <span class="text-2xl"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3db.png" alt="🏛" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                    <div>
                        <h1 class="text-xl md:text-2xl font-bold text-amber-400">Interactive Legislative Results Observatory</h1>
                        <p class="text-xs text-amber-200/90 font-medium mt-0.5">Report &#038; Analysis: Social and Media Studies Institute (SMS Institute)</p>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2 text-xs bg-indigo-900/80 px-3 py-2 rounded-lg border border-indigo-700/50">
                    <span class="bg-amber-500/20 text-amber-300 font-semibold px-2 py-0.5 rounded border border-amber-500/30">SMS Institute</span>
                    <span class="text-indigo-400">|</span>
                    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c5.png" alt="📅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> September 23, 2026</span>
                    <span class="text-indigo-400">|</span>
                    <span id="last-update-tag">Total: 395 MPs</span>
                </div>
            </div>
        </div>
    </header>

    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-8">

        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden">
            <div class="absolute -right-6 -bottom-6 w-32 h-32 bg-indigo-50 rounded-full blur-2xl pointer-events-none"></div>
            <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-3 border-b border-slate-100 pb-3">
                <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ca.png" alt="📊" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> About the Platform &#038; Analytical Report
                </h2>
                <span class="text-xs bg-indigo-50 text-indigo-900 font-bold px-3 py-1 rounded-full border border-indigo-200">
                    Prepared by: Social and Media Studies Institute (SMS Institute)
                </span>
            </div>
            <p class="text-slate-600 text-sm leading-relaxed">
                This interactive report was developed based on data provided by the **Social and Media Studies Institute (SMS Institute)** regarding the election of members of the House of Representatives held on September 23, 2026. The platform aims to facilitate the exploration of the parliamentary map (local constituencies and women regional list) through instant search tools, advanced filtering, and dynamic analytical charts.
            </p>
        </section>

        <section class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-between">
                <div class="text-xs font-semibold text-slate-500">Total Elected MPs</div>
                <div class="text-2xl md:text-3xl font-extrabold text-indigo-950 mt-2" id="kpi-total">395</div>
                <div class="text-xs text-emerald-600 mt-1 font-medium">100% of parliamentary seats</div>
            </div>

            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-between">
                <div class="text-xs font-semibold text-slate-500">Local Constituencies</div>
                <div class="text-2xl md:text-3xl font-extrabold text-indigo-700 mt-2" id="kpi-local">305</div>
                <div class="text-xs text-slate-500 mt-1">Coverage across all prefectures</div>
            </div>

            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-between">
                <div class="text-xs font-semibold text-slate-500">Regional Constituencies (Women)</div>
                <div class="text-2xl md:text-3xl font-extrabold text-amber-600 mt-2" id="kpi-regional">90</div>
                <div class="text-xs text-amber-700 mt-1">Distributed across the 12 regions</div>
            </div>

            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-between">
                <div class="text-xs font-semibold text-slate-500">Political Parties Represented</div>
                <div class="text-2xl md:text-3xl font-extrabold text-slate-800 mt-2" id="kpi-parties">13</div>
                <div class="text-xs text-slate-500 mt-1">Political pluralism</div>
            </div>
        </section>

        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 space-y-4">
            <div>
                <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c8.png" alt="📈" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Graphical Analysis &#038; Political Distribution
                </h2>
                <p class="text-slate-500 text-xs mt-1">
                    The charts below present seat distribution by political party and the breakdown between local and regional representation according to SMS Institute data.
                </p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-center">
                <div class="lg:col-span-2 bg-slate-50 p-4 rounded-xl border border-slate-200">
                    <h3 class="text-xs font-bold text-slate-700 mb-3 text-center">Seat Distribution by Political Party (Local vs Regional)</h3>
                    <div class="chart-container">
                        <canvas id="partyChart"></canvas>
                    </div>
                </div>

                <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col justify-center items-center">
                    <h3 class="text-xs font-bold text-slate-700 mb-3 text-center">Seat Breakdown Ratio (Local / Regional)</h3>
                    <div class="chart-container" style="max-height: 280px;">
                        <canvas id="typeChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 space-y-6">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-slate-100 pb-4">
                <div>
                    <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                        <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f50e.png" alt="🔎" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Interactive Exploration &#038; Filtering
                    </h2>
                    <p class="text-slate-500 text-xs mt-1">Search by MP name, constituency, province/region, or political party.</p>
                </div>
                <button onclick="resetFilters()" class="text-xs font-medium text-indigo-700 hover:text-indigo-900 bg-indigo-50 hover:bg-indigo-100 px-3 py-2 rounded-lg transition border border-indigo-200">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Reset Filters
                </button>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">List Type</label>
                    <select id="filter-type" onchange="applyFilters()" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="ALL">All Lists (395)</option>
                        <option value="LOCAL">Local Lists Only (305)</option>
                        <option value="REGIONAL">Regional Lists &#8211; Women (90)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Political Party</label>
                    <select id="filter-party" onchange="applyFilters()" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="ALL">All Parties</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Prefecture / Province / Region</label>
                    <select id="filter-region" onchange="applyFilters()" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="ALL">All Regions &#038; Provinces</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Text Search</label>
                    <input type="text" id="search-input" onkeyup="applyFilters()" placeholder="MP name, city, constituency..." class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
                </div>
            </div>

            <div class="flex flex-wrap items-center justify-between gap-2 pt-2">
                <div class="text-xs text-slate-600 font-semibold" id="table-results-count">
                    Displaying 395 out of 395 MPs
                </div>
                <div class="flex flex-wrap gap-2 text-xs" id="quick-party-tags">
                </div>
            </div>

            <div class="overflow-x-auto rounded-xl border border-slate-200 custom-scrollbar">
                <table class="w-full text-left text-xs text-slate-700">
                    <thead class="bg-indigo-950 text-white uppercase font-bold">
                        <tr>
                            <th scope="col" class="px-4 py-3 text-center">#</th>
                            <th scope="col" class="px-4 py-3">MP Name</th>
                            <th scope="col" class="px-4 py-3">Political Party</th>
                            <th scope="col" class="px-4 py-3">Constituency</th>
                            <th scope="col" class="px-4 py-3">Province / Region</th>
                            <th scope="col" class="px-4 py-3 text-center">List Type</th>
                        </tr>
                    </thead>
                    <tbody id="mp-table-body" class="divide-y divide-slate-200 bg-white">
                    </tbody>
                </table>
            </div>

            <div class="flex items-center justify-between pt-2">
                <button id="prev-page" onclick="changePage(-1)" class="px-3 py-1.5 border border-slate-300 text-xs rounded-md bg-white hover:bg-slate-50 disabled:opacity-50">Previous</button>
                <span id="page-info" class="text-xs text-slate-600 font-medium">Page 1 of 1</span>
                <button id="next-page" onclick="changePage(1)" class="px-3 py-1.5 border border-slate-300 text-xs rounded-md bg-white hover:bg-slate-50 disabled:opacity-50">Next</button>
            </div>
        </section>

        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 space-y-4">
            <div>
                <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3f7.png" alt="🏷" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Political Party Summary
                </h2>
                <p class="text-slate-500 text-xs mt-1">Click on any card to filter the main table directly.</p>
            </div>
            <div id="party-cards-grid" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            </div>
        </section>

    </main>

    <footer class="bg-indigo-950 text-slate-300 text-xs border-t border-indigo-900 py-8 mt-12">
        <div class="max-w-7xl mx-auto px-4 text-center space-y-3">
            <div class="flex justify-center items-center space-x-2 font-bold text-amber-400 text-sm">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3db.png" alt="🏛" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <span>Social and Media Studies Institute (SMS INSTITUTE)</span>
            </div>
            <p class="text-slate-400 max-w-2xl mx-auto">
                Interactive platform for the election results of the members of the House of Representatives &#8211; September 23, 2026 Election. Prepared and designed for researchers, analysts, and decision-makers.
            </p>
            <p class="text-slate-500 text-[11px] pt-2 border-t border-indigo-900/60 max-w-md mx-auto">
                All rights reserved © 2026 &#8211; Social and Media Studies Institute (SMS Institute)
            </p>
        </div>
    </footer>

    <script>
        const rawLocalData = [
            ["Tangier-Assilah", "Tangier-Assilah", "Abdelwahed Boulaich", "RNI"],
            ["Tangier-Assilah", "Tangier-Assilah", "Mohamed Bouzidan El Yadari", "PJD"],
            ["Tangier-Assilah", "Tangier-Assilah", "Abdellatif El Ghalbzouri", "PAM"],
            ["Tangier-Assilah", "Tangier-Assilah", "Mohamed Zemmouri", "MP"],
            ["Tangier-Assilah", "Tangier-Assilah", "Mohamed El Hammami", "Istiqlal Party"],
            ["M'diq-Fnideq", "M'diq-Fnideq", "Mohamed Larbi El Mourabit", "PAM"],
            ["M'diq-Fnideq", "M'diq-Fnideq", "Issam Ferassi", "PJD"],
            ["M'diq-Fnideq", "M'diq-Fnideq", "Moncef El Toub", "Istiqlal Party"],
            ["Tetouan", "Tetouan", "Ibrahime Benssbih", "MP"],
            ["Tetouan", "Tetouan", "Ahmed Boukhebza", "PJD"],
            ["Tetouan", "Tetouan", "Rachid Talbi Alami", "RNI"],
            ["Tetouan", "Tetouan", "Mohamed Larbi Ahnin", "PAM"],
            ["Fahs-Anjra", "Fahs-Anjra", "Rédouane En-Nouino", "RNI"],
            ["Fahs-Anjra", "Fahs-Anjra", "Abdessalam El Challef El Hammoud", "PAM"],
            ["Larache", "Larache", "Nizar Baraka", "Istiqlal Party"],
            ["Larache", "Larache", "Zineb Simou", "PAM"],
            ["Larache", "Larache", "Abdelkhalek Bssinti", "PPS"],
            ["Larache", "Larache", "Abdelaziz El Ouadki", "MP"],
            ["Al Hoceima", "Al Hoceima", "Mohamed El Aaraj", "MP"],
            ["Al Hoceima", "Al Hoceima", "Karim El Boutahri", "RNI"],
            ["Al Hoceima", "Al Hoceima", "Abdelhak Amghar", "USFP"],
            ["Al Hoceima", "Al Hoceima", "Mohamed El Hammouti", "PAM"],
            ["Chefchaouen", "Chefchaouen", "El Amine El Bekkali El Tahiri", "USFP"],
            ["Chefchaouen", "Chefchaouen", "Abdelhafid El Makouthi", "PAM"],
            ["Chefchaouen", "Chefchaouen", "Abderrahmane El Omari", "RNI"],
            ["Chefchaouen", "Chefchaouen", "Ahmed Amine El Mtioui", "Istiqlal Party"],
            ["Ouezzane", "Ouezzane", "Ahmed El Bouari", "RNI"],
            ["Ouezzane", "Ouezzane", "Abdelaziz El Chhab", "Istiqlal Party"],
            ["Ouezzane", "Ouezzane", "El Arbi El Maharachi", "PAM"],
            ["Oujda-Angad", "Oujda-Angad", "Abdallah Hamel", "PJD"],
            ["Oujda-Angad", "Oujda-Angad", "Omar Hejira", "Istiqlal Party"],
            ["Oujda-Angad", "Oujda-Angad", "Mohamed Qaidi", "RNI"],
            ["Oujda-Angad", "Oujda-Angad", "Abdelkader Hadhouri", "PAM"],
            ["Nador", "Nador", "Mohamed Moumni", "PAM"],
            ["Nador", "Nador", "Abdelhalim Foutat", "RNI"],
            ["Nador", "Nador", "Abdelkader Quodhadd", "UC"],
            ["Nador", "Nador", "Mohamed El Sadiki", "PJD"],
            ["Driouch", "Driouch", "Aziz Meknif", "PAM"],
            ["Driouch", "Driouch", "Abdelmonaim El Fattahi", "Istiqlal Party"],
            ["Driouch", "Driouch", "Abdallah El Boukili", "RNI"],
            ["Jerada", "Jerada", "Rédouane Bougetaya", "PAM"],
            ["Jerada", "Jerada", "Moustapha Toutou", "RNI"],
            ["Berkane", "Berkane", "Mohamed Ibrahimi", "PAM"],
            ["Berkane", "Berkane", "Abdelhakim Bouazza Benabdallah", "Istiqlal Party"],
            ["Berkane", "Berkane", "Mohamed Sadiki", "RNI"],
            ["Taourirt", "Taourirt", "Abderrahmane Sehli", "PAM"],
            ["Taourirt", "Taourirt", "Mohamed El Horr", "MP"],
            ["Taourirt", "Taourirt", "Abdelkader Kaka", "MP"],
            ["Guercif", "Guercif", "Mohamed El Bernichi", "PAM"],
            ["Guercif", "Guercif", "Ali El Djghaoui", "Istiqlal Party"],
            ["Figuig", "Figuig", "Hamid El Chaya", "PAM"],
            ["Figuig", "Figuig", "Rédouane Ben Ahmed", "RNI"],
            ["Fez", "Fez North", "Reem Chabat", "MP"],
            ["Fez", "Fez North", "Mohsen Azmi Hosni", "PAM"],
            ["Fez", "Fez North", "El Hassan Slighoua", "Istiqlal Party"],
            ["Fez", "Fez North", "Abdelmajid Ben Chennouf", "PJD"],
            ["Fez", "Fez South", "Khaled El Ajli", "MP"],
            ["Fez", "Fez South", "Zineb Chahim", "RNI"],
            ["Fez", "Fez South", "Mohamed Khi", "PJD"],
            ["Fez", "Fez South", "Aziz El Lebbar", "PAM"],
            ["Meknes", "Meknes", "Abdelkader El Breiki", "MP"],
            ["Meknes", "Meknes", "Anas El Ansari", "PAM"],
            ["Meknes", "Meknes", "Hassan El Yamani", "Istiqlal Party"],
            ["Meknes", "Meknes", "Abdallah Bouanou", "PJD"],
            ["Meknes", "Meknes", "El Abbas El Oumghari", "UC"],
            ["Meknes", "Meknes", "Ahmed Tahiri", "RNI"],
            ["El Hajeb", "El Hajeb", "Ahmed El Dekkaki", "PAM"],
            ["El Hajeb", "El Hajeb", "Abdelhak El Saidi", "PJD"],
            ["Ifrane", "Ifrane", "Mohamed Ouzzine", "MP"],
            ["Ifrane", "Ifrane", "Mohamed Achguig", "PAM"],
            ["Moulay Yacoub", "Moulay Yacoub", "El Hassan Chahbi", "Istiqlal Party"],
            ["Moulay Yacoub", "Moulay Yacoub", "El Hassan Belmokaddem", "PAM"],
            ["Sefrou", "Sefrou", "Mustapha El Khasm", "MDS"],
            ["Sefrou", "Sefrou", "Driss El Chebchali", "PAM"],
            ["Sefrou", "Sefrou", "Youssef Mandour", "RNI"],
            ["Boulemane", "Boulemane", "Rachid Hammouni", "PPS"],
            ["Boulemane", "Boulemane", "Mohamed Chouki", "RNI"],
            ["Taounate", "Taounate - Tissa", "Mohamed El Miri", "PAM"],
            ["Taounate", "Taounate - Tissa", "Mohamed El Sellasi", "RNI"],
            ["Taounate", "Taounate - Tissa", "Abdellatif El Fouikar", "PAM"],
            ["Taounate", "Karia - Ghafsai", "Abdallah El Idrissi El Bouzidi", "PPS"],
            ["Taounate", "Karia - Ghafsai", "El Mofaddal El Tahiri", "Istiqlal Party"],
            ["Taounate", "Karia - Ghafsai", "Mohamed El Hajjira", "PAM"],
            ["Taza", "Taza", "Abderrahmane El Meissouri", "RNI"],
            ["Taza", "Taza", "Mounir Chentir", "Istiqlal Party"],
            ["Taza", "Taza", "Khalil El Saddiki", "RNI"],
            ["Taza", "Taza", "Ahmed El Abbadi", "PPS"],
            ["Taza", "Taza", "Mohamed Amghar", "PAM"],
            ["Taza", "Taza", "Khaled El Boukarai", "PJD"],
            ["Rabat", "Rabat - Ocean", "Nabil El Dakhch", "MP"],
            ["Rabat", "Rabat - Ocean", "Mustapha El Khalfi", "PJD"],
            ["Rabat", "Rabat - Ocean", "Omar Mahmoud Benjelloun", "Left Coalition"],
            ["Rabat", "Rabat - Ocean", "Mohamed Mehdi Bensaid", "PAM"],
            ["Rabat", "Rabat - Chellah", "Adib Benbrahim", "PAM"],
            ["Rabat", "Rabat - Chellah", "El Hassan Lachgar", "USFP"],
            ["Rabat", "Rabat - Chellah", "Mohamed El Tahiri", "PJD"],
            ["Rabat", "Rabat - Chellah", "Driss Sentissi", "Istiqlal Party"],
            ["Salé", "Salé Medina", "Imad El Din El Rifi", "PAM"],
            ["Salé", "Salé Medina", "Salah El Din Belhassan", "MP"],
            ["Salé", "Salé Medina", "Kamal El Kouchi", "PJD"],
            ["Salé", "Salé Medina", "Aziz Hennaoui", "PJD"],
            ["Salé", "Salé El Jadida", "M'hammed Karboub", "Istiqlal Party"],
            ["Salé", "Salé El Jadida", "El Arbi El Rouich", "PAM"],
            ["Salé", "Salé El Jadida", "Driss El Azami El Idrissi", "PJD"],
            ["Skhirate-Temara", "Skhirate - Temara", "Mohamed El Hilali", "PAM"],
            ["Skhirate-Temara", "Skhirate - Temara", "Hassan Arif", "UC"],
            ["Skhirate-Temara", "Skhirate - Temara", "Rachid El Sajid", "Istiqlal Party"],
            ["Skhirate-Temara", "Skhirate - Temara", "Hatem Ben Rokia", "RNI"],
            ["Kenitra", "Kenitra", "El Hossein El Rahouia", "UC"],
            ["Kenitra", "Kenitra", "Mustapha Ibrahimi", "PJD"],
            ["Kenitra", "Kenitra", "Mohamed El Ghras", "MDS"],
            ["Kenitra", "Gharb", "Belaassal Chaoui", "UC"],
            ["Kenitra", "Gharb", "Abdelaziz Bouhsini", "PAM"],
            ["Khemisset", "Khemisset - Oulmes", "Mohamed Gharib", "RNI"],
            ["Khemisset", "Khemisset - Oulmes", "Mohamed Ouchorou", "PAM"],
            ["Khemisset", "Khemisset - Oulmes", "Fouad Karim", "PPS"],
            ["Khemisset", "Tiflet - Rommani", "Mohamed El Hammouch", "MP"],
            ["Khemisset", "Tiflet - Rommani", "Bouchra El Ouardi", "PAM"],
            ["Khemisset", "Tiflet - Rommani", "Abdessamad Archane", "MDS"],
            ["Khemisset", "Tiflet - Rommani", "Hassan El Filali", "RNI"],
            ["Sidi Kacem", "Sidi Kacem", "El Saâd Ben Zeroual", "PAM"],
            ["Sidi Kacem", "Sidi Kacem", "Abdennebi Aidoudi", "MP"],
            ["Sidi Kacem", "Sidi Kacem", "Fouad Slim", "RNI"],
            ["Sidi Kacem", "Sidi Kacem", "Mohamed El Hafez", "Istiqlal Party"],
            ["Sidi Kacem", "Sidi Kacem", "Hicham El Assal", "USFP"],
            ["Sidi Slimane", "Sidi Slimane", "Lahsseen Aouad", "PAM"],
            ["Sidi Slimane", "Sidi Slimane", "Amjid El Naka", "PJD"],
            ["Sidi Slimane", "Sidi Slimane", "Saber El Jabbhar", "UC"],
            ["Beni Mellal", "Beni Mellal", "Meriem Ouhssata", "PPS"],
            ["Beni Mellal", "Beni Mellal", "Mohamed El Bardia Ghazi", "PJD"],
            ["Beni Mellal", "Beni Mellal", "Rachid Mchich", "Left Coalition"],
            ["Beni Mellal", "Beni Mellal", "Hicham Sabri", "PAM"],
            ["Beni Mellal", "Beni Mellal", "Fadel Berras", "USFP"],
            ["Beni Mellal", "Beni Mellal", "Madiha Khir", "Istiqlal Party"],
            ["Azilal", "Bzou - Waouizeght", "Badr El Din Najeh Fowzi", "PAM"],
            ["Azilal", "Bzou - Waouizeght", "Mohamed Chouki", "USFP"],
            ["Azilal", "Bzou - Waouizeght", "Mohamed Amine", "UC"],
            ["Azilal", "Azilal - Demnate", "Abdelali Berouki", "Istiqlal Party"],
            ["Azilal", "Azilal - Demnate", "Mohamed Ait Benali", "PAM"],
            ["Azilal", "Azilal - Demnate", "Rachid Mansouri", "RNI"],
            ["Fquih Ben Salah", "Fquih Ben Salah", "Ahmed Fadli", "PAM"],
            ["Fquih Ben Salah", "Fquih Ben Salah", "Salah Hnine", "RNI"],
            ["Fquih Ben Salah", "Fquih Ben Salah", "Rahal El Makkawi", "Istiqlal Party"],
            ["Fquih Ben Salah", "Fquih Ben Salah", "El Cherkaoui El Zenaidi", "USFP"],
            ["Khenifra", "Khenifra", "Salah Oughbal", "Istiqlal Party"],
            ["Khenifra", "Khenifra", "Nabil Sabri", "MP"],
            ["Khenifra", "Khenifra", "Hamman Bahoussine", "PAM"],
            ["Khenifra", "Khenifra", "Abdelelah El Allaki", "USFP"],
            ["Khenifra", "Khenifra", "Mohamed Zekrani", "Istiqlal Party"],
            ["Khouribga", "Khouribga", "Abdessamad Khenani", "UC"],
            ["Khouribga", "Khouribga", "Said Serrar", "MP"],
            ["Khouribga", "Khouribga", "Bouabid Kebouri", "PJD"],
            ["Khouribga", "Khouribga", "Khelifa Mejidi", "PAM"],
            ["Casablanca", "Casablanca - Anfa", "Najwa Koukouss", "PAM"],
            ["Casablanca", "Casablanca - Anfa", "Abdessamad Haiker", "PJD"],
            ["Casablanca", "Casablanca - Anfa", "Nabila Mounib", "Left Coalition"],
            ["Casablanca", "Casablanca - Anfa", "Mohamed Chebbak", "RNI"],
            ["Mers Sultan - El Fida", "Mers Sultan El Fida", "Mohamed El Touimi Benjelloun", "PAM"],
            ["Mers Sultan - El Fida", "Mers Sultan El Fida", "El Fatmi Ramid", "PJD"],
            ["Mers Sultan - El Fida", "Mers Sultan El Fida", "El Hajj Ibrahim Naanaï", "UC"],
            ["Mers Sultan - El Fida", "Mers Sultan El Fida", "Hassan Ben Omar", "RNI"],
            ["Ain Sebaa - Hay Mohammadi", "Ain Sebaa - Hay Mohammadi", "Rachid Ajkini", "PJD"],
            ["Ain Sebaa - Hay Mohammadi", "Ain Sebaa - Hay Mohammadi", "Adil El Bittar", "PAM"],
            ["Ain Sebaa - Hay Mohammadi", "Ain Sebaa - Hay Mohammadi", "Abdellatif Harchich", "UC"],
            ["Ain Sebaa - Hay Mohammadi", "Ain Sebaa - Hay Mohammadi", "Mohamed El Rekkani", "Istiqlal Party"],
            ["Hay Hassani", "Hay Hassani", "Salah El Din Chenkit", "PAM"],
            ["Hay Hassani", "Hay Hassani", "Samir Chouki", "PJD"],
            ["Hay Hassani", "Hay Hassani", "Abdelhak El Chafik", "PAM"],
            ["Ain Chock", "Ain Chock", "Amina Maelainine", "PJD"],
            ["Ain Chock", "Ain Chock", "Mohamed Chafik Benkirane", "RNI"],
            ["Ain Chock", "Ain Chock", "Hicham El Heid", "Istiqlal Party"],
            ["Sidi Bernoussi", "Sidi Bernoussi", "Omar Belatif", "PJD"],
            ["Sidi Bernoussi", "Sidi Bernoussi", "Ahmed Brija", "PAM"],
            ["Sidi Bernoussi", "Sidi Bernoussi", "Said Kechani", "PJD"],
            ["Ben M'sick", "Ben M'sick", "Mohamed Joudar", "UC"],
            ["Ben M'sick", "Ben M'sick", "Tawfiq Kamil", "RNI"],
            ["Moulay Rachid", "Moulay Rachid", "Anas Haddadi", "RNI"],
            ["Moulay Rachid", "Moulay Rachid", "Mohamed Hammama", "PAM"],
            ["Moulay Rachid", "Moulay Rachid", "Mohsen Mofidi", "PJD"],
            ["Mohammedia", "Mohammedia", "El Thami Mohammedi", "PJD"],
            ["Mohammedia", "Mohammedia", "Said Tedlaoui", "Istiqlal Party"],
            ["Mohammedia", "Mohammedia", "Hicham Ait Menna", "RNI"],
            ["El Jadida", "El Jadida", "El Moustapha Murchid", "PJD"],
            ["El Jadida", "El Jadida", "Mohamed Mehdeb", "PAM"],
            ["El Jadida", "El Jadida", "Mohamed El Mokhnter", "MP"],
            ["El Jadida", "El Jadida", "M'barek El Tarmounia", "Istiqlal Party"],
            ["El Jadida", "El Jadida", "Ayman Bizid", "PPS"],
            ["El Jadida", "El Jadida", "Benasser Rafik", "RNI"],
            ["Nouaceur", "Nouaceur", "Noureddine Rafik", "RNI"],
            ["Nouaceur", "Nouaceur", "Abdelkrim Lehouaichri", "PJD"],
            ["Nouaceur", "Nouaceur", "Mohamed El Salmani", "PAM"],
            ["Mediouna", "Mediouna", "Abderrahim Ben El Dhaou", "PAM"],
            ["Mediouna", "Mediouna", "Amine Nokte", "RNI"],
            ["Benslimane", "Benslimane", "Ryad Mezzour", "Istiqlal Party"],
            ["Benslimane", "Benslimane", "Karim El Ziyadi", "PAM"],
            ["Benslimane", "Benslimane", "Yassine Oukacha", "RNI"],
            ["Berrechid", "Berrechid", "Saber El Kiyaf", "RNI"],
            ["Berrechid", "Berrechid", "Khelid Ibrahimi", "Istiqlal Party"],
            ["Berrechid", "Berrechid", "Manal Badel", "PAM"],
            ["Berrechid", "Berrechid", "Hamid Zatni", "PJD"],
            ["Settat", "Settat", "Messaoud Oussar", "MDS"],
            ["Settat", "Settat", "Ali Fadili", "PJD"],
            ["Settat", "Settat", "Othmane Badel", "PAM"],
            ["Settat", "Settat", "El Arbi Chreii", "Equity Party"],
            ["Settat", "Settat", "Mohamed Ghiat", "RNI"],
            ["Settat", "Settat", "Bouchaib Hamid Allah", "Istiqlal Party"],
            ["Sidi Bennour", "Sidi Bennour", "Abdelkrim Amine", "PAM"],
            ["Sidi Bennour", "Sidi Bennour", "Yasser Yandil", "RNI"],
            ["Sidi Bennour", "Sidi Bennour", "Abdelfattah Ammar", "MP"],
            ["Sidi Bennour", "Sidi Bennour", "Abdelghani Mekhdad", "Istiqlal Party"],
            ["Marrakech", "Medina - Sidi Youssef Ben Ali", "Fatima-Zohra Mansouri", "PAM"],
            ["Marrakech", "Medina - Sidi Youssef Ben Ali", "Salah El Din Ayach", "PJD"],
            ["Marrakech", "Medina - Sidi Youssef Ben Ali", "Abdelaziz Deryouch", "Istiqlal Party"],
            ["Marrakech", "Gueliz - Ennakhil", "Mohamed Sebbari", "PAM"],
            ["Marrakech", "Gueliz - Ennakhil", "Anas El Houaji", "Istiqlal Party"],
            ["Marrakech", "Gueliz - Ennakhil", "Mohamed Mounir Ouerzazi", "PJD"],
            ["Marrakech", "Menara", "Abderrazzak Ahlouch", "Istiqlal Party"],
            ["Marrakech", "Menara", "Mohamed Toufla", "PJD"],
            ["Marrakech", "Menara", "Tarik Hnich", "PAM"],
            ["Marrakech", "Menara", "Abdallah Aammara", "UC"],
            ["Chichaoua", "Chichaoua", "Moulay Hicham El Mhajri", "PAM"],
            ["Chichaoua", "Chichaoua", "Marouane Jennah", "RNI"],
            ["Chichaoua", "Chichaoua", "Ahmed Ouahrouch", "Istiqlal Party"],
            ["Al Haouz", "Al Haouz", "Mohamed Ademoussa", "Istiqlal Party"],
            ["Al Haouz", "Al Haouz", "Lahsseen El Ajouadi", "RNI"],
            ["Al Haouz", "Al Haouz", "Ahmed Touizi", "PAM"],
            ["Al Haouz", "Al Haouz", "Salah Nejmi", "PJD"],
            ["El Kelaa des Sraghna", "El Kelaa des Sraghna", "El Mokhtar Benfaida", "RNI"],
            ["El Kelaa des Sraghna", "El Kelaa des Sraghna", "Abderrahim Toussi", "PJD"],
            ["El Kelaa des Sraghna", "El Kelaa des Sraghna", "Abderrahim Ouamro", "PAM"],
            ["El Kelaa des Sraghna", "El Kelaa des Sraghna", "El Ayachi El Ferfar", "Istiqlal Party"],
            ["Essaouira", "Essaouira", "Othmane El Morsi", "PPS"],
            ["Essaouira", "Essaouira", "Tarik Mohamed Othmani", "RNI"],
            ["Essaouira", "Essaouira", "Mohamed Mellal", "USFP"],
            ["Essaouira", "Essaouira", "Ibrahim Benjelloul", "PAM"],
            ["Rehamna", "Rehamna", "Abdellatif Sandil", "RNI"],
            ["Rehamna", "Rehamna", "Ezzeddine El Madaoui", "PAM"],
            ["Rehamna", "Rehamna", "Hamid El Akroud", "USFP"],
            ["Safi", "Safi", "Reda Boukmazi", "PJD"],
            ["Safi", "Safi", "Mohamed Ajdia", "USFP"],
            ["Safi", "Safi", "Mohamed Karim", "PAM"],
            ["Safi", "Safi", "Hicham Saanan", "Istiqlal Party"],
            ["Safi", "Safi", "Fayçal Zerhouni", "UC"],
            ["Safi", "Safi", "Rachid Saber", "RNI"],
            ["Youssoufia", "Youssoufia", "Youssef El Rouijel", "PAM"],
            ["Youssoufia", "Youssoufia", "Moulay Rachid Hachimi", "PJD"],
            ["Youssoufia", "Youssoufia", "Smail El Alaoui", "USFP"],
            ["Errachidia", "Errachidia", "Mohamed Abdelbar Belhassan", "MP"],
            ["Errachidia", "Errachidia", "Mustapha El Amri", "PAM"],
            ["Errachidia", "Errachidia", "Mohamed Karoui", "RNI"],
            ["Errachidia", "Errachidia", "Mohamed El Taiki", "PJD"],
            ["Ouarzazate", "Ouarzazate", "Aatif El Tijani", "Istiqlal Party"],
            ["Ouarzazate", "Ouarzazate", "Imane Lmaoui", "PAM"],
            ["Ouarzazate", "Ouarzazate", "Rachid El Kadi", "PJD"],
            ["Midelt", "Midelt", "Marouane Chbaatou", "PAM"],
            ["Midelt", "Midelt", "Abdelaziz Barik", "Party of Unity & Democracy"],
            ["Midelt", "Midelt", "Rachid Taibi Alaoui", "MP"],
            ["Tinghir", "Tinghir", "Hicham Moujoud", "RNI"],
            ["Tinghir", "Tinghir", "Lahsseen Eddei", "Istiqlal Party"],
            ["Tinghir", "Tinghir", "Mohamed Qacha", "PPS"],
            ["Zagora", "Zagora", "Abderrahim Chahid", "USFP"],
            ["Zagora", "Zagora", "El Hossein Oualal", "RNI"],
            ["Zagora", "Zagora", "Youssef Amentzou", "PAM"],
            ["Agadir-Ida Ou Tanane", "Agadir-Ida Ou Tanane", "Zina Idkhali", "RNI"],
            ["Agadir-Ida Ou Tanane", "Agadir-Ida Ou Tanane", "Hamid Ouahbi", "PAM"],
            ["Agadir-Ida Ou Tanane", "Agadir-Ida Ou Tanane", "Mohamed Bakiri", "PJD"],
            ["Agadir-Ida Ou Tanane", "Agadir-Ida Ou Tanane", "Raja Massou", "USFP"],
            ["Inezgane-Ait Melloul", "Inezgane-Ait Melloul", "Mohamed Oudmine", "PAM"],
            ["Inezgane-Ait Melloul", "Inezgane-Ait Melloul", "Khaled El Channak", "Istiqlal Party"],
            ["Inezgane-Ait Melloul", "Inezgane-Ait Melloul", "Ahmed Edrak", "PJD"],
            ["Chtouka-Ait Baha", "Chtouka-Ait Baha", "El Hossein El Farissi", "PAM"],
            ["Chtouka-Ait Baha", "Chtouka-Ait Baha", "Ismail Kerram", "RNI"],
            ["Chtouka-Ait Baha", "Chtouka-Ait Baha", "El Hossein Ezoukagh", "Istiqlal Party"],
            ["Taroudant", "Taroudant South", "Abdelghani Limoun", "PJD"],
            ["Taroudant", "Taroudant South", "Abdessamad Qayouh", "Istiqlal Party"],
            ["Taroudant", "Taroudant South", "Hanan El Massi", "PAM"],
            ["Taroudant", "Taroudant South", "Nadia Bouhdoud", "RNI"],
            ["Taroudant", "Taroudant North", "Abdellatif Ouahbi", "PAM"],
            ["Taroudant", "Taroudant North", "Lahsseen El Saadi", "RNI"],
            ["Taroudant", "Taroudant North", "Abdelaziz El Bahja", "Istiqlal Party"],
            ["Tiznit", "Tiznit", "El Hassan El Baz", "Istiqlal Party"],
            ["Tiznit", "Tiznit", "Abdallah Ghazi", "RNI"],
            ["Tata", "Tata", "Mustapha Tedoumant", "RNI"],
            ["Tata", "Tata", "El Hossein Bouzahai", "Istiqlal Party"],
            ["Tata", "Tata", "El Mehdi Lebtait", "PAM"],
            ["Guelmim", "Guelmim", "Nadia Bouaida", "RNI"],
            ["Guelmim", "Guelmim", "Rachid El Tamek", "PAM"],
            ["Assa-Zag", "Assa-Zag", "Mahmoud Abba", "USFP"],
            ["Assa-Zag", "Assa-Zag", "Ibrahim El Oaaban", "PAM"],
            ["Tan-Tan", "Tan-Tan", "Abdallah Aberki", "RNI"],
            ["Sidi Ifni", "Sidi Ifni", "Siddati Jamal", "PAM"],
            ["Sidi Ifni", "Sidi Ifni", "Mustapha Baitas", "RNI"],
            ["Laayoune", "Laayoune", "Moulay Hamdi Ould Errachid", "Istiqlal Party"],
            ["Laayoune", "Laayoune", "Sidi Mohamed Salem El Joumani", "PAM"],
            ["Laayoune", "Laayoune", "Hassan El Derham", "PPS"],
            ["Boujdour", "Boujdour", "Abdallah Edbadda", "PAM"],
            ["Boujdour", "Boujdour", "Abdelaziz Abba", "Istiqlal Party"],
            ["Tarfaya", "Tarfaya", "Mohamed Salem Behiya", "RNI"],
            ["Tarfaya", "Tarfaya", "Abdallah Billat", "Istiqlal Party"],
            ["Es-Semara", "Es-Semara", "Sidi Mohamed El Joumani", "PAM"],
            ["Es-Semara", "Es-Semara", "Moulay Zbeir Habdi", "Istiqlal Party"],
            ["Oued Ed-Dahab", "Oued Ed-Dahab", "M'barek Himmia", "Istiqlal Party"],
            ["Oued Ed-Dahab", "Oued Ed-Dahab", "Khattat Yanja", "PAM"],
            ["Aousserd", "Aousserd", "Mohamed Boubaker", "Istiqlal Party"],
            ["Aousserd", "Aousserd", "Abdelfattah Ahl El Mekki", "PAM"]
        ];

        const rawRegionalData = [
            ["Tanger-Tetouan-Al Hoceima Region", "Salma Abalhassain", "PAM"],
            ["Tanger-Tetouan-Al Hoceima Region", "Manal El Zekkari", "USFP"],
            ["Tanger-Tetouan-Al Hoceima Region", "Ahlam Jeld", "PPS"],
            ["Tanger-Tetouan-Al Hoceima Region", "Wiam El Jallouli", "Istiqlal Party"],
            ["Tanger-Tetouan-Al Hoceima Region", "Romaisaa El Hassiouti", "RNI"],
            ["Tanger-Tetouan-Al Hoceima Region", "Douae Ahidar", "MP"],
            ["Tanger-Tetouan-Al Hoceima Region", "Hanan Zmizm", "New Democrats Party"],
            ["Tanger-Tetouan-Al Hoceima Region", "Majdouline El Rouzi", "PJD"],
            ["Oriental Region", "Lalla Hda El Mghari El Mbradh", "PAM"],
            ["Oriental Region", "Fatima-Zohra Besraoui", "RNI"],
            ["Oriental Region", "Hanan El Soufi", "PPS"],
            ["Oriental Region", "Dounia El Seqli", "PJD"],
            ["Oriental Region", "Malika Houleich", "MP"],
            ["Oriental Region", "Latifa El Taibi", "Istiqlal Party"],
            ["Oriental Region", "Sanaa El Rahmouni", "USFP"],
            ["Oriental Region", "Ilham El Hassani Alaoui", "MP"],
            ["Fez-Meknes Region", "Dounia El Zaher", "FFD"],
            ["Fez-Meknes Region", "Rachida Hamidi", "MDS"],
            ["Fez-Meknes Region", "Kenza El Zaher", "USFP"],
            ["Fez-Meknes Region", "Halima El Zoumi", "Istiqlal Party"],
            ["Fez-Meknes Region", "Khadija Hajoubi", "PAM"],
            ["Fez-Meknes Region", "Zohra Berhioui", "PPS"],
            ["Fez-Meknes Region", "Samira Oub Taleb", "PJD"],
            ["Fez-Meknes Region", "Safia El Lebbar", "UC"],
            ["Fez-Meknes Region", "Mounia Rechachi", "Left Coalition"],
            ["Rabat-Salé-Kénitra Region", "Fatima-Zohra Mahi", "UC"],
            ["Rabat-Salé-Kénitra Region", "Soumiya Moncef", "PPS"],
            ["Rabat-Salé-Kénitra Region", "Rahma Ouazzani Taibi", "Istiqlal Party"],
            ["Rabat-Salé-Kénitra Region", "Kamar Aidoudi", "MP"],
            ["Rabat-Salé-Kénitra Region", "Etimad El Zahidi", "RNI"],
            ["Rabat-Salé-Kénitra Region", "Laila Bilgha", "PAM"],
            ["Rabat-Salé-Kénitra Region", "Khadija Knine", "USFP"],
            ["Rabat-Salé-Kénitra Region", "Hind El Beki", "PJD"],
            ["Rabat-Salé-Kénitra Region", "Fatiha El Hajjouji", "MDS"],
            ["Rabat-Salé-Kénitra Region", "Souad Freguech", "Left Coalition"],
            ["Béni Mellal-Khénifra Region", "Fouzia El Kerfad", "PJD"],
            ["Béni Mellal-Khénifra Region", "Fatima-Zohra Boujenan", "USFP"],
            ["Béni Mellal-Khénifra Region", "Lalla Hafida Imami", "PPS"],
            ["Béni Mellal-Khénifra Region", "Aya Adal", "RNI"],
            ["Béni Mellal-Khénifra Region", "Sara Oumahzone", "PAM"],
            ["Béni Mellal-Khénifra Region", "Hala Zekrani", "Istiqlal Party"],
            ["Béni Mellal-Khénifra Region", "Reem Serrar", "MP"],
            ["Casablanca-Settat Region", "Dalila El Aoudiyi", "PPS"],
            ["Casablanca-Settat Region", "Fatima Ouachai", "PJD"],
            ["Casablanca-Settat Region", "Khadra Daoudi Rghioui", "MDS"],
            ["Casablanca-Settat Region", "Amal Aidouk", "Equity Party"],
            ["Casablanca-Settat Region", "Nabila Jalal", "Left Coalition"],
            ["Casablanca-Settat Region", "Sanaa Badawi", "USFP"],
            ["Casablanca-Settat Region", "Malika Mezzour", "PAM"],
            ["Casablanca-Settat Region", "Amina Salek", "MP"],
            ["Casablanca-Settat Region", "Salma El Alami", "Istiqlal Party"],
            ["Casablanca-Settat Region", "Hayat Joudar", "UC"],
            ["Casablanca-Settat Region", "Nadia Nouam", "FFD"],
            ["Casablanca-Settat Region", "Nabila Rmili", "RNI"],
            ["Marrakech-Safi Region", "Khadija El Akroud", "USFP"],
            ["Marrakech-Safi Region", "Fatima-Zohra El Beroufi", "MP"],
            ["Marrakech-Safi Region", "Fatima-Zohra Abdoun", "Left Coalition"],
            ["Marrakech-Safi Region", "Latifa Bouskri", "UC"],
            ["Marrakech-Safi Region", "Salma Ahlouch", "Istiqlal Party"],
            ["Marrakech-Safi Region", "Fatima-Zohra El Meska", "MDS"],
            ["Marrakech-Safi Region", "Meriem El Kanouni", "PPS"],
            ["Marrakech-Safi Region", "Rachida Benbouazza", "RNI"],
            ["Marrakech-Safi Region", "Hind Ouraissi", "PJD"],
            ["Marrakech-Safi Region", "Nadia El Idrissi Slitin", "PAM"],
            ["Drâa-Tafilalet Region", "Lalla Nezha El Cherkaoui", "USFP"],
            ["Drâa-Tafilalet Region", "Najat Ouihya", "PAM"],
            ["Drâa-Tafilalet Region", "Meriem Baya", "RNI"],
            ["Drâa-Tafilalet Region", "Ibtissam Tarik", "Istiqlal Party"],
            ["Drâa-Tafilalet Region", "Lalla Azhour Meliki", "PJD"],
            ["Drâa-Tafilalet Region", "Hakima El Kortobi", "MP"],
            ["Souss-Massa Region", "Sanaa Zahid", "PAM"],
            ["Souss-Massa Region", "Sanaa Akka", "PJD"],
            ["Souss-Massa Region", "Kenza Qayouh", "Istiqlal Party"],
            ["Souss-Massa Region", "Khadija El Baz", "PPS"],
            ["Souss-Massa Region", "Zakia El Driouch", "RNI"],
            ["Souss-Massa Region", "Fadwa Rajouani", "USFP"],
            ["Souss-Massa Region", "Sanaa Fowzi", "Left Coalition"],
            ["Guelmim-Oued Noun Region", "El Neama Aila", "USFP"],
            ["Guelmim-Oued Noun Region", "Maria Oudmine", "PAM"],
            ["Guelmim-Oued Noun Region", "Meriem Bouaida", "RNI"],
            ["Guelmim-Oued Noun Region", "Fatima-Zohra Kweis", "PJD"],
            ["Guelmim-Oued Noun Region", "Salma Karmoun", "Istiqlal Party"],
            ["Laâyoune-Sakia El Hamra Region", "Moufida Widad", "Istiqlal Party"],
            ["Laâyoune-Sakia El Hamra Region", "Lalla Rkia Chrif", "Istiqlal Party"],
            ["Laâyoune-Sakia El Hamra Region", "Aziza Badad", "PAM"],
            ["Laâyoune-Sakia El Hamra Region", "Asmaa Aouba", "USFP"],
            ["Laâyoune-Sakia El Hamra Region", "Fatima Essouidi", "PPS"],
            ["Dakhla-Oued Ed-Dahab Region", "Zineb El Kouri", "PAM"],
            ["Dakhla-Oued Ed-Dahab Region", "Khadija El Khleifi", "MP"],
            ["Dakhla-Oued Ed-Dahab Region", "Fatima Ould Omar", "Istiqlal Party"]
        ];

        let allMPs = [];
        let filteredMPs = [];
        let currentPage = 1;
        const pageSize = 15;
        let partyChartInstance = null;
        let typeChartInstance = null;

        function initData() {
            let idCounter = 1;
            rawLocalData.forEach(item => {
                allMPs.push({
                    id: idCounter++,
                    province: item[0],
                    district: item[1],
                    name: item[2],
                    party: item[3],
                    type: "LOCAL",
                    typeLabel: "Local"
                });
            });

            rawRegionalData.forEach(item => {
                allMPs.push({
                    id: idCounter++,
                    province: item[0],
                    district: item[0],
                    name: item[1],
                    party: item[2],
                    type: "REGIONAL",
                    typeLabel: "Regional (Women)"
                });
            });

            filteredMPs = [...allMPs];
            populateFilterDropdowns();
            renderStats();
            renderCharts();
            renderTable();
            renderPartyCards();
        }

        function populateFilterDropdowns() {
            const partySelect = document.getElementById("filter-party");
            const regionSelect = document.getElementById("filter-region");

            const parties = [...new Set(allMPs.map(m => m.party))].sort();
            const regions = [...new Set(allMPs.map(m => m.province))].sort();

            parties.forEach(p => {
                const opt = document.createElement("option");
                opt.value = p;
                opt.textContent = p;
                partySelect.appendChild(opt);
            });

            regions.forEach(r => {
                const opt = document.createElement("option");
                opt.value = r;
                opt.textContent = r;
                regionSelect.appendChild(opt);
            });

            const quickPartiesDiv = document.getElementById("quick-party-tags");
            const topParties = ["PAM", "RNI", "Istiqlal Party", "PJD", "USFP", "MP"];
            topParties.forEach(p => {
                const btn = document.createElement("button");
                btn.className = "px-2.5 py-1 bg-slate-100 hover:bg-indigo-100 text-slate-700 hover:text-indigo-900 rounded-md transition border border-slate-200 font-medium";
                btn.textContent = p;
                btn.onclick = () => {
                    document.getElementById("filter-party").value = p;
                    applyFilters();
                };
                quickPartiesDiv.appendChild(btn);
            });
        }

        function renderStats() {
            const total = filteredMPs.length;
            const local = filteredMPs.filter(m => m.type === "LOCAL").length;
            const regional = filteredMPs.filter(m => m.type === "REGIONAL").length;
            const partiesCount = new Set(filteredMPs.map(m => m.party)).size;

            document.getElementById("kpi-total").textContent = total;
            document.getElementById("kpi-local").textContent = local;
            document.getElementById("kpi-regional").textContent = regional;
            document.getElementById("kpi-parties").textContent = partiesCount;
            document.getElementById("table-results-count").textContent = `Displaying ${total} out of ${allMPs.length} MPs`;
        }

        function applyFilters() {
            const typeVal = document.getElementById("filter-type").value;
            const partyVal = document.getElementById("filter-party").value;
            const regionVal = document.getElementById("filter-region").value;
            const searchVal = document.getElementById("search-input").value.trim().toLowerCase();

            filteredMPs = allMPs.filter(mp => {
                const matchType = typeVal === "ALL" || mp.type === typeVal;
                const matchParty = partyVal === "ALL" || mp.party === partyVal;
                const matchRegion = regionVal === "ALL" || mp.province === regionVal;
                const matchSearch = searchVal === "" ||
                    mp.name.toLowerCase().includes(searchVal) ||
                    mp.district.toLowerCase().includes(searchVal) ||
                    mp.province.toLowerCase().includes(searchVal) ||
                    mp.party.toLowerCase().includes(searchVal);

                return matchType && matchParty && matchRegion && matchSearch;
            });

            currentPage = 1;
            renderStats();
            renderTable();
            updateCharts();
        }

        function resetFilters() {
            document.getElementById("filter-type").value = "ALL";
            document.getElementById("filter-party").value = "ALL";
            document.getElementById("filter-region").value = "ALL";
            document.getElementById("search-input").value = "";
            applyFilters();
        }

        function renderTable() {
            const tbody = document.getElementById("mp-table-body");
            tbody.innerHTML = "";

            if (filteredMPs.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-slate-500">
                            No results match your current search criteria.
                        </td>
                    </tr>
                `;
                document.getElementById("page-info").textContent = "Page 0 of 0";
                document.getElementById("prev-page").disabled = true;
                document.getElementById("next-page").disabled = true;
                return;
            }

            const totalPages = Math.ceil(filteredMPs.length / pageSize);
            const startIdx = (currentPage - 1) * pageSize;
            const pageData = filteredMPs.slice(startIdx, startIdx + pageSize);

            pageData.forEach((mp, index) => {
                const tr = document.createElement("tr");
                tr.className = index % 2 === 0 ? "bg-white hover:bg-indigo-50/40" : "bg-slate-50/60 hover:bg-indigo-50/40";

                const badgeClass = mp.type === "LOCAL" 
                    ? "bg-blue-100 text-blue-800 border-blue-200" 
                    : "bg-amber-100 text-amber-800 border-amber-200";

                tr.innerHTML = `
                    <td class="px-4 py-3 text-center font-bold text-slate-400">${startIdx + index + 1}</td>
                    <td class="px-4 py-3 font-bold text-slate-800">${mp.name}</td>
                    <td class="px-4 py-3 font-medium text-slate-700">${mp.party}</td>
                    <td class="px-4 py-3 text-slate-600">${mp.district}</td>
                    <td class="px-4 py-3 text-slate-600">${mp.province}</td>
                    <td class="px-4 py-3 text-center">
                        <span class="inline-block px-2.5 py-0.5 text-[10px] font-semibold rounded-full border ${badgeClass}">
                            ${mp.typeLabel}
                        </span>
                    </td>
                `;
                tbody.appendChild(tr);
            });

            document.getElementById("page-info").textContent = `Page ${currentPage} of ${totalPages}`;
            document.getElementById("prev-page").disabled = currentPage === 1;
            document.getElementById("next-page").disabled = currentPage === totalPages;
        }

        function changePage(delta) {
            const totalPages = Math.ceil(filteredMPs.length / pageSize);
            const newPage = currentPage + delta;
            if (newPage >= 1 && newPage <= totalPages) {
                currentPage = newPage;
                renderTable();
            }
        }

        function getPartyData() {
            const partyMap = {};
            filteredMPs.forEach(mp => {
                if (!partyMap[mp.party]) {
                    partyMap[mp.party] = { total: 0, local: 0, regional: 0 };
                }
                partyMap[mp.party].total++;
                if (mp.type === "LOCAL") partyMap[mp.party].local++;
                else partyMap[mp.party].regional++;
            });

            const sortedParties = Object.keys(partyMap).sort((a, b) => partyMap[b].total - partyMap[a].total);
            return {
                labels: sortedParties,
                localData: sortedParties.map(p => partyMap[p].local),
                regionalData: sortedParties.map(p => partyMap[p].regional),
                totalData: sortedParties.map(p => partyMap[p].total)
            };
        }

        function renderCharts() {
            const partyData = getPartyData();

            const ctxParty = document.getElementById("partyChart").getContext("2d");
            partyChartInstance = new Chart(ctxParty, {
                type: 'bar',
                data: {
                    labels: partyData.labels,
                    datasets: [
                        {
                            label: 'Local Seats',
                            data: partyData.localData,
                            backgroundColor: '#1e3a8a',
                            borderRadius: 4
                        },
                        {
                            label: 'Regional Seats (Women)',
                            data: partyData.regionalData,
                            backgroundColor: '#d97706',
                            borderRadius: 4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true,
                            ticks: { font: { family: 'Plus Jakarta Sans', size: 10 } }
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true,
                            ticks: { font: { family: 'Plus Jakarta Sans', size: 10 } }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { font: { family: 'Plus Jakarta Sans', size: 11 } }
                        },
                        tooltip: {
                            bodyFont: { family: 'Plus Jakarta Sans' },
                            titleFont: { family: 'Plus Jakarta Sans' }
                        }
                    }
                }
            });

            const ctxType = document.getElementById("typeChart").getContext("2d");
            const localCount = filteredMPs.filter(m => m.type === "LOCAL").length;
            const regCount = filteredMPs.filter(m => m.type === "REGIONAL").length;

            typeChartInstance = new Chart(ctxType, {
                type: 'doughnut',
                data: {
                    labels: ['Local', 'Regional (Women)'],
                    datasets: [{
                        data: [localCount, regCount],
                        backgroundColor: ['#1e3a8a', '#d97706'],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { font: { family: 'Plus Jakarta Sans', size: 11 } }
                        }
                    }
                }
            });
        }

        function updateCharts() {
            if (!partyChartInstance || !typeChartInstance) return;

            const partyData = getPartyData();
            partyChartInstance.data.labels = partyData.labels;
            partyChartInstance.data.datasets[0].data = partyData.localData;
            partyChartInstance.data.datasets[1].data = partyData.regionalData;
            partyChartInstance.update();

            const localCount = filteredMPs.filter(m => m.type === "LOCAL").length;
            const regCount = filteredMPs.filter(m => m.type === "REGIONAL").length;
            typeChartInstance.data.datasets[0].data = [localCount, regCount];
            typeChartInstance.update();
        }

        function renderPartyCards() {
            const grid = document.getElementById("party-cards-grid");
            grid.innerHTML = "";

            const partyCounts = {};
            allMPs.forEach(m => {
                partyCounts[m.party] = (partyCounts[m.party] || 0) + 1;
            });

            const sorted = Object.entries(partyCounts).sort((a, b) => b[1] - a[1]);

            sorted.forEach(([party, count]) => {
                const percentage = ((count / allMPs.length) * 100).toFixed(1);
                const card = document.createElement("div");
                card.className = "bg-slate-50 hover:bg-indigo-50 border border-slate-200 rounded-xl p-4 cursor-pointer transition flex flex-col justify-between hover:border-indigo-300 shadow-sm";
                card.onclick = () => {
                    document.getElementById("filter-party").value = party;
                    applyFilters();
                    window.scrollTo({ top: document.getElementById("search-input").offsetTop - 100, behavior: 'smooth' });
                };

                card.innerHTML = `
                    <div>
                        <div class="text-xs font-bold text-slate-800">${party}</div>
                        <div class="text-xl font-black text-indigo-950 mt-1">${count} <span class="text-xs font-normal text-slate-500">seat(s)</span></div>
                    </div>
                    <div class="w-full bg-slate-200 h-1.5 rounded-full mt-3 overflow-hidden">
                        <div class="bg-indigo-800 h-full rounded-full" style="width: ${percentage}%"></div>
                    </div>
                    <div class="text-[10px] text-slate-500 text-right mt-1 font-semibold">${percentage}% of the chamber</div>
                `;
                grid.appendChild(card);
            });
        }

        window.onload = initData;
    </script>
</body>
</html>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>bservatoire Interactif des Résultats Législatifs 2026 &#8211; SMS Institute</title>
		<link>https://sms-institute.com/bservatoire-interactif-des-resultats-legislatifs-2026-sms-institute/</link>
		
		<dc:creator><![CDATA[Sanaa Haouata]]></dc:creator>
		<pubDate>Fri, 02 Oct 2026 22:26:15 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1296</guid>

					<description><![CDATA[Observatoire Interactif des Résultats Législatifs 2026 &#8211; SMS Institute 🏛️ Observatoire Interactif des Résultats Législatifs Rapport &#038; Étude: Institut d&#8217;Études&#8230;]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Observatoire Interactif des Résultats Législatifs 2026 &#8211; SMS Institute</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&#038;display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 360px;
            }
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col antialiased">

<!-- Chosen Palette: Warm Neutral & Civic Blue (Royal Navy #1E3A8A, Warm Slate #334155, Warm Neutral BG #F8FAFC, Gold Accent #D97706) -->

<!-- Application Structure Plan:
- Header & Context Section: Title, SMS Institute branding badge, election date (23 September 2026), and list overview in French.
- Overview Card: Explicit attribution to Social and Media Studies Institute (SMS Institute / Institut d'Études Sociales et Média).
- Interactive KPI / Summary Cards: Total Seats, Local Seats, Regional Seats, Total Political Parties represented.
- Dynamic Analytical Charts Section:
  1. Party Distribution Chart (Chart.js Bar Chart) comparing total seats per party across local and regional lists.
  2. Category Breakdown Chart (Chart.js Doughnut Chart) showing Local vs. Regional proportion.
- Interactive Filter & Search Controls: Filter by List Type (Local/Regional), Party Selection, Province/Region, and text search for MP names.
- Detailed Interactive Table Section: Paginated/Scrollable dynamic list of MPs with responsive design, dynamic counts, and live search highlights.
- Party Insights Cards: Interactive grid summarizing party results and seat shares with quick click-to-filter capability.
-->

<!-- Visualization & Content Choices:
1. KPI Stat Cards -> Goal: Inform -> Clean HTML Cards with dynamic JS computation -> Justification: Immediate visual summary of key metrics in French.
2. Party Seats Chart -> Goal: Compare -> Chart.js Canvas Bar Chart -> Dynamic filtering integration -> Justification: Easiest way to compare political weight of each party.
3. Local vs Regional Proportions -> Goal: Inform/Compare -> Chart.js Canvas Doughnut Chart -> Justification: Clear proportional representation of direct vs women regional list.
4. Filterable Interactive Table -> Goal: Organize & Search -> HTML/Tailwind Table + Pure Vanilla JS logic -> Justification: Fast search across all entries without page reloads.
- Confirming NO SVG / NO Mermaid JS used. All visuals rendered via HTML/CSS & Canvas. -->

<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->

    <header class="bg-indigo-950 text-white shadow-lg border-b border-amber-600/30 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div class="flex items-center space-x-3">
                    <span class="text-2xl"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3db.png" alt="🏛" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                    <div>
                        <h1 class="text-xl md:text-2xl font-bold text-amber-400">Observatoire Interactif des Résultats Législatifs</h1>
                        <p class="text-xs text-amber-200/90 font-medium mt-0.5">Rapport &#038; Étude: Institut d&#8217;Études Sociales et Média (SMS Institute)</p>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2 text-xs bg-indigo-900/80 px-3 py-2 rounded-lg border border-indigo-700/50">
                    <span class="bg-amber-500/20 text-amber-300 font-semibold px-2 py-0.5 rounded border border-amber-500/30">SMS Institute</span>
                    <span class="text-indigo-400">|</span>
                    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c5.png" alt="📅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 23 Septembre 2026</span>
                    <span class="text-indigo-400">|</span>
                    <span id="last-update-tag">Total: 395 Députés</span>
                </div>
            </div>
        </div>
    </header>

    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-8">

        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden">
            <div class="absolute -right-6 -bottom-6 w-32 h-32 bg-indigo-50 rounded-full blur-2xl pointer-events-none"></div>
            <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-3 border-b border-slate-100 pb-3">
                <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ca.png" alt="📊" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> À propos de la plateforme et de l&#8217;étude analytique
                </h2>
                <span class="text-xs bg-indigo-50 text-indigo-900 font-bold px-3 py-1 rounded-full border border-indigo-200">
                    Réalisation: Institut d&#8217;Études Sociales et Média (SMS Institute)
                </span>
            </div>
            <p class="text-slate-600 text-sm leading-relaxed">
                Ce rapport interactif a été élaboré à partir des données transmises par l&#8217;**Institut d&#8217;Études Sociales et Média (SMS Institute)** concernant l&#8217;élection des membres de la Chambre des Représentants du scrutin du 23 septembre 2026. La plateforme vise à faciliter l&#8217;exploration de la carte parlementaire (circonscriptions locales et liste régionale des femmes) via des outils de recherche instantanée, de filtrage avancé et de visualisations graphiques dynamiques.
            </p>
        </section>

        <section class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-between">
                <div class="text-xs font-semibold text-slate-500">Total des députés élus</div>
                <div class="text-2xl md:text-3xl font-extrabold text-indigo-950 mt-2" id="kpi-total">395</div>
                <div class="text-xs text-emerald-600 mt-1 font-medium">100% des sièges parlementaires</div>
            </div>

            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-between">
                <div class="text-xs font-semibold text-slate-500">Circonscriptions locales</div>
                <div class="text-2xl md:text-3xl font-extrabold text-indigo-700 mt-2" id="kpi-local">305</div>
                <div class="text-xs text-slate-500 mt-1">Couverture de toutes les préfectures</div>
            </div>

            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-between">
                <div class="text-xs font-semibold text-slate-500">Circonscriptions régionales (Femmes)</div>
                <div class="text-2xl md:text-3xl font-extrabold text-amber-600 mt-2" id="kpi-regional">90</div>
                <div class="text-xs text-amber-700 mt-1">Réparties sur les 12 régions</div>
            </div>

            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-between">
                <div class="text-xs font-semibold text-slate-500">Partis politiques représentés</div>
                <div class="text-2xl md:text-3xl font-extrabold text-slate-800 mt-2" id="kpi-parties">13</div>
                <div class="text-xs text-slate-500 mt-1">Pluralisme politique</div>
            </div>
        </section>

        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 space-y-4">
            <div>
                <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c8.png" alt="📈" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Analyse graphique &#038; Répartition politique
                </h2>
                <p class="text-slate-500 text-xs mt-1">
                    Les graphiques ci-dessous présentent la répartition des sièges par parti politique et le découpage entre représentation locale et régionale selon les données de SMS Institute.
                </p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-center">
                <div class="lg:col-span-2 bg-slate-50 p-4 rounded-xl border border-slate-200">
                    <h3 class="text-xs font-bold text-slate-700 mb-3 text-center">Répartition des sièges par parti politique (Local vs Régional)</h3>
                    <div class="chart-container">
                        <canvas id="partyChart"></canvas>
                    </div>
                </div>

                <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col justify-center items-center">
                    <h3 class="text-xs font-bold text-slate-700 mb-3 text-center">Proportion des sièges (Local / Régional)</h3>
                    <div class="chart-container" style="max-height: 280px;">
                        <canvas id="typeChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 space-y-6">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-slate-100 pb-4">
                <div>
                    <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                        <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f50e.png" alt="🔎" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Exploration &#038; Filtrage interactif
                    </h2>
                    <p class="text-slate-500 text-xs mt-1">Recherchez par nom de député, circonscription, province/région ou parti politique.</p>
                </div>
                <button onclick="resetFilters()" class="text-xs font-medium text-indigo-700 hover:text-indigo-900 bg-indigo-50 hover:bg-indigo-100 px-3 py-2 rounded-lg transition border border-indigo-200">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Réinitialiser les filtres
                </button>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Type de liste</label>
                    <select id="filter-type" onchange="applyFilters()" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="ALL">Toutes les listes (395)</option>
                        <option value="LOCAL">Listes locales uniquement (305)</option>
                        <option value="REGIONAL">Listes régionales &#8211; Femmes (90)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Parti politique</label>
                    <select id="filter-party" onchange="applyFilters()" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="ALL">Tous les partis</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Préfecture / Province / Région</label>
                    <select id="filter-region" onchange="applyFilters()" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="ALL">Toutes les régions &#038; provinces</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Recherche textuelle</label>
                    <input type="text" id="search-input" onkeyup="applyFilters()" placeholder="Nom du député, ville, circonscription..." class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
                </div>
            </div>

            <div class="flex flex-wrap items-center justify-between gap-2 pt-2">
                <div class="text-xs text-slate-600 font-semibold" id="table-results-count">
                    Affichage de 395 députés sur 395
                </div>
                <div class="flex flex-wrap gap-2 text-xs" id="quick-party-tags">
                </div>
            </div>

            <div class="overflow-x-auto rounded-xl border border-slate-200 custom-scrollbar">
                <table class="w-full text-left text-xs text-slate-700">
                    <thead class="bg-indigo-950 text-white uppercase font-bold">
                        <tr>
                            <th scope="col" class="px-4 py-3 text-center">#</th>
                            <th scope="col" class="px-4 py-3">Nom du Député(e)</th>
                            <th scope="col" class="px-4 py-3">Parti Politique</th>
                            <th scope="col" class="px-4 py-3">Circonscription</th>
                            <th scope="col" class="px-4 py-3">Province / Région</th>
                            <th scope="col" class="px-4 py-3 text-center">Type de Liste</th>
                        </tr>
                    </thead>
                    <tbody id="mp-table-body" class="divide-y divide-slate-200 bg-white">
                    </tbody>
                </table>
            </div>

            <div class="flex items-center justify-between pt-2">
                <button id="prev-page" onclick="changePage(-1)" class="px-3 py-1.5 border border-slate-300 text-xs rounded-md bg-white hover:bg-slate-50 disabled:opacity-50">Précédent</button>
                <span id="page-info" class="text-xs text-slate-600 font-medium">Page 1 sur 1</span>
                <button id="next-page" onclick="changePage(1)" class="px-3 py-1.5 border border-slate-300 text-xs rounded-md bg-white hover:bg-slate-50 disabled:opacity-50">Suivant</button>
            </div>
        </section>

        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 space-y-4">
            <div>
                <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3f7.png" alt="🏷" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Bilan synthétique par Parti Politique
                </h2>
                <p class="text-slate-500 text-xs mt-1">Cliquez sur une carte pour filtrer directement le tableau ci-dessus.</p>
            </div>
            <div id="party-cards-grid" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            </div>
        </section>

    </main>

    <footer class="bg-indigo-950 text-slate-300 text-xs border-t border-indigo-900 py-8 mt-12">
        <div class="max-w-7xl mx-auto px-4 text-center space-y-3">
            <div class="flex justify-center items-center space-x-2 font-bold text-amber-400 text-sm">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3db.png" alt="🏛" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <span>Institut d&#8217;Études Sociales et Média (SMS INSTITUTE)</span>
            </div>
            <p class="text-slate-400 max-w-2xl mx-auto">
                Plateforme interactive des résultats de l&#8217;élection des membres de la Chambre des Représentants &#8211; Scrutin du 23 septembre 2026. Présentation et conception réalisées à l&#8217;attention des chercheurs, analystes et décideurs.
            </p>
            <p class="text-slate-500 text-[11px] pt-2 border-t border-indigo-900/60 max-w-md mx-auto">
                Tous droits réservés © 2026 &#8211; Institut d&#8217;Études Sociales et Média (SMS Institute)
            </p>
        </div>
    </footer>

    <script>
        const rawLocalData = [
            ["Tanger-Assilah", "Tanger-Assilah", "Abdelwahed Boulaich", "RNI"],
            ["Tanger-Assilah", "Tanger-Assilah", "Mohamed Bouzidan El Yadari", "PJD"],
            ["Tanger-Assilah", "Tanger-Assilah", "Abdellatif El Ghalbzouri", "PAM"],
            ["Tanger-Assilah", "Tanger-Assilah", "Mohamed Zemmouri", "MP"],
            ["Tanger-Assilah", "Tanger-Assilah", "Mohamed El Hammami", "Parti de l'Istiqlal"],
            ["M'diq-Fnideq", "M'diq-Fnideq", "Mohamed Larbi El Mourabit", "PAM"],
            ["M'diq-Fnideq", "M'diq-Fnideq", "Issam Ferassi", "PJD"],
            ["M'diq-Fnideq", "M'diq-Fnideq", "Moncef El Toub", "Parti de l'Istiqlal"],
            ["Tétouan", "Tétouan", "Ibrahime Benssbih", "MP"],
            ["Tétouan", "Tétouan", "Ahmed Boukhebza", "PJD"],
            ["Tétouan", "Tétouan", "Rachid Talbi Alami", "RNI"],
            ["Tétouan", "Tétouan", "Mohamed Larbi Ahnin", "PAM"],
            ["Fahs-Anjra", "Fahs-Anjra", "Rédouane En-Nouino", "RNI"],
            ["Fahs-Anjra", "Fahs-Anjra", "Abdessalam El Challef El Hammoud", "PAM"],
            ["Larache", "Larache", "Nizar Baraka", "Parti de l'Istiqlal"],
            ["Larache", "Larache", "Zineb Simou", "PAM"],
            ["Larache", "Larache", "Abdelkhalek Bssinti", "PPS"],
            ["Larache", "Larache", "Abdelaziz El Ouadki", "MP"],
            ["Al Hoceïma", "Al Hoceïma", "Mohamed El Aaraj", "MP"],
            ["Al Hoceïma", "Al Hoceïma", "Karim El Boutahri", "RNI"],
            ["Al Hoceïma", "Al Hoceïma", "Abdelhak Amghar", "USFP"],
            ["Al Hoceïma", "Al Hoceïma", "Mohamed El Hammouti", "PAM"],
            ["Chefchaouen", "Chefchaouen", "El Amine El Bekkali El Tahiri", "USFP"],
            ["Chefchaouen", "Chefchaouen", "Abdelhafid El Makouthi", "PAM"],
            ["Chefchaouen", "Chefchaouen", "Abderrahmane El Omari", "RNI"],
            ["Chefchaouen", "Chefchaouen", "Ahmed Amine El Mtioui", "Parti de l'Istiqlal"],
            ["Ouezzane", "Ouezzane", "Ahmed El Bouari", "RNI"],
            ["Ouezzane", "Ouezzane", "Abdelaziz El Chhab", "Parti de l'Istiqlal"],
            ["Ouezzane", "Ouezzane", "El Arbi El Maharachi", "PAM"],
            ["Oujda-Angad", "Oujda-Angad", "Abdallah Hamel", "PJD"],
            ["Oujda-Angad", "Oujda-Angad", "Omar Hejira", "Parti de l'Istiqlal"],
            ["Oujda-Angad", "Oujda-Angad", "Mohamed Qaidi", "RNI"],
            ["Oujda-Angad", "Oujda-Angad", "Abdelkader Hadhouri", "PAM"],
            ["Nador", "Nador", "Mohamed Moumni", "PAM"],
            ["Nador", "Nador", "Abdelhalim Foutat", "RNI"],
            ["Nador", "Nador", "Abdelkader Quodhadd", "UC"],
            ["Nador", "Nador", "Mohamed El Sadiki", "PJD"],
            ["Driouch", "Driouch", "Aziz Meknif", "PAM"],
            ["Driouch", "Driouch", "Abdelmonaim El Fattahi", "Parti de l'Istiqlal"],
            ["Driouch", "Driouch", "Abdallah El Boukili", "RNI"],
            ["Jerada", "Jerada", "Rédouane Bougetaya", "PAM"],
            ["Jerada", "Jerada", "Moustapha Toutou", "RNI"],
            ["Berkane", "Berkane", "Mohamed Ibrahimi", "PAM"],
            ["Berkane", "Berkane", "Abdelhakim Bouazza Benabdallah", "Parti de l'Istiqlal"],
            ["Berkane", "Berkane", "Mohamed Sadiki", "RNI"],
            ["Taourirt", "Taourirt", "Abderrahmane Sehli", "PAM"],
            ["Taourirt", "Taourirt", "Mohamed El Horr", "MP"],
            ["Taourirt", "Taourirt", "Abdelkader Kaka", "MP"],
            ["Guercif", "Guercif", "Mohamed El Bernichi", "PAM"],
            ["Guercif", "Guercif", "Ali El Djghaoui", "Parti de l'Istiqlal"],
            ["Figuig", "Figuig", "Hamid El Chaya", "PAM"],
            ["Figuig", "Figuig", "Rédouane Ben Ahmed", "RNI"],
            ["Fès", "Fès Nord", "Reem Chabat", "MP"],
            ["Fès", "Fès Nord", "Mohsen Azmi Hosni", "PAM"],
            ["Fès", "Fès Nord", "El Hassan Slighoua", "Parti de l'Istiqlal"],
            ["Fès", "Fès Nord", "Abdelmajid Ben Chennouf", "PJD"],
            ["Fès", "Fès Sud", "Khaled El Ajli", "MP"],
            ["Fès", "Fès Sud", "Zineb Chahim", "RNI"],
            ["Fès", "Fès Sud", "Mohamed Khi", "PJD"],
            ["Fès", "Fès Sud", "Aziz El Lebbar", "PAM"],
            ["Meknès", "Meknès", "Abdelkader El Breiki", "MP"],
            ["Meknès", "Meknès", "Anas El Ansari", "PAM"],
            ["Meknès", "Meknès", "Hassan El Yamani", "Parti de l'Istiqlal"],
            ["Meknès", "Meknès", "Abdallah Bouanou", "PJD"],
            ["Meknès", "Meknès", "El Abbas El Oumghari", "UC"],
            ["Meknès", "Meknès", "Ahmed Tahiri", "RNI"],
            ["El Hajeb", "El Hajeb", "Ahmed El Dekkaki", "PAM"],
            ["El Hajeb", "El Hajeb", "Abdelhak El Saidi", "PJD"],
            ["Ifrane", "Ifrane", "Mohamed Ouzzine", "MP"],
            ["Ifrane", "Ifrane", "Mohamed Achguig", "PAM"],
            ["Moulay Yacoub", "Moulay Yacoub", "El Hassan Chahbi", "Parti de l'Istiqlal"],
            ["Moulay Yacoub", "Moulay Yacoub", "El Hassan Belmokaddem", "PAM"],
            ["Séfrou", "Séfrou", "Mustapha El Khasm", "MDS"],
            ["Séfrou", "Séfrou", "Driss El Chebchali", "PAM"],
            ["Séfrou", "Séfrou", "Youssef Mandour", "RNI"],
            ["Boulemane", "Boulemane", "Rachid Hammouni", "PPS"],
            ["Boulemane", "Boulemane", "Mohamed Chouki", "RNI"],
            ["Taounate", "Taounate - Tissa", "Mohamed El Miri", "PAM"],
            ["Taounate", "Taounate - Tissa", "Mohamed El Sellasi", "RNI"],
            ["Taounate", "Taounate - Tissa", "Abdellatif El Fouikar", "PAM"],
            ["Taounate", "Karia - Ghafsai", "Abdallah El Idrissi El Bouzidi", "PPS"],
            ["Taounate", "Karia - Ghafsai", "El Mofaddal El Tahiri", "Parti de l'Istiqlal"],
            ["Taounate", "Karia - Ghafsai", "Mohamed El Hajjira", "PAM"],
            ["Taza", "Taza", "Abderrahmane El Meissouri", "RNI"],
            ["Taza", "Taza", "Mounir Chentir", "Parti de l'Istiqlal"],
            ["Taza", "Taza", "Khalil El Saddiki", "RNI"],
            ["Taza", "Taza", "Ahmed El Abbadi", "PPS"],
            ["Taza", "Taza", "Mohamed Amghar", "PAM"],
            ["Taza", "Taza", "Khaled El Boukarai", "PJD"],
            ["Rabat", "Rabat - Océan", "Nabil El Dakhch", "MP"],
            ["Rabat", "Rabat - Océan", "Mustapha El Khalfi", "PJD"],
            ["Rabat", "Rabat - Océan", "Omar Mahmoud Benjelloun", "Coalition de la Gauche"],
            ["Rabat", "Rabat - Océan", "Mohamed Mehdi Bensaid", "PAM"],
            ["Rabat", "Rabat - Chellah", "Adib Benbrahim", "PAM"],
            ["Rabat", "Rabat - Chellah", "El Hassan Lachgar", "USFP"],
            ["Rabat", "Rabat - Chellah", "Mohamed El Tahiri", "PJD"],
            ["Rabat", "Rabat - Chellah", "Driss Sentissi", "Parti de l'Istiqlal"],
            ["Salé", "Salé Médina", "Imad El Din El Rifi", "PAM"],
            ["Salé", "Salé Médina", "Salah El Din Belhassan", "MP"],
            ["Salé", "Salé Médina", "Kamal El Kouchi", "PJD"],
            ["Salé", "Salé Médina", "Aziz Hennaoui", "PJD"],
            ["Salé", "Salé El Jadida", "M'hammed Karboub", "Parti de l'Istiqlal"],
            ["Salé", "Salé El Jadida", "El Arbi El Rouich", "PAM"],
            ["Salé", "Salé El Jadida", "Driss El Azami El Idrissi", "PJD"],
            ["Skhirate-Témara", "Skhirate - Témara", "Mohamed El Hilali", "PAM"],
            ["Skhirate-Témara", "Skhirate - Témara", "Hassan Arif", "UC"],
            ["Skhirate-Témara", "Skhirate - Témara", "Rachid El Sajid", "Parti de l'Istiqlal"],
            ["Skhirate-Témara", "Skhirate - Témara", "Hatem Ben Rokia", "RNI"],
            ["Kénitra", "Kénitra", "El Hossein El Rahouia", "UC"],
            ["Kénitra", "Kénitra", "Mustapha Ibrahimi", "PJD"],
            ["Kénitra", "Kénitra", "Mohamed El Ghras", "MDS"],
            ["Kénitra", "Gharb", "Belaassal Chaoui", "UC"],
            ["Kénitra", "Gharb", "Abdelaziz Bouhsini", "PAM"],
            ["Khémisset", "Khémisset - Oulmès", "Mohamed Gharib", "RNI"],
            ["Khémisset", "Khémisset - Oulmès", "Mohamed Ouchorou", "PAM"],
            ["Khémisset", "Khémisset - Oulmès", "Fouad Karim", "PPS"],
            ["Khémisset", "Tiflet - Rommani", "Mohamed El Hammouch", "MP"],
            ["Khémisset", "Tiflet - Rommani", "Bouchra El Ouardi", "PAM"],
            ["Khémisset", "Tiflet - Rommani", "Abdessamad Archane", "MDS"],
            ["Khémisset", "Tiflet - Rommani", "Hassan El Filali", "RNI"],
            ["Sidi Kacem", "Sidi Kacem", "El Saâd Ben Zeroual", "PAM"],
            ["Sidi Kacem", "Sidi Kacem", "Abdennebi Aidoudi", "MP"],
            ["Sidi Kacem", "Sidi Kacem", "Fouad Slim", "RNI"],
            ["Sidi Kacem", "Sidi Kacem", "Mohamed El Hafez", "Parti de l'Istiqlal"],
            ["Sidi Kacem", "Sidi Kacem", "Hicham El Assal", "USFP"],
            ["Sidi Slimane", "Sidi Slimane", "Lahsseen Aouad", "PAM"],
            ["Sidi Slimane", "Sidi Slimane", "Amjid El Naka", "PJD"],
            ["Sidi Slimane", "Sidi Slimane", "Saber El Jabbhar", "UC"],
            ["Béni Mellal", "Béni Mellal", "Meriem Ouhssata", "PPS"],
            ["Béni Mellal", "Béni Mellal", "Mohamed El Bardia Ghazi", "PJD"],
            ["Béni Mellal", "Béni Mellal", "Rachid Mchich", "Coalition de la Gauche"],
            ["Béni Mellal", "Béni Mellal", "Hicham Sabri", "PAM"],
            ["Béni Mellal", "Béni Mellal", "Fadel Berras", "USFP"],
            ["Béni Mellal", "Béni Mellal", "Madiha Khir", "Parti de l'Istiqlal"],
            ["Azilal", "Bzou - Waouizeght", "Badr El Din Najeh Fowzi", "PAM"],
            ["Azilal", "Bzou - Waouizeght", "Mohamed Chouki", "USFP"],
            ["Azilal", "Bzou - Waouizeght", "Mohamed Amine", "UC"],
            ["Azilal", "Azilal - Demnate", "Abdelali Berouki", "Parti de l'Istiqlal"],
            ["Azilal", "Azilal - Demnate", "Mohamed Ait Benali", "PAM"],
            ["Azilal", "Azilal - Demnate", "Rachid Mansouri", "RNI"],
            ["Fquih Ben Salah", "Fquih Ben Salah", "Ahmed Fadli", "PAM"],
            ["Fquih Ben Salah", "Fquih Ben Salah", "Salah Hnine", "RNI"],
            ["Fquih Ben Salah", "Fquih Ben Salah", "Rahal El Makkawi", "Parti de l'Istiqlal"],
            ["Fquih Ben Salah", "Fquih Ben Salah", "El Cherkaoui El Zenaidi", "USFP"],
            ["Khénifra", "Khénifra", "Salah Oughbal", "Parti de l'Istiqlal"],
            ["Khénifra", "Khénifra", "Nabil Sabri", "MP"],
            ["Khénifra", "Khénifra", "Hamman Bahoussine", "PAM"],
            ["Khénifra", "Khénifra", "Abdelelah El Allaki", "USFP"],
            ["Khénifra", "Khénifra", "Mohamed Zekrani", "Parti de l'Istiqlal"],
            ["Khouribga", "Khouribga", "Abdessamad Khenani", "UC"],
            ["Khouribga", "Khouribga", "Said Serrar", "MP"],
            ["Khouribga", "Khouribga", "Bouabid Kebouri", "PJD"],
            ["Khouribga", "Khouribga", "Khelifa Mejidi", "PAM"],
            ["Casablanca", "Casablanca - Anfa", "Najwa Koukouss", "PAM"],
            ["Casablanca", "Casablanca - Anfa", "Abdessamad Haiker", "PJD"],
            ["Casablanca", "Casablanca - Anfa", "Nabila Mounib", "Coalition de la Gauche"],
            ["Casablanca", "Casablanca - Anfa", "Mohamed Chebbak", "RNI"],
            ["Mers Sultan - El Fida", "Mers Sultan El Fida", "Mohamed El Touimi Benjelloun", "PAM"],
            ["Mers Sultan - El Fida", "Mers Sultan El Fida", "El Fatmi Ramid", "PJD"],
            ["Mers Sultan - El Fida", "Mers Sultan El Fida", "El Hajj Ibrahim Naanaï", "UC"],
            ["Mers Sultan - El Fida", "Mers Sultan El Fida", "Hassan Ben Omar", "RNI"],
            ["Aïn Sebaâ - Hay Mohammadi", "Aïn Sebaâ - Hay Mohammadi", "Rachid Ajkini", "PJD"],
            ["Aïn Sebaâ - Hay Mohammadi", "Aïn Sebaâ - Hay Mohammadi", "Adil El Bittar", "PAM"],
            ["Aïn Sebaâ - Hay Mohammadi", "Aïn Sebaâ - Hay Mohammadi", "Abdellatif Harchich", "UC"],
            ["Aïn Sebaâ - Hay Mohammadi", "Aïn Sebaâ - Hay Mohammadi", "Mohamed El Rekkani", "Parti de l'Istiqlal"],
            ["Hay Hassani", "Hay Hassani", "Salah El Din Chenkit", "PAM"],
            ["Hay Hassani", "Hay Hassani", "Samir Chouki", "PJD"],
            ["Hay Hassani", "Hay Hassani", "Abdelhak El Chafik", "PAM"],
            ["Aïn Chock", "Aïn Chock", "Amina Maelainine", "PJD"],
            ["Aïn Chock", "Aïn Chock", "Mohamed Chafik Benkirane", "RNI"],
            ["Aïn Chock", "Aïn Chock", "Hicham El Heid", "Parti de l'Istiqlal"],
            ["Sidi Bernoussi", "Sidi Bernoussi", "Omar Belatif", "PJD"],
            ["Sidi Bernoussi", "Sidi Bernoussi", "Ahmed Brija", "PAM"],
            ["Sidi Bernoussi", "Sidi Bernoussi", "Said Kechani", "PJD"],
            ["Ben M'sick", "Ben M'sick", "Mohamed Joudar", "UC"],
            ["Ben M'sick", "Ben M'sick", "Tawfiq Kamil", "RNI"],
            ["Moulay Rachid", "Moulay Rachid", "Anas Haddadi", "RNI"],
            ["Moulay Rachid", "Moulay Rachid", "Mohamed Hammama", "PAM"],
            ["Moulay Rachid", "Moulay Rachid", "Mohsen Mofidi", "PJD"],
            ["Mohammedia", "Mohammedia", "El Thami Mohammedi", "PJD"],
            ["Mohammedia", "Mohammedia", "Said Tedlaoui", "Parti de l'Istiqlal"],
            ["Mohammedia", "Mohammedia", "Hicham Ait Menna", "RNI"],
            ["El Jadida", "El Jadida", "El Moustapha Murchid", "PJD"],
            ["El Jadida", "El Jadida", "Mohamed Mehdeb", "PAM"],
            ["El Jadida", "El Jadida", "Mohamed El Mokhnter", "MP"],
            ["El Jadida", "El Jadida", "M'barek El Tarmounia", "Parti de l'Istiqlal"],
            ["El Jadida", "El Jadida", "Ayman Bizid", "PPS"],
            ["El Jadida", "El Jadida", "Benasser Rafik", "RNI"],
            ["Nouaceur", "Nouaceur", "Noureddine Rafik", "RNI"],
            ["Nouaceur", "Nouaceur", "Abdelkrim Lehouaichri", "PJD"],
            ["Nouaceur", "Nouaceur", "Mohamed El Salmani", "PAM"],
            ["Médiouna", "Médiouna", "Abderrahim Ben El Dhaou", "PAM"],
            ["Médiouna", "Médiouna", "Amine Nokte", "RNI"],
            ["Benslimane", "Benslimane", "Ryad Mezzour", "Parti de l'Istiqlal"],
            ["Benslimane", "Benslimane", "Karim El Ziyadi", "PAM"],
            ["Benslimane", "Benslimane", "Yassine Oukacha", "RNI"],
            ["Berrechid", "Berrechid", "Saber El Kiyaf", "RNI"],
            ["Berrechid", "Berrechid", "Khelid Ibrahimi", "Parti de l'Istiqlal"],
            ["Berrechid", "Berrechid", "Manal Badel", "PAM"],
            ["Berrechid", "Berrechid", "Hamid Zatni", "PJD"],
            ["Settat", "Settat", "Messaoud Oussar", "MDS"],
            ["Settat", "Settat", "Ali Fadili", "PJD"],
            ["Settat", "Settat", "Othmane Badel", "PAM"],
            ["Settat", "Settat", "El Arbi Chreii", "Parti de l'Équité"],
            ["Settat", "Settat", "Mohamed Ghiat", "RNI"],
            ["Settat", "Settat", "Bouchaib Hamid Allah", "Parti de l'Istiqlal"],
            ["Sidi Bennour", "Sidi Bennour", "Abdelkrim Amine", "PAM"],
            ["Sidi Bennour", "Sidi Bennour", "Yasser Yandil", "RNI"],
            ["Sidi Bennour", "Sidi Bennour", "Abdelfattah Ammar", "MP"],
            ["Sidi Bennour", "Sidi Bennour", "Abdelghani Mekhdad", "Parti de l'Istiqlal"],
            ["Marrakech", "Médina - Sidi Youssef Ben Ali", "Fatima-Zohra Mansouri", "PAM"],
            ["Marrakech", "Médina - Sidi Youssef Ben Ali", "Salah El Din Ayach", "PJD"],
            ["Marrakech", "Médina - Sidi Youssef Ben Ali", "Abdelaziz Deryouch", "Parti de l'Istiqlal"],
            ["Marrakech", "Gueliz - Ennakhil", "Mohamed Sebbari", "PAM"],
            ["Marrakech", "Gueliz - Ennakhil", "Anas El Houaji", "Parti de l'Istiqlal"],
            ["Marrakech", "Gueliz - Ennakhil", "Mohamed Mounir Ouerzazi", "PJD"],
            ["Marrakech", "Menara", "Abderrazzak Ahlouch", "Parti de l'Istiqlal"],
            ["Marrakech", "Menara", "Mohamed Toufla", "PJD"],
            ["Marrakech", "Menara", "Tarik Hnich", "PAM"],
            ["Marrakech", "Menara", "Abdallah Aammara", "UC"],
            ["Chichaoua", "Chichaoua", "Moulay Hicham El Mhajri", "PAM"],
            ["Chichaoua", "Chichaoua", "Marouane Jennah", "RNI"],
            ["Chichaoua", "Chichaoua", "Ahmed Ouahrouch", "Parti de l'Istiqlal"],
            ["Al Haouz", "Al Haouz", "Mohamed Ademoussa", "Parti de l'Istiqlal"],
            ["Al Haouz", "Al Haouz", "Lahsseen El Ajouadi", "RNI"],
            ["Al Haouz", "Al Haouz", "Ahmed Touizi", "PAM"],
            ["Al Haouz", "Al Haouz", "Salah Nejmi", "PJD"],
            ["El Kelâa des Sraghna", "El Kelâa des Sraghna", "El Mokhtar Benfaida", "RNI"],
            ["El Kelâa des Sraghna", "El Kelâa des Sraghna", "Abderrahim Toussi", "PJD"],
            ["El Kelâa des Sraghna", "El Kelâa des Sraghna", "Abderrahim Ouamro", "PAM"],
            ["El Kelâa des Sraghna", "El Kelâa des Sraghna", "El Ayachi El Ferfar", "Parti de l'Istiqlal"],
            ["Essaouira", "Essaouira", "Othmane El Morsi", "PPS"],
            ["Essaouira", "Essaouira", "Tarik Mohamed Othmani", "RNI"],
            ["Essaouira", "Essaouira", "Mohamed Mellal", "USFP"],
            ["Essaouira", "Essaouira", "Ibrahim Benjelloul", "PAM"],
            ["Rehamna", "Rehamna", "Abdellatif Sandil", "RNI"],
            ["Rehamna", "Rehamna", "Ezzeddine El Madaoui", "PAM"],
            ["Rehamna", "Rehamna", "Hamid El Akroud", "USFP"],
            ["Safi", "Safi", "Reda Boukmazi", "PJD"],
            ["Safi", "Safi", "Mohamed Ajdia", "USFP"],
            ["Safi", "Safi", "Mohamed Karim", "PAM"],
            ["Safi", "Safi", "Hicham Saanan", "Parti de l'Istiqlal"],
            ["Safi", "Safi", "Fayçal Zerhouni", "UC"],
            ["Safi", "Safi", "Rachid Saber", "RNI"],
            ["Youssoufia", "Youssoufia", "Youssef El Rouijel", "PAM"],
            ["Youssoufia", "Youssoufia", "Moulay Rachid Hachimi", "PJD"],
            ["Youssoufia", "Youssoufia", "Smail El Alaoui", "USFP"],
            ["Errachidia", "Errachidia", "Mohamed Abdelbar Belhassan", "MP"],
            ["Errachidia", "Errachidia", "Mustapha El Amri", "PAM"],
            ["Errachidia", "Errachidia", "Mohamed Karoui", "RNI"],
            ["Errachidia", "Errachidia", "Mohamed El Taiki", "PJD"],
            ["Ouarzazate", "Ouarzazate", "Aatif El Tijani", "Parti de l'Istiqlal"],
            ["Ouarzazate", "Ouarzazate", "Imane Lmaoui", "PAM"],
            ["Ouarzazate", "Ouarzazate", "Rachid El Kadi", "PJD"],
            ["Midelt", "Midelt", "Marouane Chbaatou", "PAM"],
            ["Midelt", "Midelt", "Abdelaziz Barik", "Parti de l'Unité et de la Démocratie"],
            ["Midelt", "Midelt", "Rachid Taibi Alaoui", "MP"],
            ["Tinghir", "Tinghir", "Hicham Moujoud", "RNI"],
            ["Tinghir", "Tinghir", "Lahsseen Eddei", "Parti de l'Istiqlal"],
            ["Tinghir", "Tinghir", "Mohamed Qacha", "PPS"],
            ["Zagora", "Zagora", "Abderrahim Chahid", "USFP"],
            ["Zagora", "Zagora", "El Hossein Oualal", "RNI"],
            ["Zagora", "Zagora", "Youssef Amentzou", "PAM"],
            ["Agadir-Ida Ou Tanane", "Agadir-Ida Ou Tanane", "Zina Idkhali", "RNI"],
            ["Agadir-Ida Ou Tanane", "Agadir-Ida Ou Tanane", "Hamid Ouahbi", "PAM"],
            ["Agadir-Ida Ou Tanane", "Agadir-Ida Ou Tanane", "Mohamed Bakiri", "PJD"],
            ["Agadir-Ida Ou Tanane", "Agadir-Ida Ou Tanane", "Raja Massou", "USFP"],
            ["Inezgane-Aït Melloul", "Inezgane-Aït Melloul", "Mohamed Oudmine", "PAM"],
            ["Inezgane-Aït Melloul", "Inezgane-Aït Melloul", "Khaled El Channak", "Parti de l'Istiqlal"],
            ["Inezgane-Aït Melloul", "Inezgane-Aït Melloul", "Ahmed Edrak", "PJD"],
            ["Chtouka-Aït Baha", "Chtouka-Aït Baha", "El Hossein El Farissi", "PAM"],
            ["Chtouka-Aït Baha", "Chtouka-Aït Baha", "Ismail Kerram", "RNI"],
            ["Chtouka-Aït Baha", "Chtouka-Aït Baha", "El Hossein Ezoukagh", "Parti de l'Istiqlal"],
            ["Taroudant", "Taroudant Sud", "Abdelghani Limoun", "PJD"],
            ["Taroudant", "Taroudant Sud", "Abdessamad Qayouh", "Parti de l'Istiqlal"],
            ["Taroudant", "Taroudant Sud", "Hanan El Massi", "PAM"],
            ["Taroudant", "Taroudant Sud", "Nadia Bouhdoud", "RNI"],
            ["Taroudant", "Taroudant Nord", "Abdellatif Ouahbi", "PAM"],
            ["Taroudant", "Taroudant Nord", "Lahsseen El Saadi", "RNI"],
            ["Taroudant", "Taroudant Nord", "Abdelaziz El Bahja", "Parti de l'Istiqlal"],
            ["Tiznit", "Tiznit", "El Hassan El Baz", "Parti de l'Istiqlal"],
            ["Tiznit", "Tiznit", "Abdallah Ghazi", "RNI"],
            ["Tata", "Tata", "Mustapha Tedoumant", "RNI"],
            ["Tata", "Tata", "El Hossein Bouzahai", "Parti de l'Istiqlal"],
            ["Tata", "Tata", "El Mehdi Lebtait", "PAM"],
            ["Guelmim", "Guelmim", "Nadia Bouaida", "RNI"],
            ["Guelmim", "Guelmim", "Rachid El Tamek", "PAM"],
            ["Assa-Zag", "Assa-Zag", "Mahmoud Abba", "USFP"],
            ["Assa-Zag", "Assa-Zag", "Ibrahim El Oaaban", "PAM"],
            ["Tan-Tan", "Tan-Tan", "Abdallah Aberki", "RNI"],
            ["Sidi Ifni", "Sidi Ifni", "Siddati Jamal", "PAM"],
            ["Sidi Ifni", "Sidi Ifni", "Mustapha Baitas", "RNI"],
            ["Laâyoune", "Laâyoune", "Moulay Hamdi Ould Errachid", "Parti de l'Istiqlal"],
            ["Laâyoune", "Laâyoune", "Sidi Mohamed Salem El Joumani", "PAM"],
            ["Laâyoune", "Laâyoune", "Hassan El Derham", "PPS"],
            ["Boujdour", "Boujdour", "Abdallah Edbadda", "PAM"],
            ["Boujdour", "Boujdour", "Abdelaziz Abba", "Parti de l'Istiqlal"],
            ["Tarfaya", "Tarfaya", "Mohamed Salem Behiya", "RNI"],
            ["Tarfaya", "Tarfaya", "Abdallah Billat", "Parti de l'Istiqlal"],
            ["Es-Semara", "Es-Semara", "Sidi Mohamed El Joumani", "PAM"],
            ["Es-Semara", "Es-Semara", "Moulay Zbeir Habdi", "Parti de l'Istiqlal"],
            ["Oued Ed-Dahab", "Oued Ed-Dahab", "M'barek Himmia", "Parti de l'Istiqlal"],
            ["Oued Ed-Dahab", "Oued Ed-Dahab", "Khattat Yanja", "PAM"],
            ["Aousserd", "Aousserd", "Mohamed Boubaker", "Parti de l'Istiqlal"],
            ["Aousserd", "Aousserd", "Abdelfattah Ahl El Mekki", "PAM"]
        ];

        const rawRegionalData = [
            ["Région Tanger-Tétouan-Al Hoceïma", "Salma Abalhassain", "PAM"],
            ["Région Tanger-Tétouan-Al Hoceïma", "Manal El Zekkari", "USFP"],
            ["Région Tanger-Tétouan-Al Hoceïma", "Ahlam Jeld", "PPS"],
            ["Région Tanger-Tétouan-Al Hoceïma", "Wiam El Jallouli", "Parti de l'Istiqlal"],
            ["Région Tanger-Tétouan-Al Hoceïma", "Romaisaa El Hassiouti", "RNI"],
            ["Région Tanger-Tétouan-Al Hoceïma", "Douae Ahidar", "MP"],
            ["Région Tanger-Tétouan-Al Hoceïma", "Hanan Zmizm", "Parti des Nouveaux Démocrates"],
            ["Région Tanger-Tétouan-Al Hoceïma", "Majdouline El Rouzi", "PJD"],
            ["Région de l'Orientale", "Lalla Hda El Mghari El Mbradh", "PAM"],
            ["Région de l'Orientale", "Fatima-Zohra Besraoui", "RNI"],
            ["Région de l'Orientale", "Hanan El Soufi", "PPS"],
            ["Région de l'Orientale", "Dounia El Seqli", "PJD"],
            ["Région de l'Orientale", "Malika Houleich", "MP"],
            ["Région de l'Orientale", "Latifa El Taibi", "Parti de l'Istiqlal"],
            ["Région de l'Orientale", "Sanaa El Rahmouni", "USFP"],
            ["Région de l'Orientale", "Ilham El Hassani Alaoui", "MP"],
            ["Région Fès-Meknès", "Dounia El Zaher", "FFD"],
            ["Région Fès-Meknès", "Rachida Hamidi", "MDS"],
            ["Région Fès-Meknès", "Kenza El Zaher", "USFP"],
            ["Région Fès-Meknès", "Halima El Zoumi", "Parti de l'Istiqlal"],
            ["Région Fès-Meknès", "Khadija Hajoubi", "PAM"],
            ["Région Fès-Meknès", "Zohra Berhioui", "PPS"],
            ["Région Fès-Meknès", "Samira Oub طالب", "PJD"],
            ["Région Fès-Meknès", "Safia El Lebbar", "UC"],
            ["Région Fès-Meknès", "Mounia Rechachi", "Coalition de la Gauche"],
            ["Région Rabat-Salé-Kénitra", "Fatima-Zohra Mahi", "UC"],
            ["Région Rabat-Salé-Kénitra", "Soumiya Moncef", "PPS"],
            ["Région Rabat-Salé-Kénitra", "Rahma Ouazzani Taibi", "Parti de l'Istiqlal"],
            ["Région Rabat-Salé-Kénitra", "Kamar Aidoudi", "MP"],
            ["Région Rabat-Salé-Kénitra", "Etimad El Zahidi", "RNI"],
            ["Région Rabat-Salé-Kénitra", "Laila Bilgha", "PAM"],
            ["Région Rabat-Salé-Kénitra", "Khadija Knine", "USFP"],
            ["Région Rabat-Salé-Kénitra", "Hind El Beki", "PJD"],
            ["Région Rabat-Salé-Kénitra", "Fatiha El Hajjouji", "MDS"],
            ["Région Rabat-Salé-Kénitra", "Souad Freguech", "Coalition de la Gauche"],
            ["Région Béni Mellal-Khénifra", "Fouzia El Kerfad", "PJD"],
            ["Région Béni Mellal-Khénifra", "Fatima-Zohra Boujenan", "USFP"],
            ["Région Béni Mellal-Khénifra", "Lalla Hafida Imami", "PPS"],
            ["Région Béni Mellal-Khénifra", "Aya Adal", "RNI"],
            ["Région Béni Mellal-Khénifra", "Sara Oumahzone", "PAM"],
            ["Région Béni Mellal-Khénifra", "Hala Zekrani", "Parti de l'Istiqlal"],
            ["Région Béni Mellal-Khénifra", "Reem Serrar", "MP"],
            ["Région Casablanca-Settat", "Dalila El Aoudiyi", "PPS"],
            ["Région Casablanca-Settat", "Fatima Ouachai", "PJD"],
            ["Région Casablanca-Settat", "Khadra Daoudi Rghioui", "MDS"],
            ["Région Casablanca-Settat", "Amal Aidouk", "Parti de l'Équité"],
            ["Région Casablanca-Settat", "Nabila Jalal", "Coalition de la Gauche"],
            ["Région Casablanca-Settat", "Sanaa Badawi", "USFP"],
            ["Région Casablanca-Settat", "Malika Mezzour", "PAM"],
            ["Région Casablanca-Settat", "Amina Salek", "MP"],
            ["Région Casablanca-Settat", "Salma El Alami", "Parti de l'Istiqlal"],
            ["Région Casablanca-Settat", "Hayat Joudar", "UC"],
            ["Région Casablanca-Settat", "Nadia Nouam", "FFD"],
            ["Région Casablanca-Settat", "Nabila Rmili", "RNI"],
            ["Région Marrakech-Safi", "Khadija El Akroud", "USFP"],
            ["Région Marrakech-Safi", "Fatima-Zohra El Beroufi", "MP"],
            ["Région Marrakech-Safi", "Fatima-Zohra Abdoun", "Coalition de la Gauche"],
            ["Région Marrakech-Safi", "Latifa Bouskri", "UC"],
            ["Région Marrakech-Safi", "Salma Ahlouch", "Parti de l'Istiqlal"],
            ["Région Marrakech-Safi", "Fatima-Zohra El Meska", "MDS"],
            ["Région Marrakech-Safi", "Meriem El Kanouni", "PPS"],
            ["Région Marrakech-Safi", "Rachida Benbouazza", "RNI"],
            ["Région Marrakech-Safi", "Hind Ouraissi", "PJD"],
            ["Région Marrakech-Safi", "Nadia El Idrissi Slitin", "PAM"],
            ["Région Drâa-Tafilalet", "Lalla Nezha El Cherkaoui", "USFP"],
            ["Région Drâa-Tafilalet", "Najat Ouihya", "PAM"],
            ["Région Drâa-Tafilalet", "Meriem Baya", "RNI"],
            ["Région Drâa-Tafilalet", "Ibtissam Tarik", "Parti de l'Istiqlal"],
            ["Région Drâa-Tafilalet", "Lalla Azhour Meliki", "PJD"],
            ["Région Drâa-Tafilalet", "Hakima El Kortobi", "MP"],
            ["Région Souss-Massa", "Sanaa Zahid", "PAM"],
            ["Région Souss-Massa", "Sanaa Akka", "PJD"],
            ["Région Souss-Massa", "Kenza Qayouh", "Parti de l'Istiqlal"],
            ["Région Souss-Massa", "Khadija El Baz", "PPS"],
            ["Région Souss-Massa", "Zakia El Driouch", "RNI"],
            ["Région Souss-Massa", "Fadwa Rajouani", "USFP"],
            ["Région Souss-Massa", "Sanaa Fowzi", "Coalition de la Gauche"],
            ["Région Guelmim-Oued Noun", "El Neama Aila", "USFP"],
            ["Région Guelmim-Oued Noun", "Maria Oudmine", "PAM"],
            ["Région Guelmim-Oued Noun", "Meriem Bouaida", "RNI"],
            ["Région Guelmim-Oued Noun", "Fatima-Zohra Kweis", "PJD"],
            ["Région Guelmim-Oued Noun", "Salma Karmoun", "Parti de l'Istiqlal"],
            ["Région Laâyoune-Sakia El Hamra", "Moufida Widad", "Parti de l'Istiqlal"],
            ["Région Laâyoune-Sakia El Hamra", "Lalla Rkia Chrif", "Parti de l'Istiqlal"],
            ["Région Laâyoune-Sakia El Hamra", "Aziza Badad", "PAM"],
            ["Région Laâyoune-Sakia El Hamra", "Asmaa Aouba", "USFP"],
            ["Région Laâyoune-Sakia El Hamra", "Fatima Essouidi", "PPS"],
            ["Région Dakhla-Oued Ed-Dahab", "Zineb El Kouri", "PAM"],
            ["Région Dakhla-Oued Ed-Dahab", "Khadija El Khleifi", "MP"],
            ["Région Dakhla-Oued Ed-Dahab", "Fatima Ould Omar", "Parti de l'Istiqlal"]
        ];

        let allMPs = [];
        let filteredMPs = [];
        let currentPage = 1;
        const pageSize = 15;
        let partyChartInstance = null;
        let typeChartInstance = null;

        function initData() {
            let idCounter = 1;
            rawLocalData.forEach(item => {
                allMPs.push({
                    id: idCounter++,
                    province: item[0],
                    district: item[1],
                    name: item[2],
                    party: item[3],
                    type: "LOCAL",
                    typeLabel: "Local"
                });
            });

            rawRegionalData.forEach(item => {
                allMPs.push({
                    id: idCounter++,
                    province: item[0],
                    district: item[0],
                    name: item[1],
                    party: item[2],
                    type: "REGIONAL",
                    typeLabel: "Régional (Femmes)"
                });
            });

            filteredMPs = [...allMPs];
            populateFilterDropdowns();
            renderStats();
            renderCharts();
            renderTable();
            renderPartyCards();
        }

        function populateFilterDropdowns() {
            const partySelect = document.getElementById("filter-party");
            const regionSelect = document.getElementById("filter-region");

            const parties = [...new Set(allMPs.map(m => m.party))].sort();
            const regions = [...new Set(allMPs.map(m => m.province))].sort();

            parties.forEach(p => {
                const opt = document.createElement("option");
                opt.value = p;
                opt.textContent = p;
                partySelect.appendChild(opt);
            });

            regions.forEach(r => {
                const opt = document.createElement("option");
                opt.value = r;
                opt.textContent = r;
                regionSelect.appendChild(opt);
            });

            const quickPartiesDiv = document.getElementById("quick-party-tags");
            const topParties = ["PAM", "RNI", "Parti de l'Istiqlal", "PJD", "USFP", "MP"];
            topParties.forEach(p => {
                const btn = document.createElement("button");
                btn.className = "px-2.5 py-1 bg-slate-100 hover:bg-indigo-100 text-slate-700 hover:text-indigo-900 rounded-md transition border border-slate-200 font-medium";
                btn.textContent = p;
                btn.onclick = () => {
                    document.getElementById("filter-party").value = p;
                    applyFilters();
                };
                quickPartiesDiv.appendChild(btn);
            });
        }

        function renderStats() {
            const total = filteredMPs.length;
            const local = filteredMPs.filter(m => m.type === "LOCAL").length;
            const regional = filteredMPs.filter(m => m.type === "REGIONAL").length;
            const partiesCount = new Set(filteredMPs.map(m => m.party)).size;

            document.getElementById("kpi-total").textContent = total;
            document.getElementById("kpi-local").textContent = local;
            document.getElementById("kpi-regional").textContent = regional;
            document.getElementById("kpi-parties").textContent = partiesCount;
            document.getElementById("table-results-count").textContent = `Affichage de ${total} députés sur ${allMPs.length}`;
        }

        function applyFilters() {
            const typeVal = document.getElementById("filter-type").value;
            const partyVal = document.getElementById("filter-party").value;
            const regionVal = document.getElementById("filter-region").value;
            const searchVal = document.getElementById("search-input").value.trim().toLowerCase();

            filteredMPs = allMPs.filter(mp => {
                const matchType = typeVal === "ALL" || mp.type === typeVal;
                const matchParty = partyVal === "ALL" || mp.party === partyVal;
                const matchRegion = regionVal === "ALL" || mp.province === regionVal;
                const matchSearch = searchVal === "" ||
                    mp.name.toLowerCase().includes(searchVal) ||
                    mp.district.toLowerCase().includes(searchVal) ||
                    mp.province.toLowerCase().includes(searchVal) ||
                    mp.party.toLowerCase().includes(searchVal);

                return matchType && matchParty && matchRegion && matchSearch;
            });

            currentPage = 1;
            renderStats();
            renderTable();
            updateCharts();
        }

        function resetFilters() {
            document.getElementById("filter-type").value = "ALL";
            document.getElementById("filter-party").value = "ALL";
            document.getElementById("filter-region").value = "ALL";
            document.getElementById("search-input").value = "";
            applyFilters();
        }

        function renderTable() {
            const tbody = document.getElementById("mp-table-body");
            tbody.innerHTML = "";

            if (filteredMPs.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-slate-500">
                            Aucun résultat ne correspond aux critères de recherche actuels.
                        </td>
                    </tr>
                `;
                document.getElementById("page-info").textContent = "Page 0 sur 0";
                document.getElementById("prev-page").disabled = true;
                document.getElementById("next-page").disabled = true;
                return;
            }

            const totalPages = Math.ceil(filteredMPs.length / pageSize);
            const startIdx = (currentPage - 1) * pageSize;
            const pageData = filteredMPs.slice(startIdx, startIdx + pageSize);

            pageData.forEach((mp, index) => {
                const tr = document.createElement("tr");
                tr.className = index % 2 === 0 ? "bg-white hover:bg-indigo-50/40" : "bg-slate-50/60 hover:bg-indigo-50/40";

                const badgeClass = mp.type === "LOCAL" 
                    ? "bg-blue-100 text-blue-800 border-blue-200" 
                    : "bg-amber-100 text-amber-800 border-amber-200";

                tr.innerHTML = `
                    <td class="px-4 py-3 text-center font-bold text-slate-400">${startIdx + index + 1}</td>
                    <td class="px-4 py-3 font-bold text-slate-800">${mp.name}</td>
                    <td class="px-4 py-3 font-medium text-slate-700">${mp.party}</td>
                    <td class="px-4 py-3 text-slate-600">${mp.district}</td>
                    <td class="px-4 py-3 text-slate-600">${mp.province}</td>
                    <td class="px-4 py-3 text-center">
                        <span class="inline-block px-2.5 py-0.5 text-[10px] font-semibold rounded-full border ${badgeClass}">
                            ${mp.typeLabel}
                        </span>
                    </td>
                `;
                tbody.appendChild(tr);
            });

            document.getElementById("page-info").textContent = `Page ${currentPage} sur ${totalPages}`;
            document.getElementById("prev-page").disabled = currentPage === 1;
            document.getElementById("next-page").disabled = currentPage === totalPages;
        }

        function changePage(delta) {
            const totalPages = Math.ceil(filteredMPs.length / pageSize);
            const newPage = currentPage + delta;
            if (newPage >= 1 && newPage <= totalPages) {
                currentPage = newPage;
                renderTable();
            }
        }

        function getPartyData() {
            const partyMap = {};
            filteredMPs.forEach(mp => {
                if (!partyMap[mp.party]) {
                    partyMap[mp.party] = { total: 0, local: 0, regional: 0 };
                }
                partyMap[mp.party].total++;
                if (mp.type === "LOCAL") partyMap[mp.party].local++;
                else partyMap[mp.party].regional++;
            });

            const sortedParties = Object.keys(partyMap).sort((a, b) => partyMap[b].total - partyMap[a].total);
            return {
                labels: sortedParties,
                localData: sortedParties.map(p => partyMap[p].local),
                regionalData: sortedParties.map(p => partyMap[p].regional),
                totalData: sortedParties.map(p => partyMap[p].total)
            };
        }

        function renderCharts() {
            const partyData = getPartyData();

            const ctxParty = document.getElementById("partyChart").getContext("2d");
            partyChartInstance = new Chart(ctxParty, {
                type: 'bar',
                data: {
                    labels: partyData.labels,
                    datasets: [
                        {
                            label: 'Sièges locaux',
                            data: partyData.localData,
                            backgroundColor: '#1e3a8a',
                            borderRadius: 4
                        },
                        {
                            label: 'Sièges régionaux (Femmes)',
                            data: partyData.regionalData,
                            backgroundColor: '#d97706',
                            borderRadius: 4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true,
                            ticks: { font: { family: 'Plus Jakarta Sans', size: 10 } }
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true,
                            ticks: { font: { family: 'Plus Jakarta Sans', size: 10 } }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { font: { family: 'Plus Jakarta Sans', size: 11 } }
                        },
                        tooltip: {
                            bodyFont: { family: 'Plus Jakarta Sans' },
                            titleFont: { family: 'Plus Jakarta Sans' }
                        }
                    }
                }
            });

            const ctxType = document.getElementById("typeChart").getContext("2d");
            const localCount = filteredMPs.filter(m => m.type === "LOCAL").length;
            const regCount = filteredMPs.filter(m => m.type === "REGIONAL").length;

            typeChartInstance = new Chart(ctxType, {
                type: 'doughnut',
                data: {
                    labels: ['Local', 'Régional (Femmes)'],
                    datasets: [{
                        data: [localCount, regCount],
                        backgroundColor: ['#1e3a8a', '#d97706'],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { font: { family: 'Plus Jakarta Sans', size: 11 } }
                        }
                    }
                }
            });
        }

        function updateCharts() {
            if (!partyChartInstance || !typeChartInstance) return;

            const partyData = getPartyData();
            partyChartInstance.data.labels = partyData.labels;
            partyChartInstance.data.datasets[0].data = partyData.localData;
            partyChartInstance.data.datasets[1].data = partyData.regionalData;
            partyChartInstance.update();

            const localCount = filteredMPs.filter(m => m.type === "LOCAL").length;
            const regCount = filteredMPs.filter(m => m.type === "REGIONAL").length;
            typeChartInstance.data.datasets[0].data = [localCount, regCount];
            typeChartInstance.update();
        }

        function renderPartyCards() {
            const grid = document.getElementById("party-cards-grid");
            grid.innerHTML = "";

            const partyCounts = {};
            allMPs.forEach(m => {
                partyCounts[m.party] = (partyCounts[m.party] || 0) + 1;
            });

            const sorted = Object.entries(partyCounts).sort((a, b) => b[1] - a[1]);

            sorted.forEach(([party, count]) => {
                const percentage = ((count / allMPs.length) * 100).toFixed(1);
                const card = document.createElement("div");
                card.className = "bg-slate-50 hover:bg-indigo-50 border border-slate-200 rounded-xl p-4 cursor-pointer transition flex flex-col justify-between hover:border-indigo-300 shadow-sm";
                card.onclick = () => {
                    document.getElementById("filter-party").value = party;
                    applyFilters();
                    window.scrollTo({ top: document.getElementById("search-input").offsetTop - 100, behavior: 'smooth' });
                };

                card.innerHTML = `
                    <div>
                        <div class="text-xs font-bold text-slate-800">${party}</div>
                        <div class="text-xl font-black text-indigo-950 mt-1">${count} <span class="text-xs font-normal text-slate-500">siège(s)</span></div>
                    </div>
                    <div class="w-full bg-slate-200 h-1.5 rounded-full mt-3 overflow-hidden">
                        <div class="bg-indigo-800 h-full rounded-full" style="width: ${percentage}%"></div>
                    </div>
                    <div class="text-[10px] text-slate-500 text-right mt-1 font-semibold">${percentage}% de la chambre</div>
                `;
                grid.appendChild(card);
            });
        }

        window.onload = initData;
    </script>
</body>
</html>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>تقرير الانتخابات التشريعية بالمغرب 2026 &#8211; معهد الدراسات الاجتماعية والإعلامية</title>
		<link>https://sms-institute.com/%d8%aa%d9%82%d8%b1%d9%8a%d8%b1-%d8%a7%d9%84%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8%d8%a7%d8%aa-%d8%a7%d9%84%d8%aa%d8%b4%d8%b1%d9%8a%d8%b9%d9%8a%d8%a9-%d8%a8%d8%a7%d9%84%d9%85%d8%ba%d8%b1%d8%a8-2026/</link>
		
		<dc:creator><![CDATA[Sanaa Haouata]]></dc:creator>
		<pubDate>Fri, 25 Sep 2026 08:12:52 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1277</guid>

					<description><![CDATA[التقرير الاستراتيجي: الانتخابات التشريعية بالمغرب 2026 &#8211; معهد الدراسات الاجتماعية والإعلامية معهد الدراسات الاجتماعية والإعلامية المرصد التفاعلي للانتخابات التشريعية بالمغرب&#8230;]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <!-- Chosen Palette: Warm Sand & Executive Emerald Palette (Background: #f8fafc, Emerald Primary: #064e3b, Slate Secondary: #0f172a, Amber Accent: #d97706, Sand Accent: #f5f5f4) -->
    <!-- Application Structure Plan:
         1. Header & Quick Metrics Ticker: Strategic overview with official attribution to the Institute of Social and Media Studies (معهد الدراسات الاجتماعية والإعلامية), date badge, key performance indicators.
         2. Tab Navigation System: Seamless navigation across 6 core strategic modules:
            - Module 1: اللوحة التنفيذية والمؤشرات العامة (Executive Summary & Core Metrics)
            - Module 2: خريطة مجلس النواب وموازين القوى (Seats Distribution & Party Comparison Table)
            - Module 3: تحليل السلوك التصويتي والديموغرافي (Hourly Turnout, Regional Disparities, Demographics)
            - Module 4: محاكي السيناريوهات والتحالفات الحكومية (Interactive Government Coalition Builder)
            - Module 5: النزاهة، الملاحظة وتخليق الحياة الانتخابية (CNDH Observation & Organic Law 53.25)
            - Module 6: الأجندة الاستراتيجية والاستنتاجات (World Cup 2030 Agenda & Conclusions)
         3. Interactive Coalition Simulator: Live calculator to build custom majority coalitions (198 seats threshold) with 1-click preset scenarios.
         4. Dynamic Charts: Built using Chart.js with strict canvas container constraints, responsive tooltips, and interactive options.
         5. Detailed Modals / Drawer Elements: Deep dive into PM Candidates profiles & Legal Reform Articles.
    -->
    <!-- Visualization & Content Choices:
         - Party Seat Distribution -> Chart.js Doughnut & Bar -> Toggle views -> Instant understanding of seat shares -> Canvas Chart.js
         - Hourly Turnout Progression -> Chart.js Line Chart with gradient fill -> Visualizing voter flow speed -> Canvas Chart.js
         - Regional Turnout Comparisons -> Chart.js Horizontal Bar -> Highlighting Sahara region engagement vs national average -> Canvas Chart.js
         - Age Demographics Breakdown -> Chart.js Pie Chart -> Visualizing the youth turnout gap -> Canvas Chart.js
         - Coalition Majority Builder -> Vanilla JS Dynamic Calculator -> Allowing user to simulate 198-seat thresholds -> Custom JS Logic
    -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>التقرير الاستراتيجي: الانتخابات التشريعية بالمغرب 2026 &#8211; معهد الدراسات الاجتماعية والإعلامية</title>
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Google Fonts: Cairo & Tajawal -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&#038;family=Tajawal:wght@400;500;700;800&#038;display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Cairo', 'Tajawal', 'sans-serif'],
                    },
                    colors: {
                        emerald: {
                            800: '#065f46',
                            900: '#064e3b',
                            950: '#022c22',
                        },
                        amber: {
                            500: '#f59e0b',
                            600: '#d97706',
                            700: '#b45309',
                        },
                        sand: {
                            50: '#fdfbf7',
                            100: '#f5f5f4',
                            200: '#e7e5e4',
                            300: '#d6d3d1',
                        }
                    }
                }
            }
        }
    </script>

    <style>
        body {
            font-family: 'Cairo', 'Tajawal', sans-serif;
            background-color: #f8fafc;
            color: #0f172a;
        }

        /* Strict Chart Container Constraint Rules */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 360px;
            }
        }

        /* Custom Scrollbars */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .tab-btn.active {
            background-color: #064e3b;
            color: #ffffff;
            border-bottom: 4px solid #d97706;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .gradient-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col antialiased selection:bg-amber-500 selection:text-white">

    <!-- Top Header & Ticker -->
    <header class="bg-emerald-900 text-white border-b-4 border-amber-600 shadow-xl sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                <div class="flex items-center space-x-3 space-x-reverse">
                    <span class="bg-amber-600 text-white font-extrabold text-xs px-3 py-1 rounded-full uppercase tracking-wider shadow">معهد الدراسات الاجتماعية والإعلامية</span>
                    <h1 class="text-xl sm:text-2xl font-black text-amber-400">المرصد التفاعلي للانتخابات التشريعية بالمغرب 2026</h1>
                </div>
                <div class="flex items-center space-x-4 space-x-reverse text-xs sm:text-sm text-emerald-100">
                    <span class="bg-emerald-950/60 px-3 py-1.5 rounded-lg border border-emerald-700/50 flex items-center gap-1.5">
                        <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c5.png" alt="📅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> تاريخ الاقتراع: 23 شتنبر 2026
                    </span>
                    <span class="bg-emerald-950/60 px-3 py-1.5 rounded-lg border border-emerald-700/50 flex items-center gap-1.5">
                        <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3db.png" alt="🏛" class="wp-smiley" style="height: 1em; max-height: 1em;" /> إجمالي المقاعد: 395 نائباً
                    </span>
                </div>
            </div>
        </div>

        <!-- Metric Highlights Ticker Strip -->
        <div class="bg-emerald-950/90 text-emerald-100 text-xs py-2 px-4 border-t border-emerald-800/60 overflow-x-auto whitespace-nowrap">
            <div class="max-w-7xl mx-auto flex items-center justify-between gap-6 min-w-max">
                <div class="flex items-center gap-2">
                    <span class="text-amber-400 font-bold"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /> الحزب المتصدر:</span>
                    <span>الأصالة والمعاصرة (97 مقعداً)</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-amber-400 font-bold"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ca.png" alt="📊" class="wp-smiley" style="height: 1em; max-height: 1em;" /> نسبة المشاركة الوطنية:</span>
                    <span>38.02% (مقابل 50.18% سنة 2021)</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-amber-400 font-bold"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> أعلى جهة تصويتاً:</span>
                    <span>العيون-الساقية الحمراء (77%)</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-amber-400 font-bold"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2696.png" alt="⚖" class="wp-smiley" style="height: 1em; max-height: 1em;" /> عتبة الأغلبية المطلقة:</span>
                    <span>198 مقعداً</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-amber-400 font-bold"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4b0.png" alt="💰" class="wp-smiley" style="height: 1em; max-height: 1em;" /> ميزانية المونديال:</span>
                    <span>190 مليار درهم (~20 مليار دولار)</span>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Navigation Bar Tabs -->
    <nav class="bg-white border-b border-slate-200 shadow-sm sticky top-[85px] z-40">
        <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
            <div class="flex space-x-1 space-x-reverse overflow-x-auto py-2 no-scrollbar">
                <button onclick="switchTab('dashboard')" id="tab-btn-dashboard" class="tab-btn active px-4 py-2.5 rounded-lg text-xs sm:text-sm font-bold transition-all whitespace-nowrap flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ca.png" alt="📊" class="wp-smiley" style="height: 1em; max-height: 1em;" /> اللوحة التنفيذية
                </button>
                <button onclick="switchTab('seats')" id="tab-btn-seats" class="tab-btn bg-slate-100 text-slate-700 hover:bg-slate-200 px-4 py-2.5 rounded-lg text-xs sm:text-sm font-bold transition-all whitespace-nowrap flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3db.png" alt="🏛" class="wp-smiley" style="height: 1em; max-height: 1em;" /> الخريطة النيابية والنتائج
                </button>
                <button onclick="switchTab('behavior')" id="tab-btn-behavior" class="tab-btn bg-slate-100 text-slate-700 hover:bg-slate-200 px-4 py-2.5 rounded-lg text-xs sm:text-sm font-bold transition-all whitespace-nowrap flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5f3.png" alt="🗳" class="wp-smiley" style="height: 1em; max-height: 1em;" /> المشاركة والسلوك الناخب
                </button>
                <button onclick="switchTab('coalition')" id="tab-btn-coalition" class="tab-btn bg-slate-100 text-slate-700 hover:bg-slate-200 px-4 py-2.5 rounded-lg text-xs sm:text-sm font-bold transition-all whitespace-nowrap flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f91d.png" alt="🤝" class="wp-smiley" style="height: 1em; max-height: 1em;" /> محاكي التحالفات الحكومية
                </button>
                <button onclick="switchTab('integrity')" id="tab-btn-integrity" class="tab-btn bg-slate-100 text-slate-700 hover:bg-slate-200 px-4 py-2.5 rounded-lg text-xs sm:text-sm font-bold transition-all whitespace-nowrap flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2696.png" alt="⚖" class="wp-smiley" style="height: 1em; max-height: 1em;" /> النزاهة والإصلاح التشريعي
                </button>
                <button onclick="switchTab('agenda')" id="tab-btn-agenda" class="tab-btn bg-slate-100 text-slate-700 hover:bg-slate-200 px-4 py-2.5 rounded-lg text-xs sm:text-sm font-bold transition-all whitespace-nowrap flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3af.png" alt="🎯" class="wp-smiley" style="height: 1em; max-height: 1em;" /> الرهانات والأجندة الاستراتيجية
                </button>
            </div>
        </div>
    </nav>

    <!-- Main Content Containers -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-8">

        <!-- ==========================================
             SECTION 1: DASHBOARD / EXECUTIVE SUMMARY
             ========================================== -->
        <section id="section-dashboard" class="tab-section space-y-6">
            
            <!-- Section Intro Paragraph -->
            <div class="bg-gradient-to-r from-emerald-900 to-emerald-800 text-white p-6 rounded-2xl shadow-lg border-r-8 border-amber-500">
                <div class="flex items-center gap-2 text-amber-300 font-bold text-xs uppercase mb-1">
                    <span>مركز التحليلات الاستراتيجية والسياسات العمومية</span>
                    <span>•</span>
                    <span>معهد الدراسات الاجتماعية والإعلامية (ISMS)</span>
                </div>
                <h2 class="text-xl sm:text-2xl font-black mb-2 text-amber-300">التقرير التنفيذي: زلزال سياسي وتحول هيكلي في موازين القوى 2026</h2>
                <p class="text-sm sm:text-base text-emerald-100 leading-relaxed">
                    يسعد **معهد الدراسات الاجتماعية والإعلامية** أن يقدم هذا التقرير التحليلي التفاعلي الشامل حول استحقاقات 23 شتنبر 2026. أفرزت هذه المحطة الانتخابية الثالثة في ظل دستور 2011 تصويتاً عقابياً واسع النطاق ضد التجمع الوطني للأحرار (قائد الأغلبية السابقة)، متوجةً حزب الأصالة والمعاصرة بالمرتبة الأولى لأول مرة في تاريخه برصيد 97 مقعداً. يقدم هذا التطبيق قراءة علمية دقيقة في الحصيلة الإحصائية، التحولات السياسية، وسيناريوهات تشكيل &#8220;حكومة المونديال&#8221; المعنية بتدبير استثمارات استراتيجية بقيمة 20 مليار دولار.
                </p>
            </div>

            <!-- KPI Cards Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">نسبة المشاركة الوطنية</span>
                        <span class="text-xs bg-red-100 text-red-700 font-bold px-2.5 py-0.5 rounded-full">-12.33%</span>
                    </div>
                    <div class="text-3xl font-black text-slate-900 mb-1">38.02%</div>
                    <p class="text-xs text-slate-600">6.01 مليون مصوت من أصل 15.8 مليون مسجل</p>
                </div>

                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">الحزب المتصدر (PAM)</span>
                        <span class="text-xs bg-emerald-100 text-emerald-800 font-bold px-2.5 py-0.5 rounded-full">+10 مقاعد</span>
                    </div>
                    <div class="text-3xl font-black text-emerald-900 mb-1">97 مقعداً</div>
                    <p class="text-xs text-slate-600">فاطمة الزهراء المنصوري (24.56% من المجلس)</p>
                </div>

                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">التراجع الأبرز (RNI)</span>
                        <span class="text-xs bg-red-100 text-red-700 font-bold px-2.5 py-0.5 rounded-full">-36 مقعداً</span>
                    </div>
                    <div class="text-3xl font-black text-slate-900 mb-1">66 مقعداً</div>
                    <p class="text-xs text-slate-600">محمد شوكي (تراجَع للمرتبة الثانية)</p>
                </div>

                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">العودة البرلمانية (PJD)</span>
                        <span class="text-xs bg-emerald-100 text-emerald-800 font-bold px-2.5 py-0.5 rounded-full">+41 مقعداً</span>
                    </div>
                    <div class="text-3xl font-black text-amber-600 mb-1">54 مقعداً</div>
                    <p class="text-xs text-slate-600">عبد الإله ابن كيران (صعود من 13 إلى 54)</p>
                </div>
            </div>

            <!-- Visual Highlights Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Top Parties Seat Comparison Chart -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between">
                    <div>
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-bold text-slate-900 flex items-center gap-2">
                                <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4ca.png" alt="📊" class="wp-smiley" style="height: 1em; max-height: 1em;" /> توزيع مقاعد الأحزاب الرئيسية (2026 vs 2021)
                            </h3>
                            <span class="text-xs bg-slate-100 text-slate-600 px-2.5 py-1 rounded-md font-semibold">تفاعلي</span>
                        </div>
                        <p class="text-xs text-slate-600 mb-4">
                            مقارنة بين نتائج الانتخابات التشريعية لسنتي 2026 و2021 تظهر التحول الكبير في الصدارة وتراجع حزب قائد الأغلبية السابقة.
                        </p>
                    </div>
                    <div class="chart-container">
                        <canvas id="overviewChart"></canvas>
                    </div>
                </div>

                <!-- Strategic Synopsis Card -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between space-y-4">
                    <div>
                        <h3 class="text-lg font-bold text-slate-900 mb-3 flex items-center gap-2">
                            <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> أربعة تحولات جوهرية رصدها فريق معهد ISMS
                        </h3>
                        <div class="space-y-3 text-sm text-slate-700">
                            <div class="p-3 bg-red-50 border-r-4 border-red-500 rounded-lg">
                                <strong class="text-red-900 block font-bold mb-1">1. التصويت العقابي ضد قائد الأغلبية:</strong>
                                فقد حزب التجمع الوطني للأحرار 36 مقعداً دفعة واحدة كضريبة مباشرة للتدبير الحكومي وارتفاع أسعار المواد الاستهلاكية والتضخم.
                            </div>
                            <div class="p-3 bg-emerald-50 border-r-4 border-emerald-600 rounded-lg">
                                <strong class="text-emerald-950 block font-bold mb-1">2. صعود &#8220;البام&#8221; بمرونة تكتيكية:</strong>
                                حقق حزب الأصالة والمعاصرة الصدارة التاريخية (97 مقعداً) مستفيداً من تحييد نفسه عن رئاسة الجهاز التنفيذي واستقطاب نخب تقنوقراطية بارزة مثل فوزي لقجع.
                            </div>
                            <div class="p-3 bg-amber-50 border-r-4 border-amber-500 rounded-lg">
                                <strong class="text-amber-900 block font-bold mb-1">3. استعادة قواعد &#8220;العدالة والتنمية&#8221;:</strong>
                                قفز حزب العدالة والتنمية من 13 إلى 54 مقعداً معيداً التموقع في الحواضر الكبرى كالرباط وسلا وطنجة عبر خطاب معارض لارتفاع كلفة المعيشة.
                            </div>
                            <div class="p-3 bg-blue-50 border-r-4 border-blue-500 rounded-lg">
                                <strong class="text-blue-900 block font-bold mb-1">4. استمرار التميز التصويتي للأقاليم الجنوبية:</strong>
                                سجلت جهات الصحراء المغربية أعلى نسب مشاركة وطنية بـ 77% في العيون و61% في الداخلة، متفوقة بفارق شاسع عن المعدل الوطني (38.02%).
                            </div>
                        </div>
                    </div>
                    <div class="pt-2 border-t border-slate-100 flex items-center justify-between">
                        <span class="text-xs text-slate-500">إعداد: قسم التحليلات السياسية والإعلامية بـ ISMS</span>
                        <button onclick="switchTab('seats')" class="text-xs text-emerald-800 font-bold hover:underline flex items-center gap-1">
                            استكشف التفاصيل الكاملة ←
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- ==========================================
             SECTION 2: PARLIAMENTARY MAP & RESULTS
             ========================================== -->
        <section id="section-seats" class="tab-section hidden space-y-6">
            
            <!-- Section Intro Paragraph -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                <h2 class="text-xl font-bold text-slate-900 mb-2 flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3db.png" alt="🏛" class="wp-smiley" style="height: 1em; max-height: 1em;" /> التركيبة البرلمانية الشاملة وموازين القوى (395 مقعداً)
                </h2>
                <p class="text-sm text-slate-600 leading-relaxed">
                    يقدم **معهد الدراسات الاجتماعية والإعلامية** في هذا القسم التفصيل الكامل لنتائج الاقتراع التشريعي لـ 23 شتنبر 2026 موزعاً على 14 هيئة سياسية نجحت في دخول مجلس النواب. يمثل هذا التوزيع موازين القوى الجديدة التي ستشكل المعارضة والأغلبية الحكومية المقبلة بناءً على مقتضيات الفصل 47 من الدستور.
                </p>
            </div>

            <!-- Controls & Filter Bar -->
            <div class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div class="flex items-center space-x-2 space-x-reverse">
                    <span class="text-xs font-bold text-slate-500">تصفية حسب الموقع:</span>
                    <button onclick="filterPartyTable('all')" class="px-3 py-1.5 text-xs rounded-lg font-bold bg-emerald-900 text-white shadow-sm">الكل (14 حزب)</button>
                    <button onclick="filterPartyTable('top')" class="px-3 py-1.5 text-xs rounded-lg font-bold bg-slate-100 hover:bg-slate-200 text-slate-700">الأحزاب الكبرى (4+)</button>
                    <button onclick="filterPartyTable('gained')" class="px-3 py-1.5 text-xs rounded-lg font-bold bg-emerald-100 hover:bg-emerald-200 text-emerald-800">الأحزاب الصاعدة (+)</button>
                </div>
                <div class="w-full md:w-64">
                    <input type="text" id="partySearchInput" onkeyup="searchParties()" placeholder="&#x1f50d; ابحث عن اسم الحزب أو القيادي..." class="w-full px-3 py-1.5 text-xs rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-emerald-800">
                </div>
            </div>

            <!-- Parliament Table and Visual Distribution Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Interactive Table (2 Columns wide) -->
                <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                    <div class="p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
                        <h3 class="font-bold text-sm text-slate-800">جدول النتائج النهائية وتوزيع المقاعد</h3>
                        <span class="text-xs text-slate-500">305 محلي + 90 جهوي</span>
                    </div>
                    <div class="overflow-x-auto max-h-[500px]">
                        <table class="w-full text-right text-xs sm:text-sm">
                            <thead class="bg-slate-100 text-slate-700 font-bold sticky top-0">
                                <tr>
                                    <th class="p-3">الحزب السياسي</th>
                                    <th class="p-3">القيادة السياسية</th>
                                    <th class="p-3 text-center">مقاعد 2026</th>
                                    <th class="p-3 text-center">مقاعد 2021</th>
                                    <th class="p-3 text-center">الفارق</th>
                                    <th class="p-3 text-center">النسبة</th>
                                </tr>
                            </thead>
                            <tbody id="partyTableBody" class="divide-y divide-slate-100">
                                <!-- JavaScript Will Populate Table Rows -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Side Chart: Donut Representation of Parliament -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between">
                    <div>
                        <h3 class="text-base font-bold text-slate-900 mb-2"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f369.png" alt="🍩" class="wp-smiley" style="height: 1em; max-height: 1em;" /> الحصص النسبية بالمجلس</h3>
                        <p class="text-xs text-slate-500 mb-4">تمثيل مئوي لكافة الكتل السياسية بالمجلس البالغ مجموعها 395 مقعداً.</p>
                    </div>
                    <div class="chart-container">
                        <canvas id="seatsDonutChart"></canvas>
                    </div>
                    <div class="mt-4 p-3 bg-sand-100 rounded-xl text-xs text-slate-700 space-y-1 border border-sand-200">
                        <div class="flex justify-between">
                            <span>عتبة الأغلبية المطلقة:</span>
                            <span class="font-bold text-emerald-900">198 مقعداً</span>
                        </div>
                        <div class="flex justify-between">
                            <span>الكتلة الحرجة الأولى (PAM+RNI+PI):</span>
                            <span class="font-bold text-emerald-900">228 مقعداً</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ==========================================
             SECTION 3: VOTER BEHAVIOR & DEMOGRAPHICS
             ========================================== -->
        <section id="section-behavior" class="tab-section hidden space-y-6">
            
            <!-- Section Intro Paragraph -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                <h2 class="text-xl font-bold text-slate-900 mb-2 flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5f3.png" alt="🗳" class="wp-smiley" style="height: 1em; max-height: 1em;" /> تشريح السلوك التصويتي، المشاركة، والاختلال الديموغرافي
                </h2>
                <p class="text-sm text-slate-600 leading-relaxed">
                    يكشف هذا التحليل الصادر عن **معهد الدراسات الاجتماعية والإعلامية** عن الديناميات الزمنية والمجالية والديموغرافية للكتلة الناخبة البالغة 15.8 مليون مسجل. أظهرت المعطيات الإحصائية تراجع المشاركة الوطنية إلى 38.02% مع عودة ظاهرة العزوف بالمدن الكبرى، مقابل تعبئة استثنائية بالأقاليم الجنوبية، مع تسجيل فجوة جيليّة عميقة تتجلى في ضعف مشاركة الشباب (4% فقط للفئة 18-24 سنة).
                </p>
            </div>

            <!-- Charts Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                
                <!-- Hourly Progression Line Chart -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between">
                    <div>
                        <h3 class="text-base font-bold text-slate-900 mb-1 flex items-center gap-2">
                            <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c8.png" alt="📈" class="wp-smiley" style="height: 1em; max-height: 1em;" /> التطور الزمني لنسبة المشاركة يوم 23 شتنبر
                        </h3>
                        <p class="text-xs text-slate-500 mb-4">وتيرة تدفق الناخبين على مكاتب التصويت من 10 صباحاً حتى إغلاق الصناديق 7 مساءً.</p>
                    </div>
                    <div class="chart-container">
                        <canvas id="hourlyTurnoutChart"></canvas>
                    </div>
                    <div class="mt-3 text-xs text-slate-600 bg-slate-50 p-3 rounded-lg border border-slate-200">
                        <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>ملاحظة تحليليّة (ISMS):</strong> تميزت الساعات الأولى بإقبال بطيء جداً (4.23% عند العاشرة صباحاً)، قبل أن تتسارع الوتيرة مساءً لترتفع من 28% في الخامسة إلى 38.02% عند الإغلاق.
                    </div>
                </div>

                <!-- Regional Comparisons Horizontal Bar Chart -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between">
                    <div>
                        <h3 class="text-base font-bold text-slate-900 mb-1 flex items-center gap-2">
                            <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> المشاركة الاستثنائية بالجهات الجنوبية مقابل المعدل الوطني
                        </h3>
                        <p class="text-xs text-slate-500 mb-4">مقارنة نسب التصويت بالجهات الصحراوية والمعدل الوطني العام.</p>
                    </div>
                    <div class="chart-container">
                        <canvas id="regionalTurnoutChart"></canvas>
                    </div>
                    <div class="mt-3 text-xs text-slate-600 bg-slate-50 p-3 rounded-lg border border-slate-200">
                        <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>عوامل التمايز الجنوبي:</strong> الوعي بتثبيت الشرعية المؤسساتية، التنافس القبلي المحموم، والحرص على توجيه عائدات النموذج التنموي الخاص بالأقاليم الجنوبية.
                    </div>
                </div>

                <!-- Age Demographics Pie Chart -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between">
                    <div>
                        <h3 class="text-base font-bold text-slate-900 mb-1 flex items-center gap-2">
                            <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /> التركيبة الديموغرافية للكتلة الناخبة المسجلة
                        </h3>
                        <p class="text-xs text-slate-500 mb-4">توزيع الناخبين المسجلين (15.8 مليون) حسب الفئات العمرية.</p>
                    </div>
                    <div class="chart-container">
                        <canvas id="demographicsChart"></canvas>
                    </div>
                </div>

                <!-- Invalid & Blank Votes Card -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between space-y-4">
                    <div>
                        <h3 class="text-base font-bold text-slate-900 mb-2 flex items-center gap-2">
                            <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2709.png" alt="✉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> التصويت الاحتجاجي والبطاقات الملغاة
                        </h3>
                        <p class="text-sm text-slate-600 leading-relaxed mb-3">
                            سجل باحثو معهد ISMS استناداً إلى المحاضر الرسمية نسباً مرتفعة في البطاقات الملغاة والبيضاء، والتي عكس جزء منها صعوبات تقنية لدى الفئات الأمية في التمييز بين ورقتي التصويت المحلية والجهوية، بينما عكس الجزء الآخر تصويتاً احتجاجياً.
                        </p>
                        <div class="p-4 bg-amber-50 border border-amber-200 rounded-xl space-y-2">
                            <div class="flex justify-between text-xs font-bold text-amber-900">
                                <span>عينة: دائرة العيون (اللائحة الجهوية)</span>
                                <span>12.4% أصوات ملغاة</span>
                            </div>
                            <div class="w-full bg-amber-200 h-2.5 rounded-full overflow-hidden">
                                <div class="bg-amber-600 h-full" style="width: 12.4%"></div>
                            </div>
                            <p class="text-xs text-amber-800">
                                تم تسجيل 21,774 صوتاً ملغى مقابل 153,520 صوتاً معبراً عنه بهذه الدائرة.
                            </p>
                        </div>
                    </div>
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 text-xs text-slate-700 space-y-1">
                        <strong class="text-slate-900 block font-bold">التوزيع الجندري للهيئة الناخبة:</strong>
                        <div class="flex items-center gap-4 pt-1">
                            <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f468.png" alt="👨" class="wp-smiley" style="height: 1em; max-height: 1em;" /> ذكور: 54%</span>
                            <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f469.png" alt="👩" class="wp-smiley" style="height: 1em; max-height: 1em;" /> إناث: 46%</span>
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!-- ==========================================
             SECTION 4: COALITION SIMULATOR
             ========================================== -->
        <section id="section-coalition" class="tab-section hidden space-y-6">
            
            <!-- Section Intro Paragraph -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                <h2 class="text-xl font-bold text-slate-900 mb-2 flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f91d.png" alt="🤝" class="wp-smiley" style="height: 1em; max-height: 1em;" /> محاكي التحالفات الحكومية وبناء الأغلبية (الفصل 47)
                </h2>
                <p class="text-sm text-slate-600 leading-relaxed">
                    وفقاً للفصل 47 من الدستور، يعين الملك رئيس الحكومة من الحزب المتصدر (الأصالة والمعاصرة بـ 97 مقعداً). ويتطلب تنصيب الحكومة الحصول على ثقة مجلس النواب بأغلبية مطلقة لا تقل عن **198 مقعداً**. صمم **معهد الدراسات الاجتماعية والإعلامية** هذا المحاكي التفاعلي لاختبار السيناريوهات المتاحة أو بناء تحالفك الحكومي الخاص.
                </p>
            </div>

            <!-- Preset Scenarios Buttons -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <button onclick="loadScenario(1)" class="p-4 bg-white hover:bg-emerald-50 border-2 border-emerald-800 rounded-2xl text-right transition shadow-sm group">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-xs font-bold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">السيناريو الأول (الأرجح)</span>
                        <span class="text-xs text-emerald-800 font-bold">228 مقعداً</span>
                    </div>
                    <strong class="text-slate-900 block text-sm group-hover:text-emerald-900">الاستمرارية الحكومية المعكوسة</strong>
                    <p class="text-xs text-slate-500 mt-1">البام (97) + الأحرار (66) + الاستقلال (65)</p>
                </button>

                <button onclick="loadScenario(2)" class="p-4 bg-white hover:bg-red-50 border-2 border-slate-200 hover:border-red-400 rounded-2xl text-right transition shadow-sm group">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-xs font-bold bg-red-100 text-red-700 px-2 py-0.5 rounded">السيناريو الثاني (مستبعد)</span>
                        <span class="text-xs text-red-700 font-bold">216 مقعداً</span>
                    </div>
                    <strong class="text-slate-900 block text-sm group-hover:text-red-900">ائتلاف الصناديق المتصالحة</strong>
                    <p class="text-xs text-slate-500 mt-1">البام (97) + الاستقلال (65) + العدالة والتنمية (54)</p>
                </button>

                <button onclick="loadScenario(3)" class="p-4 bg-white hover:bg-amber-50 border-2 border-slate-200 hover:border-amber-400 rounded-2xl text-right transition shadow-sm group">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-xs font-bold bg-amber-100 text-amber-800 px-2 py-0.5 rounded">السيناريو الثالث (بديل)</span>
                        <span class="text-xs text-amber-800 font-bold">207 مقاعد</span>
                    </div>
                    <strong class="text-slate-900 block text-sm group-hover:text-amber-900">التكتل الإصلاحي الاجتماعي</strong>
                    <p class="text-xs text-slate-500 mt-1">البام (97) + الاستقلال (65) + الاتحاد الاشتراكي (26) + التقدم والاشتراكية (19)</p>
                </button>
            </div>

            <!-- Simulator Main Workspace Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                
                <!-- Party Selection Toggles (2 Cols) -->
                <div class="lg:col-span-2 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                    <div class="flex justify-between items-center border-b border-slate-100 pb-3">
                        <h3 class="font-bold text-slate-900 text-base">حدد الأحزاب المشاركة في الحكومة المفترضة:</h3>
                        <button onclick="resetCoalition()" class="text-xs text-red-600 font-bold hover:underline">إعادة ضبط <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /></button>
                    </div>

                    <div id="coalitionPartiesGrid" class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <!-- JS Dynamic Checklist -->
                    </div>
                </div>

                <!-- Live Results Dashboard Box -->
                <div class="bg-emerald-950 text-white p-6 rounded-2xl shadow-xl flex flex-col justify-between space-y-6">
                    <div>
                        <span class="text-xs font-bold text-amber-400 uppercase tracking-wider block mb-1">عداد الأغلبية الحكومية</span>
                        <h3 class="text-2xl font-black text-white mb-4" id="coalitionTitle">ائتلاف مخصص</h3>

                        <!-- Gauge Progress Bar -->
                        <div class="space-y-2 mb-6">
                            <div class="flex justify-between text-xs text-emerald-200">
                                <span>المقاعد المجمعة:</span>
                                <span class="font-bold text-amber-400 text-sm" id="seatsCounter">0 / 395</span>
                            </div>
                            <div class="w-full bg-emerald-900 h-4 rounded-full overflow-hidden p-0.5 border border-emerald-700">
                                <div id="seatsProgressBar" class="bg-gradient-to-r from-amber-500 to-emerald-400 h-full rounded-full transition-all duration-500" style="width: 0%"></div>
                            </div>
                            <div class="flex justify-between text-[10px] text-emerald-300">
                                <span>0</span>
                                <span class="font-bold text-amber-300">عتبة الأغلبية: 198</span>
                                <span>395</span>
                            </div>
                        </div>

                        <!-- Status Message Card -->
                        <div id="coalitionStatusBox" class="p-4 rounded-xl text-xs font-bold leading-relaxed transition-all">
                            <!-- Status set via JS -->
                        </div>
                    </div>

                    <!-- Potential PM Profiles Drawer Button -->
                    <div class="border-t border-emerald-800/80 pt-4">
                        <strong class="text-xs text-emerald-300 block mb-2">المرشحون البارزون لرئاسة الحكومة:</strong>
                        <div class="space-y-2">
                            <button onclick="showPmModal('mansouri')" class="w-full text-right p-2 rounded-lg bg-emerald-900/60 hover:bg-emerald-800/80 border border-emerald-700/50 text-xs text-emerald-100 flex justify-between items-center">
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f469.png" alt="👩" class="wp-smiley" style="height: 1em; max-height: 1em;" /> فاطمة الزهراء المنصوري (البام)</span>
                                <span class="text-amber-400 font-bold">الأقرب <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f451.png" alt="👑" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </button>
                            <button onclick="showPmModal('lekjaa')" class="w-full text-right p-2 rounded-lg bg-emerald-900/60 hover:bg-emerald-800/80 border border-emerald-700/50 text-xs text-emerald-100 flex justify-between items-center">
                                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f468.png" alt="👨" class="wp-smiley" style="height: 1em; max-height: 1em;" /> فوزي لقجع (خيار تقنوقراطي)</span>
                                <span>ملف المونديال <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26bd.png" alt="⚽" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!-- ==========================================
             SECTION 5: INTEGRITY & LEGAL REFORMS
             ========================================== -->
        <section id="section-integrity" class="tab-section hidden space-y-6">
            
            <!-- Section Intro Paragraph -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                <h2 class="text-xl font-bold text-slate-900 mb-2 flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2696.png" alt="⚖" class="wp-smiley" style="height: 1em; max-height: 1em;" /> تقييم النزاهة والملاحظة وإصلاحات القانون التنظيمي 53.25
                </h2>
                <p class="text-sm text-slate-600 leading-relaxed">
                    يحلل **معهد الدراسات الاجتماعية والإعلامية** الظروف التنظيمية للاقتراع؛ حيث أجريت الانتخابات تحت إشراف وتغطية رقابية واسعة قادها المجلس الوطني لحقوق الإنسان (CNDH) بمشاركة أكثر من 3,206 ملاحظين وملاحظات. بالتوازي مع ذلك، شكل القانون التنظيمي رقم 53.25 (المعدل للقانون 27.11) منعطفاً حاسماً لتخليق الحياة الانتخابية، عبر تجريد المتابعين قضائياً وتعزيز الحضور النسائي والشبابي.
                </p>
            </div>

            <!-- Two Columns Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                
                <!-- CNDH & Observation Box -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                    <div class="flex items-center justify-between border-b border-slate-100 pb-3">
                        <h3 class="font-bold text-slate-900 text-base"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6e1.png" alt="🛡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> حصيلة الملاحظة الانتخابية (CNDH)</h3>
                        <span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-2.5 py-1 rounded-full">ظروف شبه عادية</span>
                    </div>

                    <div class="grid grid-cols-2 gap-3 text-center">
                        <div class="p-3 bg-slate-50 rounded-xl border border-slate-200">
                            <span class="block text-2xl font-black text-emerald-900">3,206</span>
                            <span class="text-xs text-slate-600">إجمالي الملاحظين (200+ دولي)</span>
                        </div>
                        <div class="p-3 bg-slate-50 rounded-xl border border-slate-200">
                            <span class="block text-2xl font-black text-emerald-900">8.9%</span>
                            <span class="text-xs text-slate-600">تغطية المكاتب (تتجاوز المعيار الدولي)</span>
                        </div>
                    </div>

                    <div class="space-y-2 text-xs text-slate-700">
                        <div class="p-2.5 bg-slate-50 rounded-lg">
                            <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>تغطية المكاتب:</strong> تم شمل 3,915 مكتب تصويت عبر 733 جماعة ترابية (542 قروية و191 حضرية).
                        </div>
                        <div class="p-2.5 bg-slate-50 rounded-lg">
                            <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f469.png" alt="👩" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>تمثيلية النساء:</strong> شكلت النساء 40% من مجموع فريق الملاحظين الميدانيين.
                        </div>
                        <div class="p-2.5 bg-amber-50 text-amber-900 rounded-lg border border-amber-200">
                            <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a0.png" alt="⚠" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>خروقات معزولة (&lt;3%):</strong> إحالة حادثتي طنجة (مكتبي 84 و87 بمدرسة القدس) على النيابة العامة، مع رصد مناوشات محدودة بأنفا وبن مسيك.
                        </div>
                    </div>
                </div>

                <!-- Organic Law 53.25 Innovations Box -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                    <div class="flex items-center justify-between border-b border-slate-100 pb-3">
                        <h3 class="font-bold text-slate-900 text-base"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4dc.png" alt="📜" class="wp-smiley" style="height: 1em; max-height: 1em;" /> مستجدات القانون التنظيمي رقم 53.25</h3>
                        <span class="bg-amber-100 text-amber-800 text-xs font-bold px-2.5 py-1 rounded-full">الظهير 1.25.70</span>
                    </div>

                    <div class="space-y-3 text-xs sm:text-sm">
                        <div class="p-3 bg-slate-50 border-r-4 border-emerald-800 rounded-lg">
                            <strong class="text-slate-900 block font-bold mb-1">1. التخليق الحازم لموانع الأهلية:</strong>
                            العزل القضائي النهائي من المسؤولية، الإدانة الابتدائية في جناية، والتجريد التلقائي للنواب المعتقلين احتياطياً لمدة 6 أشهر فما فوق.
                        </div>
                        <div class="p-3 bg-slate-50 border-r-4 border-amber-600 rounded-lg">
                            <strong class="text-slate-900 block font-bold mb-1">2. حظر التضليل الرقمي والذكاء الاصطناعي:</strong>
                            تشديد العقوبات الحبسية والغرامات على استعمال الذكاء الاصطناعي أو الشبكات الرقمية لنشر ادعاءات كاذبة يوم الاقتراع.
                        </div>
                        <div class="p-3 bg-slate-50 border-r-4 border-blue-600 rounded-lg">
                            <strong class="text-slate-900 block font-bold mb-1">3. توطين الكوطا النسائية الجهوية:</strong>
                            تخصيص كافة المقاعد الجهوية الـ 90 للوائح النسائية حصرياً لكسر مركزية العاصمة وتصعيد كفاءات من قلب الجهات.
                        </div>
                        <div class="p-3 bg-slate-50 border-r-4 border-purple-600 rounded-lg">
                            <strong class="text-slate-900 block font-bold mb-1">4. تحفيز الشباب دون 35 سنة:</strong>
                            دعم عمومي يغطي 75% من مصاريف الحملة للوائح المستقلة الشبابية الحاصلة على 2% على الأقل من أصوات الدائرة.
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!-- ==========================================
             SECTION 6: STRATEGIC AGENDA & CONCLUSIONS
             ========================================== -->
        <section id="section-agenda" class="tab-section hidden space-y-6">
            
            <!-- Section Intro Paragraph -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                <h2 class="text-xl font-bold text-slate-900 mb-2 flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3af.png" alt="🎯" class="wp-smiley" style="height: 1em; max-height: 1em;" /> الرهانات الاستراتيجية، &#8220;حكومة المونديال&#8221;، واستنتاجات معهد ISMS
                </h2>
                <p class="text-sm text-slate-600 leading-relaxed">
                    تواجه الحكومة المنبثقة عن تشريعيات 23 شتنبر 2026 أجندة تنفيدية معقدة تتراوح بين الإشراف على مشاريع كأس العالم 2030 باستثمارات تناهز 190 مليار درهم، ومواصلة بناء &#8220;الدولة الاجتماعية&#8221;، إضافة إلى استكمال القوانين المهيكلة الكبرى (مدونة الأسرة، قانون الإضراب، والقانون الجنائي).
                </p>
            </div>

            <!-- Grid Agenda Pillars -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                
                <!-- Pillar 1: World Cup Economy -->
                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition space-y-3">
                    <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center text-xl">
                        <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26bd.png" alt="⚽" class="wp-smiley" style="height: 1em; max-height: 1em;" />
                    </div>
                    <h3 class="font-bold text-slate-900 text-base">رهان &#8220;حكومة المونديال&#8221; 2030</h3>
                    <p class="text-xs text-slate-600 leading-relaxed">
                        إدارة استثمارات بقيمة 20 مليار دولار (~12% من الناتج المحلي الإجمالي) مخصصة لتحديث الملاعب، الربط السككي فائق السرعة، الموانئ، والمنشآت السياحية، مع الوفاء بوعود خلق مليون منصب شغل.
                    </p>
                </div>

                <!-- Pillar 2: Social State & Welfare -->
                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition space-y-3">
                    <div class="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center text-xl">
                        <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3e5.png" alt="🏥" class="wp-smiley" style="height: 1em; max-height: 1em;" />
                    </div>
                    <h3 class="font-bold text-slate-900 text-base">استكمال ورش &#8220;الدولة الاجتماعية&#8221;</h3>
                    <p class="text-xs text-slate-600 leading-relaxed">
                        معالجة الاختلالات التقنية للسجل الاجتماعي الموحد (RSU)، توسيع الدعم المباشر للأسر الهشة والطبقة الوسطى المتضررة من الغلاء، وتأهيل المستشفيات والمنظومة التعليمية.
                    </p>
                </div>

                <!-- Pillar 3: Legislative Reforms -->
                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition space-y-3">
                    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-xl">
                        <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4dc.png" alt="📜" class="wp-smiley" style="height: 1em; max-height: 1em;" />
                    </div>
                    <h3 class="font-bold text-slate-900 text-base">الحسم في القوانين المؤجلة</h3>
                    <p class="text-xs text-slate-600 leading-relaxed">
                        المصادقة النهائية على المراجعة الشاملة لمدونة الأسرة، إخراج القانون التنظيمي للإضراب بالتوافق مع النقابات، وتعديل قانون المسطرة الجنائية وتفعيل العقوبات البديلة.
                    </p>
                </div>

            </div>

            <!-- Strategic Conclusions Container -->
            <div class="bg-gradient-to-br from-slate-900 to-emerald-950 text-white p-6 sm:p-8 rounded-2xl shadow-xl space-y-4">
                <h3 class="text-lg font-bold text-amber-400 flex items-center gap-2">
                    <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4a1.png" alt="💡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> ثلاثة استنتاجات استراتيجية لمستقبل الممارسة المؤسساتية (ISMS)
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2 text-xs sm:text-sm">
                    <div class="p-4 bg-white/5 border border-white/10 rounded-xl space-y-2">
                        <strong class="text-amber-300 block font-bold">1. حيوية التداول الانتخابي:</strong>
                        أثبتت النتائج قدرة النظام السياسي المغربي على إحداث التداول السلمي ومعاقبة الأداء الحكومي عبر الصناديق دون المساس بجوهر الاستقرار المؤسساتي.
                    </div>

                    <div class="p-4 bg-white/5 border border-white/10 rounded-xl space-y-2">
                        <strong class="text-amber-300 block font-bold">2. جرس إنذار فجوة الثقة:</strong>
                        تراجع المشاركة إلى 38.02% وعزوف الشباب يستوجبان إشراك النخب الشابة وتجديد الأحزاب لقنوات الوساطة التقليدية لمنع تفاقم أزمة التمثيلية.
                    </div>

                    <div class="p-4 bg-white/5 border border-white/10 rounded-xl space-y-2">
                        <strong class="text-amber-300 block font-bold">3. المحك العملي للبام:</strong>
                        ينقل هذا الفوز حزب الأصالة والمعاصرة من حيز التنظير إلى محك الأداء؛ حيث لن يقاس نجاحه بحجم التحالف بل بالقدرة الميدانية على تحسين حياة المواطنين.
                    </div>
                </div>
            </div>

        </section>

    </main>

    <!-- Footer -->
    <footer class="bg-slate-900 text-slate-400 text-xs py-6 border-t border-slate-800 mt-12">
        <div class="max-w-7xl mx-auto px-4 text-center space-y-2">
            <p class="font-bold text-slate-300">معهد الدراسات الاجتماعية والإعلامية (Institute of Social and Media Studies &#8211; ISMS)</p>
            <p>تم تطوير هذا المرصد التفاعلي استناداً إلى التقرير الاستراتيجي للانتخابات التشريعية بالمغرب (23 شتنبر 2026).</p>
            <p class="text-slate-500">معهد الدراسات الاجتماعية والإعلامية © 2026 | جميع الحقوق محفوظة</p>
        </div>
    </footer>

    <!-- Prime Minister Modal Component -->
    <div id="pmModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl max-w-lg w-full p-6 space-y-4 shadow-2xl relative">
            <button onclick="closePmModal()" class="absolute top-4 left-4 text-slate-400 hover:text-slate-600 font-bold text-lg">✕</button>
            <div id="pmModalContent">
                <!-- Dynamically Inserted PM Bio -->
            </div>
        </div>
    </div>

    <!-- ==========================================
         JAVASCRIPT APPLICATION LOGIC
         ========================================== -->
    <script>
        // Data Store
        const partiesData = [
            { id: 'pam', name: 'الأصالة والمعاصرة (PAM)', leader: 'فاطمة الزهراء المنصوري', seats2026: 97, seats2021: 87, diff: 10, percent: '24.56%', role: 'أغلبية / المرتبة الأولى', color: '#064e3b' },
            { id: 'rni', name: 'التجمع الوطني للأحرار (RNI)', leader: 'محمد شوكي', seats2026: 66, seats2021: 102, diff: -36, percent: '16.71%', role: 'قائد الأغلبية السابقة', color: '#0284c7' },
            { id: 'pi', name: 'حزب الاستقلال (PI)', leader: 'نزار بركة', seats2026: 65, seats2021: 81, diff: -16, percent: '16.46%', role: 'أغلبية حكومية', color: '#d97706' },
            { id: 'pjd', name: 'العدالة والتنمية (PJD)', leader: 'عبد الإله ابن كيران', seats2026: 54, seats2021: 13, diff: 41, percent: '13.67%', role: 'معارضة', color: '#059669' },
            { id: 'mp', name: 'الحركة الشعبية (MP)', leader: 'محمد أوزين', seats2026: 29, seats2021: 28, diff: 1, percent: '7.34%', role: 'معارضة', color: '#ea580c' },
            { id: 'usfp', name: 'الاتحاد الاشتراكي (USFP)', leader: 'إدريس لشكر', seats2026: 26, seats2021: 34, diff: -8, percent: '6.58%', role: 'معارضة', color: '#dc2626' },
            { id: 'pps', name: 'التقدم والاشتراكية (PPS)', leader: 'محمد نبيل بنعبد الله', seats2026: 19, seats2021: 22, diff: -3, percent: '4.81%', role: 'معارضة', color: '#be123c' },
            { id: 'uc', name: 'الاتحاد الدستوري (UC)', leader: 'محمد جودار', seats2026: 17, seats2021: 18, diff: -1, percent: '4.30%', role: 'مساندة للأغلبية', color: '#854d0e' },
            { id: 'mds', name: 'الحركة الديمقراطية الاجتماعية', leader: 'عبد الصمد عرشان', seats2026: 8, seats2021: 5, diff: 3, percent: '2.03%', role: 'مساندة', color: '#4f46e5' },
            { id: 'ag', name: 'تحالف اليسار (AG)', leader: 'عبد السلام العزيز / جمال العسري', seats2026: 8, seats2021: 2, diff: 6, percent: '2.03%', role: 'معارضة يسارية', color: '#9333ea' },
            { id: 'ffd', name: 'جبهة القوى الديمقراطية (FFD)', leader: 'مصطفى بنعلي', seats2026: 2, seats2021: 3, diff: -1, percent: '0.51%', role: 'معارضة', color: '#64748b' },
            { id: 'inssaf', name: 'حزب الإنصاف (Al Inssaf)', leader: 'شاكر أشهبار', seats2026: 2, seats2021: 0, diff: 2, percent: '0.51%', role: 'جديد', color: '#475569' },
            { id: 'pnd', name: 'حزب الديمقراطيين الجدد', leader: 'محمد ضريف', seats2026: 1, seats2021: 0, diff: 1, percent: '0.25%', role: 'جديد', color: '#334155' },
            { id: 'pud', name: 'حزب الوحدة والديمقراطية', leader: 'أحمد فطري', seats2026: 1, seats2021: 0, diff: 1, percent: '0.25%', role: 'جديد', color: '#1e293b' }
        ];

        // Active State Variables
        let currentSelectedPartyIds = new Set(['pam', 'rni', 'pi']);
        let overviewChartObj = null;
        let seatsDonutChartObj = null;
        let hourlyTurnoutChartObj = null;
        let regionalTurnoutChartObj = null;
        let demographicsChartObj = null;

        // Document Loaded Initialization
        document.addEventListener('DOMContentLoaded', () => {
            renderPartyTable(partiesData);
            initCoalitionGrid();
            initCharts();
            updateCoalitionState();
        });

        // Tab Switching Logic
        function switchTab(tabId) {
            document.querySelectorAll('.tab-section').forEach(sec => sec.classList.add('hidden'));
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
                btn.classList.add('bg-slate-100', 'text-slate-700');
            });

            const targetSection = document.getElementById(`section-${tabId}`);
            const targetBtn = document.getElementById(`tab-btn-${tabId}`);

            if (targetSection && targetBtn) {
                targetSection.classList.remove('hidden');
                targetBtn.classList.add('active');
                targetBtn.classList.remove('bg-slate-100', 'text-slate-700');
            }
        }

        // Render Party Table
        function renderPartyTable(data) {
            const tbody = document.getElementById('partyTableBody');
            tbody.innerHTML = '';

            data.forEach(p => {
                const diffBadge = p.diff > 0 
                    ? `<span class="bg-emerald-100 text-emerald-800 font-bold px-2 py-0.5 rounded text-[11px]">+${p.diff}</span>`
                    : (p.diff < 0 
                        ? `<span class="bg-red-100 text-red-700 font-bold px-2 py-0.5 rounded text-[11px]">${p.diff}</span>`
                        : `<span class="bg-slate-100 text-slate-600 font-bold px-2 py-0.5 rounded text-[11px]">0</span>`);

                const row = `
                    <tr class="hover:bg-slate-50 transition">
                        <td class="p-3 font-bold text-slate-900 flex items-center gap-2">
                            <span class="w-3 h-3 rounded-full inline-block" style="background-color: ${p.color}"></span>
                            ${p.name}
                        </td>
                        <td class="p-3 text-slate-600">${p.leader}</td>
                        <td class="p-3 text-center font-black text-slate-900">${p.seats2026}</td>
                        <td class="p-3 text-center text-slate-500">${p.seats2021}</td>
                        <td class="p-3 text-center">${diffBadge}</td>
                        <td class="p-3 text-center font-semibold text-slate-700">${p.percent}</td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        // Party Table Search & Filter Logic
        function searchParties() {
            const query = document.getElementById('partySearchInput').value.toLowerCase();
            const filtered = partiesData.filter(p => 
                p.name.toLowerCase().includes(query) || p.leader.toLowerCase().includes(query)
            );
            renderPartyTable(filtered);
        }

        function filterPartyTable(type) {
            if (type === 'all') renderPartyTable(partiesData);
            else if (type === 'top') renderPartyTable(partiesData.filter(p => p.seats2026 >= 25));
            else if (type === 'gained') renderPartyTable(partiesData.filter(p => p.diff > 0));
        }

        // Initialize Coalition Grid Checkboxes
        function initCoalitionGrid() {
            const container = document.getElementById('coalitionPartiesGrid');
            container.innerHTML = '';

            partiesData.forEach(p => {
                const isChecked = currentSelectedPartyIds.has(p.id);
                const card = `
                    <label id="card-party-${p.id}" onclick="togglePartySelection('${p.id}')" class="p-3 rounded-xl border cursor-pointer transition flex items-center justify-between ${isChecked ? 'bg-emerald-50 border-emerald-700 text-emerald-950 font-bold' : 'bg-slate-50 border-slate-200 text-slate-700'}">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="chk-${p.id}" ${isChecked ? 'checked' : ''} class="w-4 h-4 text-emerald-800 rounded focus:ring-emerald-700">
                            <span class="text-xs sm:text-sm">${p.name}</span>
                        </div>
                        <span class="text-xs bg-white px-2 py-0.5 rounded border border-slate-200 font-extrabold text-slate-900">${p.seats2026}</span>
                    </label>
                `;
                container.innerHTML += card;
            });
        }

        function togglePartySelection(partyId) {
            if (currentSelectedPartyIds.has(partyId)) {
                currentSelectedPartyIds.delete(partyId);
            } else {
                currentSelectedPartyIds.add(partyId);
            }
            updateCoalitionState();
        }

        function loadScenario(scenNumber) {
            currentSelectedPartyIds.clear();
            if (scenNumber === 1) {
                currentSelectedPartyIds.add('pam');
                currentSelectedPartyIds.add('rni');
                currentSelectedPartyIds.add('pi');
                document.getElementById('coalitionTitle').innerText = 'السيناريو 1: الاستمرارية المعكوسة';
            } else if (scenNumber === 2) {
                currentSelectedPartyIds.add('pam');
                currentSelectedPartyIds.add('pi');
                currentSelectedPartyIds.add('pjd');
                document.getElementById('coalitionTitle').innerText = 'السيناريو 2: الصناديق المتصالحة';
            } else if (scenNumber === 3) {
                currentSelectedPartyIds.add('pam');
                currentSelectedPartyIds.add('pi');
                currentSelectedPartyIds.add('usfp');
                currentSelectedPartyIds.add('pps');
                document.getElementById('coalitionTitle').innerText = 'السيناريو 3: التكتل الإصلاحي';
            }
            updateCoalitionState();
        }

        function resetCoalition() {
            currentSelectedPartyIds.clear();
            document.getElementById('coalitionTitle').innerText = 'ائتلاف مخصص';
            updateCoalitionState();
        }

        function updateCoalitionState() {
            let totalSeats = 0;
            partiesData.forEach(p => {
                const chk = document.getElementById(`chk-${p.id}`);
                const card = document.getElementById(`card-party-${p.id}`);
                const isSelected = currentSelectedPartyIds.has(p.id);

                if (chk) chk.checked = isSelected;
                if (card) {
                    if (isSelected) {
                        card.className = 'p-3 rounded-xl border cursor-pointer transition flex items-center justify-between bg-emerald-50 border-emerald-700 text-emerald-950 font-bold';
                    } else {
                        card.className = 'p-3 rounded-xl border cursor-pointer transition flex items-center justify-between bg-slate-50 border-slate-200 text-slate-700';
                    }
                }

                if (isSelected) totalSeats += p.seats2026;
            });

            // Update Counter Text
            document.getElementById('seatsCounter').innerText = `${totalSeats} / 395`;
            
            // Progress percentage
            const pct = Math.min((totalSeats / 395) * 100, 100);
            document.getElementById('seatsProgressBar').style.width = `${pct}%`;

            // Status message
            const statusBox = document.getElementById('coalitionStatusBox');
            if (totalSeats >= 198) {
                const diff = totalSeats - 198;
                statusBox.className = 'p-4 rounded-xl text-xs font-bold leading-relaxed transition-all bg-emerald-800 text-emerald-100 border border-emerald-600';
                statusBox.innerHTML = `&#x2705; <strong>أغلبية حكومية مكتملة النصاب!</strong><br>تم تجاوز عتبة الـ 198 مقعداً بنجاح بمقدار (+${diff} مقعداً إضافياً). يضمن هذا الائتلاف الاستقرار البرلماني لتمرير القوانين.`;
            } else {
                const needed = 198 - totalSeats;
                statusBox.className = 'p-4 rounded-xl text-xs font-bold leading-relaxed transition-all bg-red-900/80 text-red-100 border border-red-700';
                statusBox.innerHTML = `&#x26a0; <strong>أغلبية غير مكتملة (أقلية).</strong><br>يحتاج هذا التكتل إلى (${needed} مقعداً إضافياً) للوصول إلى عتبة الـ 198 مقعداً المطلوبة للتعيين الدستوري وتصويت الثقة.`;
            }
        }

        // Show PM Modal Profile Drawer
        function showPmModal(type) {
            const modal = document.getElementById('pmModal');
            const content = document.getElementById('pmModalContent');

            if (type === 'mansouri') {
                content.innerHTML = `
                    <span class="bg-amber-100 text-amber-800 text-xs font-bold px-2.5 py-1 rounded-md">الخيار الأرجح سياسياً</span>
                    <h3 class="text-xl font-black text-slate-900 mt-2 mb-1">فاطمة الزهراء المنصوري</h3>
                    <p class="text-xs text-slate-500 mb-3">منسقة القيادة الجماعية للبام / وزيرة الإسكان وعمدة مراكش السابقة</p>
                    <div class="space-y-2 text-xs text-slate-700 leading-relaxed">
                        <p>• <strong>حدث تاريخي غير مسبوق:</strong> في حال تكليفها، ستكون أول امرأة تترأس الحكومة في تاريخ المغرب والعالم العربي.</p>
                        <p>• <strong>نقاط القوة:</strong> نجاحها في قيادة الأصالة والمعاصرة للمرتبة الأولى (97 مقعداً)، وفوزها الشخصي بالدائرة المحلية بمراكش.</p>
                        <p>• <strong>الموقف الدستوري:</strong> أبدت جاهزيتها التامة للمنصب في حال حظيت بثقة الجلالة الملكية.</p>
                    </div>
                `;
            } else if (type === 'lekjaa') {
                content.innerHTML = `
                    <span class="bg-blue-100 text-blue-800 text-xs font-bold px-2.5 py-1 rounded-md">بروفايل تقنوقراطي - سياسي</span>
                    <h3 class="text-xl font-black text-slate-900 mt-2 mb-1">فوزي لقجع</h3>
                    <p class="text-xs text-slate-500 mb-3">الوزير المنتدب المكلف بالميزانية / رئيس الجامعة الملكية المغربية لكرة القدم</p>
                    <div class="space-y-2 text-xs text-slate-700 leading-relaxed">
                        <p>• <strong>التحاق استراتيجي:</strong> انضم إلى المكتب السياسي للحزب صيف 2026، وهو ما منح الحزب دفعة انتخابية وقوة تدبيرية.</p>
                        <p>• <strong>الملف الرئيسي:</strong> إدارة الميزانية العمومية ورئاسة أوراش التحضير لمونديال 2030 (190 مليار درهم).</p>
                        <p>• <strong>الموقف الشخصي:</strong> رغم نفيه المستمر لطموحه السياسي الشخصي، إلا أنه يظل بديلاً تنكوقراطياً قوي الاستحسان.</p>
                    </div>
                `;
            }

            modal.classList.remove('hidden');
        }

        function closePmModal() {
            document.getElementById('pmModal').classList.add('hidden');
        }

        // Initialize All Chart.js Instances
        function initCharts() {
            Chart.defaults.font.family = "'Cairo', 'Tajawal', sans-serif";

            // Chart 1: Overview Bar Chart (Top Parties)
            const ctxOverview = document.getElementById('overviewChart').getContext('2d');
            overviewChartObj = new Chart(ctxOverview, {
                type: 'bar',
                data: {
                    labels: ['البام (PAM)', 'الأحرار (RNI)', 'الاستقلال (PI)', 'العدالة والتنمية (PJD)', 'الحركة الشعبية (MP)', 'الاتحاد الاشتراكي (USFP)'],
                    datasets: [
                        {
                            label: 'مقاعد 2026',
                            data: [97, 66, 65, 54, 29, 26],
                            backgroundColor: '#064e3b'
                        },
                        {
                            label: 'مقاعد 2021',
                            data: [87, 102, 81, 13, 28, 34],
                            backgroundColor: '#cbd5e1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom' }
                    },
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // Chart 2: Donut Chart Seats Distribution
            const ctxDonut = document.getElementById('seatsDonutChart').getContext('2d');
            seatsDonutChartObj = new Chart(ctxDonut, {
                type: 'doughnut',
                data: {
                    labels: ['البام (97)', 'الأحرار (66)', 'الاستقلال (65)', 'البيجيدي (54)', 'الحركة (29)', 'الاتحاد (26)', 'أحزاب أخرى (58)'],
                    datasets: [{
                        data: [97, 66, 65, 54, 29, 26, 58],
                        backgroundColor: ['#064e3b', '#0284c7', '#d97706', '#059669', '#ea580c', '#dc2626', '#64748b']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { boxWidth: 12 } }
                    }
                }
            });

            // Chart 3: Hourly Turnout Trajectory Line Chart
            const ctxHourly = document.getElementById('hourlyTurnoutChart').getContext('2d');
            hourlyTurnoutChartObj = new Chart(ctxHourly, {
                type: 'line',
                data: {
                    labels: ['10:00 صباحاً', '12:00 ظهراً', '05:00 مساءً', '07:00 مساءً (الإغلاق)'],
                    datasets: [{
                        label: 'نسبة المشاركة الوطنية (%)',
                        data: [4.23, 11.34, 28.00, 38.02],
                        borderColor: '#d97706',
                        backgroundColor: 'rgba(217, 119, 6, 0.15)',
                        fill: true,
                        tension: 0.3,
                        borderWidth: 3,
                        pointBackgroundColor: '#064e3b',
                        pointRadius: 5
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: { beginAtZero: true, max: 50 }
                    }
                }
            });

            // Chart 4: Regional Turnout Horizontal Bar Chart
            const ctxRegional = document.getElementById('regionalTurnoutChart').getContext('2d');
            regionalTurnoutChartObj = new Chart(ctxRegional, {
                type: 'bar',
                data: {
                    labels: ['العيون-الساقية الحمراء', 'الداخلة-وادي الذهب', 'كلميم-واد نون', 'المعدل الوطني العام'],
                    datasets: [{
                        label: 'نسبة التصويت (%)',
                        data: [77.00, 61.00, 53.48, 38.02],
                        backgroundColor: ['#064e3b', '#059669', '#10b981', '#94a3b8']
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        x: { beginAtZero: true, max: 100 }
                    }
                }
            });

            // Chart 5: Demographics Age Breakdown Pie
            const ctxDemo = document.getElementById('demographicsChart').getContext('2d');
            demographicsChartObj = new Chart(ctxDemo, {
                type: 'pie',
                data: {
                    labels: ['18 - 24 سنة (4%)', '25 - 34 سنة (15%)', '35 - 59 سنة (52%)', '60 سنة فما فوق (29%)'],
                    datasets: [{
                        data: [4, 15, 52, 29],
                        backgroundColor: ['#ef4444', '#f59e0b', '#0284c7', '#064e3b']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { boxWidth: 12 } }
                    }
                }
            });
        }
    </script>
</body>
</html>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-19"><em><strong>شكّلت الانتخابات التشريعية التي شهدتها المملكة المغربية يوم الأربعاء 23 شتنبر 2026 المحطة الانتخابية العامة الثانية عشرة في مسار التعددية الحزبية الوطنية منذ فجر الاستقلال، والمحطة التشريعية الثالثة التي تُجرى في ظل المقتضيات الدستورية لوثيقة 2011. وجرت هذه الانتخابات لتجديد كافة أعضاء مجلس النواب البالغ عددهم 395 نائباً، مستندة إلى الإطار القانوني المؤطر بموجب دستور المملكة والمرسوم رقم 2.26.190، تحت إشراف وزارة الداخلية ومواكبة القضاء الدستوري. وقد انعقد هذا الاستحقاق في مفترق طرق سياسي وتنموي بالغ الحساسية، متزامناً مع اختتام الولاية الحكومية المنبثقة عن اقتراع شتنبر 2021، وبداية العد التنازلي للمراحل التنفيذية النهائية للمشاريع الاستراتيجية الكبرى، وفي طليعتها التزامات تنظيم كأس العالم لكرة القدم لسنة 2030 وإرساء ركائز الدولة الاجتماعية.  </strong></em></p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-20">أفرزت هذه المحطة الانتخابية زلزالاً سياسياً أعاد تشكيل موازين القوى البرلمانية، متوجاً حزب الأصالة والمعاصرة في المرتبة الأولى للمرة الأولى في تاريخه<sup></sup>، وموجهاً تصويتاً عقابياً لحزب التجمع الوطني للأحرار الذي قاد التحالف الحكومي المنتهية ولايته، ومسجلاً عودة برلمانية وازنة لحزب العدالة والتنمية، فضلاً عن تثبيت حزب الاستقلال لموقعه المرجح في صلب المعادلة<sup></sup>. وإلى جانب هذا التحول النيابي، سلطت مخرجات الاقتراع الضوء على اختلالات بنيوية في مؤشرات المشاركة السياسية، وبروز فجوة ثقة لدى الفئات الشابة، مما يضع التجربة المؤسساتية الوطنية أمام رهانات تجديد الخطاب الحزبي وصياغة تعاقد حكومي فعال<sup></sup>. &nbsp;</p>



<h2 class="wp-block-heading">أولاً: الحصيلة الإحصائية والمؤشرات الرقمية لاقتراع 23 شتنبر 2026</h2>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-21">عكست الأرقام والمؤشرات الإحصائية التي أعلن عنها وزير الداخلية، عبد الوافي لفتيت، في الساعات الأولى الموالية لعملية الفرز، صورة متكاملة حول التدفق التصويتي للكتلة الناخبة وسلوكها الانتخابي عبر التراب الوطني<sup></sup>. &nbsp;</p>



<figure class="wp-block-table"><table><thead><tr><th>المؤشر الانتخابي</th><th>القيمة المسجلة</th><th>الدلالة الإحصائية والمقارنة</th></tr></thead><tbody><tr><td>تاريخ إجراء الاقتراع</td><td>الأربعاء 23 شتنبر 2026</td><td>اليوم المحدد لانتخاب كافة أعضاء مجلس النواب<sup></sup>.</td></tr><tr><td>إجمالي مقاعد مجلس النواب</td><td>395 مقعداً</td><td>305 مقاعد برسم الدوائر المحلية + 90 مقعداً برسم الدوائر الجهوية<sup></sup>.</td></tr><tr><td>عتبة الأغلبية المطلقة</td><td>198 مقعداً</td><td>الحد الأدنى الدستوري لتنصيب الحكومة وتمرير التشريعات<sup></sup>.</td></tr><tr><td>الهيئة الناخبة المسجلة</td><td>15,801,162 ناخباً</td><td>تتوزع جندرياً بين 54% من الذكور و46% من الإناث<sup></sup>.</td></tr><tr><td>نسبة المشاركة الوطنية العامة</td><td>38.02%</td><td>انخفاض قدره 12.33 نقطة مئوية مقارنة باقتراع 2021 (50.18%)<sup></sup>.</td></tr><tr><td>المشاركة بجهة العيون-الساقية الحمراء</td><td>77.00%</td><td>أعلى نسبة جهوية، وبلغت 77.48% برسم اللائحة الجهوية<sup></sup>.</td></tr><tr><td>المشاركة بجهة الداخلة-وادي الذهب</td><td>61.00%</td><td>استمرار المشاركة القوية لساكنة الأقاليم الجنوبية<sup></sup>.</td></tr><tr><td>المشاركة بجهة كلميم-واد نون</td><td>53.48%</td><td>تفوق المعدل الوطني بفارق يتجاوز 15 نقطة مئوية<sup></sup>.</td></tr><tr><td>إجمالي المترشحين والقوائم</td><td>7,288 مترشحاً ضمن 1,850 لائحة</td><td>تنافسية حادة بمعدل يفوق 18 مترشحاً لكل مقعد نيابي<sup></sup>.</td></tr><tr><td>المترشحات النساء</td><td>2,658 مترشحة</td><td>1,783 منهن عبر 235 لائحة جهوية مخصصة للنساء<sup></sup>.</td></tr><tr><td>النواب المنتهية ولايتهم المعاد ترشيحهم</td><td>227 نائباً</td><td>مؤشر على مساعي إعادة إنتاج النخب الحزبية التقليدية<sup></sup>.</td></tr></tbody></table></figure>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-23">تظهر وتيرة الإقبال على مكاتب التصويت نمطاً تصاعدياً بطيئاً على مدار يوم الاقتراع؛ حيث استهلت العملية بنسبة مشاركة وطنية لم تتجاوز 4.23% في تمام الساعة العاشرة صباحاً<sup></sup>، لترتفع تدريجياً إلى حدود 11.34% عند منتصف النهار<sup></sup>. وبحلول الساعات الأولى من المساء، وصل معدل التصويت إلى حدود 28%<sup></sup>، قبل أن يُغلق الاقتراع في حدود الساعة السابعة مساءً على نسبة نهائية بلغت 38.02%<sup></sup>. ويكشف التحليل المقارن لهذا الرقم تراجعاً لافتاً بحوالي 12.33 نقطة مقارنة بالانتخابات المتزامنة لسنة 2021<sup></sup>، مقترباً بذلك من المستويات المتدنية التاريخية التي طبعت تشريعيات 2007 و2016، مما يعكس عودة السلوك الانتخابي الوطني إلى وتيرته التقليدية التي يطغى عليها العزوف في المراكز الحضرية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-24">كرست الأقاليم الجنوبية للمملكة تميزها المعهود بتسجيل أعلى نسب المشاركة السياسية والتصويت الفعلي؛ إذ بلغت النسبة 77% في جهة العيون-الساقية الحمراء، و61% في جهة الداخلة-وادي الذهب، و53.48% في جهة كلميم-واد نون<sup></sup>. وشهدت الأخيرة تبايناً داخلياً بين دوائرها؛ حيث سجلت دائرة أسا-الزاك ذروة تصويتية بـ 77.6%، وسيدي إفني 61.3%، بينما استقرت طانطان عند 49.78% وكلميم عند 45.31%<sup></sup>. وتفسر هذه الكثافة التصويتية الجنوبية بتداخل عوامل الوعي بأهمية تثبيت الشرعية الديمقراطية والمؤسساتية على الأراضي المسترجعة، والحرص على المشاركة الفاعلة في توجيه عوائد النموذج التنموي الخاص بالأقاليم الجنوبية، فضلاً عن الطبيعة التنافسية المحمومة للنسيج القبلي والمحلي وقدرته العالية على الحشد المجتمعي مقارنة بفتور المدن الكبرى في الشمال<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-25">كشفت التركيبة السوسيولوجية للهيئة الناخبة البالغة نحو 15.8 مليون مسجل عن اختلال ديموغرافي عميق بين البنية السكانية العامة وسجلات القيد الانتخابي<sup></sup>؛ إذ اقتصرت حصة الشباب البالغين ما بين 18 و24 سنة على 4% فقط من المسجلين، في حين بلغت نسبة الفئة العمرية ما بين 25 و34 سنة نحو 15%، مقابل استحواذ كبار السن الذين تتجاوز أعمارهم 60 عاماً على 29% من مجموع الناخبين<sup></sup>. هذا الاختلال انعكس مباشرة على مكاتب الاقتراع التي شهدت حضوراً مهيمناً للمسنين من الجنسين وغياباً شبه كلي للأجيال الشابة<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-26">تجلت ظاهرة التصويت الاحتجاجي في كتلة الأصوات الملغاة والبيضاء؛ فرغم تركيز البلاغات الإدارية الأولية على نسب المشاركة والمقاعد، كشفت معطيات اللجان الإقليمية والجهوية عن تسجيل أرقام مرتفعة في البطاقات اللاغية، ومنها دائرة العيون برسم اللائحة الجهوية التي سجلت 21,774 صوتاً ملغى مقابل 153,520 صوتاً معبراً عنه، بما مثل نسبة ناهزت 12.4% من مجموع المصوتين<sup></sup>. واقترن هذا المنحى بصعوبة التمييز التقني بين ورقتي الاقتراع للدوائر المحلية والجهوية لدى الفئات الأمية، فضلاً عن تعمد فئات من الناخبين الحاملين للمواقف النقدية إبطال أصواتهم كرسالة عدم ثقة في البدائل الحزبية المطروحة<sup></sup>. &nbsp;</p>



<h2 class="wp-block-heading">ثانياً: السياق العام للحملة الانتخابية: رهان &#8220;حكومة المونديال&#8221; وضغوط القدرة الشرائية</h2>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-27">انطلقت الحملة الانتخابية للاستحقاق التشريعي لـ 23 شتنبر 2026 في مناخ اقتصادي واجتماعي محتقن<sup></sup>؛ إذ شكلت حصيلة الولاية الحكومية (2021-2026) نقطة ارتكاز السجال العمومي في ظل تداعيات التضخم المستورد والمحلي، وارتفاع أسعار المواد الاستهلاكية الأساسية والمحروقات، ومخلفات سنوات الإجهاد المائي الحاد على النشاط الزراعي واستقرار اليد العاملة القروية<sup></sup>. ورغم جهود الحكومة المنتهية ولايتها في تنزيل التغطية الصحية الإجبارية وإطلاق دفعات الدعم الاجتماعي المباشر للأسر الهشة، إلا أن محدودية الأثر المالي المباشر أمام موجات الغلاء، والتعثرات التقنية التي شابت السجل الاجتماعي الموحد، أسهمت في تأجيج الاستياء الشعبي لدى الطبقة الوسطى والشرائح العمالية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-28">اكتسبت هذه الانتخابات بعداً استراتيجياً غير مسبوق في الخطاب السياسي؛ إذ صُنفت في الأدبيات الإعلامية والحزبية بانتخابات &#8220;حكومة المونديال&#8221; المعنية بالإشراف على المراحل الحاسمة لتنفيذ مشاريع كأس العالم 2030 المشتركة مع إسبانيا والبرتغال<sup></sup>. وقدرت تقارير المؤسسات المالية الدولية، ولا سيما صندوق النقد الدولي، حجم الإنفاق الاستثماري الموجه لتطوير الملاعب الرياضية، والربط السككي فائق السرعة، والمنشآت المينائية، والبنية السياحية واللوجستية بنحو 190 مليار درهم (ما يناهز 20 مليار دولار)، مشكلاً ما يقارب 12% من الناتج المحلي الإجمالي للمملكة<sup></sup>. واحتدم التنافس الحزبي حول استعراض القدرات التدبيرية لقيادة هذه الاعتمادات الاستثمارية الضخمة وضمان توجيه عائداتها لتشغيل الشباب وتحفيز النسيج المقاولاتي الوطني، وتفادي تحولها إلى عبء مالي على المالية العمومية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-29">تبنت الهيئات الحزبية المتنافسة شعارات تعكس استجاباتها للأولويات الاجتماعية والاقتصادية للمواطنين؛ إذ خاض حزب التجمع الوطني للأحرار المعركة تحت شعار &#8220;كرامة وفرص للجميع&#8221;، واعداً بخلق مليون منصب شغل ومواصلة ترسيخ برامج الحماية الاجتماعية واستكمال الإصلاحات المهيكلة<sup></sup>. وفي المقابل، رفع حزب الأصالة والمعاصرة شعار &#8220;نزعمو كاملين&#8221;، متعهداً بتأهيل المستشفيات العمومية، وتطوير البنية التعليمية، ومحاصرة الفقر، ودعم القدرة الشرائية للطبقة الوسطى<sup></sup>. وتبنى حزب العدالة والتنمية شعاراً هجومياً تمثل في &#8220;من أجل تحقيق كرامة المواطن&#8221;، مستنداً إلى انتقاد &#8220;زواج المال بالسلطة&#8221; وتضارب المصالح وارتفاع كلفة المعيشة<sup></sup>، بينما نادى حزب الاتحاد الدستوري بشعار &#8220;من أجل مغرب بسرعة واحدة&#8221; داعياً إلى معالجة الفوارق المجالية الصارخة<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-30">اتسمت الخريطة السياسية قبيل الاقتراع بديناميات تنظيمية نوعية؛ كان من أبرزها تولي محمد شوكي رئاسة حزب التجمع الوطني للأحرار خلفاً لعزيز أخنوش، في محاولة لإعادة تجديد دماء الحزب والتخفيف من كلفة التدبير التنفيذي السابق<sup></sup>. وفي الجهة المقابلة، عزز حزب الأصالة والمعاصرة خطابه وموقعه بانتهاج صيغة القيادة الجماعية برئاسة فاطمة الزهراء المنصوري، معززاً كتلته بانضمام كفاءات تدبيرية بارزة، كان أهمها التحاق فوزي لقجع، الوزير المنتدب المكلف بالميزانية ورئيس الجامعة الملكية المغربية لكرة القدم، بالمكتب السياسي للحزب صيف 2026، وهو ما منح الحزب دفعة انتخابية بالنظر لشعبية لقجع المرتبطة بالإنجازات الكروية وإدارته للمالية العامة<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-31">شهدت الحملات الانتخابية تحولاً بارزاً نحو الفضاء الرقمي وشبكات التواصل الاجتماعي؛ حيث رصدت الهيئات الرقابية إطلاق أكثر من 538 إعلاناً ممولاً من قبل سبعة أحزاب عبر منصات شركة &#8220;ميتا&#8221; خلال أسبوعين فقط، بنفقات تراوحت بين 18 ألف دولار ومئات الآلاف من الدولارات للحزب الواحد<sup></sup>. وشهدت هذه المنصات الرقمية حملات متبادلة وتوتراً حاداً بين الحليفين الحكوميين، الأصالة والمعاصرة والتجمع الوطني للأحرار، وتبادلاً للاتهامات بشأن استقطاب الأعيان والمسؤولية عن ارتفاع الأسعار، مما غذى نقاشات التحالفات المستقبلية<sup></sup>. &nbsp;</p>



<h2 class="wp-block-heading">ثالثاً: الخريطة البرلمانية الجديدة وموازين القوى (قراءة مقارنة مع 2021)</h2>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-32">أفرزت نتائج اقتراع 23 شتنبر 2026 إعادة توزيع واسعة للمقاعد داخل قبة مجلس النواب، حيث أنهت هيمنة الأحرار، وأعادت تشكيل الكتل النيابية بما يعزز فرص التداول ويؤسس لتوازنات جديدة<sup></sup>. &nbsp;</p>



<figure class="wp-block-table"><table><thead><tr><th>الحزب السياسي</th><th>قائد(ة) الحزب</th><th>المقاعد 2026</th><th>المقاعد 2021</th><th>فارق المقاعد</th><th>النسبة المئوية من المجلس</th><th>التموقع السياسي السابق</th></tr></thead><tbody><tr><td>الأصالة والمعاصرة (PAM)</td><td>فاطمة الزهراء المنصوري</td><td>97</td><td>87</td><td>▲ +10</td><td>24.56%</td><td>أغلبية حكومية<sup></sup></td></tr><tr><td>التجمع الوطني للأحرار (RNI)</td><td>محمد شوكي</td><td>66</td><td>102</td><td>▼ -36</td><td>16.71%</td><td>قائد الأغلبية السابقة<sup></sup></td></tr><tr><td>حزب الاستقلال (PI)</td><td>نزار بركة</td><td>65</td><td>81</td><td>▼ -16</td><td>16.46%</td><td>أغلبية حكومية<sup></sup></td></tr><tr><td>العدالة والتنمية (PJD)</td><td>عبد الإله ابن كيران</td><td>54</td><td>13</td><td>▲ +41</td><td>13.67%</td><td>معارضة<sup></sup></td></tr><tr><td>الحركة الشعبية (MP)</td><td>محمد أوزين</td><td>29</td><td>28</td><td>▲ +1</td><td>7.34%</td><td>معارضة<sup></sup></td></tr><tr><td>الاتحاد الاشتراكي للقوات الشعبية (USFP)</td><td>إدريس لشكر</td><td>26</td><td>34</td><td>▼ -8</td><td>6.58%</td><td>معارضة<sup></sup></td></tr><tr><td>التقدم والاشتراكية (PPS)</td><td>محمد نبيل بنعبد الله</td><td>19</td><td>22</td><td>▼ -3</td><td>4.81%</td><td>معارضة<sup></sup></td></tr><tr><td>الاتحاد الدستوري (UC)</td><td>محمد جودار</td><td>17</td><td>18</td><td>▼ -1</td><td>4.30%</td><td>مساندة للأغلبية<sup></sup></td></tr><tr><td>الحركة الديمقراطية الاجتماعية (MDS)</td><td>عبد الصمد عرشان</td><td>8</td><td>5</td><td>▲ +3</td><td>2.03%</td><td>مساندة للأغلبية<sup></sup></td></tr><tr><td>تحالف اليسار (AG)</td><td>عبد السلام العزيز / جمال العسري</td><td>8</td><td>2*</td><td>▲ +6</td><td>2.03%</td><td>معارضة<sup></sup></td></tr><tr><td>جبهة القوى الديمقراطية (FFD)</td><td>مصطفى بنعلي</td><td>2</td><td>3</td><td>▼ -1</td><td>0.51%</td><td>معارضة<sup></sup></td></tr><tr><td>حزب الإنصاف (Al Inssaf)</td><td>شاكر أشهبار</td><td>2</td><td>0</td><td>▲ +2</td><td>0.51%</td><td>غير ممثل سابقاً<sup></sup></td></tr><tr><td>حزب الديمقراطيين الجدد (PND)</td><td>محمد ضريف</td><td>1</td><td>0</td><td>▲ +1</td><td>0.25%</td><td>غير ممثل سابقاً<sup></sup></td></tr><tr><td>حزب الوحدة والديمقراطية (PUD)</td><td>أحمد فطري</td><td>1</td><td>0</td><td>▲ +1</td><td>0.25%</td><td>غير ممثل سابقاً<sup></sup></td></tr><tr><td>المجموع العام</td><td>14 هيئة سياسية</td><td>395</td><td>395</td><td>—</td><td>100%</td><td>—</td></tr></tbody></table></figure>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-34">(ملاحظة: خاض طرفا &#8220;تحالف اليسار&#8221; &#8211; الحزب الاشتراكي الموحد وفيدرالية اليسار الديمقراطي &#8211; اقتراع 2021 بقوائم منفصلة وحازا حينها مقعدين نيابيين)<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-35">يُظهر تفكيك هذه النتائج أربعة تحولات جوهرية؛ تمثل أولها في تحمل حزب التجمع الوطني للأحرار لضريبة التدبير الحكومي بصورة مباشرة؛ حيث فقد 36 مقعداً دفعة واحدة، متراجعاً إلى 66 مقعداً<sup></sup>. وقد اعترف رئيسه، محمد شوكي، بهذا التراجع بوصفه رسالة شعبية صريحة تتطلب قراءة نقدية لقرارات وسياسات التدبير المالي والاجتماعي السابقة والتقاط إشارات الناخبين بمسؤولية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-36">تمثل التحول الثاني في الصعود القياسي لحزب الأصالة والمعاصرة، الذي ظفر بالصدارة بـ 97 مقعداً، مستفيداً من مرونته السياسية داخل التحالف الحكومي السابق؛ إذ نأى بنفسه عن التبعات المباشرة لرئاسة الجهاز التنفيذي، وعزز تواجده عبر ماكينته الانتخابية المحلية واستقطاب شبكات أعيان وازنة ورموز تقنوقراطية في قطاعات حيوية، مما مكنه من كسر القيد الانتخابي الذي لازمه لعقد ونصف<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-37">تمثل التحول الثالث في الاسترجاع الجزئي واللافت لحزب العدالة والتنمية لقواعده الانتخابية، قافزاً من 13 مقعداً إلى 54 مقعداً<sup></sup>. وفسر هذا الصعود بنجاح الحزب بقيادة عبد الإله ابن كيران في توظيف خطابه المعارض للدفاع عن الفئات الشعبية في مواجهة الغلاء واستعادة الصدارة في حواضر رئيسية كالرباط وسلا وطنجة<sup></sup>، بينما حافظ حزب الاستقلال على استقراره النسبي بنيله 65 مقعداً جعلته شريكاً محورياً في معادلة أي تحالف مقبل<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-38">تمثل التحول الرابع في تباين أداء قوى المعارضة اليسارية والوسطية؛ فبينما واجه كل من الاتحاد الاشتراكي للقوات الشعبية وحزب التقدم والاشتراكية تراجعاً حدّ من وزنهما التفاوضي بخسارة حزبي لشكر وبنعبد الله لعدد من المقاعد التقليدية<sup></sup>، حقق &#8220;تحالف اليسار&#8221; اختراقاً سياسياً متميزاً برفع رصيده إلى 8 مقاعد<sup></sup>، مستفيداً من توحيد جهود اليسار الاشتراكي الديمقراطي وقدرته على مخاطبة شرائح من الشباب والمثقفين والنقابيين الناقمين على أداء الأغلبية الحكومية<sup></sup>. &nbsp;</p>



<h2 class="wp-block-heading">رابعاً: تقييم النزاهة والعملية الانتخابية في ضوء تقارير الملاحظة الوطنية والدولية</h2>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-39">أُجريت الانتخابات التشريعية لـ 23 شتنبر 2026 في بيئة رقابية موسعة أشرفت عليها اللجنة الخاصة لاعتماد ملاحظي الانتخابات التابعة للمجلس الوطني لحقوق الإنسان، تطبيقاً لأحكام الفصلين 11 و161 من الدستور ولمقتضيات القانون رقم 30.11 المنظم لشروط الملاحظة المستقلة والمحايدة<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-40">سجلت هذه المحطة تعبئة ميدانية واسعة؛ حيث اعتمدت اللجنة أكثر من 3,000 ملاحظ وملاحظة (تحديداً 3,206 ملاحظين، منهم ما يزيد عن 200 ملاحظ دولي يمثلون 30 هيئة ومنظمة إقليمية ودولية شملت بعثات جامعة الدول العربية والبرلمان العربي)<sup></sup>. وعلى الصعيد الوطني، ضمت الشبكة 26 جمعية غير حكومية، فضلاً عن 783 ملاحظاً جندهم المجلس الوطني لحقوق الإنسان نفسه، شكلت النساء 40% منهم، مما أتاح تغطية 3,915 مكتب تصويت من جانب المجلس و1,644 مكتباً من قبل البعثات الدولية<sup></sup>. وشملت هذه العينة 733 جماعة ترابية (منها 542 جماعة قروية و191 جماعة حضرية ومقاطعة موزعة على 82 إقليماً وعمالة)، محققةً نسبة تغطية إجمالية بلغت 8.9% من مجموع مكاتب التصويت الوطنية، وهي نسبة تتجاوز المعدلات والمعايير المعمول بها دولياً والمحددة في حدود 3% إلى 5%<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-41">خلص التقرير الأولي للمجلس الوطني لحقوق الإنسان، الذي قدمته رئيسة المجلس آمنة بوعياش غداة الاقتراع، إلى أن عملية التصويت جرت في ظروف &#8220;شبه عادية&#8221; ومستقرة، دون تسجيل أي مظاهر عنف ممنهج أو اضطرابات جسيمة أثرت على السير الطبيعي للاستحقاق، مع تسجيل التزام السلطات الترابية والإدارية بمبدأ الحياد التام وعدم الانحياز لأي مرشح أو تنظيم سياسي<sup></sup>. وقدّرت تقارير الملاحظة الميدانية حجم الاختلالات المرصودة بأقل من 3% من مجمل المكاتب الملاحظة على المستوى الوطني<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-42">رصدت هيئات الملاحظة بعض الوقائع السلبية التي اعتبرتها خروقات معزولة؛ كان أبرزها تسجيل حادثتين مسّتا بنزاهة التصويت بمدينة طنجة في مكتبي التصويت رقم 84 ورقم 87 بمدرسة القدس؛ حيث أعلن المجلس الوطني لحقوق الإنسان إحالة تقرير مفصل بشأنهما على رئاسة النيابة العامة لمتابعة التحقيقات القضائية<sup></sup>. كما شملت الخروقات وقوع مناوشات وتدافع لفظي بين مساعدي المرشحين ببعض الأحياء الشعبية بالدار البيضاء (أنفا وبن مسيك)<sup></sup>، وتوترات محدودة بجهتي درعة-تافيلالت وفاس-مكناس، علاوة على رصد إطلاق أعيرة نارية في الهواء بمنطقة أخفنير واستعمال ألعاب نارية بالمرسى في الأقاليم الجنوبية تم احتواؤها أمنياً<sup></sup>. &nbsp;</p>



<h2 class="wp-block-heading">خامساً: هندسة المشاركة النوعية: تمثيلية النساء والشباب وإصلاحات القانون التنظيمي 53.25</h2>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-43">شكّل الإطار المعياري لاقتراع 2026 محطة لتطوير قواعد التخليق الانتخابي وضمان التمييز الإيجابي من خلال إقرار القانون التنظيمي رقم 53.25 القاضي بتغيير وتتميم القانون التنظيمي رقم 27.11 المتعلق بمجلس النواب، والذي صدر بموجب الظهير الشريف رقم 1.25.70 بعد مراقبته والمصادقة عليه من طرف المحكمة الدستورية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-44">أدخل هذا القانون حزمة من الإصلاحات التخليقية الهيكلية التي كان لها أثر مباشر على تنقية الترشيحات؛ حيث وسع نطاق موانع الأهلية لتشمل كل شخص صدر في حقه حكم قضائي نهائي بالعزل من مسؤولية تدبيرية أو انتدابية، أو من يقضي عقوبة حبسية نافذة أو سالبة للحرية مع إيقاف التنفيذ، أو من صدرت بحقه إدانة ابتدائية في جناية، فضلاً عن التنصيص على التجريد التلقائي لكل نائب برلماني يوجد رهن الاعتقال الاحتياطي لمدة ستة أشهر فما فوق<sup></sup>. وساهم هذا التشدد القانوني في محاصرة نفوذ بعض &#8220;أعيان المال&#8221; وشبهات الفساد التدبيري، مما خلق بيئة تنافسية أكثر نزاهة وشفافية<sup></sup>. كما شدد القانون العقوبات الحبسية والغرامات المالية لتطال مرتكبي التضليل الرقمي، واستعمال شبكات التواصل الاجتماعي أو تقنيات الذكاء الاصطناعي لبث معلومات وادعاءات انتخابية كاذبة يوم الاقتراع للتأثير على إرادة الناخبين<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-45">على صعيد التمكين السياسي للمرأة، ثبّت القانون التنظيمي مبدأ توطين &#8220;الكوطا النسائية&#8221; عبر تخصيص الدوائر الانتخابية الجهوية الاثنتي عشرة (90 مقعداً) حصرياً للوائح النسائية<sup></sup>. وتجاوزت هذه الصيغة المركزية التاريخية التي كانت تطبع اللائحة الوطنية القديمة المتمحورة حول محور الرباط-الدار البيضاء، مكرسة العدالة المجالية عبر تصعيد كفاءات نسائية من قلب الجهات والمناطق القروية<sup></sup>. ورغم مشاركة 2,658 مترشحة، منهن 1,783 عبر 235 لائحة جهوية<sup></sup>، فإن حضور المرأة ظل محدوداً في الدوائر المحلية؛ إذ لم تتمكن من حصد مقاعد محلية سوى أسماء قيادية ذات وزن انتخابي تاريخي كفاطمة الزهراء المنصوري بمراكش<sup></sup>، مما يعكس بقاء الثقافة الحزبية التزكوية محكومة بالهيمنة الذكورية وحسابات الفوز بالأصوات على حساب مبدأ المناصفة المنصوص عليه في الفصل 19 من الدستور<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-46">استحدث القانون التنظيمي رقم 53.25 تدبيراً تحفيزياً استهدف الشباب المترشحين دون سن 35 عاماً في اللوائح المستقلة الخالية من الانتماء الحزبي؛ حيث مكّن اللوائح المحلية التي تعتمد التناوب بين الجنسين وتقتصر على الشباب دون سن 35، والتي تحصل على 2% على الأقل من أصوات المقيدين بالدائرة، من الاستفادة من دعم مالي عمومي يغطي 75% من مصاريف الحملة الانتخابية<sup></sup>. ورغم هذه الرسالة التشريعية المتقدمة لفتح المجال أمام جيل جديد من الكفاءات النسائية والشابة<sup></sup>، فإن النتائج الميدانية كشفت عن استعصاء اختراق هذه اللوائح المستقلة للمجالس المنتخبة؛ إذ اصطدم الشباب بصلابة الآلات الحزبية المهيمنة وشبكات نفوذ الأعيان، مما كرس تركز الانتداب النيابي في النخب التقليدية ذات القدرة المالية والتنظيمية الواسعة<sup></sup>. &nbsp;</p>



<h2 class="wp-block-heading">سادساً: مسارات تشكيل الأغلبية الحكومية: المقتضيات الدستورية والسيناريوهات التحالفية</h2>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-47">تتجه الأنظار السياسية إلى تفعيل مقتضيات الفصل 47 من الدستور، الذي ينص صراحة على أن &#8220;الملك يعين رئيس الحكومة من الحزب السياسي الذي تصدر انتخابات أعضاء مجلس النواب، وعلى أساس نتائجها&#8221;<sup></sup>. ويكفل هذا المقتضى الدستوري لحزب الأصالة والمعاصرة الحق الحصري في تسمية رئيس الحكومة الجديد من بين قياداته وتكليفه بالمشاورات لتشكيل ائتلاف أغلبي يتجاوز عتبة الـ 198 مقعداً المطلوبة للأغلبية المطلقة<sup></sup>. &nbsp;</p>



<figure class="wp-block-table"><table><thead><tr><th>سيناريو التحالف الحكومي</th><th>التشكيلة الحزبية المقترحة</th><th>إجمالي المقاعد المحصلة</th><th>هامش الأغلبية المتاحة</th><th>نقاط القوة والفرص السياسية</th><th>التحديات والمخاطر الهيكلية</th><th>درجة القابلية والترجيح</th></tr></thead><tbody><tr><td>السيناريو الأول:<br>(الاستمرارية الحكومية المعكوسة)</td><td>الأصالة والمعاصرة (97) + التجمع الوطني للأحرار (66) + حزب الاستقلال (65)<sup></sup></td><td>228 مقعداً</td><td>مريح (+30 مقعداً فوق الأغلبية)<sup></sup></td><td>• ضمان السرعة والانسجام التدبيري المكتسب<sup></sup><br>• استقرار المشاريع الاستراتيجية لمونديال 2030<sup></sup><br>• أغلبية عددية كاسحة لتمرير القوانين<sup></sup></td><td>• تبادل الاتهامات الانتخابية الحادة حول الغلاء<sup></sup><br>• إضعاف منطق المحاسبة وتجاوز التصويت العقابي ضد الأحرار<sup></sup><br>• تحفظات قواعد البام<sup></sup></td><td>مرتفعة جداً<br>(الخيار الأقرب للواقعية السياسية)[cite: 41]</td></tr><tr><td>السيناريو الثاني:<br>(ائتلاف الصناديق المتصالحة)</td><td>الأصالة والمعاصرة (97) + حزب الاستقلال (65) + حزب العدالة والتنمية (54)<sup></sup></td><td>216 مقعداً</td><td>كافٍ (+18 مقعداً فوق الأغلبية)<sup></sup></td><td>• التعبير الدقيق عن نتائج الصناديق وعودة المعارضة<sup></sup><br>• تجسير الهوة بين المرجعيتين الحداثية والإسلامية<sup></sup><br>• تعزيز السند الشعبي للحكومة</td><td>• الصراع الإيديولوجي التاريخي بين البام والبيجيدي<sup></sup><br>• إعلان ابن كيران القاطع بالاصطفاف في المعارضة ورفض التحالف<sup></sup><br>• هشاشة الاستقرار الحكومي<sup></sup></td><td>منعدمة<br>(مستبعد عملياً بفعل موقف البيجيدي)[cite: 42, 43]</td></tr><tr><td>السيناريو الثالث:<br>(التكتل الإصلاحي-الاجتماعي)</td><td>الأصالة والمعاصرة (97) + حزب الاستقلال (65) + الاتحاد الاشتراكي (26) + التقدم والاشتراكية (19)<sup></sup></td><td>207 مقاعد</td><td>ضيق (+9 مقاعد فقط فوق الأغلبية)<sup></sup></td><td>• إعطاء هوية اجتماعية وإصلاحية واضحة للأغلبية<sup></sup><br>• استعادة البرلمان لوظيفته الرقابية بوجود الأحرار والبيجيدي في المعارضة<sup></sup><br>• تحصين ورش الدولة الاجتماعية<sup></sup></td><td>• محدودية الهامش العددي وهشاشته التصويتية<sup></sup><br>• الحاجة لانضباط برلماني صارم لتفادي سقوط مشاريع القوانين<sup></sup><br>• مخاطر تضارب المرجعيات ومطالب الاستيزار<sup></sup></td><td>متوسطة<br>(بديل تكتيكي استراتيجي للتفاوض)[cite: 41]</td></tr></tbody></table></figure>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-49">تطرح القيادة السياسية لحزب الأصالة والمعاصرة ثلاثة بروفايلات وازنة لتولي منصب رئاسة الحكومة<sup></sup>؛ تتصدرهم فاطمة الزهراء المنصوري، منسقة القيادة الجماعية ووزيرة الإسكان وعمدة مراكش السابقة<sup></sup>. وسيمثل تكليفها حدثاً استثنائياً غير مسبوق في المشهد الدستوري الوطني والعربي؛ باعتبارها أول امرأة تتقلد هذا المنصب التنفيذي الأسمى، وهو ما أكدت استعدادها له في حال حظيت بثقة الملك<sup></sup>. ويبرز إلى جانبها اسم فوزي لقجع، الوزير المنتدب المكلف بالميزانية، كخيار تقنوقراطي-سياسي يتمتع بثقة عالية في إدارة الملفات المالية والاستراتيجية ورئاسة أوراش المونديال، رغم نفيه المتكرر لطموحه الشخصي في تولي المنصب<sup></sup>، فضلاً عن طرح اسم محمد المهدي بنسعيد، وزير الشباب والثقافة، كرمز لتصعيد القيادات الشبابية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-50">يخلص التحليل التوقعي لمسارات بناء الائتلاف الحكومي إلى ترجيح السيناريو الأول (الاستمرارية الحكومية المعكوسة) بائتلاف يضم الأصالة والمعاصرة، والتجمع الوطني للأحرار، وحزب الاستقلال بمجموع 228 مقعداً<sup></sup>. ورغم حدة السجالات التي طبعت الحملة الانتخابية وتهديدات قيادات البام بالقطيعة مع الأحرار<sup></sup>، فإن منطق &#8220;العقلانية التدبيرية&#8221; وحاجة الدولة إلى استقرار تشريعي ومؤسساتي صلب لتنفيذ الالتزامات الدولية لسنة 2030 يفرضان تكرار التحالف الثلاثي، مع تبادل المواقع عبر إسناد الصدارة للبام وتنازل الأحرار عن رئاسة الجهاز التنفيذي<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-51">يأتي ترجيح هذا الخيار أيضاً نتيجة الانسداد الحاسم للسيناريو الثاني؛ إذ أعلن الأمين العام لحزب العدالة والتنمية، عبد الإله ابن كيران، رفض حزبه المطلق المشاركة في حكومة يقودها حزب &#8220;البام&#8221;، متعهداً بالاصطفاف في معارضة برلمانية صارمة لربط المسؤولية بالمحاسبة<sup></sup>. أما السيناريو الثالث، الذي يجمع البام والاستقلال مع الاتحاد الاشتراكي والتقدم والاشتراكية، فرغم جاذبيته الإصلاحية وخدمته لبرامج &#8220;الدولة الاجتماعية&#8221;<sup></sup>، إلا أن هشاشة فارقه العددي (207 مقاعد) تجعله خياراً تكتيكياً توظفه قيادة البام في مفاوضاتها للضغط على حزب التجمع الوطني للأحرار لخفض مطالبه حول الحقائب الوزارية الاستراتيجية<sup></sup>. &nbsp;</p>



<h2 class="wp-block-heading">سابعاً: الرهانات الاستراتيجية والأجندة التشريعية للأغلبية والبرلمان الجديدين</h2>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-52">تنتظر الحكومة المنبثقة عن اقتراع 2026 حزمة معقدة من التحديات والالتزامات الهيكلية ذات الأولوية الاقتصادية والاجتماعية والتشريعية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-53">تتصدر الأجندة الاقتصادية للحكومة المقبلة متطلبات الموازنة المالية الدقيقة بين تعبئة اعتمادات ضخمة بقيمة 20 مليار دولار لتنفيذ مشاريع المونديال (الملاعب، الربط السككي، والموانئ)<sup></sup>، وبين الحفاظ على التوازنات الماكرو-اقتصادية وتفادي تصاعد عجز الميزانية والدين العام<sup></sup>. ويتعين على الحكومة تحفيز الاستثمار الخاص المحلي والأجنبي لتسريع وتيرة النمو؛ حيث تتوقع تقارير بنك المغرب استقرار معدلات النمو حول 4.4%، وهي نسبة تتطلب دفعة إصلاحية لتوليد فرص الشغل المستدامة ومحاصرة بطالة الشباب<sup></sup>. كما يبرز رهان حاسم يتجلى في الوفاء بوعود الحزبين المتصدرين (الأصالة والمعاصرة والتجمع) بخلق نحو مليون منصب شغل لامتصاص الاحتقان وتحريك الدورة الاقتصادية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-54">على الصعيد الاجتماعي، تفرض رسائل التصويت العقابي والعزوف الانتخابي معالجة الثغرات التدبيرية التي رافقت تنزيل السجل الاجتماعي الموحد، وتوسيع قاعدة الاستفادة من الدعم المباشر لتشمل الفئات الهشة والمتضررة من التضخم، فضلاً عن التسريع بتأهيل العرض الصحي والمستشفيات العمومية والجامعية وتجويد المنظومة التعليمية بما يضمن التحول الملموس نحو &#8220;الدولة الاجتماعية&#8221; وتحسين القدرة الشرائية<sup></sup>. &nbsp;</p>



<p class="wp-block-paragraph" id="p-im_a77ff6dbe57c5285-55">على المستوى التشريعي والرقابي، يجد البرلمان الجديد نفسه أمام استحقاق الحسم في قوانين مؤجلة ذات أثر مجتمعي بالغ الحساسية، في مقدمتها إتمام مسطرة المصادقة على المراجعة الشاملة لمدونة الأسرة في توازن دقيق بين المرجعيات الدستورية وثوابت المجتمع والاتفاقيات الدولية، وإخراج القانون التنظيمي للإضراب بصيغة توافقية مع المركزيات النقابية لحماية السلم الاجتماعي وتنافسية المقاولات، فضلاً عن استكمال مسار المصادقة على القانون الجنائي وقانون المسطرة الجنائية لتحديث أدوات العدالة الجنائية، وتفعيل العقوبات البديلة، وتعزيز شروط المحاكمة العادلة، وربط المسؤولية بالمحاسبة وتخليق المرفق العمومي<sup></sup>. &nbsp;</p>



<h2 class="wp-block-heading">استنتاجات تركيبية</h2>



<p class="wp-block-paragraph">تخلص القراءة الفاحصة في مخرجات الانتخابات التشريعية لـ 23 شتنبر 2026 إلى ثلاثة استنتاجات استراتيجية تؤطر آفاق الممارسة المؤسساتية بالمملكة:</p>



<ul class="wp-block-list">
<li>حيوية التداول الانتخابي وترسيخ الاستقرار المؤسساتي: أثبت الاستحقاق نضج التجربة الديمقراطية المغربية ومرونة نظامها الدستوري وقدرته على إنتاج التداول السلمي للسلطة ومعاقبة التدبير الحكومي عبر الصناديق دون مساس بجوهر الاستقرار السياسي الوطني، مما عزز صدقية المؤسسات في تدبير التحولات<sup></sup>. &nbsp;</li>



<li>تفاقم أزمة التمثيل واتساع فجوة الثقة الجيلية: دق تراجع نسبة المشاركة إلى حدود 38.02% مصحوباً بفتور الفئات الشابة والطبقة الوسطى جرس إنذار حاد حول هشاشة قنوات الوساطة الحزبية والمدنية التقليدية، مما يؤكد أن الاستقرار المؤسساتي يظل بحاجة إلى مبادرات عميقة لإعادة بناء الثقة وتجديد النخب وضخ دماء شابة في العمل السياسي<sup></sup>. &nbsp;</li>



<li>اختبار الحكامة والتعاقد السياسي لحزب الأصالة والمعاصرة: ينقل هذا الفوز حزب الأصالة والمعاصرة من التموقع الحزبي إلى المحك العملي لإدارة الشأن العام ومواجهة تحديات &#8220;حكومة المونديال&#8221;؛ حيث لن يقاس نجاح حكومته، سواء ترأستها فاطمة الزهراء المنصوري كسابقة دستورية نوعية أو شخصية قيادية أخرى، بالتحالفات العددية، بل بمدى القدرة على إبرام ميثاق أغلبي قابل للمحاسبة والقياس يجمع بين متطلبات الانفتاح الاستثماري الدولي وتحقيق العدالة الاجتماعية والمجالية للمواطنين<sup></sup>. &nbsp;</li>
</ul>



<p class="wp-block-paragraph"><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#"></a></p>



<p class="wp-block-paragraph"><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#"></a></p>



<p class="wp-block-paragraph"><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">ar.wikipedia.org</a></p>



<p class="wp-block-paragraph"><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">الانتخابات التشريعية المغربية 2026 &#8211; ويكيبيدياS&#8217;ouvre dans une nouvelle fenêtremaroc.maالانتخابات التشريعية 2026 &#8211; Maroc.maS&#8217;ouvre dans une nouvelle fenêtremaroc.maالحكومة تحدد يوم الأربعاء 23 شتنبر 2026 موعداً لانتخاب أعضاء مجلسS&#8217;ouvre dans une nouvelle fenêtrealarabiya.netحزب الأصالة والمعاصرة يتصدر الانتخابات النيابية في المغرب &#8211; العربيةS&#8217;ouvre dans une nouvelle fenêtreasharq.comانتخابات المغرب.. &#8220;الأصالة والمعاصرة&#8221; يتصدر النتائج بـ97 مقعداًS&#8217;ouvre dans une nouvelle fenêtrealjazeera.netالانتخابات التشريعية المغربية.. رهانات التغيير وحدود الاستمراريةS&#8217;ouvre dans une nouvelle fenêtreecopress.maنتائج الانتخابات التشريعية 2026 بالمغرب.. الأصالة والمعاصرةS&#8217;ouvre dans une nouvelle fenêtreaa.com.tr&#8221;الأصالة والمعاصرة&#8221; المغربي.. من شراكة حكومية إلى صدارة انتخابيةS&#8217;ouvre dans une nouvelle fenêtrealjazeera.netانتخابات المغرب.. بنكيران يستبعد المشاركة في الحكومة والحزب الفائزS&#8217;ouvre dans une nouvelle fenêtrearabic.pressbee.netفي تراجع دائم.. نسبة المشاركة رهان أول لانتخابات 23 شتنبر 2026S&#8217;ouvre dans une nouvelle fenêtrefacebook.comأنباء آسفي..الرسمية &#8211; FacebookS&#8217;ouvre dans une nouvelle fenêtrefacebook.comوذلك صباح اليوم الثلاثاء 29 يوليوز 2025 بمقر عمالة إقليم صفرو.S&#8217;ouvre dans une nouvelle fenêtreskynewsarabia.comمن يقود حكومة المغرب المقبلة.. المنصوري أم لقجع؟ &#8211; سكاي نيوز عربيةS&#8217;ouvre dans une nouvelle fenêtrebarlamane.comالانتخابات التشريعية 2026.. الأقاليم الجنوبية تسجل نسبة مشاركة قويةS&#8217;ouvre dans une nouvelle fenêtreattahaddi.comالانتخابات التشريعية 2026.. الأقاليم الجنوبية تسجل نسبة مشاركة قويةS&#8217;ouvre dans une nouvelle fenêtregoud.maاللائحة الجهوية فجهة العيون الساقية الحمرا.. الإستقلال جاب جوج من &#8230; &#8211; GoudS&#8217;ouvre dans une nouvelle fenêtremaroc.maالانتخابات التشريعية.. حزب الأصالة والمعاصرة يتصدر النتائجS&#8217;ouvre dans une nouvelle fenêtre2m.maتشريعيات 2026.. نسبة المشاركة الوطنية تبلغ 4,23% إلى حدود العاشرةS&#8217;ouvre dans une nouvelle fenêtrefacebook.com11,34% نسبة المشاركة حتى منتصف النهار.. وتسهيلات لتمكينS&#8217;ouvre dans une nouvelle fenêtrefacebook.comوزارة الداخلية المغربية تعلن وصول عدد المشاركين في الانتخاباتS&#8217;ouvre dans une nouvelle fenêtrefacebook.comجهة كلميم واد نون..الأحزاب التقليدية تحافظ على حضورها &#8230; &#8211; FacebookS&#8217;ouvre dans une nouvelle fenêtrear.le360.maانتخابات 2026: المجلس الوطني لحقوق الإنسان يسجل حادثتين «معزولتينS&#8217;ouvre dans une nouvelle fenêtrefacebook.comأوضح محمد شوكي، خلال الندوة الصحفية التي عقدها حزب التجمع الوطنيS&#8217;ouvre dans une nouvelle fenêtrepjd.maالملاحظة الانتخابية بالمغرب الإطار الدستوري والتشريعي والمؤسساتيS&#8217;ouvre dans une nouvelle fenêtreyoutube.comانتخاب محمد شوكي رئيسا لحزب التجمع الوطني للأحرار خلفا لعزيز أخنوشS&#8217;ouvre dans une nouvelle fenêtretiqatv.comانتخاب محمد شوكي رئيسا جديدا لحزب التجمع الوطني للأحرار &#8211; ثقة تيفيS&#8217;ouvre dans une nouvelle fenêtremaghrebtimes.maمن المساجد إلى المنصات الرقمية.. المجلس الوطني لحقوق الإنسان يكشف استغلال الدين في انتخابات 2026S&#8217;ouvre dans une nouvelle fenêtreinews.maفاطمة الزهراء المنصوري.. من مراكش إلى المشور السعيد: امرأة على عتبة رئاسة الحكومة لأول مرةS&#8217;ouvre dans une nouvelle fenêtrear.le360.maسياسة &#8211; www.le360.maS&#8217;ouvre dans une nouvelle fenêtreinews.maالمنصوري تكشف موقف &#8220;البام&#8221; من التحالفات وإمكانية التحالف معS&#8217;ouvre dans une nouvelle fenêtrecndh.maالمجلس الوطني لحقوق الإنسانS&#8217;ouvre dans une nouvelle fenêtrecour-constitutionnelle.maقرار المحكمة الدستورية رقم 259/25S&#8217;ouvre dans une nouvelle fenêtrealaan.maقبيل مشاركته في ملاحظة الانتخابات التشريعية بالمغرب:وفد البرلمان العربي برئاسة “اليماحي” يلتقي رئيسة المجلس الوطني لحقوق الإنسان بالمملكة المغربية – المغرب الآنS&#8217;ouvre dans une nouvelle fenêtreyoutube.comالانتخابات/المجلس الوطني لحقوق الإنسان: تكوين أكثر من 1000 ملاحظS&#8217;ouvre dans une nouvelle fenêtremaroc.maانتخابات شتنبر 2026.. تعبئة أزيد من 3000 ملاحظ يمثلون 26 جمعيةS&#8217;ouvre dans une nouvelle fenêtresgg.gov.maBO_7478_Ar.pdfS&#8217;ouvre dans une nouvelle fenêtre9anonak.comضمانات المشاركة السياسية للنساء في ضوء مستجدات القوانينS&#8217;ouvre dans une nouvelle fenêtrefacebook.comفاطمة الزهراء المنصوري عن &#8220;الأصالة والمعاصرة&#8221; وادريس السنتيسي عنS&#8217;ouvre dans une nouvelle fenêtrealakhbar.press.maمستجدات القوانين الانتخابية&#8230; تشجيع الشباب والنساء لولوج البرلمانS&#8217;ouvre dans une nouvelle fenêtrebelpresse.comبعد تصدر “البام”..المنصوري تعلق على إمكانية رئاستها للحكومةS&#8217;ouvre dans une nouvelle fenêtrear.le360.maبعد تصدر «البام» الانتخابات التشريعية.. ثلاثة تحالفات على طاولة تشكيل الحكومة المقبلةS&#8217;ouvre dans une nouvelle fenêtreexpresstv.maأكاديمي إسباني: الانتخابات التشريعية لسنة 2026 تكرس المغرب “نموذجا” للديمقراطية في المنطقةS&#8217;ouvre dans une nouvelle fenêtrear.le360.mawww.le360.ma | موقع مغربي إخباري شامل و مستقلS&#8217;ouvre dans une nouvelle fenêtrear.wikipedia.orgفاطمة الزهراء المنصوري &#8211; ويكيبيدياS&#8217;ouvre dans une nouvelle fenêtreassahifa.comفاطمة الزهراء المنصوري.. من مراكش إلى المشور السعيد: امرأة على عتبةS&#8217;ouvre dans une nouvelle fenêtreannahar.comفاطمة الزهراء المنصوري تقود حزب الأصالة والمعاصرة في المغربS&#8217;ouvre dans une nouvelle fenêtrealbayan.aeرئيسة حكومة محتملة في المغرب&#8230; من هي فاطمة الزهراء المنصوري؟ &#8211; Al BayanS&#8217;ouvre dans une nouvelle fenêtrebelpresse.comالانتخابات التشريعية 2026..الأقاليم الجنوبية تسجل نسبة مشاركة قويةS&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#"></a></p>



<figure class="wp-block-image"><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#"><img decoding="async" src="https://t3.gstatic.com/faviconV2?url=https://support.google.com/&amp;client=BARD&amp;type=FAVICON&amp;size=256&amp;fallback_opts=TYPE,SIZE,URL" alt=""/></a></figure>



<p class="wp-block-paragraph"><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a><a href="https://draft.blogger.com/blog/post/edit/5002617561666732275/6555949288849368670#">S&#8217;ouvre dans une nouvelle fenêtre</a></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>موسكو تستضيف حوارا دوليا حول مستقبل النمو العالمي بمشاركة 40 دولة</title>
		<link>https://sms-institute.com/%d9%85%d9%88%d8%b3%d9%83%d9%88-%d8%aa%d8%b3%d8%aa%d8%b6%d9%8a%d9%81-%d8%ad%d9%88%d8%a7%d8%b1%d8%a7-%d8%af%d9%88%d9%84%d9%8a%d8%a7-%d8%ad%d9%88%d9%84-%d9%85%d8%b3%d8%aa%d9%82%d8%a8%d9%84-%d8%a7%d9%84/</link>
		
		<dc:creator><![CDATA[Sanaa Haouata]]></dc:creator>
		<pubDate>Wed, 13 May 2026 14:27:18 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<category><![CDATA[فعاليات]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1225</guid>

					<description><![CDATA[استضاف المركز الوطني الروسي في موسكو فعاليات الحوار المفتوح الثاني بعنوان &#8220;مستقبل العالم: منصة جديدة للنمو العالمي&#8221;، بمشاركة خبراء وباحثين&#8230;]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img fetchpriority="high" decoding="async" width="2000" height="971" src="https://sms-institute.com/wp-content/uploads/2026/05/679184160_26801151432830285_807951543118611974_n.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://sms-institute.com/wp-content/uploads/2026/05/679184160_26801151432830285_807951543118611974_n.jpg 2000w, https://sms-institute.com/wp-content/uploads/2026/05/679184160_26801151432830285_807951543118611974_n-300x146.jpg 300w, https://sms-institute.com/wp-content/uploads/2026/05/679184160_26801151432830285_807951543118611974_n-1024x497.jpg 1024w, https://sms-institute.com/wp-content/uploads/2026/05/679184160_26801151432830285_807951543118611974_n-768x373.jpg 768w, https://sms-institute.com/wp-content/uploads/2026/05/679184160_26801151432830285_807951543118611974_n-1536x746.jpg 1536w" sizes="(max-width: 2000px) 100vw, 2000px" /></figure>


<p class="wp-block-paragraph">استضاف المركز الوطني الروسي في موسكو فعاليات الحوار المفتوح الثاني بعنوان &#8220;مستقبل العالم: منصة جديدة للنمو العالمي&#8221;، بمشاركة خبراء وباحثين من أكثر من 40 دولة.</p>



<figure class="wp-block-image"><img decoding="async" src="https://mf.b37mrtl.ru/media/pics/2026.04/article/69eaf2cf4236044c3556786b.png" alt="موسكو تستضيف حوارا دوليا حول مستقبل النمو العالمي بمشاركة 40 دولة"/><figcaption class="wp-element-caption">RT</figcaption></figure>



<p class="wp-block-paragraph">ويتضمن برنامج الحوار الذي ينعقد&nbsp;خلال الفترة من 27 إلى 29 أبريل، محاضرات لخبراء دوليين، وعرض أفكار المشاركين، إلى جانب جلسات تفاعلية لتبادل الخبرات ونقاشات موسعة حول آفاق الاقتصاد العالمي والتحولات الجارية فيه.</p>



<p class="wp-block-paragraph">ويشارك في قائمة المتحدثين وأعضاء لجنة التحكيم الباحث المغربي يونس بنان، مدير معهد الدراسات الاجتماعية والإعلامية، الذي كان قد طرح العام الماضي فكرة إنشاء ممر عابر للقارات يربط بين آسيا وأفريقيا عبر طريق البحر الشمالي، مع حلقة وصل جنوبية عبر ميناء الداخلة الأطلسي.Play</p>



<p class="wp-block-paragraph"><img decoding="async" width="720" height="400" alt="" src="https://mf.b37mrtl.ru/media/pics/2026.04/original/69ea452a4236042af950dffc.png"></p>



<p class="wp-block-paragraph">وبحلول عام 2026، وسع بنان نطاق مشروعه ليشمل مقترح إنشاء بورصة كربون أفريقية متكاملة، تهدف إلى تمكين الدول الأفريقية من إدارة مواردها البيئية والاقتصادية بشكل مستقل.</p>



<p class="wp-block-paragraph">وقال بنان إن مشاركته تمثل &#8220;فرصة استراتيجية لعرض هذه الأبحاث أمام المجتمع الاحترافي، وإثبات قدرة باحثي الجنوب العالمي على تقديم حلول للتحديات الكبرى في القرن الحادي والعشرين&#8221;، مشيرا إلى أن العلاقات بين الصين وروسيا والدول الأفريقية تشهد تحولًا متسارعًا نحو نماذج تعاون أكثر استقلالية.</p>



<p class="wp-block-paragraph">ويركز الحوار على أربعة محاور استراتيجية رئيسية تشمل: الاستثمار في الإنسان، والتكنولوجيا، والبيئة، والترابط، مع بحث قضايا مثل الذكاء الاصطناعي، والأمن السيبراني، والتجارة، والعملات الرقمية والبنية التحتية.</p>



<p class="wp-block-paragraph">وبحسب المنظمين، تجاوز عدد الأوراق المقدمة للحوار 300 بحث من مختلف أنحاء العالم، فيما لا يزال باب التسجيل مفتوحًا للراغبين عبر الموقع الرسمي.</p>



<p class="wp-block-paragraph">المصدر: RT</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>بلاغ صحفي- COMMUNIQUÉ DE PRESSE- PRESS RELEASE-</title>
		<link>https://sms-institute.com/%d8%a8%d9%84%d8%a7%d8%ba-%d8%b5%d8%ad%d9%81%d9%8a-communique-de-presse-press-release/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Mon, 07 Apr 2025 23:50:50 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1153</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-file"><a id="wp-block-file--media-826ea94d-7903-4d5a-8da1-a59e1035187d" href="https://sms-institute.com/wp-content/uploads/2025/04/COMMUNIQUE-DE-PRESSE-بلاغ-صحفي-للتعمبم-و-النشر.docx">COMMUNIQUE-DE-PRESSE-بلاغ-صحفي-للتعمبم-و-النشر</a><a href="https://sms-institute.com/wp-content/uploads/2025/04/COMMUNIQUE-DE-PRESSE-بلاغ-صحفي-للتعمبم-و-النشر.docx" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-826ea94d-7903-4d5a-8da1-a59e1035187d">Download</a></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>معهد الدراسات الاجتماعية والإعلامية يُمثل المملكة في &#8220;الحوار المفتوح&#8221; بموسكو من خلال مساهمتين علميتين بارزتين</title>
		<link>https://sms-institute.com/%d9%85%d8%b9%d9%87%d8%af-%d8%a7%d9%84%d8%af%d8%b1%d8%a7%d8%b3%d8%a7%d8%aa-%d8%a7%d9%84%d8%a7%d8%ac%d8%aa%d9%85%d8%a7%d8%b9%d9%8a%d8%a9-%d9%88%d8%a7%d9%84%d8%a5%d8%b9%d9%84%d8%a7%d9%85%d9%8a%d8%a9/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Mon, 07 Apr 2025 23:46:55 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://sms-institute.com/?p=1151</guid>

					<description><![CDATA[الدار البيضاء، 6 أبريل 2025 – يشارك معهد الدراسات الاجتماعية والإعلامية (SMSI) في فعاليات &#8220;الحوار المفتوح&#8220; الدولي رفيع المستوى، المنعقد&#8230;]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"><strong>الدار البيضاء، 6 أبريل 2025</strong> – يشارك <strong>معهد الدراسات الاجتماعية والإعلامية</strong><strong> (SMSI)</strong> في فعاليات <strong>&#8220;</strong><strong>الحوار المفتوح</strong><strong>&#8220;</strong> الدولي رفيع المستوى، المنعقد تحت شعار:</p>



<p class="wp-block-paragraph"><strong>&#8220;</strong><strong>مستقبل العالم: منصة جديدة للنمو العالمي</strong><strong>&#8220;</strong>، وذلك من <strong>28 </strong><strong>إلى 30 أبريل 2025</strong> بالمركز الوطني في موسكو – روسيا.</p>



<p class="wp-block-paragraph">ويجمع هذا المنتدى نخبة من <strong>الخبراء والباحثين وصناع القرار من مختلف دول العالم</strong>، لمناقشة التحديات الجيوسياسية والاقتصادية والتكنولوجية والبيئية، واقتراح حلول مبتكرة وشاملة تدعم مسارات التنمية العالمية المستدامة.</p>



<p class="wp-block-paragraph"><strong>أولاً: مساهمتان علميتان مغربيتان نوعيتان</strong><strong></strong></p>



<p class="wp-block-paragraph">سيقدم معهد للدراسات الاجتماعية والإعلامية خلال هذا الحدث العلمي الدولي مساهمتين استراتيجيتين، تُجسد <strong>صوت المغرب في النقاشات العالمية حول إعادة تشكيل التوازنات الجيوسياسية والاقتصادية</strong>.</p>



<p class="wp-block-paragraph"><strong>أ</strong><strong>. &#8220;</strong><strong>طريق الشمال البحري والممر العابر للقارات: رؤية استراتيجية لربط الصين وروسيا وإفريقيا عبر ميناء الداخلة الأطلسي</strong><strong>&#8220;</strong></p>



<p class="wp-block-paragraph"><strong>من إعداد: يونس بنان وسناء حواتا</strong></p>



<p class="wp-block-paragraph">تتناول هذه المداخلة أهمية <strong>ميناء الداخلة الأطلسي</strong> كمحور لوجستي إفريقي مرتبط بـ <strong>طريق الشمال البحري</strong>، وتهدف إلى:</p>



<ul class="wp-block-list">
<li>تقليص الاعتماد على الممرات البحرية التقليدية من خلال تقديم مسار جديد آمن وتنافسي؛</li>



<li>تموقع المغرب كمحور لوجستي يربط بين آسيا وروسيا وإفريقيا؛</li>



<li>تعزيز التعاون الاقتصادي ضمن إطار <strong>تحالف البريكس</strong><strong>+</strong>؛</li>



<li>مواجهة التحديات المناخية والتكنولوجية عبر مقاربة جيواستراتيجية متكاملة.</li>
</ul>



<p class="wp-block-paragraph"><strong>ب</strong><strong>. &#8220;</strong><strong>الدولة – المقاطعة: نموذج جديد في العلاقات الدولية في ظل الهيمنة غير المتكافئة</strong><strong>&#8220;</strong></p>



<p class="wp-block-paragraph"><strong>من إعداد: يونس بنان وسناء حواتا</strong></p>



<p class="wp-block-paragraph">تسلّط هذه الورقة الضوء على ظاهرة ناشئة في العلاقات الدولية تتمثل في <strong>تحوّل بعض الدول إلى &#8220;دول-مقاطعات</strong><strong>&#8220;</strong> تحت تأثير القوى العالمية الكبرى، من خلال:</p>



<ul class="wp-block-list">
<li>تحليل آليات التبعية السياسية والاقتصادية؛</li>



<li>دراسة آثار السياسات الحمائية والتحالفات العسكرية والعقوبات الدولية؛</li>



<li>مناقشة دور <strong>تحالف البريكس</strong><strong>+</strong> في تعزيز صمود الدول النامية أمام الهيمنة الجيوسياسية.</li>
</ul>



<p class="wp-block-paragraph"><strong>ثانياً: منتدى استراتيجي لرسم ملامح المستقبل العالمي</strong><strong></strong></p>



<p class="wp-block-paragraph">ينظم منتدى &#8220;الحوار المفتوح&#8221; من قبل <strong>المركز الوطني الروسي</strong>، ويرتكز على أربعة محاور استثمارية رئيسية:</p>



<ol class="wp-block-list">
<li><strong>رأس المال البشري</strong>: الابتكار، الذكاء الاصطناعي، التعليم العادل، مهارات المستقبل؛</li>



<li><strong>التكنولوجيا</strong>: الأمن السيبراني، السيادة الغذائية، المدن الذكية؛</li>



<li><strong>البيئة</strong>: التكيف المناخي، الاستدامة، إدارة الموارد الطبيعية؛</li>



<li><strong>الاتصال واللوجستيك</strong>: البنية التحتية الرقمية، العملات الإلكترونية، الممرات التجارية.</li>
</ol>



<p class="wp-block-paragraph">وسيُتوّج المنتدى بإصدار <strong>تقرير استراتيجي شامل</strong> يدعم صياغة سياسات دولية تنموية جديدة.</p>



<p class="wp-block-paragraph"><strong>ثالثاً: المغرب فاعل استراتيجي في التحولات العالمية</strong><strong></strong></p>



<p class="wp-block-paragraph">من خلال هذه المشاركة، يُؤكد <strong>معهد الدراسات الاجتماعية والإعلامية</strong> على <strong>الدور الريادي المتنامي للمملكة المغربية</strong> في النقاشات المرتبطة بالحكامة العالمية، ونشوء نماذج جيوسياسية جديدة، وفتح بدائل للتجارة والدبلوماسية الدولية.</p>



<p class="wp-block-paragraph">كما يعكس انخراط المعهد والتزامه بدعم <strong>رؤية مغرب إفريقي متصل، مبتكر وذو سيادة</strong>، يواكب التحولات الكبرى في القرن الحادي والعشرين.</p>



<p class="wp-block-paragraph"><strong>رابعاً: نبذة عن الباحثين</strong><strong></strong></p>



<p class="wp-block-paragraph"><strong>الدكتور يونس بنان</strong></p>



<p class="wp-block-paragraph">رئيس <strong>معهد الد</strong>راسات الاجتماعية والإعلامية (SMSI) وباحث رئيسي داخله. وهو <strong>باحث نشط في مختبر</strong><strong> CAISEN – </strong><strong>مركز تحليل الابتكار ودعم المقاولات</strong> التابع لـ <strong>جامعة كيبيك بشيكوتيمي</strong><strong> (UQAC)</strong>، حيث يُجري أبحاثاً حول <strong>أداء المؤسسات السياحية بمنطقة ساغني – لاك سان جان</strong><strong> (SLSJ)</strong> بكندا. يشغل كذلك منصب <strong>مدير نشر مجلة القانون و المجتمع</strong> المتخصصة في الدراسات القانونية والسياسية والاجتماعية.</p>



<p class="wp-block-paragraph"><strong>الدكتورة سناء حواتا</strong><br>أستاذة بكلية العلوم القانونية والاقتصادية والاجتماعية – عين السبع، جامعة الحسن الثاني بالدار البيضاء. عضو في <strong>مجلس إدارة معهد الدراسات الاجتماعية والإعلامية</strong><strong> (SMSI)</strong>، ومديرة المنصة التكوينية الافتراضية <strong>SMSI Training</strong>، وعضو في مختبر <strong>CAISEN</strong>. تشغل كذلك منصب <strong>مديرة نشر مجلة &#8220;الاقتصاد والمجتمع</strong><strong>&#8220;</strong> المتخصصة في الأبحاث الاقتصادية والاجتماعية.</p>



<p class="wp-block-paragraph"><strong>معلومات التواصل الإعلامي</strong><strong> :</strong><strong>معهد</strong> الدراسات الاجتماعية والإعلامية – الدار البيضاء<br><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4e7.png" alt="📧" class="wp-smiley" style="height: 1em; max-height: 1em;" /> contact@sms-institute.com<br><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4de.png" alt="📞" class="wp-smiley" style="height: 1em; max-height: 1em;" /> +212 660 485 424<br><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /> مزيد من المعلومات حول المنتدى: <a href="https://russia.ru">https://russia.ru</a></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
