{"id":9497,"date":"2026-04-08T09:03:52","date_gmt":"2026-04-08T09:03:52","guid":{"rendered":"https:\/\/planifeducation.gouv.tg\/dpsse\/?page_id=9497"},"modified":"2026-04-13T08:22:48","modified_gmt":"2026-04-13T08:22:48","slug":"liste-des-ecoles-2","status":"publish","type":"page","link":"https:\/\/planifeducation.gouv.tg\/dpsse\/liste-des-ecoles-2\/","title":{"rendered":"Liste des \u00e9coles"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9497\" class=\"elementor elementor-9497\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9fd8d0b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9fd8d0b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-599557b\" data-id=\"599557b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9983c62 elementor-widget elementor-widget-heading\" data-id=\"9983c62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Consulter la base de donn\u00e9es compl\u00e8te des \u00e9coles.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5c49874 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5c49874\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1fcce2b\" data-id=\"1fcce2b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-12cc110 elementor-widget__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-html\" data-id=\"12cc110\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t<div class=\"schools-directory\">\n\t\t<div class=\"search-container\">\n\t\t\t<div class=\"search-filters\">\n\t\t\t\t<input type=\"text\" id=\"school-search\" placeholder=\"Rechercher une \u00e9cole...\" \/>\n\n\t\t\t\t<div class=\"multi-select-container\">\n\t\t\t\t\t<div class=\"multi-select-btn\" id=\"region-btn\">\n\t\t\t\t\t\t<span>R\u00e9gions<\/span>\n\t\t\t\t\t\t<i class=\"fas fa-chevron-down\"><\/i>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"multi-select-dropdown\" id=\"region-dropdown\">\n\t\t\t\t\t\t<div class=\"multi-select-options\" id=\"region-options\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"multi-select-container\">\n\t\t\t\t\t<div class=\"multi-select-btn\" id=\"inspection-btn\">\n\t\t\t\t\t\t<span>Inspections<\/span>\n\t\t\t\t\t\t<i class=\"fas fa-chevron-down\"><\/i>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"multi-select-dropdown\" id=\"inspection-dropdown\">\n\t\t\t\t\t\t<div class=\"multi-select-options\" id=\"inspection-options\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"multi-select-container\">\n\t\t\t\t\t<div class=\"multi-select-btn\" id=\"cycle-btn\">\n\t\t\t\t\t\t<span>Cycles<\/span>\n\t\t\t\t\t\t<i class=\"fas fa-chevron-down\"><\/i>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"multi-select-dropdown\" id=\"cycle-dropdown\">\n\t\t\t\t\t\t<div class=\"multi-select-options\" id=\"cycle-options\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"multi-select-container\">\n\t\t\t\t\t<div class=\"multi-select-btn\" id=\"statut-btn\">\n\t\t\t\t\t\t<span>Statuts<\/span>\n\t\t\t\t\t\t<i class=\"fas fa-chevron-down\"><\/i>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"multi-select-dropdown\" id=\"statut-dropdown\">\n\t\t\t\t\t\t<div class=\"multi-select-options\" id=\"statut-options\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"results-info\">\n\t\t\t\t<div class=\"count-wrapper\">\n\t\t\t\t\t<i class=\"fas fa-list\"><\/i> <span id=\"results-count\">0 \u00e9coles<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"actions-wrapper\">\n\t\t\t\t<!--\t<button id=\"reset-filters\" class=\"reset-btn\">R\u00e9initialiser<\/button>-->\n\t\t\t\t\t<button id=\"export-btn\" class=\"export-btn\">\n\t\t\t\t\t\t<i class=\"fas fa-file-excel\"><\/i> Exporter\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<div class=\"schools-table-container\">\n\t\t\t<table id=\"schools-table\" class=\"schools-table\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th data-sort=\"code_administratif\">Code admin<\/th>\n\t\t\t\t\t\t<th data-sort=\"nom_etablissement\">Nom \u00e9tablissement<\/th>\n\t\t\t\t\t\t<th data-sort=\"libelle_type_systeme\">Type<\/th>\n\t\t\t\t\t\t<th data-sort=\"dre\">R\u00e9gion (DRE)<\/th>\n\t\t\t\t\t\t<th data-sort=\"inspection\">Inspection<\/th>\n\t\t\t\t\t\t<th data-sort=\"commune\">Commune<\/th>\n\t\t\t\t\t\t<th data-sort=\"ville_village_quartier\">Localit\u00e9<\/th>\n\t\t\t\t\t\t<th data-sort=\"libelle_type_statut_etab\">Statut<\/th>\n\t\t\t\t\t<\/tr>\n\t\t\t\t<\/thead>\n\t\t\t\t<tbody id=\"schools-table-body\"><\/tbody>\n\t\t\t<\/table>\n\t\t\t<div id=\"no-results\" class=\"no-results\" style=\"display: none\">\n\t\t\t\t<p>Aucun \u00e9tablissement trouv\u00e9 avec les crit\u00e8res s\u00e9lectionn\u00e9s.<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<div class=\"pagination\">\n\t\t\t<button id=\"prev-page\" disabled><i class=\"fas fa-chevron-left\"><\/i><\/button>\n\t\t\t<span id=\"page-info\">Page 1 sur 1<\/span>\n\t\t\t<button id=\"next-page\" disabled><i class=\"fas fa-chevron-right\"><\/i><\/button>\n\t\t\t<select id=\"page-size\">\n\t\t\t\t<option value=\"10\">10<\/option>\n\t\t\t\t<option value=\"20\" selected>20<\/option>\n\t\t\t\t<option value=\"50\">50<\/option>\n\t\t\t\t<option value=\"100\">100<\/option>\n\t\t\t<\/select>\n\t\t<\/div>\n\n\t\t<div id=\"loading\" class=\"loading\" style=\"display:none\">\n\t\t\t<div class=\"spinner\"><\/div>\n\t\t\t<span>Chargement des donn\u00e9es...<\/span>\n\t\t<\/div>\n\n\t\t<div id=\"school-modal\" class=\"school-modal\" style=\"display: none\">\n\t\t\t<div class=\"modal-overlay\"><\/div>\n\t\t\t<div class=\"modal-content\">\n\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t<div class=\"modal-title-group\">\n\t\t\t\t\t\t<h2 id=\"modal-school-name\">D\u00e9tails de l'\u00e9cole<\/h2>\n\t\t\t\t\t\t<span id=\"modal-badge-type\" class=\"header-badge\">Type<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<button class=\"modal-close\">&times;<\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-body\">\n\t\t\t\t\t<div class=\"modal-layout\">\n\t\t\t\t\t\t<div class=\"modal-infos\">\n\t\t\t\t\t\t\t<div class=\"info-card\">\n\t\t\t\t\t\t\t\t<h3><i class=\"fas fa-school\"><\/i> Identit\u00e9<\/h3>\n\t\t\t\t\t\t\t\t<div class=\"detail-grid\">\n\t\t\t\t\t\t\t\t\t<div><small>Code admin.<\/small><div id=\"modal-code-admin\" class=\"val\"><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div><small>Statut<\/small><div id=\"modal-statut\" class=\"val\"><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div><small>Cycle<\/small><div id=\"modal-cycle\" class=\"val\"><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div><small>Milieu<\/small><div id=\"modal-milieu\" class=\"val\"><\/div><\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"info-card\">\n\t\t\t\t\t\t\t\t<h3><i class=\"fas fa-map-marked-alt\"><\/i> Localisation<\/h3>\n\t\t\t\t\t\t\t\t<div class=\"detail-list\">\n\t\t\t\t\t\t\t\t\t<div class=\"list-item\"><span>R\u00e9gion:<\/span> <strong id=\"modal-region\"><\/strong><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"list-item\"><span>Inspection:<\/span> <strong id=\"modal-inspection\"><\/strong><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"list-item\"><span>Pr\u00e9fecture:<\/span> <strong id=\"modal-prefecture\"><\/strong><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"list-item\"><span>Commune:<\/span> <strong id=\"modal-commune\"><\/strong><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"list-item\"><span>Localit\u00e9:<\/span> <strong id=\"modal-localite\"><\/strong><\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"modal-map-container\">\n\t\t\t\t\t\t\t<h3><i class=\"fas fa-location-dot\"><\/i> Position G\u00e9ographique<\/h3>\n\t\t\t\t\t\t\t<div id=\"map-container\" class=\"map-box\"><\/div>\n\t\t\t\t\t\t\t<div id=\"no-map-msg\" style=\"display:none; text-align:center; padding: 20px; color: #777;\">\n\t\t\t\t\t\t\t\t<i class=\"fas fa-map-slash\" style=\"font-size: 2em; margin-bottom:10px;\"><\/i><br>\n\t\t\t\t\t\t\t\tCoordonn\u00e9es GPS non disponibles\n\t\t\t\t\t\t\t<\/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\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\n\t<style>\n\n\t\t\t\/* --- RESET & VARIABLES --- *\/\n\n\t\t:root {\n\n\t\t--primary: #3498db;\n\n\t\t--primary-dark: #2980b9;\n\n\t\t--secondary: #2c3e50;\n\n\t\t--success: #27ae60;\n\n\t\t--bg-light: #f8fafc;\n\n\t\t--border-color: #e2e8f0;\n\n\t\t--text-main: #334155;\n\n\t\t--text-muted: #64748b;\n\n\t\t--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n\n\t\t}\n\n\n\n\t\t.schools-directory { \n\n\t\t\tmax-width: 1400px; \n\n\t\t\tmargin: 10px auto; \n\n\t\t\tbackground: white; \n\n\t\t\tpadding: 25px; \n\n\t\t\tfont-family: 'Inter', 'Segoe UI', Roboto, sans-serif; \n\n\t\t\tcolor: var(--text-main);\n\n\t\t}\n\n\n        .search-container {\n            background: #f8f9fa;\n            padding: 25px;\n            border-radius: 12px;\n            margin-bottom: 25px;\n            display: flex;\n            flex-direction: column; \/* On empile les filtres et les infos *\/\n            gap: 20px;\n            align-items: center; \/* Centre tout horizontalement *\/\n        }\n        \n        .search-filters {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 5px;\n            justify-content: center; \/* Centre les s\u00e9lecteurs *\/\n            width: 100%;\n        }\n        \n        \/* On s'assure que l'input et les boutons de s\u00e9lection ont une taille coh\u00e9rente *\/\n        #school-search, .multi-select-btn {\n            height: 45px !important;\n            margin-right: 0; \/* On utilise gap \u00e0 la place *\/\n        }\n        \n        .results-info {\n            display: flex;\n            width: 100%;\n            max-width: 1200px; \/* Largeur max pour rester align\u00e9 au tableau *\/\n            justify-content: space-between;\n            align-items: center;\n            margin-left: 0 !important; \/* Supprime le d\u00e9calage *\/\n            padding-top: 15px;\n            border-top: 1px solid #e2e8f0;\n        }\n\t    \n\n\t\t#school-search {\n            padding: 12px 15px;\n            border: 2px solid #cbd5e1;\n            border-radius: 8px;\n            width: 200px;\n            font-size: 14px;\n            transition: all 0.3s ease;\n            outline: none;\n            box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);\n\t\t}\n\n\n\n\t\t#school-search:focus {\n\t\t\tborder-color: var(--primary);\n\t\t\tbox-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);\n\t\t}\n\n\n\t\t\/* --- DROPDOWNS STYLE --- *\/\n\n\t\t.multi-select-container { \n\t\t    position: relative;  \n\t\t    border: 1px solid #cbd5e1;\n\t\t    border-radius: 8px;\n\t\t}\n\n\n\n\t\t.multi-select-btn { \n\n\t\t\tbackground: white; \n\n\t\t\tborder: 2px solid var(--border-color); \n\n\t\t\tborder-radius: 12px; \n\n\t\t\tpadding: 0 18px; \n\n\t\t\tcursor: pointer; \n\n\t\t\tdisplay: flex; \n\n\t\t\tjustify-content: space-between; \n\n\t\t\talign-items: center; \n\n\t\t\theight: 50px;\n\n\t\t\tmin-width: 190px;\n\n\t\t\ttransition: all 0.2s;\n\n\t\t\tfont-weight: 500;\n\n\t\t\tcolor: var(--text-main);\n\n\t\t}\n\n\n\n\t\t.multi-select-btn:hover {\n\n\t\t\tborder-color: #cbd5e1;\n\n\t\t\tbackground: #fff;\n\n\t\t}\n\n\n\n\t\t.multi-select-btn i {\n\n\t\t\tfont-size: 10px;\n\n\t\t\tcolor: var(--text-muted);\n\n\t\t\ttransition: transform 0.3s;\n\n\t\t}\n\n\t\n\t\t.multi-select-dropdown { \n\t\t\tdisplay: none; \n\t\t\tposition: absolute; \n\t\t\ttop: 55px; \n\t\t\tleft: 0; \n\t\t\t\/* On enl\u00e8ve width: 360px *\/\n\t\t\tmin-width: 100%; \/* Au moins aussi large que le bouton *\/\n\t\t\twidth: max-content; \/* S'adapte au contenu le plus long *\/\n\t\t\tmax-width: 450px; \/* On met une limite pour \u00e9viter que \u00e7a traverse l'\u00e9cran *\/\n\t\t\tbackground: white; \n\t\t\tborder-radius: 14px; \n\t\t\tbox-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n\t\t\tz-index: 1000; \n\t\t\tmax-height: 350px; \n\t\t\toverflow-y: auto; \n\t\t\tpadding: 12px;\n\t\t\tborder: 1px solid var(--border-color);\n\t\t}\n\n\t\t.multi-select-dropdown.show { \n\n\t\t\tdisplay: block; \n\n\t\t\tanimation: fadeIn 0.2s ease-out;\n\n\t\t}\n\n\n\n\t\t@keyframes fadeIn {\n\n\t\t\tfrom { opacity: 0; transform: translateY(-10px); }\n\n\t\t\tto { opacity: 1; transform: translateY(0); }\n\n\t\t}\n\n\n\t\t.multi-select-option { \n\t\t\tdisplay: flex; \n\t\t\talign-items: center; \n\t\t\tgap: 12px; \n\t\t\tpadding: 10px; \n\t\t\tcursor: pointer; \n\t\t\tborder-radius: 8px;\n\t\t\ttransition: background 0.2s;\n\t\t\t\/* Emp\u00eache le texte de revenir \u00e0 la ligne pour forcer le dropdown \u00e0 s'\u00e9largir *\/\n\t\t\twhite-space: nowrap; \n\t\t}\n\n\t\t.multi-select-option:hover { background: #f1f5f9; }\n\n\n\n\t\t.multi-select-option input[type=\"checkbox\"] {\n\n\t\t\twidth: 18px;\n\n\t\t\theight: 10px;\n\n\t\t\taccent-color: var(--primary);\n\n\t\t\tcursor: pointer;\n\n\t\t}\n\n\t\t\/* --- TABLEAU --- *\/\n\n\t\t.schools-table-container { \n\n\t\t\toverflow-x: auto; \n\n\t\t\tborder: 1px solid var(--border-color); \n\n\t\t\tborder-radius: 12px; \n\n\t\t\tbox-shadow: var(--shadow);\n\n\t\t}\n\n\n\n\t\t.schools-table { width: 100%; border-collapse: collapse; background: white; }\n\n\n         .schools-table th { background: #2c3e50; color: rgb(233, 215, 215); padding: 15px; text-align: left; white-space: nowrap; cursor: pointer; position: sticky; top: 0; z-index: 10; }\n\n\n\t\t.schools-table td { \n\n\t\t\tpadding: 14px 16px; \n\n\t\t\tborder-bottom: 1px solid #f1f5f9; \n\n\t\t\tfont-size: 11px;\n\n\t\t}\n\n\n\n\t\t.schools-table tbody tr:hover { \n\n\t\t\tbackground: #f8fafc; \n\n\t\t\tcursor: pointer; \n\n\t\t}\n\n\t\t.count-wrapper { font-weight: 600; color: var(--text-muted); }\n\n\n\t\t.reset-btn { \n\n\t\t\tbackground: white; \n\n\t\t\tcolor: var(--text-main); \n\n\t\t\tborder: 1px solid var(--border-color); \n\n\t\t\tpadding: 10px 20px; \n\n\t\t\tborder-radius: 10px; \n\n\t\t\tcursor: pointer;\n\n\t\t\tfont-weight: 500;\n\n\t\t}\n\n        \/* Nettoyage et application de la couleur du bouton *\/\n        .export-btn {\n            background-color: #28a745 !important; \/* Force le vert *\/\n            color: white !important;\n            border: none;\n            padding: 10px 20px;\n            border-radius: 8px;\n            cursor: pointer;\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            transition: background 0.3s ease;\n        }\n        \n        .export-btn:hover {\n            background-color: #218838 !important;\n            opacity: 1;\n        }\n        \n        .export-btn i {\n            color: white;\n        }\n\n\t\t\/* --- MODAL --- *\/\n\n\t\t.school-modal { \n\n\t\t\tposition: fixed; \n\n\t\t\tinset: 0; \n\n\t\t\tz-index: 9999; \n\n\t\t\tdisplay: flex; \n\n\t\t\talign-items: center; \n\n\t\t\tjustify-content: center; \n\n\t\t}\n\n\n\n\t\t.modal-overlay { \n\n\t\t\tposition: absolute; \n\n\t\t\tinset: 0; \n\n\t\t\tbackground: rgba(15, 23, 42, 0.7); \n\n\t\t\tbackdrop-filter: blur(4px); \n\n\t\t}\n\n\n\n\t\t.modal-content { \n\n\t\t\tposition: relative; \n\n\t\t\tbackground: white; \n\n\t\t\twidth: 95%; \n\n\t\t\tmax-width: 1000px; \n\n\t\t\theight: 90vh; \n\n\t\t\tborder-radius: 20px; \n\n\t\t\toverflow: hidden; \n\n\t\t\tdisplay: flex; \n\n\t\t\tflex-direction: column;\n\n\t\t\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n\n\t\t}\n\n\n\n\t\t.modal-header { \n\n\t\t\tpadding: 20px 30px; \n\n\t\t\tbackground: var(--secondary); \n\n\t\t\tcolor: white; \n\n\t\t\tdisplay: flex; \n\n\t\t\tjustify-content: space-between; \n\n\t\t\talign-items: center; \n\n\t\t}\n\n\n\n\t\t.modal-body { \n\n\t\t\tflex: 1; \n\n\t\t\toverflow-y: auto; \n\n\t\t\tpadding: 30px; \n\n\t\t\tbackground: #f1f5f9; \n\n\t\t}\n\n        .modal-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; height: 100%; }\n\n\t\t.info-card { \n\n\t\t\tbackground: white; \n\n\t\t\tpadding: 20px; \n\n\t\t\tborder-radius: 15px; \n\n\t\t\tbox-shadow: 0 1px 3px rgba(0,0,0,0.1); \n\n\t\t\tmargin-bottom: 20px; \n\n\t\t}\n\n\n\n\t\t.info-card h3 { \n\n\t\t\tmargin-top: 0; \n\n\t\t\tfont-size: 16px; \n\n\t\t\tcolor: var(--primary); \n\n\t\t\tborder-bottom: 1px solid #eee; \n\n\t\t\tpadding-bottom: 10px;\n\n\t\t\tmargin-bottom: 15px;\n\n\t\t}\n\n\n\n\t\t.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }\n\n\t\t.detail-grid small { color: var(--text-muted); text-transform: uppercase; font-size: 10px; font-weight: 700; }\n\n\t\t.detail-grid .val { font-weight: 600; margin-top: 4px; }\n\t\t\n\t\t.list-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f8f9fa; }\n\t\t\n        .list-item:last-child { border-bottom: none; }\n        \n        .list-item span { color: #7f8c8d; }\n        \n        .list-item strong { color: #2c3e50; text-align: right; }\n\n\t\t\/* --- MAP --- *\/\n\n\t\t\/* .map-box { \n\n\t\theight: 100%; \n\n\t\tmin-height: 350px;\n\n\t\tborder-radius: 15px; \n\n\t\tborder: 5px solid white; \n\n\t\tbox-shadow: var(--shadow); \n\n\t\t}*\/\n\n\n\n\t\t\/*#map-container {\n\n\t\t  height: 30px;\n\n\t\t  width: 100%;\n\n\t\t}*\/\n\n\t\t#map-container {\n\n\t\t\theight: 400px; \/* Ou une valeur qui convient \u00e0 votre design *\/\n\n\t\t\twidth: 100%;\n\n\t\t\tborder-radius: 12px;\n\n\t\t}\n\t\t\n\t\t\t \/* CARTE *\/\n    .modal-map-container { display: flex; flex-direction: column; height: 100%; }\n    .map-box { flex: 1; min-height: 300px; border-radius: 10px; border: 4px solid white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }\n\n\t\t.select-all-option {\n\n\t\t\tbackground: #f8fafc;\n\n\t\t\tposition: sticky;\n\n\t\t\t\/* top: 0;\n\n\t\t\tz-index: 1;*\/\n\n\t\t}\n\n\t\t\/* .select-all-option {\n\n\t\tbackground: #f1f5f9 !important;\n\n\t\tposition: sticky;\n\n\t\ttop: 0;\n\n\t\tz-index: 10;\n\n\t\tborder-bottom: 2px solid var(--primary) !important;\n\n\t\t}**\/\n\n\n\n\t\t.select-all-option:hover {\n\n\t\tbackground: #f1f5f9 !important;\n\n\t\tcolor: var(--primary);\n\n\t\t}\n\n\t\t\/* --- PAGINATION --- *\/\n\n\t\t.pagination { \n\n\t\tdisplay: flex; \n\n\t\tjustify-content: center; \n\n\t\tgap: 15px; \n\n\t\tmargin-top: 50px; \n\n\t\talign-items: center; \n\n\t\t}\n\n\n\n\t\/*\t.pagination button { \n\n\t\tpadding: 10px 18px; \n\n\t\tbackground: white; \n\n\t\tborder: 1px solid var(--border-color); \n\n\t\tborder-radius: 10px; \n\n\t\tcursor: pointer;\n\n\t\ttransition: all 0.2s;\n\n\t\t}*\/\n\n\n\n\t\/*\t.pagination button:hover:not(:disabled) { background: var(--bg-light); border-color: var(--primary); color: var(--primary); }*\/\n\n        .pagination button { padding: 8px 15px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }\n        \n\t\t.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }\n\t\t\n\t\t.pagination select { background: #2c3e50; color: white; width: 90px; }\n\n\n\n\t\t\/* Responsive *\/\n\n\t\t@media (max-width: 768px) {\n\n\t\t.search-filters {\n          display: flex;\n          flex-direction: column;\n          gap: 15px;\n        }\n        \n        .search-filters input,\n        .search-filters select {\n          width: 100%;   \/* chaque \u00e9l\u00e9ment prend toute la largeur *\/\n        }\n\n\t\t.multi-select-container { width: 100%; }\n\n\t\t.modal-content { height: 95vh; width: 100%; border-radius: 0; }\n\t\t\n\t\t.modal-map-container { min-height: 300px; }\n\t\t\n\t\t.modal-layout { grid-template-columns: 1fr; display: flex; flex-direction: column; }\n\t\t\n\t\t.results-info { margin-left: 0; margin-top: 10px; }\n\n\t\t}\n\t\t\n\t\t.loading, .error-message { text-align: center; padding: 40px; }\n        .spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px; }\n        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n\t\n        \n\t\t<\/style>\n\n\n\n\t\t<script src=\"https:\/\/cdn.sheetjs.com\/xlsx-latest\/package\/dist\/xlsx.full.min.js\"><\/script>\n\n\t\t<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n\n\t\t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n\n\n\n\t<script src=\"https:\/\/cdn.sheetjs.com\/xlsx-latest\/package\/dist\/xlsx.full.min.js\"><\/script>\n\t<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n\t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n\n\t<script>\n\tdocument.addEventListener('DOMContentLoaded', function () {\n    const FILE_PATH = 'https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTj_FBDLy74rb2SqkzIT6pMgwW3PqF1YI4f5O1w0MoGeDxY8I2ap8hjAoi5iPTQqA\/pub?output=xlsx';\n\t\t\n\tconst UI = {\n        loading: document.getElementById('loading'),\n        filters: document.querySelector('.search-container'),\n        table: document.querySelector('.schools-table-container'),\n        pagination: document.querySelector('.pagination'),\n        error: document.getElementById('error-message'),\n        modal: document.getElementById('school-modal'),\n        tbody: document.getElementById('schools-table-body'),\n        count: document.getElementById('results-count')\n    };\n\t\t\n    let state = {\n        data: [], filtered: [], \n        page: 1, perPage: 20, \n        filters: {\n            regions: new Set(),\n            inspections: new Set(),\n            cycles: new Set(),\n            statuts: new Set()\n        }\n    };\n\n\tasync function loadData() {\n\t    toggleLoading(true);\n\t\/\/\tdocument.getElementById('loading').style.display = 'block';\n\t\ttry {\n\t\t\tconst resp = await fetch(FILE_PATH);\n\t\t\tconst ab = await resp.arrayBuffer();\n\t\t\tconst wb = XLSX.read(ab, {type:'array'});\n\t\t\tconst json = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {defval:''});\n\n\t\t\tstate.data = json;\n\t\t\tstate.filtered = [...json];\n\n\t\t\t\/\/ INITIALISATION UNIQUE DES R\u00c9GIONS (Parent)\n\t\t\trenderOptions('region', state.data, 'dre', 'regions');\n\n\t\t\t\/\/ MISE \u00c0 JOUR DES ENFANTS\n\t\t\tupdateCascadingFilters();\n\t\t\trenderTable(state.filtered);\n\t\t\ttoggleLoading(false);\n\t\t} catch (e) { \n\t\t\tconsole.error(\"Erreur de chargement\", e); \n\t\t}\n\t\tdocument.getElementById('loading').style.display = 'none';\n\t}\n\t\/\/ D\u00e9finition globale\n\t\/*let pageData = [];\n\n\tasync function loadData() {\n\t\tdocument.getElementById('loading').style.display = 'block';\n\t\ttry {\n\t\t\tconst resp = await fetch(FILE_PATH);\n\t\t\tconst ab = await resp.arrayBuffer();\n\t\t\tconst wb = XLSX.read(ab, {type:'array'});\n\t\t\tconst json = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {defval:''});\n\n\t\t\t\/\/ Affecte la variable globale\n\t\t\tpageData = json;\n\n\t\t\t\/\/ Tu peux garder state si tu veux\n\t\t\tstate.data = json;\n\t\t\tstate.filtered = [...json];\n\n\t\t\/\/\tconsole.log(pageData); \/\/ ici tu utilises bien la variable globale\n\n\t\t\trenderOptions('region', state.filtered, 'dre', 'regions');\n\t\t\tupdateCascadingFilters();\n\t\t\trenderTable(state.filtered); \/\/ passe les donn\u00e9es en param\u00e8tre\n\t\t} catch (e) { \n\t\t\tconsole.error(\"Erreur de chargement\", e); \n\t\t}\n\t\tdocument.getElementById('loading').style.display = 'none';\n\t}*\/\n\t\t\n    \/\/ --- GESTION DES CLICS (OUVERTURE \/ FERMETURE) ---\n    document.addEventListener('click', (e) => {\n        const btn = e.target.closest('.multi-select-btn');\n        const dropdowns = document.querySelectorAll('.multi-select-dropdown');\n        \n        if (btn) {\n            const currentDropdown = btn.nextElementSibling;\n            dropdowns.forEach(d => { if(d !== currentDropdown) d.classList.remove('show'); });\n            currentDropdown.classList.toggle('show');\n            return;\n        }\n\n        if (!e.target.closest('.multi-select-container')) {\n            dropdowns.forEach(d => d.classList.remove('show'));\n        }\n    });\n\n    \/\/ --- LOGIQUE DES FILTRES ---\n   \/* function renderOptions(filterId, data, dataKey, stateKey) {\n        const container = document.getElementById(`${filterId}-options`);\n        const btn = document.getElementById(`${filterId}-btn`);\n        if (!container) return;\n\n        const values = [...new Set(data.map(d => d[dataKey]).filter(v => v))].sort();\n        container.innerHTML = '';\n\n        values.forEach(val => {\n            const div = document.createElement('div');\n            div.className = 'multi-select-option';\n            \n            const chk = document.createElement('input');\n            chk.type = 'checkbox';\n            chk.checked = state.filters[stateKey].has(val);\n            \n            const lbl = document.createElement('label');\n            lbl.textContent = val;\n\n            div.onclick = (e) => {\n                if(e.target !== chk) chk.checked = !chk.checked;\n                if(chk.checked) state.filters[stateKey].add(val);\n                else state.filters[stateKey].delete(val);\n                \n                updateBtnText(btn, stateKey);\n                updateCascadingFilters();\n                applyFilters();\n            };\n\n            div.appendChild(chk);\n            div.appendChild(lbl);\n            container.appendChild(div);\n        });\n        updateBtnText(btn, stateKey);\n    }*\/\n\t\/*function renderOptions(filterId, data, dataKey, stateKey) {\n\t\tconst container = document.getElementById(`${filterId}-options`);\n\t\tconst btn = document.getElementById(`${filterId}-btn`);\n\t\tif (!container) return;\n\n\t\tconst values = [...new Set(data.map(d => d[dataKey]).filter(v => v))].sort();\n\t\tcontainer.innerHTML = '';\n\n\t\t\/\/ --- AJOUT DE L'OPTION \"S\u00c9LECTIONNER TOUT\" ---\n\t\tconst allSelected = values.length > 0 && values.every(v => state.filters[stateKey].has(v));\n\n\t\tconst selectAllDiv = document.createElement('div');\n\t\tselectAllDiv.className = 'multi-select-option select-all-option';\n\t\tselectAllDiv.style.borderBottom = '1px solid #eee';\n\t\tselectAllDiv.style.marginBottom = '5px';\n\t\tselectAllDiv.style.fontWeight = 'bold';\n\n\t\tconst selectAllChk = document.createElement('input');\n\t\tselectAllChk.type = 'checkbox';\n\t\tselectAllChk.checked = allSelected;\n\n\t\tconst selectAllLbl = document.createElement('label');\n\t\tselectAllLbl.textContent = allSelected ? \"Tout d\u00e9s\u00e9lectionner\" : \"Tout s\u00e9lectionner\";\n\n\t\tselectAllDiv.onclick = (e) => {\n\t\t\te.stopPropagation(); \/\/ \u00c9vite les fermetures intempestives\n\t\t\tconst shouldSelect = !selectAllChk.checked;\n\n\t\t\tif (shouldSelect) {\n\t\t\t\tvalues.forEach(v => state.filters[stateKey].add(v));\n\t\t\t} else {\n\t\t\t\tstate.filters[stateKey].clear();\n\t\t\t}\n\n\t\t\tupdateBtnText(btn, stateKey);\n\t\t\tupdateCascadingFilters();\n\t\t\tapplyFilters();\n\t\t};\n\n\t\tselectAllDiv.appendChild(selectAllChk);\n\t\tselectAllDiv.appendChild(selectAllLbl);\n\t\tcontainer.appendChild(selectAllDiv);\n\n\t\t\/\/ --- G\u00c9N\u00c9RATION DES OPTIONS INDIVIDUELLES ---\n\t\tvalues.forEach(val => {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.className = 'multi-select-option';\n\n\t\t\tconst chk = document.createElement('input');\n\t\t\tchk.type = 'checkbox';\n\t\t\tchk.checked = state.filters[stateKey].has(val);\n\n\t\t\tconst lbl = document.createElement('label');\n\t\t\tlbl.textContent = val;\n\n\t\t\tdiv.onclick = (e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\tif(e.target !== chk) chk.checked = !chk.checked;\n\n\t\t\t\tif(chk.checked) state.filters[stateKey].add(val);\n\t\t\t\telse state.filters[stateKey].delete(val);\n\n\t\t\t\tupdateBtnText(btn, stateKey);\n\t\t\t\tupdateCascadingFilters();\n\t\t\t\tapplyFilters();\n\t\t\t};\n\n\t\t\tdiv.appendChild(chk);\n\t\t\tdiv.appendChild(lbl);\n\t\t\tcontainer.appendChild(div);\n\t\t});\n\n\t\tupdateBtnText(btn, stateKey);\n\t}*\/\n\t\t\n\tfunction renderOptions(filterId, data, dataKey, stateKey) {\n\t\tconst container = document.getElementById(`${filterId}-options`);\n\t\tconst btn = document.getElementById(`${filterId}-btn`);\n\t\tif (!container) return;\n\n\t\t\/\/ TRI SYST\u00c9MATIQUE : On s'assure que les valeurs sont toujours tri\u00e9es par libell\u00e9\n\t\t\/*const values = [...new Set(data.map(d => d[dataKey]).filter(v => v))].sort((a, b) => \n\t\t\ta.toString().localeCompare(b.toString(), undefined, {numeric: true, sensitivity: 'base'})\n\t\t);*\/\n\n\t\t\/\/ Remplacez la ligne \"const values = ...\" par celle-ci :\n\t\tconst values = [...new Set(data.map(d => d[dataKey]).filter(v => v))].sort((a, b) => {\n\t\t\treturn a.toString().localeCompare(b.toString(), undefined, { numeric: true, sensitivity: 'base' });\n\t\t});\n\t\t\n\t\tcontainer.innerHTML = '';\n\n\t\t\/\/ 1. Option \"Tout S\u00e9lectionner\"\n\t\tconst allSelected = values.length > 0 && values.every(v => state.filters[stateKey].has(v));\n\t\tconst selectAllDiv = document.createElement('div');\n\t\tselectAllDiv.className = 'multi-select-option select-all-option';\n\t\tselectAllDiv.style.fontWeight = 'bold';\n\t\tselectAllDiv.style.borderBottom = '1px solid #eee';\n\n\t\tselectAllDiv.innerHTML = `\n\t\t\t<input type=\"checkbox\" ${allSelected ? 'checked' : ''}>\n\t\t\t<label>${allSelected ? 'Tout d\u00e9s\u00e9lectionner' : 'Tout s\u00e9lectionner'}<\/label>\n\t\t`;\n\n\t\tselectAllDiv.onclick = (e) => {\n\t\t\te.stopPropagation();\n\t\t\tconst isChecking = !allSelected; \n\t\t\tif (isChecking) {\n\t\t\t\tvalues.forEach(v => state.filters[stateKey].add(v));\n\t\t\t} else {\n\t\t\t\tstate.filters[stateKey].clear();\n\t\t\t}\n\n\t\t\tupdateBtnText(btn, stateKey);\n\n\t\t\tif (filterId === 'region' || filterId === 'inspection') {\n\t\t\t\tupdateCascadingFilters();\n\t\t\t}\n\t\t\tapplyFilters();\n\t\t\trenderOptions(filterId, data, dataKey, stateKey); \/\/ Rafra\u00eechissement visuel local\n\t\t};\n\t\tcontainer.appendChild(selectAllDiv);\n\n\t\t\/\/ 2. Options individuelles\n\t\tvalues.forEach(val => {\n\t\t\tconst isChecked = state.filters[stateKey].has(val);\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.className = 'multi-select-option';\n\t\t\tdiv.innerHTML = `\n\t\t\t\t<input type=\"checkbox\" ${isChecked ? 'checked' : ''}>\n\t\t\t\t<label>${val}<\/label>\n\t\t\t`;\n\n\t\t\tdiv.onclick = (e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\tif (state.filters[stateKey].has(val)) {\n\t\t\t\t\tstate.filters[stateKey].delete(val);\n\t\t\t\t} else {\n\t\t\t\t\tstate.filters[stateKey].add(val);\n\t\t\t\t}\n\n\t\t\t\tupdateBtnText(btn, stateKey);\n\n\t\t\t\t\/\/ Si on change R\u00e9gion ou Inspection, on met \u00e0 jour les enfants en cascade\n\t\t\t\tif (filterId === 'region' || filterId === 'inspection') {\n\t\t\t\t\tupdateCascadingFilters();\n\t\t\t\t}\n\n\t\t\t\tapplyFilters();\n\t\t\t\t\/\/ On rafra\u00eechit uniquement CE menu pour cocher la case sans fermer le dropdown\n\t\t\t\trenderOptions(filterId, data, dataKey, stateKey);\n\t\t\t};\n\t\t\tcontainer.appendChild(div);\n\t\t});\n\n\t\tupdateBtnText(btn, stateKey);\n\t}\n    function updateBtnText(btn, stateKey) {\n        const count = state.filters[stateKey].size;\n        const baseText = btn.id.split('-')[0].charAt(0).toUpperCase() + btn.id.split('-')[0].slice(1) + 's';\n        btn.querySelector('span').textContent = count > 0 ? `${baseText} (${count})` : baseText;\n    }\n\n\tfunction updateCascadingFilters() {\n    \/\/ 1. Donn\u00e9es pour Inspections (bas\u00e9es sur R\u00e9gions)\n\t\tconst dataForInsp = state.filters.regions.size > 0 \n\t\t\t? state.data.filter(d => state.filters.regions.has(d.dre)) \n\t\t\t: state.data;\n\n\t\trenderOptions('inspection', dataForInsp, 'inspection', 'inspections');\n\n\t\t\/\/ 2. Donn\u00e9es pour Cycles et Statuts (bas\u00e9es sur R\u00e9gions ET Inspections)\n\t\tconst dataForOthers = dataForInsp.filter(d => \n\t\t\tstate.filters.inspections.size === 0 || state.filters.inspections.has(d.inspection)\n\t\t);\n\n\t\trenderOptions('cycle', dataForOthers, 'libelle_type_systeme', 'cycles');\n\t\trenderOptions('statut', dataForOthers, 'libelle_type_statut_etab', 'statuts');\n\t}\n  \/*  function updateCascadingFilters() {\n        \/\/ Filtre les inspections selon r\u00e9gions\n        const dataForInsp = state.filters.regions.size > 0 \n            ? state.data.filter(d => state.filters.regions.has(d.dre)) \n            : state.data;\n        renderOptions('inspection', dataForInsp, 'inspection', 'inspections');\n\n        \/\/ Filtre cycles et statuts selon r\u00e9gions + inspections\n        const dataForOthers = dataForInsp.filter(d => \n            state.filters.inspections.size === 0 || state.filters.inspections.has(d.inspection)\n        );\n        renderOptions('cycle', dataForOthers, 'libelle_type_systeme', 'cycles');\n        renderOptions('statut', dataForOthers, 'libelle_type_statut_etab', 'statuts');\n    }*\/\n\n    function applyFilters() {\n        const search = document.getElementById('school-search').value.toLowerCase();\n        state.filtered = state.data.filter(d => {\n            const matchSearch = !search || (d.nom_etablissement + ' ' + (d.code_administratif||'')).toLowerCase().includes(search);\n            const matchReg = state.filters.regions.size === 0 || state.filters.regions.has(d.dre);\n            const matchInsp = state.filters.inspections.size === 0 || state.filters.inspections.has(d.inspection);\n            const matchCyc = state.filters.cycles.size === 0 || state.filters.cycles.has(d.libelle_type_systeme);\n            const matchSta = state.filters.statuts.size === 0 || state.filters.statuts.has(d.libelle_type_statut_etab);\n            return matchSearch && matchReg && matchInsp && matchCyc && matchSta;\n        });\n        state.page = 1;\n        renderTable(state.filtered);\n    }\n\n    function renderTable(data) {\n        const start = (state.page - 1) * state.perPage;\n\t\tdata = state.filtered.slice(start, start + state.perPage);\n        \/\/const pagedData = state.filtered.slice(start, start + state.perPage);\n       \/\/ const tbody = document.getElementById('schools-table-body');\n        UI.tbody.innerHTML = '';\n\t\t\n       \/* tbody.innerHTML = pagedData.map(d => `\n            <tr onclick=\"window.openSchoolModal(${JSON.stringify(d).replace(\/\"\/g, '&quot;')})\">\n                <td>${d.code_administratif}<\/td>\n                <td><b>${d.nom_etablissement}<\/b><\/td>\n                <td>${d.libelle_type_systeme}<\/td>\n                <td>${d.dre}<\/td>\n                <td>${d.inspection}<\/td>\n                <td>${d.commune}<\/td>\n                <td>${d.ville_village_quartier}<\/td>\n                <td>${d.libelle_type_statut_etab}<\/td>\n            <\/tr>\n        `).join('');*\/\n\t\tif(!data.length) {\n            document.getElementById('no-results').style.display = 'block';\n            return;\n        }\n\t\t\n        document.getElementById('no-results').style.display = 'none';\n\t\tdata.forEach(row => {\n            const tr = document.createElement('tr');\n            tr.onclick = () => openModal(row);\n            \n            tr.innerHTML = `\n                <td>${row.code_administratif || ''}<\/td>\n                <td><strong>${row.nom_etablissement || ''}<\/strong><\/td>\n                <td>${row.libelle_type_systeme || ''}<\/td>\n                <td>${row.dre || row.region || ''}<\/td>\n                <td>${row.inspection || ''}<\/td>\n                <td>${row.commune || ''}<\/td>\n                <td>${row.ville_village_quartier || ''}<\/td>\n                <td>${row.libelle_type_statut_etab || ''}<\/td>\n            `;\n            UI.tbody.appendChild(tr);\n        });\n\n        document.getElementById('results-count').textContent = `${state.filtered.length} \u00e9cole(s)`;\n        updatePagination();\n    }\n\n    function updatePagination() {\n        const totalPages = Math.ceil(state.filtered.length \/ state.perPage);\n        document.getElementById('page-info').textContent = `Page ${state.page} sur ${totalPages || 1}`;\n        document.getElementById('prev-page').disabled = state.page <= 1;\n        document.getElementById('next-page').disabled = state.page >= totalPages;\n    }\n\n\t\t\/\/ Events\n\t\tdocument.getElementById('school-search').oninput = applyFilters;\n\t\tdocument.getElementById('next-page').onclick = () => { state.page++; renderTable(); };\n\t\tdocument.getElementById('prev-page').onclick = () => { state.page--; renderTable(); };\n\t\tdocument.getElementById('page-size').onchange = (e) => { state.perPage = parseInt(e.target.value); state.page = 1; renderTable(); };\n\t\/\/\tdocument.getElementById('reset-filters').onclick = () => {\n\t\/\/\t\tstate.filters.regions.clear(); state.filters.inspections.clear();\n\t\/\/\t\tstate.filters.cycles.clear(); state.filters.statuts.clear();\n\t\/\/\t\tdocument.getElementById('school-search').value = '';\n\t\/\/\t\tupdateCascadingFilters();\n\t\/\/\t\tapplyFilters();\n\t\/\/\t};\n\n    \/\/ Modal Global\n   \/* let map;\n    window.openSchoolModal = (school) => {\n        document.getElementById('modal-school-name').textContent = school.nom_etablissement;\n        document.getElementById('modal-code-admin').textContent = school.code_administratif;\n        document.getElementById('modal-region').textContent = school.dre;\n        document.getElementById('modal-inspection').textContent = school.inspection;\n        document.getElementById('school-modal').style.display = 'flex';\n        \n        if(map) map.remove();\n        if(school.latitude && school.longitude) {\n            document.getElementById('map-container').style.display = 'block';\n            document.getElementById('no-map-msg').style.display = 'none';\n            map = L.map('map-container').setView([school.latitude, school.longitude], 13);\n            L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\n            L.marker([school.latitude, school.longitude]).addTo(map);\n        } else {\n            document.getElementById('map-container').style.display = 'none';\n            document.getElementById('no-map-msg').style.display = 'block';\n        }\n    };\n    document.querySelector('.modal-close').onclick = () => document.getElementById('school-modal').style.display = 'none';*\/\n\t\t\n  \/\/ --- MAP (Leaflet) ---\n \/* function initMap(lat, lng, label) {\n    const mapContainer = document.getElementById('map-container');\n    const noMapMsg = document.getElementById('no-map-msg');\n\n    const nlat = Number(lat);\n    const nlng = Number(lng);\n\n    \/\/ Correction : utiliser isFinite pour accepter 0 si jamais, et Number conversion\n    if (!isFinite(nlat) || !isFinite(nlng)) {\n      mapContainer.style.display = 'none';\n      noMapMsg.style.display = 'block';\n      return;\n    }\n\n    mapContainer.style.display = 'block';\n    noMapMsg.style.display = 'none';\n\n    if (state.mapInstance) state.mapInstance.remove();\n\n    state.mapInstance = L.map('map-container').setView([nlat, nlng], 15);\n    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', { attribution: '\u00a9 OpenStreetMap contributors' }).addTo(state.mapInstance);\n    L.marker([nlat, nlng]).addTo(state.mapInstance).bindPopup(`<b>${escapeHtml(label)}<\/b>`).openPopup();\n\n    setTimeout(() => { state.mapInstance.invalidateSize(); }, 300);\n  }*\/\n\n\tfunction initMap(lat, lng, label) {\n\t\tconst mapContainer = document.getElementById('map-container');\n\t\tconst noMapMsg = document.getElementById('no-map-msg');\n\n\t\tconst nlat = parseFloat(lat);\n\t\tconst nlng = parseFloat(lng);\n\n\t\tif (isNaN(nlat) || isNaN(nlng)) {\n\t\t\tmapContainer.style.display = 'none';\n\t\t\tnoMapMsg.style.display = 'block';\n\t\t\treturn;\n\t\t}\n\n\t\tmapContainer.style.display = 'block';\n\t\tnoMapMsg.style.display = 'none';\n\n\t\tif (state.mapInstance) {\n\t\t\tstate.mapInstance.remove();\n\t\t}\n\n\t\t\/\/ Cr\u00e9ation de la carte\n\t\tstate.mapInstance = L.map('map-container').setView([nlat, nlng], 15);\n\n\t\tL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', { \n\t\t\tattribution: '\u00a9 OpenStreetMap' \n\t\t}).addTo(state.mapInstance);\n\n\t\tL.marker([nlat, nlng]).addTo(state.mapInstance).bindPopup(`<b>${label}<\/b>`).openPopup();\n\n\t\t\/\/ CRITIQUE : On attend un court instant que la modale soit bien affich\u00e9e en CSS\n\t\tsetTimeout(() => {\n\t\t\tstate.mapInstance.invalidateSize(true);\n\t\t}, 400); \n\t}\n\t\t\n    \/\/ --- MODAL ---\n    function openModal(school) {\n        const safe = (val) => val || '-';\n        \n        document.getElementById('modal-school-name').textContent = safe(school.nom_etablissement);\n        document.getElementById('modal-badge-type').textContent = safe(school.libelle_type_systeme);\n        \n        document.getElementById('modal-code-admin').textContent = safe(school.code_administratif);\n        document.getElementById('modal-statut').textContent = safe(school.libelle_type_statut_etab);\n        document.getElementById('modal-cycle').textContent = safe(school.libelle_type_systeme);\n        document.getElementById('modal-milieu').textContent = safe(school.libelle_type_milieu);\n        \n        document.getElementById('modal-region').textContent = safe(school.dre || school.region);\n        document.getElementById('modal-inspection').textContent = safe(school.inspection);\n        document.getElementById('modal-prefecture').textContent = safe(school.prefecture);\n        document.getElementById('modal-commune').textContent = safe(school.commune);\n        document.getElementById('modal-localite').textContent = safe(school.ville_village_quartier);\n\n        UI.modal.style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n\n        initMap(school.latitude, school.longitude, school.nom_etablissement);\n    }\n\n    function closeModal() {\n        UI.modal.style.display = 'none';\n        document.body.style.overflow = 'auto';\n    }\n\t\n\tfunction exportToExcel(dataSource, fileName) {\n        if (!dataSource || dataSource.length === 0) {\n            alert(\"Aucune donn\u00e9e \u00e0 exporter !\");\n            return;\n        }\n\n        \/\/ 1. MAPPING : On transforme les donn\u00e9es brutes en format joli pour Excel\n        \/\/ C'est ici que vous choisissez l'ordre des colonnes et leurs titres\n        const formattedData = dataSource.map(item => ({\n            \"Code etablissement\": item.code_etablissement || '',\n            \"Nom \u00c9tablissement\": item.nom_etablissement || '',\n            \"Code admin\": item.code_administratif || '',\n            \"Type\": item.libelle_type_systeme || '',\n            \"Statut\": item.libelle_type_statut_etab || '',\n            \"R\u00e9gion (DRE)\": item.dre || item.region || '', \/\/ G\u00e8re les deux cas\n            \"Inspection\": item.inspection || '',\n            \"Pr\u00e9fecture\": item.prefecture || '',\n            \"Commune\": item.commune || '',\n            \"Canton\": item.canton_village_autonome || '',\n            \"Localit\u00e9\": item.ville_village_quartier || '',\n            \"Milieu\": item.libelle_type_milieu || '',\n            \"Latitude\": item.latitude || '',\n            \"Longitude\": item.longitude || ''\n        }));\n\n        \/\/ 2. Cr\u00e9ation de la feuille de calcul\n        const ws = XLSX.utils.json_to_sheet(formattedData);\n\n      \/\/ --- AJOUTEZ CE BLOC ICI ---\n        const range = XLSX.utils.decode_range(ws['!ref']);\n        const columnIndex = 2; \/\/ 0=A, 1=B, 2=C (votre colonne \"Code admin\")\n        \n        for (let R = range.s.r + 1; R <= range.e.r; ++R) { \/\/ On commence \u00e0 1 pour sauter l'ent\u00eate\n            const address = XLSX.utils.encode_cell({ r: R, c: columnIndex });\n            if (!ws[address]) continue;\n            \n            \/\/ On force le type en \"string\" et le format de cellule en \"texte\"\n            ws[address].t = 's'; \n            ws[address].z = '@'; \n        }\n        \n        \/\/ Auto-ajustement des colonnes\n        const colWidths = [];\n        const keys = Object.keys(formattedData[0]);\n        \n        keys.forEach(key => {\n            let maxLength = key.length;\n            \n            formattedData.forEach(row => {\n                const value = row[key];\n                if (value !== null && value !== undefined) {\n                    const length = value.toString().length;\n                    maxLength = Math.max(maxLength, length);\n                }\n            });\n            \n            \/\/ Limiter la largeur (min 8, max 50)\n            colWidths.push({ wch: Math.min(Math.max(maxLength, 8), 50) });\n        });\n        \n        ws['!cols'] = colWidths;\n\n        \/\/ 4. Cr\u00e9ation du classeur (Workbook) et ajout de la feuille\n        const wb = XLSX.utils.book_new();\n        XLSX.utils.book_append_sheet(wb, ws, \"Donn\u00e9es \u00c9coles\");\n\n        \/\/ 5. T\u00e9l\u00e9chargement\n        XLSX.writeFile(wb, fileName + \".xlsx\");\n    }\n    \n    document.getElementById('export-btn').addEventListener('click', function() {\n        \/\/ On utilise 'state.filtered' qui contient les donn\u00e9es actuelles du tableau\n        const date = new Date().toISOString().slice(0,10);\n        exportToExcel(state.filtered, `ecoles-export_${date}`);\n    });\n    \n    \/\/ Si vous connaissez le nom exact de la colonne \u00e0 formater\n    function formatColumnWithoutDecimals(ws, columnName) {\n        \/\/ Trouver l'index de la colonne\n        const headers = Object.keys(formattedData[0]);\n     \/\/   const columnIndex = headers.indexOf(columnName);\n        \n        if (columnIndex === -1) return;\n        \n        \/\/ Convertir l'index en lettre de colonne Excel (A, B, C, ...)\n        const columnLetter = String.fromCharCode(65 + columnIndex);\n        \n        \/\/ Parcourir les lignes de donn\u00e9es\n        for (let i = 1; i <= formattedData.length; i++) {\n            const cellRef = columnLetter + (i + 1); \/\/ +1 car ligne 1 est l'en-t\u00eate\n            if (ws[cellRef]) {\n                ws[cellRef].z = '0'; \/\/ Format nombre sans d\u00e9cimales\n            }\n        }\n    }\n\n    function toggleLoading(show) {\n        UI.loading.style.display = show ? 'block' : 'none';\n        UI.filters.style.display = show ? 'none' : 'flex';\n        UI.table.style.display = show ? 'none' : 'block';\n        UI.pagination.style.display = show ? 'none' : 'flex';\n    }\n    \n    UI.modal.querySelector('.modal-close').onclick = closeModal;\n    UI.modal.querySelector('.modal-overlay').onclick = closeModal;\n    document.addEventListener('keydown', e => { if(e.key === 'Escape') closeModal(); });\n    loadData();\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Consulter la base de donn\u00e9es compl\u00e8te des \u00e9coles. R\u00e9gions Inspections Cycles Statuts 0 \u00e9coles Exporter Code admin Nom \u00e9tablissement Type R\u00e9gion (DRE) Inspection Commune Localit\u00e9 Statut Aucun \u00e9tablissement trouv\u00e9 avec les crit\u00e8res s\u00e9lectionn\u00e9s. Page 1 sur 1 102050100 Chargement des donn\u00e9es&#8230; D\u00e9tails de l&rsquo;\u00e9cole Type &times; Identit\u00e9 Code admin. Statut Cycle Milieu Localisation R\u00e9gion: Inspection: [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-9497","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/pages\/9497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/comments?post=9497"}],"version-history":[{"count":48,"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/pages\/9497\/revisions"}],"predecessor-version":[{"id":9551,"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/pages\/9497\/revisions\/9551"}],"wp:attachment":[{"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/media?parent=9497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}