{"id":94,"date":"2026-09-08T18:52:47","date_gmt":"2026-09-08T16:52:47","guid":{"rendered":"https:\/\/test.shapi.eu\/?page_id=94"},"modified":"2026-09-15T06:22:39","modified_gmt":"2026-09-15T04:22:39","slug":"statistiques","status":"publish","type":"page","link":"https:\/\/test.shapi.eu\/index.php\/statistiques\/","title":{"rendered":"Statistiques"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"94\" class=\"elementor elementor-94\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4dc7f4e e-con e-atomic-element e-flexbox-base e-835ccea \" data-id=\"4dc7f4e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4dc7f4e\">\n    <div class=\"elementor-element elementor-element-16aa93b e-flex e-con-boxed e-con e-parent\" data-id=\"16aa93b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84edf27 elementor-widget elementor-widget-shortcode\" data-id=\"84edf27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n\n    <div\n        id=\"fnaam-global-data-6af54e43451e1\"\n        class=\"fnaam-stats-module\"\n        data-mode=\"data\"\n    >\n\n\n        <!-- =================================================\n             TITRE + ANNEE\n             ================================================= -->\n\n        <div class=\"fnaam-globales-entete\">\n\n\n            \n                <h3>\n\n                    Donn\u00e9es cumul\u00e9es\n                <\/h3>\n\n            \n\n            <div class=\"fnaam-choix-annee\">\n\n\n                <label>\n                    Ann\u00e9e :\n                <\/label>\n\n\n                <select\n                    class=\"fnaam-select-annee\"\n                >\n\n                    <option value=\"\">\n                        Chargement...\n                    <\/option>\n\n                <\/select>\n\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- =================================================\n             TABLEAU GLOBAL\n             ================================================= -->\n\n        \n\n            <div\n                class=\"fnaam-tableau-global\"\n            >\n\n                Chargement...\n\n            <\/div>\n\n\n        \n\n        <!-- =================================================\n             GRAPHIQUES GLOBAUX\n             ================================================= -->\n\n        \n\n        \n\n    <\/div>\n\n\n    <script>\n\n    document.addEventListener(\n\n        'DOMContentLoaded',\n\n        function() {\n\n\n            \/* ================================================\n             * MODULE\n             * ================================================ *\/\n\n            const module =\n                document.getElementById(\n                    'fnaam-global-data-6af54e43451e1'\n                );\n\n\n            if (!module) {\n\n                return;\n\n            }\n\n\n            const mode =\n                module.dataset.mode;\n\n\n            const selectAnnee =\n                module.querySelector(\n                    '.fnaam-select-annee'\n                );\n\n\n            const ordreMois = [\n\n                'Janvier',\n                'F\u00e9vrier',\n                'Mars',\n                'Avril',\n                'Mai',\n                'Juin',\n                'Juillet',\n                'Ao\u00fbt',\n                'Septembre',\n                'Octobre',\n                'Novembre',\n                'D\u00e9cembre'\n\n            ];\n\n\n            let donnees = [];\n\n            let graphiqueActivite = null;\n\n            let graphiqueKm = null;\n\n\n            \/* ================================================\n             * FORMATAGE NOMBRES\n             * ================================================ *\/\n\n            function formatNombre(\n                nombre\n            ) {\n\n                return Number(\n                    nombre || 0\n                ).toLocaleString(\n                    'fr-FR'\n                );\n\n            }\n\n\n            \/* ================================================\n             * ATTENDRE CHART.JS\n             * ================================================ *\/\n\n            function attendreChart(\n                callback\n            ) {\n\n\n                if (\n                    typeof Chart !==\n                    'undefined'\n                ) {\n\n                    callback();\n\n                    return;\n\n                }\n\n\n                setTimeout(\n\n                    function() {\n\n                        attendreChart(\n                            callback\n                        );\n\n                    },\n\n                    100\n\n                );\n\n            }\n\n\n            \/* ================================================\n             * AFFICHER UNE ANNEE\n             * ================================================ *\/\n\n            function afficherAnnee(\n                annee\n            ) {\n\n\n                const lignes =\n                    donnees\n                    .filter(\n\n                        function(ligne) {\n\n                            return (\n\n                                String(\n                                    ligne.annee\n                                )\n\n                                ===\n\n                                String(\n                                    annee\n                                )\n\n                            );\n\n                        }\n\n                    )\n                    .sort(\n\n                        function(a, b) {\n\n                            return (\n\n                                ordreMois.indexOf(\n                                    a.mois\n                                )\n\n                                -\n\n                                ordreMois.indexOf(\n                                    b.mois\n                                )\n\n                            );\n\n                        }\n\n                    );\n\n\n                \/* ============================================\n                 * TABLEAU GLOBAL\n                 * ============================================ *\/\n\n                if (\n\n                    mode === 'data'\n\n                    ||\n\n                    mode === 'globales'\n\n                ) {\n\n\n                    let totalAccueillis =\n                        0;\n\n                    let totalTransportes =\n                        0;\n\n                    let totalVisites =\n                        0;\n\n                    let totalKm =\n                        0;\n\n\n                    lignes.forEach(\n\n                        function(ligne) {\n\n\n                            totalAccueillis +=\n                                Number(\n                                    ligne.marins_accueillis || 0\n                                );\n\n\n                            totalTransportes +=\n                                Number(\n                                    ligne.marins_transportes || 0\n                                );\n\n\n                            totalVisites +=\n                                Number(\n                                    ligne.visites_a_bord || 0\n                                );\n\n\n                            totalKm +=\n                                Number(\n                                    ligne.kilometres_parcourus || 0\n                                );\n\n                        }\n\n                    );\n\n\n                    let html =\n                        '';\n\n\n                    html +=\n                        '<div style=\"overflow-x:auto;\">';\n\n\n                    html +=\n                        '<table class=\"fnaam-table-stats\">';\n\n\n                    \/* ----------------------------------------\n                     * EN-TETE\n                     * ---------------------------------------- *\/\n\n                    html += '<thead>';\n\n                    html += '<tr>';\n\n                    html += '<th>Mois<\/th>';\n\n                    html +=\n                        '<th>Marins accueillis<\/th>';\n\n                    html +=\n                        '<th>Marins transport\u00e9s<\/th>';\n\n                    html +=\n                        '<th>Visites \u00e0 bord<\/th>';\n\n                    html +=\n                        '<th>Kilom\u00e8tres<\/th>';\n\n                    html += '<\/tr>';\n\n                    html += '<\/thead>';\n\n\n                    \/* ----------------------------------------\n                     * DONNEES\n                     * ---------------------------------------- *\/\n\n                    html += '<tbody>';\n\n\n                    lignes.forEach(\n\n                        function(ligne) {\n\n\n                            html += '<tr>';\n\n\n                            html +=\n                                '<td>' +\n                                ligne.mois +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.marins_accueillis\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.marins_transportes\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.visites_a_bord\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.kilometres_parcourus\n                                ) +\n                                '<\/td>';\n\n\n                            html += '<\/tr>';\n\n                        }\n\n                    );\n\n\n                    html += '<\/tbody>';\n\n\n                    \/* ----------------------------------------\n                     * TOTAL ANNUEL\n                     * ---------------------------------------- *\/\n\n                    html += '<tfoot>';\n\n                    html += '<tr>';\n\n\n                    html +=\n                        '<th>TOTAL ' +\n                        annee +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalAccueillis\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalTransportes\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalVisites\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalKm\n                        ) +\n                        '<\/th>';\n\n\n                    html += '<\/tr>';\n\n                    html += '<\/tfoot>';\n\n\n                    html += '<\/table>';\n\n                    html += '<\/div>';\n\n\n                    const tableau =\n                        module.querySelector(\n                            '.fnaam-tableau-global'\n                        );\n\n\n                    if (tableau) {\n\n\n                        tableau.innerHTML =\n                            html;\n\n                    }\n\n                }\n\n\n                \/* ============================================\n                 * GRAPHIQUES GLOBAUX\n                 * ============================================ *\/\n\n                if (\n\n                    mode === 'graphs'\n\n                    ||\n\n                    mode === 'globales'\n\n                    ||\n\n                    mode === 'graph_accueil'\n\n                    ||\n\n                    mode === 'graph_kilometres'\n\n                ) {\n\n\n                    const accueillis = [];\n\n                    const transportes = [];\n\n                    const visites = [];\n\n                    const kilometres = [];\n\n\n                    ordreMois.forEach(\n\n                        function(mois) {\n\n\n                            const ligne =\n                                lignes.find(\n\n                                    function(item) {\n\n                                        return (\n                                            item.mois ===\n                                            mois\n                                        );\n\n                                    }\n\n                                );\n\n\n                            if (ligne) {\n\n\n                                accueillis.push(\n\n                                    Number(\n                                        ligne.marins_accueillis || 0\n                                    )\n\n                                );\n\n\n                                transportes.push(\n\n                                    Number(\n                                        ligne.marins_transportes || 0\n                                    )\n\n                                );\n\n\n                                visites.push(\n\n                                    Number(\n                                        ligne.visites_a_bord || 0\n                                    )\n\n                                );\n\n\n                                kilometres.push(\n\n                                    Number(\n                                        ligne.kilometres_parcourus || 0\n                                    )\n\n                                );\n\n                            }\n\n\n                            else {\n\n\n                                accueillis.push(\n                                    null\n                                );\n\n\n                                transportes.push(\n                                    null\n                                );\n\n\n                                visites.push(\n                                    null\n                                );\n\n\n                                kilometres.push(\n                                    null\n                                );\n\n                            }\n\n                        }\n\n                    );\n\n\n                    attendreChart(\n\n                        function() {\n\n\n                            if (\n                                graphiqueActivite\n                            ) {\n\n                                graphiqueActivite.destroy();\n\n                            }\n\n\n                            if (\n                                graphiqueKm\n                            ) {\n\n                                graphiqueKm.destroy();\n\n                            }\n\n\n                            const canvasActivite =\n                                module.querySelector(\n                                    '.fnaam-graph-activite'\n                                );\n\n\n                            const canvasKm =\n                                module.querySelector(\n                                    '.fnaam-graph-km-global'\n                                );\n\n\n                            \/* =================================\n                             * GRAPHIQUE ACTIVITE\n                             * ================================= *\/\n\n                            if (canvasActivite) {\n\n                                graphiqueActivite =\n                                    new Chart(\n\n                                        canvasActivite,\n\n                                    {\n\n                                        type:\n                                            'line',\n\n\n                                        data: {\n\n                                            labels:\n                                                ordreMois,\n\n\n                                            datasets: [\n\n                                                {\n\n                                                    label:\n                                                        'Marins accueillis',\n\n                                                    data:\n                                                        accueillis,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                },\n\n                                                {\n\n                                                    label:\n                                                        'Marins transport\u00e9s',\n\n                                                    data:\n                                                        transportes,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                },\n\n                                                {\n\n                                                    label:\n                                                        'Visites \u00e0 bord',\n\n                                                    data:\n                                                        visites,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                }\n\n                                            ]\n\n                                        },\n\n\n                                        options: {\n\n                                            responsive:\n                                                true,\n\n                                            maintainAspectRatio:\n                                                false,\n\n                                            scales: {\n\n                                                y: {\n\n                                                    beginAtZero:\n                                                        true\n\n                                                }\n\n                                            }\n\n                                        }\n\n                                    }\n\n                                    );\n\n                            }\n\n\n                            \/* =================================\n                             * GRAPHIQUE KILOMETRES\n                             * ================================= *\/\n\n                            if (canvasKm) {\n\n                                graphiqueKm =\n                                    new Chart(\n\n                                        canvasKm,\n\n                                    {\n\n                                        type:\n                                            'line',\n\n\n                                        data: {\n\n                                            labels:\n                                                ordreMois,\n\n\n                                            datasets: [\n\n                                                {\n\n                                                    label:\n                                                        'Kilom\u00e8tres parcourus',\n\n                                                    data:\n                                                        kilometres,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                }\n\n                                            ]\n\n                                        },\n\n\n                                        options: {\n\n                                            responsive:\n                                                true,\n\n                                            maintainAspectRatio:\n                                                false,\n\n                                            scales: {\n\n                                                y: {\n\n                                                    beginAtZero:\n                                                        true\n\n                                                }\n\n                                            }\n\n                                        }\n\n                                    }\n\n                                    );\n\n                            }\n\n                        }\n\n                    );\n\n                }\n\n            }\n\n\n            \/* ================================================\n             * CHARGEMENT API PUBLIQUE\n             * ================================================ *\/\n\n            fetch(\n\n                'https:\/\/test.shapi.eu\/index.php\/wp-json\/fnaam\/v1\/stats-globales'\n\n            )\n\n\n            .then(\n\n                function(response) {\n\n\n                    if (!response.ok) {\n\n\n                        throw new Error(\n\n                            'Erreur HTTP ' +\n                            response.status\n\n                        );\n\n                    }\n\n\n                    return response.json();\n\n                }\n\n            )\n\n\n            .then(\n\n                function(data) {\n\n\n                    if (\n\n                        !Array.isArray(data)\n\n                        ||\n\n                        !data.length\n\n                    ) {\n\n\n                        const tableau =\n                            module.querySelector(\n                                '.fnaam-tableau-global'\n                            );\n\n\n                        if (tableau) {\n\n                            tableau.innerHTML =\n                                '<p>Aucune statistique disponible.<\/p>';\n\n                        }\n\n\n                        return;\n\n                    }\n\n\n                    donnees =\n                        data;\n\n\n                    \/* ========================================\n                     * ANNEES DISPONIBLES\n                     * ======================================== *\/\n\n                    const annees =\n                        [\n\n                            ...new Set(\n\n                                donnees.map(\n\n                                    function(ligne) {\n\n                                        return String(\n                                            ligne.annee\n                                        );\n\n                                    }\n\n                                )\n\n                            )\n\n                        ];\n\n\n                    annees.sort(\n\n                        function(a, b) {\n\n                            return (\n\n                                Number(b)\n\n                                -\n\n                                Number(a)\n\n                            );\n\n                        }\n\n                    );\n\n\n                    \/* ========================================\n                     * SELECTEUR\n                     * ======================================== *\/\n\n                    selectAnnee.innerHTML =\n                        '';\n\n\n                    annees.forEach(\n\n                        function(annee) {\n\n\n                            const option =\n                                document.createElement(\n                                    'option'\n                                );\n\n\n                            option.value =\n                                annee;\n\n\n                            option.textContent =\n                                annee;\n\n\n                            selectAnnee.appendChild(\n                                option\n                            );\n\n                        }\n\n                    );\n\n\n                    \/* ========================================\n                     * ANNEE LA PLUS RECENTE\n                     * ======================================== *\/\n\n                    afficherAnnee(\n                        annees[0]\n                    );\n\n                }\n\n            )\n\n\n            .catch(\n\n                function(error) {\n\n\n                    console.error(\n\n                        'FNAAM - Statistiques globales :',\n\n                        error\n\n                    );\n\n\n                    const tableau =\n                        module.querySelector(\n                            '.fnaam-tableau-global'\n                        );\n\n\n                    if (tableau) {\n\n                        tableau.innerHTML =\n                            '<p>Impossible de charger les statistiques.<\/p>';\n\n                    }\n\n                }\n\n            );\n\n\n            \/* ================================================\n             * CHANGEMENT ANNEE\n             * ================================================ *\/\n\n            selectAnnee.addEventListener(\n\n                'change',\n\n                function() {\n\n\n                    afficherAnnee(\n                        this.value\n                    );\n\n                }\n\n            );\n\n\n        }\n\n    );\n\n    <\/script>\n\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-f380e5f e-con e-atomic-element e-flexbox-base e-efd2752 \" data-id=\"f380e5f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f380e5f\">\n    \t\t\t<h2 data-interaction-id=\"ca789a5\" class=\"e-ca789a5-1ab73ae e-heading-base\">Courbe annuelle cumul\u00e9e<\/h2>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2417b90 e-con e-atomic-element e-flexbox-base e-5d36717 \" data-id=\"2417b90\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2417b90\">\n    <div class=\"elementor-element elementor-element-1699efe e-con e-atomic-element e-flexbox-base e-456d3c4 \" data-id=\"1699efe\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1699efe\">\n    \t\t<div class=\"elementor-element elementor-element-99e3bbc elementor-widget elementor-widget-shortcode\" data-id=\"99e3bbc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n\n    <div\n        id=\"fnaam-global-graph_accueil-6af54e434c615\"\n        class=\"fnaam-stats-module\"\n        data-mode=\"graph_accueil\"\n    >\n\n\n        <!-- =================================================\n             TITRE + ANNEE\n             ================================================= -->\n\n        <div class=\"fnaam-globales-entete\">\n\n\n            \n\n            <div class=\"fnaam-choix-annee\">\n\n\n                <label>\n                    Ann\u00e9e :\n                <\/label>\n\n\n                <select\n                    class=\"fnaam-select-annee\"\n                >\n\n                    <option value=\"\">\n                        Chargement...\n                    <\/option>\n\n                <\/select>\n\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- =================================================\n             TABLEAU GLOBAL\n             ================================================= -->\n\n        \n\n        <!-- =================================================\n             GRAPHIQUES GLOBAUX\n             ================================================= -->\n\n        \n\n            <!-- =============================================\n                 GRAPHIQUE ACTIVITE\n                 ============================================= -->\n\n            <div\n                class=\"fnaam-bloc-graphique\"\n            >\n\n\n                <h3>\n                    Activit\u00e9 d'accueil\n                <\/h3>\n\n\n                <div\n                    class=\"fnaam-canvas-container\"\n                    style=\"\n                        position:relative;\n                        width:100%;\n                        height:420px;\n                    \"\n                >\n\n                    <canvas\n                        class=\"fnaam-graph-activite\"\n                    ><\/canvas>\n\n                <\/div>\n\n\n            <\/div>\n\n\n        \n\n        \n\n    <\/div>\n\n\n    <script>\n\n    document.addEventListener(\n\n        'DOMContentLoaded',\n\n        function() {\n\n\n            \/* ================================================\n             * MODULE\n             * ================================================ *\/\n\n            const module =\n                document.getElementById(\n                    'fnaam-global-graph_accueil-6af54e434c615'\n                );\n\n\n            if (!module) {\n\n                return;\n\n            }\n\n\n            const mode =\n                module.dataset.mode;\n\n\n            const selectAnnee =\n                module.querySelector(\n                    '.fnaam-select-annee'\n                );\n\n\n            const ordreMois = [\n\n                'Janvier',\n                'F\u00e9vrier',\n                'Mars',\n                'Avril',\n                'Mai',\n                'Juin',\n                'Juillet',\n                'Ao\u00fbt',\n                'Septembre',\n                'Octobre',\n                'Novembre',\n                'D\u00e9cembre'\n\n            ];\n\n\n            let donnees = [];\n\n            let graphiqueActivite = null;\n\n            let graphiqueKm = null;\n\n\n            \/* ================================================\n             * FORMATAGE NOMBRES\n             * ================================================ *\/\n\n            function formatNombre(\n                nombre\n            ) {\n\n                return Number(\n                    nombre || 0\n                ).toLocaleString(\n                    'fr-FR'\n                );\n\n            }\n\n\n            \/* ================================================\n             * ATTENDRE CHART.JS\n             * ================================================ *\/\n\n            function attendreChart(\n                callback\n            ) {\n\n\n                if (\n                    typeof Chart !==\n                    'undefined'\n                ) {\n\n                    callback();\n\n                    return;\n\n                }\n\n\n                setTimeout(\n\n                    function() {\n\n                        attendreChart(\n                            callback\n                        );\n\n                    },\n\n                    100\n\n                );\n\n            }\n\n\n            \/* ================================================\n             * AFFICHER UNE ANNEE\n             * ================================================ *\/\n\n            function afficherAnnee(\n                annee\n            ) {\n\n\n                const lignes =\n                    donnees\n                    .filter(\n\n                        function(ligne) {\n\n                            return (\n\n                                String(\n                                    ligne.annee\n                                )\n\n                                ===\n\n                                String(\n                                    annee\n                                )\n\n                            );\n\n                        }\n\n                    )\n                    .sort(\n\n                        function(a, b) {\n\n                            return (\n\n                                ordreMois.indexOf(\n                                    a.mois\n                                )\n\n                                -\n\n                                ordreMois.indexOf(\n                                    b.mois\n                                )\n\n                            );\n\n                        }\n\n                    );\n\n\n                \/* ============================================\n                 * TABLEAU GLOBAL\n                 * ============================================ *\/\n\n                if (\n\n                    mode === 'data'\n\n                    ||\n\n                    mode === 'globales'\n\n                ) {\n\n\n                    let totalAccueillis =\n                        0;\n\n                    let totalTransportes =\n                        0;\n\n                    let totalVisites =\n                        0;\n\n                    let totalKm =\n                        0;\n\n\n                    lignes.forEach(\n\n                        function(ligne) {\n\n\n                            totalAccueillis +=\n                                Number(\n                                    ligne.marins_accueillis || 0\n                                );\n\n\n                            totalTransportes +=\n                                Number(\n                                    ligne.marins_transportes || 0\n                                );\n\n\n                            totalVisites +=\n                                Number(\n                                    ligne.visites_a_bord || 0\n                                );\n\n\n                            totalKm +=\n                                Number(\n                                    ligne.kilometres_parcourus || 0\n                                );\n\n                        }\n\n                    );\n\n\n                    let html =\n                        '';\n\n\n                    html +=\n                        '<div style=\"overflow-x:auto;\">';\n\n\n                    html +=\n                        '<table class=\"fnaam-table-stats\">';\n\n\n                    \/* ----------------------------------------\n                     * EN-TETE\n                     * ---------------------------------------- *\/\n\n                    html += '<thead>';\n\n                    html += '<tr>';\n\n                    html += '<th>Mois<\/th>';\n\n                    html +=\n                        '<th>Marins accueillis<\/th>';\n\n                    html +=\n                        '<th>Marins transport\u00e9s<\/th>';\n\n                    html +=\n                        '<th>Visites \u00e0 bord<\/th>';\n\n                    html +=\n                        '<th>Kilom\u00e8tres<\/th>';\n\n                    html += '<\/tr>';\n\n                    html += '<\/thead>';\n\n\n                    \/* ----------------------------------------\n                     * DONNEES\n                     * ---------------------------------------- *\/\n\n                    html += '<tbody>';\n\n\n                    lignes.forEach(\n\n                        function(ligne) {\n\n\n                            html += '<tr>';\n\n\n                            html +=\n                                '<td>' +\n                                ligne.mois +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.marins_accueillis\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.marins_transportes\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.visites_a_bord\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.kilometres_parcourus\n                                ) +\n                                '<\/td>';\n\n\n                            html += '<\/tr>';\n\n                        }\n\n                    );\n\n\n                    html += '<\/tbody>';\n\n\n                    \/* ----------------------------------------\n                     * TOTAL ANNUEL\n                     * ---------------------------------------- *\/\n\n                    html += '<tfoot>';\n\n                    html += '<tr>';\n\n\n                    html +=\n                        '<th>TOTAL ' +\n                        annee +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalAccueillis\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalTransportes\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalVisites\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalKm\n                        ) +\n                        '<\/th>';\n\n\n                    html += '<\/tr>';\n\n                    html += '<\/tfoot>';\n\n\n                    html += '<\/table>';\n\n                    html += '<\/div>';\n\n\n                    const tableau =\n                        module.querySelector(\n                            '.fnaam-tableau-global'\n                        );\n\n\n                    if (tableau) {\n\n\n                        tableau.innerHTML =\n                            html;\n\n                    }\n\n                }\n\n\n                \/* ============================================\n                 * GRAPHIQUES GLOBAUX\n                 * ============================================ *\/\n\n                if (\n\n                    mode === 'graphs'\n\n                    ||\n\n                    mode === 'globales'\n\n                    ||\n\n                    mode === 'graph_accueil'\n\n                    ||\n\n                    mode === 'graph_kilometres'\n\n                ) {\n\n\n                    const accueillis = [];\n\n                    const transportes = [];\n\n                    const visites = [];\n\n                    const kilometres = [];\n\n\n                    ordreMois.forEach(\n\n                        function(mois) {\n\n\n                            const ligne =\n                                lignes.find(\n\n                                    function(item) {\n\n                                        return (\n                                            item.mois ===\n                                            mois\n                                        );\n\n                                    }\n\n                                );\n\n\n                            if (ligne) {\n\n\n                                accueillis.push(\n\n                                    Number(\n                                        ligne.marins_accueillis || 0\n                                    )\n\n                                );\n\n\n                                transportes.push(\n\n                                    Number(\n                                        ligne.marins_transportes || 0\n                                    )\n\n                                );\n\n\n                                visites.push(\n\n                                    Number(\n                                        ligne.visites_a_bord || 0\n                                    )\n\n                                );\n\n\n                                kilometres.push(\n\n                                    Number(\n                                        ligne.kilometres_parcourus || 0\n                                    )\n\n                                );\n\n                            }\n\n\n                            else {\n\n\n                                accueillis.push(\n                                    null\n                                );\n\n\n                                transportes.push(\n                                    null\n                                );\n\n\n                                visites.push(\n                                    null\n                                );\n\n\n                                kilometres.push(\n                                    null\n                                );\n\n                            }\n\n                        }\n\n                    );\n\n\n                    attendreChart(\n\n                        function() {\n\n\n                            if (\n                                graphiqueActivite\n                            ) {\n\n                                graphiqueActivite.destroy();\n\n                            }\n\n\n                            if (\n                                graphiqueKm\n                            ) {\n\n                                graphiqueKm.destroy();\n\n                            }\n\n\n                            const canvasActivite =\n                                module.querySelector(\n                                    '.fnaam-graph-activite'\n                                );\n\n\n                            const canvasKm =\n                                module.querySelector(\n                                    '.fnaam-graph-km-global'\n                                );\n\n\n                            \/* =================================\n                             * GRAPHIQUE ACTIVITE\n                             * ================================= *\/\n\n                            if (canvasActivite) {\n\n                                graphiqueActivite =\n                                    new Chart(\n\n                                        canvasActivite,\n\n                                    {\n\n                                        type:\n                                            'line',\n\n\n                                        data: {\n\n                                            labels:\n                                                ordreMois,\n\n\n                                            datasets: [\n\n                                                {\n\n                                                    label:\n                                                        'Marins accueillis',\n\n                                                    data:\n                                                        accueillis,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                },\n\n                                                {\n\n                                                    label:\n                                                        'Marins transport\u00e9s',\n\n                                                    data:\n                                                        transportes,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                },\n\n                                                {\n\n                                                    label:\n                                                        'Visites \u00e0 bord',\n\n                                                    data:\n                                                        visites,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                }\n\n                                            ]\n\n                                        },\n\n\n                                        options: {\n\n                                            responsive:\n                                                true,\n\n                                            maintainAspectRatio:\n                                                false,\n\n                                            scales: {\n\n                                                y: {\n\n                                                    beginAtZero:\n                                                        true\n\n                                                }\n\n                                            }\n\n                                        }\n\n                                    }\n\n                                    );\n\n                            }\n\n\n                            \/* =================================\n                             * GRAPHIQUE KILOMETRES\n                             * ================================= *\/\n\n                            if (canvasKm) {\n\n                                graphiqueKm =\n                                    new Chart(\n\n                                        canvasKm,\n\n                                    {\n\n                                        type:\n                                            'line',\n\n\n                                        data: {\n\n                                            labels:\n                                                ordreMois,\n\n\n                                            datasets: [\n\n                                                {\n\n                                                    label:\n                                                        'Kilom\u00e8tres parcourus',\n\n                                                    data:\n                                                        kilometres,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                }\n\n                                            ]\n\n                                        },\n\n\n                                        options: {\n\n                                            responsive:\n                                                true,\n\n                                            maintainAspectRatio:\n                                                false,\n\n                                            scales: {\n\n                                                y: {\n\n                                                    beginAtZero:\n                                                        true\n\n                                                }\n\n                                            }\n\n                                        }\n\n                                    }\n\n                                    );\n\n                            }\n\n                        }\n\n                    );\n\n                }\n\n            }\n\n\n            \/* ================================================\n             * CHARGEMENT API PUBLIQUE\n             * ================================================ *\/\n\n            fetch(\n\n                'https:\/\/test.shapi.eu\/index.php\/wp-json\/fnaam\/v1\/stats-globales'\n\n            )\n\n\n            .then(\n\n                function(response) {\n\n\n                    if (!response.ok) {\n\n\n                        throw new Error(\n\n                            'Erreur HTTP ' +\n                            response.status\n\n                        );\n\n                    }\n\n\n                    return response.json();\n\n                }\n\n            )\n\n\n            .then(\n\n                function(data) {\n\n\n                    if (\n\n                        !Array.isArray(data)\n\n                        ||\n\n                        !data.length\n\n                    ) {\n\n\n                        const tableau =\n                            module.querySelector(\n                                '.fnaam-tableau-global'\n                            );\n\n\n                        if (tableau) {\n\n                            tableau.innerHTML =\n                                '<p>Aucune statistique disponible.<\/p>';\n\n                        }\n\n\n                        return;\n\n                    }\n\n\n                    donnees =\n                        data;\n\n\n                    \/* ========================================\n                     * ANNEES DISPONIBLES\n                     * ======================================== *\/\n\n                    const annees =\n                        [\n\n                            ...new Set(\n\n                                donnees.map(\n\n                                    function(ligne) {\n\n                                        return String(\n                                            ligne.annee\n                                        );\n\n                                    }\n\n                                )\n\n                            )\n\n                        ];\n\n\n                    annees.sort(\n\n                        function(a, b) {\n\n                            return (\n\n                                Number(b)\n\n                                -\n\n                                Number(a)\n\n                            );\n\n                        }\n\n                    );\n\n\n                    \/* ========================================\n                     * SELECTEUR\n                     * ======================================== *\/\n\n                    selectAnnee.innerHTML =\n                        '';\n\n\n                    annees.forEach(\n\n                        function(annee) {\n\n\n                            const option =\n                                document.createElement(\n                                    'option'\n                                );\n\n\n                            option.value =\n                                annee;\n\n\n                            option.textContent =\n                                annee;\n\n\n                            selectAnnee.appendChild(\n                                option\n                            );\n\n                        }\n\n                    );\n\n\n                    \/* ========================================\n                     * ANNEE LA PLUS RECENTE\n                     * ======================================== *\/\n\n                    afficherAnnee(\n                        annees[0]\n                    );\n\n                }\n\n            )\n\n\n            .catch(\n\n                function(error) {\n\n\n                    console.error(\n\n                        'FNAAM - Statistiques globales :',\n\n                        error\n\n                    );\n\n\n                    const tableau =\n                        module.querySelector(\n                            '.fnaam-tableau-global'\n                        );\n\n\n                    if (tableau) {\n\n                        tableau.innerHTML =\n                            '<p>Impossible de charger les statistiques.<\/p>';\n\n                    }\n\n                }\n\n            );\n\n\n            \/* ================================================\n             * CHANGEMENT ANNEE\n             * ================================================ *\/\n\n            selectAnnee.addEventListener(\n\n                'change',\n\n                function() {\n\n\n                    afficherAnnee(\n                        this.value\n                    );\n\n                }\n\n            );\n\n\n        }\n\n    );\n\n    <\/script>\n\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-1ea36b1 e-con e-atomic-element e-flexbox-base e-f7c47e4 \" data-id=\"1ea36b1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1ea36b1\">\n    \t\t<div class=\"elementor-element elementor-element-ee4ba7c elementor-widget elementor-widget-shortcode\" data-id=\"ee4ba7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n\n    <div\n        id=\"fnaam-global-graph_kilometres-6af54e434d495\"\n        class=\"fnaam-stats-module\"\n        data-mode=\"graph_kilometres\"\n    >\n\n\n        <!-- =================================================\n             TITRE + ANNEE\n             ================================================= -->\n\n        <div class=\"fnaam-globales-entete\">\n\n\n            \n\n            <div class=\"fnaam-choix-annee\">\n\n\n                <label>\n                    Ann\u00e9e :\n                <\/label>\n\n\n                <select\n                    class=\"fnaam-select-annee\"\n                >\n\n                    <option value=\"\">\n                        Chargement...\n                    <\/option>\n\n                <\/select>\n\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- =================================================\n             TABLEAU GLOBAL\n             ================================================= -->\n\n        \n\n        <!-- =================================================\n             GRAPHIQUES GLOBAUX\n             ================================================= -->\n\n        \n\n        \n\n            <!-- =============================================\n                 GRAPHIQUE KILOMETRES\n                 ============================================= -->\n\n            <div\n                class=\"fnaam-bloc-graphique\"\n            >\n\n\n                <h3>\n                    Kilom\u00e8tres parcourus\n                <\/h3>\n\n\n                <div\n                    class=\"fnaam-canvas-container\"\n                    style=\"\n                        position:relative;\n                        width:100%;\n                        height:420px;\n                    \"\n                >\n\n                    <canvas\n                        class=\"fnaam-graph-km-global\"\n                    ><\/canvas>\n\n                <\/div>\n\n\n            <\/div>\n\n\n        \n\n    <\/div>\n\n\n    <script>\n\n    document.addEventListener(\n\n        'DOMContentLoaded',\n\n        function() {\n\n\n            \/* ================================================\n             * MODULE\n             * ================================================ *\/\n\n            const module =\n                document.getElementById(\n                    'fnaam-global-graph_kilometres-6af54e434d495'\n                );\n\n\n            if (!module) {\n\n                return;\n\n            }\n\n\n            const mode =\n                module.dataset.mode;\n\n\n            const selectAnnee =\n                module.querySelector(\n                    '.fnaam-select-annee'\n                );\n\n\n            const ordreMois = [\n\n                'Janvier',\n                'F\u00e9vrier',\n                'Mars',\n                'Avril',\n                'Mai',\n                'Juin',\n                'Juillet',\n                'Ao\u00fbt',\n                'Septembre',\n                'Octobre',\n                'Novembre',\n                'D\u00e9cembre'\n\n            ];\n\n\n            let donnees = [];\n\n            let graphiqueActivite = null;\n\n            let graphiqueKm = null;\n\n\n            \/* ================================================\n             * FORMATAGE NOMBRES\n             * ================================================ *\/\n\n            function formatNombre(\n                nombre\n            ) {\n\n                return Number(\n                    nombre || 0\n                ).toLocaleString(\n                    'fr-FR'\n                );\n\n            }\n\n\n            \/* ================================================\n             * ATTENDRE CHART.JS\n             * ================================================ *\/\n\n            function attendreChart(\n                callback\n            ) {\n\n\n                if (\n                    typeof Chart !==\n                    'undefined'\n                ) {\n\n                    callback();\n\n                    return;\n\n                }\n\n\n                setTimeout(\n\n                    function() {\n\n                        attendreChart(\n                            callback\n                        );\n\n                    },\n\n                    100\n\n                );\n\n            }\n\n\n            \/* ================================================\n             * AFFICHER UNE ANNEE\n             * ================================================ *\/\n\n            function afficherAnnee(\n                annee\n            ) {\n\n\n                const lignes =\n                    donnees\n                    .filter(\n\n                        function(ligne) {\n\n                            return (\n\n                                String(\n                                    ligne.annee\n                                )\n\n                                ===\n\n                                String(\n                                    annee\n                                )\n\n                            );\n\n                        }\n\n                    )\n                    .sort(\n\n                        function(a, b) {\n\n                            return (\n\n                                ordreMois.indexOf(\n                                    a.mois\n                                )\n\n                                -\n\n                                ordreMois.indexOf(\n                                    b.mois\n                                )\n\n                            );\n\n                        }\n\n                    );\n\n\n                \/* ============================================\n                 * TABLEAU GLOBAL\n                 * ============================================ *\/\n\n                if (\n\n                    mode === 'data'\n\n                    ||\n\n                    mode === 'globales'\n\n                ) {\n\n\n                    let totalAccueillis =\n                        0;\n\n                    let totalTransportes =\n                        0;\n\n                    let totalVisites =\n                        0;\n\n                    let totalKm =\n                        0;\n\n\n                    lignes.forEach(\n\n                        function(ligne) {\n\n\n                            totalAccueillis +=\n                                Number(\n                                    ligne.marins_accueillis || 0\n                                );\n\n\n                            totalTransportes +=\n                                Number(\n                                    ligne.marins_transportes || 0\n                                );\n\n\n                            totalVisites +=\n                                Number(\n                                    ligne.visites_a_bord || 0\n                                );\n\n\n                            totalKm +=\n                                Number(\n                                    ligne.kilometres_parcourus || 0\n                                );\n\n                        }\n\n                    );\n\n\n                    let html =\n                        '';\n\n\n                    html +=\n                        '<div style=\"overflow-x:auto;\">';\n\n\n                    html +=\n                        '<table class=\"fnaam-table-stats\">';\n\n\n                    \/* ----------------------------------------\n                     * EN-TETE\n                     * ---------------------------------------- *\/\n\n                    html += '<thead>';\n\n                    html += '<tr>';\n\n                    html += '<th>Mois<\/th>';\n\n                    html +=\n                        '<th>Marins accueillis<\/th>';\n\n                    html +=\n                        '<th>Marins transport\u00e9s<\/th>';\n\n                    html +=\n                        '<th>Visites \u00e0 bord<\/th>';\n\n                    html +=\n                        '<th>Kilom\u00e8tres<\/th>';\n\n                    html += '<\/tr>';\n\n                    html += '<\/thead>';\n\n\n                    \/* ----------------------------------------\n                     * DONNEES\n                     * ---------------------------------------- *\/\n\n                    html += '<tbody>';\n\n\n                    lignes.forEach(\n\n                        function(ligne) {\n\n\n                            html += '<tr>';\n\n\n                            html +=\n                                '<td>' +\n                                ligne.mois +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.marins_accueillis\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.marins_transportes\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.visites_a_bord\n                                ) +\n                                '<\/td>';\n\n\n                            html +=\n                                '<td>' +\n                                formatNombre(\n                                    ligne.kilometres_parcourus\n                                ) +\n                                '<\/td>';\n\n\n                            html += '<\/tr>';\n\n                        }\n\n                    );\n\n\n                    html += '<\/tbody>';\n\n\n                    \/* ----------------------------------------\n                     * TOTAL ANNUEL\n                     * ---------------------------------------- *\/\n\n                    html += '<tfoot>';\n\n                    html += '<tr>';\n\n\n                    html +=\n                        '<th>TOTAL ' +\n                        annee +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalAccueillis\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalTransportes\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalVisites\n                        ) +\n                        '<\/th>';\n\n\n                    html +=\n                        '<th>' +\n                        formatNombre(\n                            totalKm\n                        ) +\n                        '<\/th>';\n\n\n                    html += '<\/tr>';\n\n                    html += '<\/tfoot>';\n\n\n                    html += '<\/table>';\n\n                    html += '<\/div>';\n\n\n                    const tableau =\n                        module.querySelector(\n                            '.fnaam-tableau-global'\n                        );\n\n\n                    if (tableau) {\n\n\n                        tableau.innerHTML =\n                            html;\n\n                    }\n\n                }\n\n\n                \/* ============================================\n                 * GRAPHIQUES GLOBAUX\n                 * ============================================ *\/\n\n                if (\n\n                    mode === 'graphs'\n\n                    ||\n\n                    mode === 'globales'\n\n                    ||\n\n                    mode === 'graph_accueil'\n\n                    ||\n\n                    mode === 'graph_kilometres'\n\n                ) {\n\n\n                    const accueillis = [];\n\n                    const transportes = [];\n\n                    const visites = [];\n\n                    const kilometres = [];\n\n\n                    ordreMois.forEach(\n\n                        function(mois) {\n\n\n                            const ligne =\n                                lignes.find(\n\n                                    function(item) {\n\n                                        return (\n                                            item.mois ===\n                                            mois\n                                        );\n\n                                    }\n\n                                );\n\n\n                            if (ligne) {\n\n\n                                accueillis.push(\n\n                                    Number(\n                                        ligne.marins_accueillis || 0\n                                    )\n\n                                );\n\n\n                                transportes.push(\n\n                                    Number(\n                                        ligne.marins_transportes || 0\n                                    )\n\n                                );\n\n\n                                visites.push(\n\n                                    Number(\n                                        ligne.visites_a_bord || 0\n                                    )\n\n                                );\n\n\n                                kilometres.push(\n\n                                    Number(\n                                        ligne.kilometres_parcourus || 0\n                                    )\n\n                                );\n\n                            }\n\n\n                            else {\n\n\n                                accueillis.push(\n                                    null\n                                );\n\n\n                                transportes.push(\n                                    null\n                                );\n\n\n                                visites.push(\n                                    null\n                                );\n\n\n                                kilometres.push(\n                                    null\n                                );\n\n                            }\n\n                        }\n\n                    );\n\n\n                    attendreChart(\n\n                        function() {\n\n\n                            if (\n                                graphiqueActivite\n                            ) {\n\n                                graphiqueActivite.destroy();\n\n                            }\n\n\n                            if (\n                                graphiqueKm\n                            ) {\n\n                                graphiqueKm.destroy();\n\n                            }\n\n\n                            const canvasActivite =\n                                module.querySelector(\n                                    '.fnaam-graph-activite'\n                                );\n\n\n                            const canvasKm =\n                                module.querySelector(\n                                    '.fnaam-graph-km-global'\n                                );\n\n\n                            \/* =================================\n                             * GRAPHIQUE ACTIVITE\n                             * ================================= *\/\n\n                            if (canvasActivite) {\n\n                                graphiqueActivite =\n                                    new Chart(\n\n                                        canvasActivite,\n\n                                    {\n\n                                        type:\n                                            'line',\n\n\n                                        data: {\n\n                                            labels:\n                                                ordreMois,\n\n\n                                            datasets: [\n\n                                                {\n\n                                                    label:\n                                                        'Marins accueillis',\n\n                                                    data:\n                                                        accueillis,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                },\n\n                                                {\n\n                                                    label:\n                                                        'Marins transport\u00e9s',\n\n                                                    data:\n                                                        transportes,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                },\n\n                                                {\n\n                                                    label:\n                                                        'Visites \u00e0 bord',\n\n                                                    data:\n                                                        visites,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                }\n\n                                            ]\n\n                                        },\n\n\n                                        options: {\n\n                                            responsive:\n                                                true,\n\n                                            maintainAspectRatio:\n                                                false,\n\n                                            scales: {\n\n                                                y: {\n\n                                                    beginAtZero:\n                                                        true\n\n                                                }\n\n                                            }\n\n                                        }\n\n                                    }\n\n                                    );\n\n                            }\n\n\n                            \/* =================================\n                             * GRAPHIQUE KILOMETRES\n                             * ================================= *\/\n\n                            if (canvasKm) {\n\n                                graphiqueKm =\n                                    new Chart(\n\n                                        canvasKm,\n\n                                    {\n\n                                        type:\n                                            'line',\n\n\n                                        data: {\n\n                                            labels:\n                                                ordreMois,\n\n\n                                            datasets: [\n\n                                                {\n\n                                                    label:\n                                                        'Kilom\u00e8tres parcourus',\n\n                                                    data:\n                                                        kilometres,\n\n                                                    borderWidth:\n                                                        3,\n\n                                                    tension:\n                                                        0.25\n\n                                                }\n\n                                            ]\n\n                                        },\n\n\n                                        options: {\n\n                                            responsive:\n                                                true,\n\n                                            maintainAspectRatio:\n                                                false,\n\n                                            scales: {\n\n                                                y: {\n\n                                                    beginAtZero:\n                                                        true\n\n                                                }\n\n                                            }\n\n                                        }\n\n                                    }\n\n                                    );\n\n                            }\n\n                        }\n\n                    );\n\n                }\n\n            }\n\n\n            \/* ================================================\n             * CHARGEMENT API PUBLIQUE\n             * ================================================ *\/\n\n            fetch(\n\n                'https:\/\/test.shapi.eu\/index.php\/wp-json\/fnaam\/v1\/stats-globales'\n\n            )\n\n\n            .then(\n\n                function(response) {\n\n\n                    if (!response.ok) {\n\n\n                        throw new Error(\n\n                            'Erreur HTTP ' +\n                            response.status\n\n                        );\n\n                    }\n\n\n                    return response.json();\n\n                }\n\n            )\n\n\n            .then(\n\n                function(data) {\n\n\n                    if (\n\n                        !Array.isArray(data)\n\n                        ||\n\n                        !data.length\n\n                    ) {\n\n\n                        const tableau =\n                            module.querySelector(\n                                '.fnaam-tableau-global'\n                            );\n\n\n                        if (tableau) {\n\n                            tableau.innerHTML =\n                                '<p>Aucune statistique disponible.<\/p>';\n\n                        }\n\n\n                        return;\n\n                    }\n\n\n                    donnees =\n                        data;\n\n\n                    \/* ========================================\n                     * ANNEES DISPONIBLES\n                     * ======================================== *\/\n\n                    const annees =\n                        [\n\n                            ...new Set(\n\n                                donnees.map(\n\n                                    function(ligne) {\n\n                                        return String(\n                                            ligne.annee\n                                        );\n\n                                    }\n\n                                )\n\n                            )\n\n                        ];\n\n\n                    annees.sort(\n\n                        function(a, b) {\n\n                            return (\n\n                                Number(b)\n\n                                -\n\n                                Number(a)\n\n                            );\n\n                        }\n\n                    );\n\n\n                    \/* ========================================\n                     * SELECTEUR\n                     * ======================================== *\/\n\n                    selectAnnee.innerHTML =\n                        '';\n\n\n                    annees.forEach(\n\n                        function(annee) {\n\n\n                            const option =\n                                document.createElement(\n                                    'option'\n                                );\n\n\n                            option.value =\n                                annee;\n\n\n                            option.textContent =\n                                annee;\n\n\n                            selectAnnee.appendChild(\n                                option\n                            );\n\n                        }\n\n                    );\n\n\n                    \/* ========================================\n                     * ANNEE LA PLUS RECENTE\n                     * ======================================== *\/\n\n                    afficherAnnee(\n                        annees[0]\n                    );\n\n                }\n\n            )\n\n\n            .catch(\n\n                function(error) {\n\n\n                    console.error(\n\n                        'FNAAM - Statistiques globales :',\n\n                        error\n\n                    );\n\n\n                    const tableau =\n                        module.querySelector(\n                            '.fnaam-tableau-global'\n                        );\n\n\n                    if (tableau) {\n\n                        tableau.innerHTML =\n                            '<p>Impossible de charger les statistiques.<\/p>';\n\n                    }\n\n                }\n\n            );\n\n\n            \/* ================================================\n             * CHANGEMENT ANNEE\n             * ================================================ *\/\n\n            selectAnnee.addEventListener(\n\n                'change',\n\n                function() {\n\n\n                    afficherAnnee(\n                        this.value\n                    );\n\n                }\n\n            );\n\n\n        }\n\n    );\n\n    <\/script>\n\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-db142fc e-con e-atomic-element e-flexbox-base e-2763e32 \" data-id=\"db142fc\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"db142fc\">\n    \t\t\t<h2 data-interaction-id=\"51d5b3d\" class=\"e-51d5b3d-b3877b9 e-heading-base\">Les 5 centres dont l'activit\u00e9 est la plus forte<\/h2>\n\t\t\t\t\t<p class=\"e-paragraph-base\" data-interaction-id=\"47ef299\">Le reste des centres sont class\u00e9s dans \"Autres centres\"<\/p>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2c81447 e-con e-atomic-element e-flexbox-base e-bbed2bd \" data-id=\"2c81447\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2c81447\">\n    <div class=\"elementor-element elementor-element-2990c29 e-con e-atomic-element e-flexbox-base e-bb21934 \" data-id=\"2990c29\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2990c29\">\n    \t\t<div class=\"elementor-element elementor-element-3a56211 elementor-widget elementor-widget-shortcode\" data-id=\"3a56211\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <section\n        id=\"fnaam-repartition-marins_accueillis-6af54e4350fc6\"\n        class=\"fnaam-repartition-graphique\"\n        data-indicateur=\"marins_accueillis\"\n    >\n\n        <div class=\"fnaam-repartition-entete\">\n\n            <div>\n\n                <h3>\n                    Marins accueillis                <\/h3>\n\n                <div class=\"fnaam-repartition-total\">\n                    Total national :\n                    <strong>\u2014<\/strong>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"fnaam-repartition-choix-annee\">\n\n                <label for=\"fnaam-repartition-marins_accueillis-6af54e4350fc6-annee\">\n                    Ann\u00e9e\n                <\/label>\n\n                <select\n                    id=\"fnaam-repartition-marins_accueillis-6af54e4350fc6-annee\"\n                    class=\"fnaam-repartition-select-annee\"\n                >\n                    <option value=\"\">Chargement...<\/option>\n                <\/select>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div\n            class=\"fnaam-repartition-message\"\n            aria-live=\"polite\"\n        >\n            Chargement des statistiques...\n        <\/div>\n\n\n        <div class=\"fnaam-repartition-contenu\">\n\n            <div class=\"fnaam-repartition-canvas\">\n                <canvas><\/canvas>\n            <\/div>\n\n            <div class=\"fnaam-repartition-legende\"><\/div>\n\n        <\/div>\n\n\n\n    <\/section>\n\n\n    <style>\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 {\n            width: 100%;\n            min-height: 520px;\n            box-sizing: border-box;\n            padding: 20px;\n            border: 1px solid #d7e1ea;\n            border-radius: 12px;\n            background: #ffffff;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-entete {\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 20px;\n            margin-bottom: 18px;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-entete h3 {\n            margin: 0 0 5px;\n            color: #163a5f;\n            font-size: 24px;\n            line-height: 1.2;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-total {\n            color: #53697c;\n            font-size: 14px;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-total strong {\n            color: #163a5f;\n            font-size: 17px;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-choix-annee {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex: 0 0 auto;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-choix-annee label {\n            margin: 0;\n            color: #163a5f;\n            font-weight: 600;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-select-annee {\n            min-width: 105px;\n            height: 42px;\n            padding: 6px 34px 6px 12px;\n            border: 1px solid #c8d4df;\n            border-radius: 6px;\n            background: #ffffff;\n            color: #163a5f;\n            font-size: 16px;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-message {\n            display: none;\n            margin: 0 0 15px;\n            padding: 11px 13px;\n            border-radius: 6px;\n            background: #eef5fb;\n            color: #163a5f;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-message.is-visible {\n            display: block;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-contenu {\n            display: grid;\n            grid-template-columns: minmax(250px, 46%) minmax(0, 1fr);\n            gap: 22px;\n            align-items: center;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-canvas {\n            position: relative;\n            width: 100%;\n            min-height: 320px;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-canvas canvas {\n            width: 100% !important;\n            height: 320px !important;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-legende {\n            min-width: 0;\n            display: grid;\n            gap: 6px;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-legende-ligne {\n            display: grid;\n            grid-template-columns: 12px minmax(0, 1fr) auto;\n            gap: 8px;\n            align-items: center;\n            min-width: 0;\n            font-size: 14px;\n            line-height: 1.25;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-puce {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-nom {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            color: #243a4d;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-pourcentage {\n            min-width: 54px;\n            text-align: right;\n            color: #163a5f;\n            font-weight: 600;\n            white-space: nowrap;\n            font-variant-numeric: tabular-nums;\n        }\n\n        #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-note {\n            margin: 18px 0 0;\n            color: #607487;\n            font-size: 13px;\n            line-height: 1.45;\n        }\n\n        @media (max-width: 760px) {\n\n            #fnaam-repartition-marins_accueillis-6af54e4350fc6 {\n                min-height: auto;\n            }\n\n            #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-entete {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-choix-annee {\n                justify-content: flex-start;\n            }\n\n            #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-contenu {\n                grid-template-columns: 1fr;\n            }\n\n            #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-canvas {\n                min-height: 280px;\n            }\n\n            #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-canvas canvas {\n                height: 280px !important;\n            }\n\n        }\n\n        @media (max-width: 430px) {\n\n            #fnaam-repartition-marins_accueillis-6af54e4350fc6 {\n                padding: 15px;\n            }\n\n            #fnaam-repartition-marins_accueillis-6af54e4350fc6 .fnaam-repartition-legende-ligne {\n                grid-template-columns: 12px minmax(0, 1fr) auto;\n            }\n\n        }\n\n    <\/style>\n\n\n    <script>\n\n    (function() {\n\n        const module =\n            document.getElementById(\n                \"fnaam-repartition-marins_accueillis-6af54e4350fc6\"            );\n\n        if (!module) {\n            return;\n        }\n\n        const apiUrl =\n            \"https:\\\/\\\/test.shapi.eu\\\/index.php\\\/wp-json\\\/fnaam\\\/v1\\\/repartition-centres\";\n\n        const champ =\n            \"marins_accueillis\";\n\n        const unite =\n            \"marins accueillis\";\n\n        const selectAnnee =\n            module.querySelector(\n                '.fnaam-repartition-select-annee'\n            );\n\n        const message =\n            module.querySelector(\n                '.fnaam-repartition-message'\n            );\n\n        const totalElement =\n            module.querySelector(\n                '.fnaam-repartition-total strong'\n            );\n\n        const legende =\n            module.querySelector(\n                '.fnaam-repartition-legende'\n            );\n\n        const canvas =\n            module.querySelector('canvas');\n\n        let donnees = [];\n        let graphique = null;\n\n        const couleurs = [\n            '#1687d9',\n            '#ff8617',\n            '#27ae60',\n            '#e13c3c',\n            '#7d57c2',\n            '#9a6658',\n            '#e85ca5',\n            '#737373',\n            '#e4bd00',\n            '#17a8bd',\n            '#aebfce'\n        ];\n\n\n        function formatNombre(nombre) {\n\n            return Number(\n                nombre || 0\n            ).toLocaleString('fr-FR');\n\n        }\n\n\n        function formatPourcentage(nombre) {\n\n            return Number(\n                nombre || 0\n            ).toLocaleString(\n                'fr-FR',\n                {\n                    minimumFractionDigits: 1,\n                    maximumFractionDigits: 1\n                }\n            ) + ' %';\n\n        }\n\n\n        function afficherMessage(texte) {\n\n            if (!texte) {\n\n                message.textContent = '';\n                message.classList.remove('is-visible');\n                return;\n\n            }\n\n            message.textContent = texte;\n            message.classList.add('is-visible');\n\n        }\n\n\n        function preparerRepartition(lignes) {\n\n            const classement =\n                lignes\n                .map(\n                    function(ligne) {\n\n                        return {\n                            nom: String(ligne.centre || 'Centre'),\n                            valeur: Number(ligne[champ] || 0)\n                        };\n\n                    }\n                )\n                .filter(\n                    function(ligne) {\n\n                        \/*\n                         * Un centre \u00e0 0 n'a aucune part du total :\n                         * Chart.js ne peut donc pas dessiner de tranche.\n                         * On ne conserve ici que les centres ayant une\n                         * activit\u00e9 strictement positive pour l'indicateur.\n                         *\/\n                        return ligne.valeur > 0;\n\n                    }\n                )\n                .sort(\n                    function(a, b) {\n                        return b.valeur - a.valeur;\n                    }\n                );\n\n\n            const total =\n                classement.reduce(\n                    function(somme, ligne) {\n                        return somme + ligne.valeur;\n                    },\n                    0\n                );\n\n\n            const principaux =\n                classement.slice(0, 5);\n\n            const autres =\n                classement.slice(5);\n\n\n            if (autres.length) {\n\n                principaux.push(\n                    {\n                        nom:\n                            'Autres centres (' +\n                            autres.length +\n                            ')',\n\n                        valeur:\n                            autres.reduce(\n                                function(somme, ligne) {\n                                    return somme + ligne.valeur;\n                                },\n                                0\n                            )\n                    }\n                );\n\n            }\n\n\n            return {\n                total: total,\n                lignes: principaux\n            };\n\n        }\n\n\n        const pluginTotalCentre = {\n\n            id:\n                'fnaamTotalCentre_' +\n                \"marins_accueillis\" +\n                '_' +\n                \"ec9cc236\",\n\n            afterDraw:\n                function(chart) {\n\n                    if (!chart || !chart.ctx || !chart.chartArea) {\n                        return;\n                    }\n\n                    const total =\n                        chart.$fnaamTotal || 0;\n\n                    const ctx =\n                        chart.ctx;\n\n                    const zone =\n                        chart.chartArea;\n\n                    const x =\n                        (zone.left + zone.right) \/ 2;\n\n                    const y =\n                        (zone.top + zone.bottom) \/ 2;\n\n                    ctx.save();\n\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n\n                    ctx.fillStyle = '#163a5f';\n                    ctx.font = '700 20px Arial, sans-serif';\n                    ctx.fillText(\n                        formatNombre(total),\n                        x,\n                        y - 8\n                    );\n\n                    ctx.fillStyle = '#607487';\n                    ctx.font = '12px Arial, sans-serif';\n                    ctx.fillText(\n                        unite,\n                        x,\n                        y + 15\n                    );\n\n                    ctx.restore();\n\n                }\n\n        };\n\n\n        const pluginPourcentagesAnneau = {\n\n            id:\n                'fnaamPourcentagesAnneau_' +\n                \"marins_accueillis\" +\n                '_' +\n                \"ec9cc236\",\n\n            afterDatasetsDraw:\n                function(chart) {\n\n                    if (!chart || !chart.ctx || !chart.data || !chart.data.datasets.length) {\n                        return;\n                    }\n\n                    const dataset =\n                        chart.data.datasets[0];\n\n                    const valeurs =\n                        Array.isArray(dataset.data)\n                            ? dataset.data.map(function(v) { return Number(v || 0); })\n                            : [];\n\n                    const total =\n                        valeurs.reduce(function(somme, valeur) {\n                            return somme + valeur;\n                        }, 0);\n\n                    if (!total) {\n                        return;\n                    }\n\n                    const meta =\n                        chart.getDatasetMeta(0);\n\n                    const ctx =\n                        chart.ctx;\n\n                    ctx.save();\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n                    ctx.fillStyle = '#ffffff';\n                    ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';\n                    ctx.lineWidth = 2;\n                    ctx.font = '700 11px Arial, sans-serif';\n\n                    meta.data.forEach(function(arc, index) {\n\n                        const valeur =\n                            valeurs[index] || 0;\n\n                        if (valeur <= 0 || !arc || typeof arc.getCenterPoint !== 'function') {\n                            return;\n                        }\n\n                        const pourcentage =\n                            (valeur \/ total) * 100;\n\n                        const point =\n                            arc.getCenterPoint();\n\n                        const texte =\n                            formatPourcentage(pourcentage);\n\n                        ctx.strokeText(texte, point.x, point.y);\n                        ctx.fillText(texte, point.x, point.y);\n\n                    });\n\n                    ctx.restore();\n\n                }\n\n        };\n\n\n        function construireLegende(repartition) {\n\n            legende.innerHTML = '';\n\n            repartition.lignes.forEach(\n                function(ligne, index) {\n\n                    const item = document.createElement('div');\n                    item.className = 'fnaam-repartition-legende-ligne';\n\n                    const puce = document.createElement('span');\n                    puce.className = 'fnaam-repartition-puce';\n                    puce.style.backgroundColor =\n                        couleurs[index % couleurs.length];\n\n                    const nom = document.createElement('span');\n                    nom.className = 'fnaam-repartition-nom';\n                    nom.textContent = ligne.nom;\n                    nom.title = ligne.nom;\n\n                    item.appendChild(puce);\n                    item.appendChild(nom);\n\n                    legende.appendChild(item);\n\n                }\n            );\n\n        }\n\n\n        function afficherAnnee(annee) {\n\n            const lignes =\n                donnees.filter(\n                    function(ligne) {\n\n                        return String(ligne.annee) === String(annee);\n\n                    }\n                );\n\n\n            if (!lignes.length) {\n\n                afficherMessage(\n                    'Aucune statistique disponible pour cette ann\u00e9e.'\n                );\n\n                totalElement.textContent = '0';\n                legende.innerHTML =\n                    '<p style=\"margin:0;color:#607487;\">Aucune donn\u00e9e.<\/p>';\n\n                if (graphique) {\n                    graphique.destroy();\n                    graphique = null;\n                }\n\n                return;\n            }\n\n\n            afficherMessage('');\n\n            const repartition =\n                preparerRepartition(lignes);\n\n            totalElement.textContent =\n                formatNombre(repartition.total);\n\n            construireLegende(repartition);\n\n\n            if (graphique) {\n                graphique.destroy();\n                graphique = null;\n            }\n\n\n            if (!repartition.total || !repartition.lignes.length) {\n\n                legende.innerHTML =\n                    '<p style=\"margin:0;color:#607487;\">Aucune donn\u00e9e pour cet indicateur.<\/p>';\n\n                return;\n            }\n\n\n            graphique =\n                new Chart(\n                    canvas,\n                    {\n                        type: 'doughnut',\n\n                        data: {\n\n                            labels:\n                                repartition.lignes.map(\n                                    function(ligne) {\n                                        return ligne.nom;\n                                    }\n                                ),\n\n                            datasets: [\n                                {\n                                    data:\n                                        repartition.lignes.map(\n                                            function(ligne) {\n                                                return ligne.valeur;\n                                            }\n                                        ),\n\n                                    backgroundColor:\n                                        repartition.lignes.map(\n                                            function(ligne, index) {\n                                                return couleurs[\n                                                    index % couleurs.length\n                                                ];\n                                            }\n                                        ),\n\n                                    borderColor: '#ffffff',\n                                    borderWidth: 2,\n                                    hoverOffset: 5\n                                }\n                            ]\n                        },\n\n                        options: {\n\n                            responsive: true,\n                            maintainAspectRatio: false,\n                            cutout: '58%',\n\n                            plugins: {\n\n                                legend: {\n                                    display: false\n                                },\n\n                                tooltip: {\n\n                                    callbacks: {\n\n                                        label:\n                                            function(context) {\n\n                                                const valeur =\n                                                    Number(context.raw || 0);\n\n                                                const pct =\n                                                    repartition.total > 0\n                                                        ? (\n                                                            valeur \/\n                                                            repartition.total\n                                                        ) * 100\n                                                        : 0;\n\n                                                return (\n                                                    context.label +\n                                                    ' : ' +\n                                                    formatNombre(valeur) +\n                                                    ' (' +\n                                                    formatPourcentage(pct) +\n                                                    ')'\n                                                );\n\n                                            }\n\n                                    }\n\n                                }\n\n                            }\n\n                        },\n\n                        plugins: [\n                            pluginTotalCentre,\n                            pluginPourcentagesAnneau\n                        ]\n                    }\n                );\n\n            graphique.$fnaamTotal =\n                repartition.total;\n\n            graphique.update();\n\n        }\n\n\n        function remplirAnnees(anneeAConserver) {\n\n            const annees =\n                Array.from(\n                    new Set(\n                        donnees.map(\n                            function(ligne) {\n                                return Number(ligne.annee);\n                            }\n                        )\n                    )\n                )\n                .filter(\n                    function(annee) {\n                        return annee > 0;\n                    }\n                )\n                .sort(\n                    function(a, b) {\n                        return b - a;\n                    }\n                );\n\n\n            selectAnnee.innerHTML = '';\n\n\n            if (!annees.length) {\n\n                const option = document.createElement('option');\n                option.value = '';\n                option.textContent = 'Aucune ann\u00e9e';\n                selectAnnee.appendChild(option);\n\n                afficherMessage('Aucune statistique disponible.');\n                return;\n            }\n\n\n            annees.forEach(\n                function(annee) {\n\n                    const option = document.createElement('option');\n                    option.value = String(annee);\n                    option.textContent = String(annee);\n                    selectAnnee.appendChild(option);\n\n                }\n            );\n\n\n            const anneeValide =\n                annees.includes(Number(anneeAConserver))\n                    ? String(anneeAConserver)\n                    : String(annees[0]);\n\n            selectAnnee.value = anneeValide;\n\n            afficherAnnee(anneeValide);\n\n        }\n\n\n        async function chargerDonnees(conserverAnnee) {\n\n            try {\n\n                const separateur =\n                    apiUrl.includes('?')\n                        ? '&'\n                        : '?';\n\n                const reponse =\n                    await fetch(\n                        apiUrl +\n                        separateur +\n                        '_t=' +\n                        Date.now(),\n                        {\n                            cache: 'no-store'\n                        }\n                    );\n\n                if (!reponse.ok) {\n\n                    throw new Error(\n                        'Erreur HTTP ' +\n                        reponse.status\n                    );\n\n                }\n\n                const json =\n                    await reponse.json();\n\n                if (!Array.isArray(json)) {\n                    throw new Error('R\u00e9ponse API invalide');\n                }\n\n                donnees = json;\n\n                remplirAnnees(\n                    conserverAnnee ||\n                    selectAnnee.value\n                );\n\n            }\n\n            catch (erreur) {\n\n                console.error(\n                    'FNAAM - R\u00e9partition centres :',\n                    erreur\n                );\n\n                afficherMessage(\n                    'Impossible de charger les statistiques pour le moment.'\n                );\n\n            }\n\n        }\n\n\n        selectAnnee.addEventListener(\n            'change',\n            function() {\n                afficherAnnee(selectAnnee.value);\n            }\n        );\n\n\n        chargerDonnees('');\n\n\n        const actualisation =\n            window.setInterval(\n                function() {\n                    chargerDonnees(selectAnnee.value);\n                },\n                60000\n            );\n\n\n        const observateur =\n            new MutationObserver(\n                function() {\n\n                    if (!document.body.contains(module)) {\n\n                        window.clearInterval(actualisation);\n\n                        if (graphique) {\n                            graphique.destroy();\n                            graphique = null;\n                        }\n\n                        observateur.disconnect();\n                    }\n\n                }\n            );\n\n\n        observateur.observe(\n            document.body,\n            {\n                childList: true,\n                subtree: true\n            }\n        );\n\n    })();\n\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-3f27d2e e-con e-atomic-element e-flexbox-base e-61b2ecf \" data-id=\"3f27d2e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3f27d2e\">\n    \t\t<div class=\"elementor-element elementor-element-4a45255 elementor-widget elementor-widget-shortcode\" data-id=\"4a45255\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <section\n        id=\"fnaam-repartition-marins_transportes-6af54e4351e65\"\n        class=\"fnaam-repartition-graphique\"\n        data-indicateur=\"marins_transportes\"\n    >\n\n        <div class=\"fnaam-repartition-entete\">\n\n            <div>\n\n                <h3>\n                    Marins transport\u00e9s                <\/h3>\n\n                <div class=\"fnaam-repartition-total\">\n                    Total national :\n                    <strong>\u2014<\/strong>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"fnaam-repartition-choix-annee\">\n\n                <label for=\"fnaam-repartition-marins_transportes-6af54e4351e65-annee\">\n                    Ann\u00e9e\n                <\/label>\n\n                <select\n                    id=\"fnaam-repartition-marins_transportes-6af54e4351e65-annee\"\n                    class=\"fnaam-repartition-select-annee\"\n                >\n                    <option value=\"\">Chargement...<\/option>\n                <\/select>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div\n            class=\"fnaam-repartition-message\"\n            aria-live=\"polite\"\n        >\n            Chargement des statistiques...\n        <\/div>\n\n\n        <div class=\"fnaam-repartition-contenu\">\n\n            <div class=\"fnaam-repartition-canvas\">\n                <canvas><\/canvas>\n            <\/div>\n\n            <div class=\"fnaam-repartition-legende\"><\/div>\n\n        <\/div>\n\n\n\n    <\/section>\n\n\n    <style>\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 {\n            width: 100%;\n            min-height: 520px;\n            box-sizing: border-box;\n            padding: 20px;\n            border: 1px solid #d7e1ea;\n            border-radius: 12px;\n            background: #ffffff;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-entete {\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 20px;\n            margin-bottom: 18px;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-entete h3 {\n            margin: 0 0 5px;\n            color: #163a5f;\n            font-size: 24px;\n            line-height: 1.2;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-total {\n            color: #53697c;\n            font-size: 14px;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-total strong {\n            color: #163a5f;\n            font-size: 17px;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-choix-annee {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex: 0 0 auto;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-choix-annee label {\n            margin: 0;\n            color: #163a5f;\n            font-weight: 600;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-select-annee {\n            min-width: 105px;\n            height: 42px;\n            padding: 6px 34px 6px 12px;\n            border: 1px solid #c8d4df;\n            border-radius: 6px;\n            background: #ffffff;\n            color: #163a5f;\n            font-size: 16px;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-message {\n            display: none;\n            margin: 0 0 15px;\n            padding: 11px 13px;\n            border-radius: 6px;\n            background: #eef5fb;\n            color: #163a5f;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-message.is-visible {\n            display: block;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-contenu {\n            display: grid;\n            grid-template-columns: minmax(250px, 46%) minmax(0, 1fr);\n            gap: 22px;\n            align-items: center;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-canvas {\n            position: relative;\n            width: 100%;\n            min-height: 320px;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-canvas canvas {\n            width: 100% !important;\n            height: 320px !important;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-legende {\n            min-width: 0;\n            display: grid;\n            gap: 6px;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-legende-ligne {\n            display: grid;\n            grid-template-columns: 12px minmax(0, 1fr) auto;\n            gap: 8px;\n            align-items: center;\n            min-width: 0;\n            font-size: 14px;\n            line-height: 1.25;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-puce {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-nom {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            color: #243a4d;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-pourcentage {\n            min-width: 54px;\n            text-align: right;\n            color: #163a5f;\n            font-weight: 600;\n            white-space: nowrap;\n            font-variant-numeric: tabular-nums;\n        }\n\n        #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-note {\n            margin: 18px 0 0;\n            color: #607487;\n            font-size: 13px;\n            line-height: 1.45;\n        }\n\n        @media (max-width: 760px) {\n\n            #fnaam-repartition-marins_transportes-6af54e4351e65 {\n                min-height: auto;\n            }\n\n            #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-entete {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-choix-annee {\n                justify-content: flex-start;\n            }\n\n            #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-contenu {\n                grid-template-columns: 1fr;\n            }\n\n            #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-canvas {\n                min-height: 280px;\n            }\n\n            #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-canvas canvas {\n                height: 280px !important;\n            }\n\n        }\n\n        @media (max-width: 430px) {\n\n            #fnaam-repartition-marins_transportes-6af54e4351e65 {\n                padding: 15px;\n            }\n\n            #fnaam-repartition-marins_transportes-6af54e4351e65 .fnaam-repartition-legende-ligne {\n                grid-template-columns: 12px minmax(0, 1fr) auto;\n            }\n\n        }\n\n    <\/style>\n\n\n    <script>\n\n    (function() {\n\n        const module =\n            document.getElementById(\n                \"fnaam-repartition-marins_transportes-6af54e4351e65\"            );\n\n        if (!module) {\n            return;\n        }\n\n        const apiUrl =\n            \"https:\\\/\\\/test.shapi.eu\\\/index.php\\\/wp-json\\\/fnaam\\\/v1\\\/repartition-centres\";\n\n        const champ =\n            \"marins_transportes\";\n\n        const unite =\n            \"marins transport\\u00e9s\";\n\n        const selectAnnee =\n            module.querySelector(\n                '.fnaam-repartition-select-annee'\n            );\n\n        const message =\n            module.querySelector(\n                '.fnaam-repartition-message'\n            );\n\n        const totalElement =\n            module.querySelector(\n                '.fnaam-repartition-total strong'\n            );\n\n        const legende =\n            module.querySelector(\n                '.fnaam-repartition-legende'\n            );\n\n        const canvas =\n            module.querySelector('canvas');\n\n        let donnees = [];\n        let graphique = null;\n\n        const couleurs = [\n            '#1687d9',\n            '#ff8617',\n            '#27ae60',\n            '#e13c3c',\n            '#7d57c2',\n            '#9a6658',\n            '#e85ca5',\n            '#737373',\n            '#e4bd00',\n            '#17a8bd',\n            '#aebfce'\n        ];\n\n\n        function formatNombre(nombre) {\n\n            return Number(\n                nombre || 0\n            ).toLocaleString('fr-FR');\n\n        }\n\n\n        function formatPourcentage(nombre) {\n\n            return Number(\n                nombre || 0\n            ).toLocaleString(\n                'fr-FR',\n                {\n                    minimumFractionDigits: 1,\n                    maximumFractionDigits: 1\n                }\n            ) + ' %';\n\n        }\n\n\n        function afficherMessage(texte) {\n\n            if (!texte) {\n\n                message.textContent = '';\n                message.classList.remove('is-visible');\n                return;\n\n            }\n\n            message.textContent = texte;\n            message.classList.add('is-visible');\n\n        }\n\n\n        function preparerRepartition(lignes) {\n\n            const classement =\n                lignes\n                .map(\n                    function(ligne) {\n\n                        return {\n                            nom: String(ligne.centre || 'Centre'),\n                            valeur: Number(ligne[champ] || 0)\n                        };\n\n                    }\n                )\n                .filter(\n                    function(ligne) {\n\n                        \/*\n                         * Un centre \u00e0 0 n'a aucune part du total :\n                         * Chart.js ne peut donc pas dessiner de tranche.\n                         * On ne conserve ici que les centres ayant une\n                         * activit\u00e9 strictement positive pour l'indicateur.\n                         *\/\n                        return ligne.valeur > 0;\n\n                    }\n                )\n                .sort(\n                    function(a, b) {\n                        return b.valeur - a.valeur;\n                    }\n                );\n\n\n            const total =\n                classement.reduce(\n                    function(somme, ligne) {\n                        return somme + ligne.valeur;\n                    },\n                    0\n                );\n\n\n            const principaux =\n                classement.slice(0, 5);\n\n            const autres =\n                classement.slice(5);\n\n\n            if (autres.length) {\n\n                principaux.push(\n                    {\n                        nom:\n                            'Autres centres (' +\n                            autres.length +\n                            ')',\n\n                        valeur:\n                            autres.reduce(\n                                function(somme, ligne) {\n                                    return somme + ligne.valeur;\n                                },\n                                0\n                            )\n                    }\n                );\n\n            }\n\n\n            return {\n                total: total,\n                lignes: principaux\n            };\n\n        }\n\n\n        const pluginTotalCentre = {\n\n            id:\n                'fnaamTotalCentre_' +\n                \"marins_transportes\" +\n                '_' +\n                \"9df420e1\",\n\n            afterDraw:\n                function(chart) {\n\n                    if (!chart || !chart.ctx || !chart.chartArea) {\n                        return;\n                    }\n\n                    const total =\n                        chart.$fnaamTotal || 0;\n\n                    const ctx =\n                        chart.ctx;\n\n                    const zone =\n                        chart.chartArea;\n\n                    const x =\n                        (zone.left + zone.right) \/ 2;\n\n                    const y =\n                        (zone.top + zone.bottom) \/ 2;\n\n                    ctx.save();\n\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n\n                    ctx.fillStyle = '#163a5f';\n                    ctx.font = '700 20px Arial, sans-serif';\n                    ctx.fillText(\n                        formatNombre(total),\n                        x,\n                        y - 8\n                    );\n\n                    ctx.fillStyle = '#607487';\n                    ctx.font = '12px Arial, sans-serif';\n                    ctx.fillText(\n                        unite,\n                        x,\n                        y + 15\n                    );\n\n                    ctx.restore();\n\n                }\n\n        };\n\n\n        const pluginPourcentagesAnneau = {\n\n            id:\n                'fnaamPourcentagesAnneau_' +\n                \"marins_transportes\" +\n                '_' +\n                \"9df420e1\",\n\n            afterDatasetsDraw:\n                function(chart) {\n\n                    if (!chart || !chart.ctx || !chart.data || !chart.data.datasets.length) {\n                        return;\n                    }\n\n                    const dataset =\n                        chart.data.datasets[0];\n\n                    const valeurs =\n                        Array.isArray(dataset.data)\n                            ? dataset.data.map(function(v) { return Number(v || 0); })\n                            : [];\n\n                    const total =\n                        valeurs.reduce(function(somme, valeur) {\n                            return somme + valeur;\n                        }, 0);\n\n                    if (!total) {\n                        return;\n                    }\n\n                    const meta =\n                        chart.getDatasetMeta(0);\n\n                    const ctx =\n                        chart.ctx;\n\n                    ctx.save();\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n                    ctx.fillStyle = '#ffffff';\n                    ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';\n                    ctx.lineWidth = 2;\n                    ctx.font = '700 11px Arial, sans-serif';\n\n                    meta.data.forEach(function(arc, index) {\n\n                        const valeur =\n                            valeurs[index] || 0;\n\n                        if (valeur <= 0 || !arc || typeof arc.getCenterPoint !== 'function') {\n                            return;\n                        }\n\n                        const pourcentage =\n                            (valeur \/ total) * 100;\n\n                        const point =\n                            arc.getCenterPoint();\n\n                        const texte =\n                            formatPourcentage(pourcentage);\n\n                        ctx.strokeText(texte, point.x, point.y);\n                        ctx.fillText(texte, point.x, point.y);\n\n                    });\n\n                    ctx.restore();\n\n                }\n\n        };\n\n\n        function construireLegende(repartition) {\n\n            legende.innerHTML = '';\n\n            repartition.lignes.forEach(\n                function(ligne, index) {\n\n                    const item = document.createElement('div');\n                    item.className = 'fnaam-repartition-legende-ligne';\n\n                    const puce = document.createElement('span');\n                    puce.className = 'fnaam-repartition-puce';\n                    puce.style.backgroundColor =\n                        couleurs[index % couleurs.length];\n\n                    const nom = document.createElement('span');\n                    nom.className = 'fnaam-repartition-nom';\n                    nom.textContent = ligne.nom;\n                    nom.title = ligne.nom;\n\n                    item.appendChild(puce);\n                    item.appendChild(nom);\n\n                    legende.appendChild(item);\n\n                }\n            );\n\n        }\n\n\n        function afficherAnnee(annee) {\n\n            const lignes =\n                donnees.filter(\n                    function(ligne) {\n\n                        return String(ligne.annee) === String(annee);\n\n                    }\n                );\n\n\n            if (!lignes.length) {\n\n                afficherMessage(\n                    'Aucune statistique disponible pour cette ann\u00e9e.'\n                );\n\n                totalElement.textContent = '0';\n                legende.innerHTML =\n                    '<p style=\"margin:0;color:#607487;\">Aucune donn\u00e9e.<\/p>';\n\n                if (graphique) {\n                    graphique.destroy();\n                    graphique = null;\n                }\n\n                return;\n            }\n\n\n            afficherMessage('');\n\n            const repartition =\n                preparerRepartition(lignes);\n\n            totalElement.textContent =\n                formatNombre(repartition.total);\n\n            construireLegende(repartition);\n\n\n            if (graphique) {\n                graphique.destroy();\n                graphique = null;\n            }\n\n\n            if (!repartition.total || !repartition.lignes.length) {\n\n                legende.innerHTML =\n                    '<p style=\"margin:0;color:#607487;\">Aucune donn\u00e9e pour cet indicateur.<\/p>';\n\n                return;\n            }\n\n\n            graphique =\n                new Chart(\n                    canvas,\n                    {\n                        type: 'doughnut',\n\n                        data: {\n\n                            labels:\n                                repartition.lignes.map(\n                                    function(ligne) {\n                                        return ligne.nom;\n                                    }\n                                ),\n\n                            datasets: [\n                                {\n                                    data:\n                                        repartition.lignes.map(\n                                            function(ligne) {\n                                                return ligne.valeur;\n                                            }\n                                        ),\n\n                                    backgroundColor:\n                                        repartition.lignes.map(\n                                            function(ligne, index) {\n                                                return couleurs[\n                                                    index % couleurs.length\n                                                ];\n                                            }\n                                        ),\n\n                                    borderColor: '#ffffff',\n                                    borderWidth: 2,\n                                    hoverOffset: 5\n                                }\n                            ]\n                        },\n\n                        options: {\n\n                            responsive: true,\n                            maintainAspectRatio: false,\n                            cutout: '58%',\n\n                            plugins: {\n\n                                legend: {\n                                    display: false\n                                },\n\n                                tooltip: {\n\n                                    callbacks: {\n\n                                        label:\n                                            function(context) {\n\n                                                const valeur =\n                                                    Number(context.raw || 0);\n\n                                                const pct =\n                                                    repartition.total > 0\n                                                        ? (\n                                                            valeur \/\n                                                            repartition.total\n                                                        ) * 100\n                                                        : 0;\n\n                                                return (\n                                                    context.label +\n                                                    ' : ' +\n                                                    formatNombre(valeur) +\n                                                    ' (' +\n                                                    formatPourcentage(pct) +\n                                                    ')'\n                                                );\n\n                                            }\n\n                                    }\n\n                                }\n\n                            }\n\n                        },\n\n                        plugins: [\n                            pluginTotalCentre,\n                            pluginPourcentagesAnneau\n                        ]\n                    }\n                );\n\n            graphique.$fnaamTotal =\n                repartition.total;\n\n            graphique.update();\n\n        }\n\n\n        function remplirAnnees(anneeAConserver) {\n\n            const annees =\n                Array.from(\n                    new Set(\n                        donnees.map(\n                            function(ligne) {\n                                return Number(ligne.annee);\n                            }\n                        )\n                    )\n                )\n                .filter(\n                    function(annee) {\n                        return annee > 0;\n                    }\n                )\n                .sort(\n                    function(a, b) {\n                        return b - a;\n                    }\n                );\n\n\n            selectAnnee.innerHTML = '';\n\n\n            if (!annees.length) {\n\n                const option = document.createElement('option');\n                option.value = '';\n                option.textContent = 'Aucune ann\u00e9e';\n                selectAnnee.appendChild(option);\n\n                afficherMessage('Aucune statistique disponible.');\n                return;\n            }\n\n\n            annees.forEach(\n                function(annee) {\n\n                    const option = document.createElement('option');\n                    option.value = String(annee);\n                    option.textContent = String(annee);\n                    selectAnnee.appendChild(option);\n\n                }\n            );\n\n\n            const anneeValide =\n                annees.includes(Number(anneeAConserver))\n                    ? String(anneeAConserver)\n                    : String(annees[0]);\n\n            selectAnnee.value = anneeValide;\n\n            afficherAnnee(anneeValide);\n\n        }\n\n\n        async function chargerDonnees(conserverAnnee) {\n\n            try {\n\n                const separateur =\n                    apiUrl.includes('?')\n                        ? '&'\n                        : '?';\n\n                const reponse =\n                    await fetch(\n                        apiUrl +\n                        separateur +\n                        '_t=' +\n                        Date.now(),\n                        {\n                            cache: 'no-store'\n                        }\n                    );\n\n                if (!reponse.ok) {\n\n                    throw new Error(\n                        'Erreur HTTP ' +\n                        reponse.status\n                    );\n\n                }\n\n                const json =\n                    await reponse.json();\n\n                if (!Array.isArray(json)) {\n                    throw new Error('R\u00e9ponse API invalide');\n                }\n\n                donnees = json;\n\n                remplirAnnees(\n                    conserverAnnee ||\n                    selectAnnee.value\n                );\n\n            }\n\n            catch (erreur) {\n\n                console.error(\n                    'FNAAM - R\u00e9partition centres :',\n                    erreur\n                );\n\n                afficherMessage(\n                    'Impossible de charger les statistiques pour le moment.'\n                );\n\n            }\n\n        }\n\n\n        selectAnnee.addEventListener(\n            'change',\n            function() {\n                afficherAnnee(selectAnnee.value);\n            }\n        );\n\n\n        chargerDonnees('');\n\n\n        const actualisation =\n            window.setInterval(\n                function() {\n                    chargerDonnees(selectAnnee.value);\n                },\n                60000\n            );\n\n\n        const observateur =\n            new MutationObserver(\n                function() {\n\n                    if (!document.body.contains(module)) {\n\n                        window.clearInterval(actualisation);\n\n                        if (graphique) {\n                            graphique.destroy();\n                            graphique = null;\n                        }\n\n                        observateur.disconnect();\n                    }\n\n                }\n            );\n\n\n        observateur.observe(\n            document.body,\n            {\n                childList: true,\n                subtree: true\n            }\n        );\n\n    })();\n\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-7359df1 e-con e-atomic-element e-flexbox-base e-9a8173c \" data-id=\"7359df1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7359df1\">\n    \t\t<div class=\"elementor-element elementor-element-f43b0f0 elementor-widget elementor-widget-shortcode\" data-id=\"f43b0f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <section\n        id=\"fnaam-repartition-visites_a_bord-6af54e4352d7f\"\n        class=\"fnaam-repartition-graphique\"\n        data-indicateur=\"visites_a_bord\"\n    >\n\n        <div class=\"fnaam-repartition-entete\">\n\n            <div>\n\n                <h3>\n                    Visites \u00e0 bord                <\/h3>\n\n                <div class=\"fnaam-repartition-total\">\n                    Total national :\n                    <strong>\u2014<\/strong>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"fnaam-repartition-choix-annee\">\n\n                <label for=\"fnaam-repartition-visites_a_bord-6af54e4352d7f-annee\">\n                    Ann\u00e9e\n                <\/label>\n\n                <select\n                    id=\"fnaam-repartition-visites_a_bord-6af54e4352d7f-annee\"\n                    class=\"fnaam-repartition-select-annee\"\n                >\n                    <option value=\"\">Chargement...<\/option>\n                <\/select>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div\n            class=\"fnaam-repartition-message\"\n            aria-live=\"polite\"\n        >\n            Chargement des statistiques...\n        <\/div>\n\n\n        <div class=\"fnaam-repartition-contenu\">\n\n            <div class=\"fnaam-repartition-canvas\">\n                <canvas><\/canvas>\n            <\/div>\n\n            <div class=\"fnaam-repartition-legende\"><\/div>\n\n        <\/div>\n\n\n\n    <\/section>\n\n\n    <style>\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f {\n            width: 100%;\n            min-height: 520px;\n            box-sizing: border-box;\n            padding: 20px;\n            border: 1px solid #d7e1ea;\n            border-radius: 12px;\n            background: #ffffff;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-entete {\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 20px;\n            margin-bottom: 18px;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-entete h3 {\n            margin: 0 0 5px;\n            color: #163a5f;\n            font-size: 24px;\n            line-height: 1.2;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-total {\n            color: #53697c;\n            font-size: 14px;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-total strong {\n            color: #163a5f;\n            font-size: 17px;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-choix-annee {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex: 0 0 auto;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-choix-annee label {\n            margin: 0;\n            color: #163a5f;\n            font-weight: 600;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-select-annee {\n            min-width: 105px;\n            height: 42px;\n            padding: 6px 34px 6px 12px;\n            border: 1px solid #c8d4df;\n            border-radius: 6px;\n            background: #ffffff;\n            color: #163a5f;\n            font-size: 16px;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-message {\n            display: none;\n            margin: 0 0 15px;\n            padding: 11px 13px;\n            border-radius: 6px;\n            background: #eef5fb;\n            color: #163a5f;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-message.is-visible {\n            display: block;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-contenu {\n            display: grid;\n            grid-template-columns: minmax(250px, 46%) minmax(0, 1fr);\n            gap: 22px;\n            align-items: center;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-canvas {\n            position: relative;\n            width: 100%;\n            min-height: 320px;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-canvas canvas {\n            width: 100% !important;\n            height: 320px !important;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-legende {\n            min-width: 0;\n            display: grid;\n            gap: 6px;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-legende-ligne {\n            display: grid;\n            grid-template-columns: 12px minmax(0, 1fr) auto;\n            gap: 8px;\n            align-items: center;\n            min-width: 0;\n            font-size: 14px;\n            line-height: 1.25;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-puce {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-nom {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            color: #243a4d;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-pourcentage {\n            min-width: 54px;\n            text-align: right;\n            color: #163a5f;\n            font-weight: 600;\n            white-space: nowrap;\n            font-variant-numeric: tabular-nums;\n        }\n\n        #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-note {\n            margin: 18px 0 0;\n            color: #607487;\n            font-size: 13px;\n            line-height: 1.45;\n        }\n\n        @media (max-width: 760px) {\n\n            #fnaam-repartition-visites_a_bord-6af54e4352d7f {\n                min-height: auto;\n            }\n\n            #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-entete {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-choix-annee {\n                justify-content: flex-start;\n            }\n\n            #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-contenu {\n                grid-template-columns: 1fr;\n            }\n\n            #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-canvas {\n                min-height: 280px;\n            }\n\n            #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-canvas canvas {\n                height: 280px !important;\n            }\n\n        }\n\n        @media (max-width: 430px) {\n\n            #fnaam-repartition-visites_a_bord-6af54e4352d7f {\n                padding: 15px;\n            }\n\n            #fnaam-repartition-visites_a_bord-6af54e4352d7f .fnaam-repartition-legende-ligne {\n                grid-template-columns: 12px minmax(0, 1fr) auto;\n            }\n\n        }\n\n    <\/style>\n\n\n    <script>\n\n    (function() {\n\n        const module =\n            document.getElementById(\n                \"fnaam-repartition-visites_a_bord-6af54e4352d7f\"            );\n\n        if (!module) {\n            return;\n        }\n\n        const apiUrl =\n            \"https:\\\/\\\/test.shapi.eu\\\/index.php\\\/wp-json\\\/fnaam\\\/v1\\\/repartition-centres\";\n\n        const champ =\n            \"visites_a_bord\";\n\n        const unite =\n            \"visites \\u00e0 bord\";\n\n        const selectAnnee =\n            module.querySelector(\n                '.fnaam-repartition-select-annee'\n            );\n\n        const message =\n            module.querySelector(\n                '.fnaam-repartition-message'\n            );\n\n        const totalElement =\n            module.querySelector(\n                '.fnaam-repartition-total strong'\n            );\n\n        const legende =\n            module.querySelector(\n                '.fnaam-repartition-legende'\n            );\n\n        const canvas =\n            module.querySelector('canvas');\n\n        let donnees = [];\n        let graphique = null;\n\n        const couleurs = [\n            '#1687d9',\n            '#ff8617',\n            '#27ae60',\n            '#e13c3c',\n            '#7d57c2',\n            '#9a6658',\n            '#e85ca5',\n            '#737373',\n            '#e4bd00',\n            '#17a8bd',\n            '#aebfce'\n        ];\n\n\n        function formatNombre(nombre) {\n\n            return Number(\n                nombre || 0\n            ).toLocaleString('fr-FR');\n\n        }\n\n\n        function formatPourcentage(nombre) {\n\n            return Number(\n                nombre || 0\n            ).toLocaleString(\n                'fr-FR',\n                {\n                    minimumFractionDigits: 1,\n                    maximumFractionDigits: 1\n                }\n            ) + ' %';\n\n        }\n\n\n        function afficherMessage(texte) {\n\n            if (!texte) {\n\n                message.textContent = '';\n                message.classList.remove('is-visible');\n                return;\n\n            }\n\n            message.textContent = texte;\n            message.classList.add('is-visible');\n\n        }\n\n\n        function preparerRepartition(lignes) {\n\n            const classement =\n                lignes\n                .map(\n                    function(ligne) {\n\n                        return {\n                            nom: String(ligne.centre || 'Centre'),\n                            valeur: Number(ligne[champ] || 0)\n                        };\n\n                    }\n                )\n                .filter(\n                    function(ligne) {\n\n                        \/*\n                         * Un centre \u00e0 0 n'a aucune part du total :\n                         * Chart.js ne peut donc pas dessiner de tranche.\n                         * On ne conserve ici que les centres ayant une\n                         * activit\u00e9 strictement positive pour l'indicateur.\n                         *\/\n                        return ligne.valeur > 0;\n\n                    }\n                )\n                .sort(\n                    function(a, b) {\n                        return b.valeur - a.valeur;\n                    }\n                );\n\n\n            const total =\n                classement.reduce(\n                    function(somme, ligne) {\n                        return somme + ligne.valeur;\n                    },\n                    0\n                );\n\n\n            const principaux =\n                classement.slice(0, 5);\n\n            const autres =\n                classement.slice(5);\n\n\n            if (autres.length) {\n\n                principaux.push(\n                    {\n                        nom:\n                            'Autres centres (' +\n                            autres.length +\n                            ')',\n\n                        valeur:\n                            autres.reduce(\n                                function(somme, ligne) {\n                                    return somme + ligne.valeur;\n                                },\n                                0\n                            )\n                    }\n                );\n\n            }\n\n\n            return {\n                total: total,\n                lignes: principaux\n            };\n\n        }\n\n\n        const pluginTotalCentre = {\n\n            id:\n                'fnaamTotalCentre_' +\n                \"visites_a_bord\" +\n                '_' +\n                \"f42f12fc\",\n\n            afterDraw:\n                function(chart) {\n\n                    if (!chart || !chart.ctx || !chart.chartArea) {\n                        return;\n                    }\n\n                    const total =\n                        chart.$fnaamTotal || 0;\n\n                    const ctx =\n                        chart.ctx;\n\n                    const zone =\n                        chart.chartArea;\n\n                    const x =\n                        (zone.left + zone.right) \/ 2;\n\n                    const y =\n                        (zone.top + zone.bottom) \/ 2;\n\n                    ctx.save();\n\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n\n                    ctx.fillStyle = '#163a5f';\n                    ctx.font = '700 20px Arial, sans-serif';\n                    ctx.fillText(\n                        formatNombre(total),\n                        x,\n                        y - 8\n                    );\n\n                    ctx.fillStyle = '#607487';\n                    ctx.font = '12px Arial, sans-serif';\n                    ctx.fillText(\n                        unite,\n                        x,\n                        y + 15\n                    );\n\n                    ctx.restore();\n\n                }\n\n        };\n\n\n        const pluginPourcentagesAnneau = {\n\n            id:\n                'fnaamPourcentagesAnneau_' +\n                \"visites_a_bord\" +\n                '_' +\n                \"f42f12fc\",\n\n            afterDatasetsDraw:\n                function(chart) {\n\n                    if (!chart || !chart.ctx || !chart.data || !chart.data.datasets.length) {\n                        return;\n                    }\n\n                    const dataset =\n                        chart.data.datasets[0];\n\n                    const valeurs =\n                        Array.isArray(dataset.data)\n                            ? dataset.data.map(function(v) { return Number(v || 0); })\n                            : [];\n\n                    const total =\n                        valeurs.reduce(function(somme, valeur) {\n                            return somme + valeur;\n                        }, 0);\n\n                    if (!total) {\n                        return;\n                    }\n\n                    const meta =\n                        chart.getDatasetMeta(0);\n\n                    const ctx =\n                        chart.ctx;\n\n                    ctx.save();\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n                    ctx.fillStyle = '#ffffff';\n                    ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';\n                    ctx.lineWidth = 2;\n                    ctx.font = '700 11px Arial, sans-serif';\n\n                    meta.data.forEach(function(arc, index) {\n\n                        const valeur =\n                            valeurs[index] || 0;\n\n                        if (valeur <= 0 || !arc || typeof arc.getCenterPoint !== 'function') {\n                            return;\n                        }\n\n                        const pourcentage =\n                            (valeur \/ total) * 100;\n\n                        const point =\n                            arc.getCenterPoint();\n\n                        const texte =\n                            formatPourcentage(pourcentage);\n\n                        ctx.strokeText(texte, point.x, point.y);\n                        ctx.fillText(texte, point.x, point.y);\n\n                    });\n\n                    ctx.restore();\n\n                }\n\n        };\n\n\n        function construireLegende(repartition) {\n\n            legende.innerHTML = '';\n\n            repartition.lignes.forEach(\n                function(ligne, index) {\n\n                    const item = document.createElement('div');\n                    item.className = 'fnaam-repartition-legende-ligne';\n\n                    const puce = document.createElement('span');\n                    puce.className = 'fnaam-repartition-puce';\n                    puce.style.backgroundColor =\n                        couleurs[index % couleurs.length];\n\n                    const nom = document.createElement('span');\n                    nom.className = 'fnaam-repartition-nom';\n                    nom.textContent = ligne.nom;\n                    nom.title = ligne.nom;\n\n                    item.appendChild(puce);\n                    item.appendChild(nom);\n\n                    legende.appendChild(item);\n\n                }\n            );\n\n        }\n\n\n        function afficherAnnee(annee) {\n\n            const lignes =\n                donnees.filter(\n                    function(ligne) {\n\n                        return String(ligne.annee) === String(annee);\n\n                    }\n                );\n\n\n            if (!lignes.length) {\n\n                afficherMessage(\n                    'Aucune statistique disponible pour cette ann\u00e9e.'\n                );\n\n                totalElement.textContent = '0';\n                legende.innerHTML =\n                    '<p style=\"margin:0;color:#607487;\">Aucune donn\u00e9e.<\/p>';\n\n                if (graphique) {\n                    graphique.destroy();\n                    graphique = null;\n                }\n\n                return;\n            }\n\n\n            afficherMessage('');\n\n            const repartition =\n                preparerRepartition(lignes);\n\n            totalElement.textContent =\n                formatNombre(repartition.total);\n\n            construireLegende(repartition);\n\n\n            if (graphique) {\n                graphique.destroy();\n                graphique = null;\n            }\n\n\n            if (!repartition.total || !repartition.lignes.length) {\n\n                legende.innerHTML =\n                    '<p style=\"margin:0;color:#607487;\">Aucune donn\u00e9e pour cet indicateur.<\/p>';\n\n                return;\n            }\n\n\n            graphique =\n                new Chart(\n                    canvas,\n                    {\n                        type: 'doughnut',\n\n                        data: {\n\n                            labels:\n                                repartition.lignes.map(\n                                    function(ligne) {\n                                        return ligne.nom;\n                                    }\n                                ),\n\n                            datasets: [\n                                {\n                                    data:\n                                        repartition.lignes.map(\n                                            function(ligne) {\n                                                return ligne.valeur;\n                                            }\n                                        ),\n\n                                    backgroundColor:\n                                        repartition.lignes.map(\n                                            function(ligne, index) {\n                                                return couleurs[\n                                                    index % couleurs.length\n                                                ];\n                                            }\n                                        ),\n\n                                    borderColor: '#ffffff',\n                                    borderWidth: 2,\n                                    hoverOffset: 5\n                                }\n                            ]\n                        },\n\n                        options: {\n\n                            responsive: true,\n                            maintainAspectRatio: false,\n                            cutout: '58%',\n\n                            plugins: {\n\n                                legend: {\n                                    display: false\n                                },\n\n                                tooltip: {\n\n                                    callbacks: {\n\n                                        label:\n                                            function(context) {\n\n                                                const valeur =\n                                                    Number(context.raw || 0);\n\n                                                const pct =\n                                                    repartition.total > 0\n                                                        ? (\n                                                            valeur \/\n                                                            repartition.total\n                                                        ) * 100\n                                                        : 0;\n\n                                                return (\n                                                    context.label +\n                                                    ' : ' +\n                                                    formatNombre(valeur) +\n                                                    ' (' +\n                                                    formatPourcentage(pct) +\n                                                    ')'\n                                                );\n\n                                            }\n\n                                    }\n\n                                }\n\n                            }\n\n                        },\n\n                        plugins: [\n                            pluginTotalCentre,\n                            pluginPourcentagesAnneau\n                        ]\n                    }\n                );\n\n            graphique.$fnaamTotal =\n                repartition.total;\n\n            graphique.update();\n\n        }\n\n\n        function remplirAnnees(anneeAConserver) {\n\n            const annees =\n                Array.from(\n                    new Set(\n                        donnees.map(\n                            function(ligne) {\n                                return Number(ligne.annee);\n                            }\n                        )\n                    )\n                )\n                .filter(\n                    function(annee) {\n                        return annee > 0;\n                    }\n                )\n                .sort(\n                    function(a, b) {\n                        return b - a;\n                    }\n                );\n\n\n            selectAnnee.innerHTML = '';\n\n\n            if (!annees.length) {\n\n                const option = document.createElement('option');\n                option.value = '';\n                option.textContent = 'Aucune ann\u00e9e';\n                selectAnnee.appendChild(option);\n\n                afficherMessage('Aucune statistique disponible.');\n                return;\n            }\n\n\n            annees.forEach(\n                function(annee) {\n\n                    const option = document.createElement('option');\n                    option.value = String(annee);\n                    option.textContent = String(annee);\n                    selectAnnee.appendChild(option);\n\n                }\n            );\n\n\n            const anneeValide =\n                annees.includes(Number(anneeAConserver))\n                    ? String(anneeAConserver)\n                    : String(annees[0]);\n\n            selectAnnee.value = anneeValide;\n\n            afficherAnnee(anneeValide);\n\n        }\n\n\n        async function chargerDonnees(conserverAnnee) {\n\n            try {\n\n                const separateur =\n                    apiUrl.includes('?')\n                        ? '&'\n                        : '?';\n\n                const reponse =\n                    await fetch(\n                        apiUrl +\n                        separateur +\n                        '_t=' +\n                        Date.now(),\n                        {\n                            cache: 'no-store'\n                        }\n                    );\n\n                if (!reponse.ok) {\n\n                    throw new Error(\n                        'Erreur HTTP ' +\n                        reponse.status\n                    );\n\n                }\n\n                const json =\n                    await reponse.json();\n\n                if (!Array.isArray(json)) {\n                    throw new Error('R\u00e9ponse API invalide');\n                }\n\n                donnees = json;\n\n                remplirAnnees(\n                    conserverAnnee ||\n                    selectAnnee.value\n                );\n\n            }\n\n            catch (erreur) {\n\n                console.error(\n                    'FNAAM - R\u00e9partition centres :',\n                    erreur\n                );\n\n                afficherMessage(\n                    'Impossible de charger les statistiques pour le moment.'\n                );\n\n            }\n\n        }\n\n\n        selectAnnee.addEventListener(\n            'change',\n            function() {\n                afficherAnnee(selectAnnee.value);\n            }\n        );\n\n\n        chargerDonnees('');\n\n\n        const actualisation =\n            window.setInterval(\n                function() {\n                    chargerDonnees(selectAnnee.value);\n                },\n                60000\n            );\n\n\n        const observateur =\n            new MutationObserver(\n                function() {\n\n                    if (!document.body.contains(module)) {\n\n                        window.clearInterval(actualisation);\n\n                        if (graphique) {\n                            graphique.destroy();\n                            graphique = null;\n                        }\n\n                        observateur.disconnect();\n                    }\n\n                }\n            );\n\n\n        observateur.observe(\n            document.body,\n            {\n                childList: true,\n                subtree: true\n            }\n        );\n\n    })();\n\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-bcba681 e-con e-atomic-element e-flexbox-base e-c8e38a8 \" data-id=\"bcba681\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"bcba681\">\n    \t\t<div class=\"elementor-element elementor-element-725acaa elementor-widget elementor-widget-shortcode\" data-id=\"725acaa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <section\n        id=\"fnaam-repartition-kilometres_parcourus-6af54e4353c43\"\n        class=\"fnaam-repartition-graphique\"\n        data-indicateur=\"kilometres_parcourus\"\n    >\n\n        <div class=\"fnaam-repartition-entete\">\n\n            <div>\n\n                <h3>\n                    Kilom\u00e8tres parcourus                <\/h3>\n\n                <div class=\"fnaam-repartition-total\">\n                    Total national :\n                    <strong>\u2014<\/strong>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"fnaam-repartition-choix-annee\">\n\n                <label for=\"fnaam-repartition-kilometres_parcourus-6af54e4353c43-annee\">\n                    Ann\u00e9e\n                <\/label>\n\n                <select\n                    id=\"fnaam-repartition-kilometres_parcourus-6af54e4353c43-annee\"\n                    class=\"fnaam-repartition-select-annee\"\n                >\n                    <option value=\"\">Chargement...<\/option>\n                <\/select>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div\n            class=\"fnaam-repartition-message\"\n            aria-live=\"polite\"\n        >\n            Chargement des statistiques...\n        <\/div>\n\n\n        <div class=\"fnaam-repartition-contenu\">\n\n            <div class=\"fnaam-repartition-canvas\">\n                <canvas><\/canvas>\n            <\/div>\n\n            <div class=\"fnaam-repartition-legende\"><\/div>\n\n        <\/div>\n\n\n\n    <\/section>\n\n\n    <style>\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 {\n            width: 100%;\n            min-height: 520px;\n            box-sizing: border-box;\n            padding: 20px;\n            border: 1px solid #d7e1ea;\n            border-radius: 12px;\n            background: #ffffff;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-entete {\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 20px;\n            margin-bottom: 18px;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-entete h3 {\n            margin: 0 0 5px;\n            color: #163a5f;\n            font-size: 24px;\n            line-height: 1.2;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-total {\n            color: #53697c;\n            font-size: 14px;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-total strong {\n            color: #163a5f;\n            font-size: 17px;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-choix-annee {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex: 0 0 auto;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-choix-annee label {\n            margin: 0;\n            color: #163a5f;\n            font-weight: 600;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-select-annee {\n            min-width: 105px;\n            height: 42px;\n            padding: 6px 34px 6px 12px;\n            border: 1px solid #c8d4df;\n            border-radius: 6px;\n            background: #ffffff;\n            color: #163a5f;\n            font-size: 16px;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-message {\n            display: none;\n            margin: 0 0 15px;\n            padding: 11px 13px;\n            border-radius: 6px;\n            background: #eef5fb;\n            color: #163a5f;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-message.is-visible {\n            display: block;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-contenu {\n            display: grid;\n            grid-template-columns: minmax(250px, 46%) minmax(0, 1fr);\n            gap: 22px;\n            align-items: center;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-canvas {\n            position: relative;\n            width: 100%;\n            min-height: 320px;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-canvas canvas {\n            width: 100% !important;\n            height: 320px !important;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-legende {\n            min-width: 0;\n            display: grid;\n            gap: 6px;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-legende-ligne {\n            display: grid;\n            grid-template-columns: 12px minmax(0, 1fr) auto;\n            gap: 8px;\n            align-items: center;\n            min-width: 0;\n            font-size: 14px;\n            line-height: 1.25;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-puce {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-nom {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            color: #243a4d;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-pourcentage {\n            min-width: 54px;\n            text-align: right;\n            color: #163a5f;\n            font-weight: 600;\n            white-space: nowrap;\n            font-variant-numeric: tabular-nums;\n        }\n\n        #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-note {\n            margin: 18px 0 0;\n            color: #607487;\n            font-size: 13px;\n            line-height: 1.45;\n        }\n\n        @media (max-width: 760px) {\n\n            #fnaam-repartition-kilometres_parcourus-6af54e4353c43 {\n                min-height: auto;\n            }\n\n            #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-entete {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-choix-annee {\n                justify-content: flex-start;\n            }\n\n            #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-contenu {\n                grid-template-columns: 1fr;\n            }\n\n            #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-canvas {\n                min-height: 280px;\n            }\n\n            #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-canvas canvas {\n                height: 280px !important;\n            }\n\n        }\n\n        @media (max-width: 430px) {\n\n            #fnaam-repartition-kilometres_parcourus-6af54e4353c43 {\n                padding: 15px;\n            }\n\n            #fnaam-repartition-kilometres_parcourus-6af54e4353c43 .fnaam-repartition-legende-ligne {\n                grid-template-columns: 12px minmax(0, 1fr) auto;\n            }\n\n        }\n\n    <\/style>\n\n\n    <script>\n\n    (function() {\n\n        const module =\n            document.getElementById(\n                \"fnaam-repartition-kilometres_parcourus-6af54e4353c43\"            );\n\n        if (!module) {\n            return;\n        }\n\n        const apiUrl =\n            \"https:\\\/\\\/test.shapi.eu\\\/index.php\\\/wp-json\\\/fnaam\\\/v1\\\/repartition-centres\";\n\n        const champ =\n            \"kilometres_parcourus\";\n\n        const unite =\n            \"kilom\\u00e8tres\";\n\n        const selectAnnee =\n            module.querySelector(\n                '.fnaam-repartition-select-annee'\n            );\n\n        const message =\n            module.querySelector(\n                '.fnaam-repartition-message'\n            );\n\n        const totalElement =\n            module.querySelector(\n                '.fnaam-repartition-total strong'\n            );\n\n        const legende =\n            module.querySelector(\n                '.fnaam-repartition-legende'\n            );\n\n        const canvas =\n            module.querySelector('canvas');\n\n        let donnees = [];\n        let graphique = null;\n\n        const couleurs = [\n            '#1687d9',\n            '#ff8617',\n            '#27ae60',\n            '#e13c3c',\n            '#7d57c2',\n            '#9a6658',\n            '#e85ca5',\n            '#737373',\n            '#e4bd00',\n            '#17a8bd',\n            '#aebfce'\n        ];\n\n\n        function formatNombre(nombre) {\n\n            return Number(\n                nombre || 0\n            ).toLocaleString('fr-FR');\n\n        }\n\n\n        function formatPourcentage(nombre) {\n\n            return Number(\n                nombre || 0\n            ).toLocaleString(\n                'fr-FR',\n                {\n                    minimumFractionDigits: 1,\n                    maximumFractionDigits: 1\n                }\n            ) + ' %';\n\n        }\n\n\n        function afficherMessage(texte) {\n\n            if (!texte) {\n\n                message.textContent = '';\n                message.classList.remove('is-visible');\n                return;\n\n            }\n\n            message.textContent = texte;\n            message.classList.add('is-visible');\n\n        }\n\n\n        function preparerRepartition(lignes) {\n\n            const classement =\n                lignes\n                .map(\n                    function(ligne) {\n\n                        return {\n                            nom: String(ligne.centre || 'Centre'),\n                            valeur: Number(ligne[champ] || 0)\n                        };\n\n                    }\n                )\n                .filter(\n                    function(ligne) {\n\n                        \/*\n                         * Un centre \u00e0 0 n'a aucune part du total :\n                         * Chart.js ne peut donc pas dessiner de tranche.\n                         * On ne conserve ici que les centres ayant une\n                         * activit\u00e9 strictement positive pour l'indicateur.\n                         *\/\n                        return ligne.valeur > 0;\n\n                    }\n                )\n                .sort(\n                    function(a, b) {\n                        return b.valeur - a.valeur;\n                    }\n                );\n\n\n            const total =\n                classement.reduce(\n                    function(somme, ligne) {\n                        return somme + ligne.valeur;\n                    },\n                    0\n                );\n\n\n            const principaux =\n                classement.slice(0, 5);\n\n            const autres =\n                classement.slice(5);\n\n\n            if (autres.length) {\n\n                principaux.push(\n                    {\n                        nom:\n                            'Autres centres (' +\n                            autres.length +\n                            ')',\n\n                        valeur:\n                            autres.reduce(\n                                function(somme, ligne) {\n                                    return somme + ligne.valeur;\n                                },\n                                0\n                            )\n                    }\n                );\n\n            }\n\n\n            return {\n                total: total,\n                lignes: principaux\n            };\n\n        }\n\n\n        const pluginTotalCentre = {\n\n            id:\n                'fnaamTotalCentre_' +\n                \"kilometres_parcourus\" +\n                '_' +\n                \"cfc14c13\",\n\n            afterDraw:\n                function(chart) {\n\n                    if (!chart || !chart.ctx || !chart.chartArea) {\n                        return;\n                    }\n\n                    const total =\n                        chart.$fnaamTotal || 0;\n\n                    const ctx =\n                        chart.ctx;\n\n                    const zone =\n                        chart.chartArea;\n\n                    const x =\n                        (zone.left + zone.right) \/ 2;\n\n                    const y =\n                        (zone.top + zone.bottom) \/ 2;\n\n                    ctx.save();\n\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n\n                    ctx.fillStyle = '#163a5f';\n                    ctx.font = '700 20px Arial, sans-serif';\n                    ctx.fillText(\n                        formatNombre(total),\n                        x,\n                        y - 8\n                    );\n\n                    ctx.fillStyle = '#607487';\n                    ctx.font = '12px Arial, sans-serif';\n                    ctx.fillText(\n                        unite,\n                        x,\n                        y + 15\n                    );\n\n                    ctx.restore();\n\n                }\n\n        };\n\n\n        const pluginPourcentagesAnneau = {\n\n            id:\n                'fnaamPourcentagesAnneau_' +\n                \"kilometres_parcourus\" +\n                '_' +\n                \"cfc14c13\",\n\n            afterDatasetsDraw:\n                function(chart) {\n\n                    if (!chart || !chart.ctx || !chart.data || !chart.data.datasets.length) {\n                        return;\n                    }\n\n                    const dataset =\n                        chart.data.datasets[0];\n\n                    const valeurs =\n                        Array.isArray(dataset.data)\n                            ? dataset.data.map(function(v) { return Number(v || 0); })\n                            : [];\n\n                    const total =\n                        valeurs.reduce(function(somme, valeur) {\n                            return somme + valeur;\n                        }, 0);\n\n                    if (!total) {\n                        return;\n                    }\n\n                    const meta =\n                        chart.getDatasetMeta(0);\n\n                    const ctx =\n                        chart.ctx;\n\n                    ctx.save();\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n                    ctx.fillStyle = '#ffffff';\n                    ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';\n                    ctx.lineWidth = 2;\n                    ctx.font = '700 11px Arial, sans-serif';\n\n                    meta.data.forEach(function(arc, index) {\n\n                        const valeur =\n                            valeurs[index] || 0;\n\n                        if (valeur <= 0 || !arc || typeof arc.getCenterPoint !== 'function') {\n                            return;\n                        }\n\n                        const pourcentage =\n                            (valeur \/ total) * 100;\n\n                        const point =\n                            arc.getCenterPoint();\n\n                        const texte =\n                            formatPourcentage(pourcentage);\n\n                        ctx.strokeText(texte, point.x, point.y);\n                        ctx.fillText(texte, point.x, point.y);\n\n                    });\n\n                    ctx.restore();\n\n                }\n\n        };\n\n\n        function construireLegende(repartition) {\n\n            legende.innerHTML = '';\n\n            repartition.lignes.forEach(\n                function(ligne, index) {\n\n                    const item = document.createElement('div');\n                    item.className = 'fnaam-repartition-legende-ligne';\n\n                    const puce = document.createElement('span');\n                    puce.className = 'fnaam-repartition-puce';\n                    puce.style.backgroundColor =\n                        couleurs[index % couleurs.length];\n\n                    const nom = document.createElement('span');\n                    nom.className = 'fnaam-repartition-nom';\n                    nom.textContent = ligne.nom;\n                    nom.title = ligne.nom;\n\n                    item.appendChild(puce);\n                    item.appendChild(nom);\n\n                    legende.appendChild(item);\n\n                }\n            );\n\n        }\n\n\n        function afficherAnnee(annee) {\n\n            const lignes =\n                donnees.filter(\n                    function(ligne) {\n\n                        return String(ligne.annee) === String(annee);\n\n                    }\n                );\n\n\n            if (!lignes.length) {\n\n                afficherMessage(\n                    'Aucune statistique disponible pour cette ann\u00e9e.'\n                );\n\n                totalElement.textContent = '0';\n                legende.innerHTML =\n                    '<p style=\"margin:0;color:#607487;\">Aucune donn\u00e9e.<\/p>';\n\n                if (graphique) {\n                    graphique.destroy();\n                    graphique = null;\n                }\n\n                return;\n            }\n\n\n            afficherMessage('');\n\n            const repartition =\n                preparerRepartition(lignes);\n\n            totalElement.textContent =\n                formatNombre(repartition.total);\n\n            construireLegende(repartition);\n\n\n            if (graphique) {\n                graphique.destroy();\n                graphique = null;\n            }\n\n\n            if (!repartition.total || !repartition.lignes.length) {\n\n                legende.innerHTML =\n                    '<p style=\"margin:0;color:#607487;\">Aucune donn\u00e9e pour cet indicateur.<\/p>';\n\n                return;\n            }\n\n\n            graphique =\n                new Chart(\n                    canvas,\n                    {\n                        type: 'doughnut',\n\n                        data: {\n\n                            labels:\n                                repartition.lignes.map(\n                                    function(ligne) {\n                                        return ligne.nom;\n                                    }\n                                ),\n\n                            datasets: [\n                                {\n                                    data:\n                                        repartition.lignes.map(\n                                            function(ligne) {\n                                                return ligne.valeur;\n                                            }\n                                        ),\n\n                                    backgroundColor:\n                                        repartition.lignes.map(\n                                            function(ligne, index) {\n                                                return couleurs[\n                                                    index % couleurs.length\n                                                ];\n                                            }\n                                        ),\n\n                                    borderColor: '#ffffff',\n                                    borderWidth: 2,\n                                    hoverOffset: 5\n                                }\n                            ]\n                        },\n\n                        options: {\n\n                            responsive: true,\n                            maintainAspectRatio: false,\n                            cutout: '58%',\n\n                            plugins: {\n\n                                legend: {\n                                    display: false\n                                },\n\n                                tooltip: {\n\n                                    callbacks: {\n\n                                        label:\n                                            function(context) {\n\n                                                const valeur =\n                                                    Number(context.raw || 0);\n\n                                                const pct =\n                                                    repartition.total > 0\n                                                        ? (\n                                                            valeur \/\n                                                            repartition.total\n                                                        ) * 100\n                                                        : 0;\n\n                                                return (\n                                                    context.label +\n                                                    ' : ' +\n                                                    formatNombre(valeur) +\n                                                    ' (' +\n                                                    formatPourcentage(pct) +\n                                                    ')'\n                                                );\n\n                                            }\n\n                                    }\n\n                                }\n\n                            }\n\n                        },\n\n                        plugins: [\n                            pluginTotalCentre,\n                            pluginPourcentagesAnneau\n                        ]\n                    }\n                );\n\n            graphique.$fnaamTotal =\n                repartition.total;\n\n            graphique.update();\n\n        }\n\n\n        function remplirAnnees(anneeAConserver) {\n\n            const annees =\n                Array.from(\n                    new Set(\n                        donnees.map(\n                            function(ligne) {\n                                return Number(ligne.annee);\n                            }\n                        )\n                    )\n                )\n                .filter(\n                    function(annee) {\n                        return annee > 0;\n                    }\n                )\n                .sort(\n                    function(a, b) {\n                        return b - a;\n                    }\n                );\n\n\n            selectAnnee.innerHTML = '';\n\n\n            if (!annees.length) {\n\n                const option = document.createElement('option');\n                option.value = '';\n                option.textContent = 'Aucune ann\u00e9e';\n                selectAnnee.appendChild(option);\n\n                afficherMessage('Aucune statistique disponible.');\n                return;\n            }\n\n\n            annees.forEach(\n                function(annee) {\n\n                    const option = document.createElement('option');\n                    option.value = String(annee);\n                    option.textContent = String(annee);\n                    selectAnnee.appendChild(option);\n\n                }\n            );\n\n\n            const anneeValide =\n                annees.includes(Number(anneeAConserver))\n                    ? String(anneeAConserver)\n                    : String(annees[0]);\n\n            selectAnnee.value = anneeValide;\n\n            afficherAnnee(anneeValide);\n\n        }\n\n\n        async function chargerDonnees(conserverAnnee) {\n\n            try {\n\n                const separateur =\n                    apiUrl.includes('?')\n                        ? '&'\n                        : '?';\n\n                const reponse =\n                    await fetch(\n                        apiUrl +\n                        separateur +\n                        '_t=' +\n                        Date.now(),\n                        {\n                            cache: 'no-store'\n                        }\n                    );\n\n                if (!reponse.ok) {\n\n                    throw new Error(\n                        'Erreur HTTP ' +\n                        reponse.status\n                    );\n\n                }\n\n                const json =\n                    await reponse.json();\n\n                if (!Array.isArray(json)) {\n                    throw new Error('R\u00e9ponse API invalide');\n                }\n\n                donnees = json;\n\n                remplirAnnees(\n                    conserverAnnee ||\n                    selectAnnee.value\n                );\n\n            }\n\n            catch (erreur) {\n\n                console.error(\n                    'FNAAM - R\u00e9partition centres :',\n                    erreur\n                );\n\n                afficherMessage(\n                    'Impossible de charger les statistiques pour le moment.'\n                );\n\n            }\n\n        }\n\n\n        selectAnnee.addEventListener(\n            'change',\n            function() {\n                afficherAnnee(selectAnnee.value);\n            }\n        );\n\n\n        chargerDonnees('');\n\n\n        const actualisation =\n            window.setInterval(\n                function() {\n                    chargerDonnees(selectAnnee.value);\n                },\n                60000\n            );\n\n\n        const observateur =\n            new MutationObserver(\n                function() {\n\n                    if (!document.body.contains(module)) {\n\n                        window.clearInterval(actualisation);\n\n                        if (graphique) {\n                            graphique.destroy();\n                            graphique = null;\n                        }\n\n                        observateur.disconnect();\n                    }\n\n                }\n            );\n\n\n        observateur.observe(\n            document.body,\n            {\n                childList: true,\n                subtree: true\n            }\n        );\n\n    })();\n\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Courbe annuelle cumul\u00e9e Les 5 centres dont l&#8217;activit\u00e9 est la plus forte Le reste des centres sont class\u00e9s dans &#8220;Autres centres&#8221;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","ocean_front_end_style_editor":"no","ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","omw_enable_modal_window":"enable","footnotes":""},"class_list":["post-94","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/test.shapi.eu\/index.php\/wp-json\/wp\/v2\/pages\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.shapi.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.shapi.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.shapi.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.shapi.eu\/index.php\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":80,"href":"https:\/\/test.shapi.eu\/index.php\/wp-json\/wp\/v2\/pages\/94\/revisions"}],"predecessor-version":[{"id":383,"href":"https:\/\/test.shapi.eu\/index.php\/wp-json\/wp\/v2\/pages\/94\/revisions\/383"}],"wp:attachment":[{"href":"https:\/\/test.shapi.eu\/index.php\/wp-json\/wp\/v2\/media?parent=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}