{"id":14062,"date":"2025-06-25T17:52:30","date_gmt":"2025-06-25T15:52:30","guid":{"rendered":"https:\/\/smark.tech\/?page_id=14062"},"modified":"2025-06-25T18:01:55","modified_gmt":"2025-06-25T16:01:55","slug":"plateforme-melopie","status":"publish","type":"page","link":"https:\/\/smark.tech\/index.php\/plateforme-melopie\/","title":{"rendered":"plateforme m\u00e9lopie"},"content":{"rendered":"<!-- \nCe fichier est plac\u00e9 dans le dossier \"\/home\/melopiecrs\/melopie2024\/wordpress2019\/PLATEFORME\" du site M\u00e9lopie \nUne fonction a \u00e9t\u00e9 ajout\u00e9e au fichier functions.php du theme :\nfunction afficher_page_recherche() {\n    ob_start(); \/\/ Capture la sortie\n    include(ABSPATH.'\/recherche_cours.php');\n    return ob_get_clean(); \/\/ Retourne le contenu\n}\nadd_shortcode('afficher_recherche', 'afficher_page_recherche');\n\n-->\n\n<style>\n\n* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\n.content {\n\tposition: relative;\n\ttop:0;\n\tleft: 50%;\n\ttransform: translate(-50%, 0);\n\tcolor: white;\n\ttext-align: center;\n\tfont-size: 10px;\n\tfont-family: Arial, sans-serif;\n\tz-index: 20;\n\t\n\t\/*height: 100%;*\/\n\twidth: 100%;\n\t\/*max-height: 100vh;*\/\n\toverflow: auto;\n\tpadding-top: 20px;\n}\n\/************ Panel de recherche d'un cours *************\/\n.search-panel {\n\tposition: relative;\n\tz-index: 20;\n\tbackground: rgba(255, 255, 255, 0.95);\n\tpadding: 15px 30px;\n\tborder-radius: 10px;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 15px;\n\tmargin: 0 20px 20px 20px;\n\tbox-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n\tfont-family: arial;\n\tcolor:black;\n\tfont-size:16px;\n\theight: 70px;\n}\n\n.search-panel select, .search-panel input {\n\tpadding: 8px;\n\tfont-size: 1rem;\n\tborder: 1px solid #ccc;\n\tborder-radius: 5px;\n\toutline: none;\n\theight: 40px;\n\tmargin: 0;\n}\n\n.search-panel button {\n\tbackground: #00afef;\n\tborder: none;\n\tpadding: 0px 12px;\n\tborder-radius: 5px;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 40px;\n\tz-index: 30;\n\tcolor: white;\n\tfont-size: 15px;\n\tmargin-bottom:0;\n}\n.search-panel button:hover {\n\tbackground-color: #0087b9;\n}\n\n.search-panel button img {\n\twidth: 100%;\n\theight: 100%;\n}\n\/************* Panel d'affichage du cours *********************\/\t\n.panel {\n\tdisplay: flex;\n\tbackground: white;\n\tborder-radius: 8px;\n\tbox-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n\toverflow: hidden;\n\tcolor:black;\n\t\/*width:1000px;*\/\n\tmargin: auto;\n\tmargin-bottom: 10px;\n}\n.panel-titre {\n  box-shadow: none;\n  width:100%;\n}\n.panel-reduced {\n  box-shadow: none;\n  width:100%;\n}\n\/*.panel-reduced tbody tr:nth-child(n+4) {\n  display: none;\n}*\/\n.left-panel {\n\tmin-width: 130px;\n\tbackground: #f8f9fa;\n\tpadding: 10px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\ttext-align: left;\n}\n.left-panel {\n\ttext-align: center;\n}\n.left-panel img {\n\twidth: 100%;\n\theight: auto;\n\tmax-width: 150px;\n\t\/*border-radius: 50%;*\/\n\tmargin: 10px;\n}\n.left-panel div {\n\ttext-align: center;\n\tfont-size: 14px;\n\tmargin-bottom: 8px;\n}\n.left-panel a {\n\tcolor: #007bff;\n\ttext-decoration: none;\n\tfont-size: 12px;\n}\n.right-panel {\n\twidth: 80%;\n\tpadding: 20px 10px 20px 10px;;\n}\n.right-panel img {\n\twidth: 40px;\n\theight: 40px;\n\tborder-radius: 50%;\n\tmargin: 0px;\n\tmargin-right: 5px;\n\tvertical-align: middle;\n}\n.prof-name {\n\tfont-size: 25px;\n\tfont-weight: bold;\n\tmargin-bottom: 5px;\n\theight: auto;\n}\ntable {\n\twidth: 100%;\n\tborder-collapse: collapse;\n\tmargin: 10px 0;\n\tfont-size: 12px;\n}\nth, td {\n\tborder: 1px solid #ddd;\n\tpadding: 8px;\n\ttext-align: left;\n}\nth:first-child, td:first-child {\n    padding-left: 8px;\n}\nth {\n\tbackground-color: #eee;\n\tcolor: black;\n}\n.tooltip {\n\tposition: relative;\n\tdisplay: inline-block;\n\tcursor: pointer;\n\tfont-size: 12px;\n\tfont-style: italic;\n\tcolor: gray;\n}\n.tooltip .tooltiptext {\n\tvisibility: hidden;\n\twidth: 400px;\n\tbackground-color: black;\n\tcolor: white;\n\tfont-style: normal;\n\ttext-align: left;\n\tborder-radius: 5px;\n\tpadding: 5px;\n\tposition: absolute;\n\tz-index: 1;\n\ttop: -5px;\n\tleft: 105%;\n\topacity: 0;\n\ttransition: opacity 0.3s;\n}\n.tooltip:hover .tooltiptext {\n\tvisibility: visible;\n\topacity: 1;\n}\n.btn {\n\tbackground-color: #00afef;\n\tcolor: white;\n\tpadding: 5px 10px;\n\tborder: none;\n\tborder-radius: 5px;\n\tcursor: pointer;\n\tmargin: auto;\n\tfont-size:12px;\n}\n.btn:hover {\n\tbackground-color: #0087b9;\n}\n.btn-panel1 {\n\tbackground-color: white;\n\tcolor: black;\n\tpadding: 5px 10px;\n\tborder:  2px solid black;;\n\tborder-radius: 5px;\n\tcursor: pointer;\n\tmargin: auto;\n\tfont-size:12px;\n}\n.btn-panel1:hover {\n\tbackground-color: #eee;\n}\n.select-btn {\n  background-color: #00afef;\n  width: 130px;\n  color: white;\n  padding: 5px 10px;\n  margin:auto;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: bold;\n  text-align: center;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n.select-btn:focus {\n  background-color: #00afef;\n  color: white;\n}\n.select-btn option {\n  background-color: white;\n  color: black;\n}\n\/********* Popup de demande d'inscription ***********\/\n.popup {\n\tposition: fixed;\n\ttop: 0; left: 0;\n\twidth: 100%; height: 100%;\n\tbackground: rgba(0,0,0,0.7);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tz-index: 999;\n\toverflow: auto;\n}\n.popup-scroll{\n\tmin-height: 400px;\n\twidth: 100%;\n\tjustify-content: center;\n\talign-items: center;\n}\n@media (max-height: 600px) {\n\t.popup-scroll {\n\t\tpadding-top: 350px;\n\t}\n}\n.popup-content {\n\tbackground: white;\n\tpadding: 20px;\n\tborder-radius: 10px;\n\tmax-width: 400px;\n\twidth: 90%;\n\tposition: relative;\n\ttext-align: center;\n\tmargin: auto;\n}\n.popup-content .close {\n\tposition: absolute;\n\ttop: 10px; right: 10px;\n\tcursor: pointer;\n\tfont-size: 20px;\n}\n.popup-line{\n\tdisplay: flex; \n\talign-items: center; \n\tgap: 10px;\n}\n.popup-tab{\n\tcolor:black;\n\tfont-size:14px;\n}\n.popup-tab tbody{\n\twidth:100%;\n}\n.popup-tab tr{\n\twidth:100%;\n}\n.popup label{\n\theight: 20px;\n\tmargin: 3px 0;\n\tfont-weight: normal;\n}\n.login-button {\n\tdisplay: inline-block;\n\tmargin: 10px 5px 0;\n\tpadding: 10px 15px;\n\tbackground: #0073aa;\n\tcolor: white;\n\tborder: none;\n\tborder-radius: 5px;\n\ttext-decoration: none;\n}\n.div-button{\n\tmargin: auto;\n}\n\/************ champ auto-compl\u00e9tion open street map ************\/\n.addr-wrap { position:relative; display: flex; align-items: center;gap: 10px;}\n#suggestions {\n  position: absolute;\n  top: 70%;\n  left: 0; right: 0;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-top: none;\n  z-index: 10;\n  max-height: 260px;\n  overflow-y: auto;\n  display: none;\n}\n.item {\n  padding: 10px 12px;\n  cursor: pointer;\n  border-top: 1px solid #eee;\n}\n.item:hover, .item[aria-selected=\"true\"] { background: #f3f3f3; }\n.hint { margin-top: 8px; font-size: 12px; color: #666; }\n<\/style>\n\n<div class=\"content\" style=\"\">\n\t<div class=\"search-panel\" style=\"display:none;\"><!--div class=\"search-panel\"-->\n\t\t<span style=\"min-width:180px;\">Je cherche un cours de<\/span>\n\t\t<select id=\"type-cours\" style=\"min-width:100px;\">\n\t\t\t<option value=\"musique\">Musique<\/option>\n\t\t\t<option value=\"anglais\">Anglais<\/option>\n\t\t<\/select>\n\t\t<select id=\"format-cours\" style=\"min-width:150px;\">\n\t\t\t<option value=\"en_physique\">en physique<\/option>\n\t\t\t<option value=\"en_ligne\">en ligne<\/option>\n\t\t<\/select>\n\t\t<input type=\"text\" id=\"adresse\" placeholder=\"Mon adresse...\" style=\"min-width:180px;\">\n\t\t<button id=\"search-button\" onclick=\"lancer_recherche()\">\ud83d\udd0d<\/button>\n\t<\/div>\n\t<div class=\"content2\"><\/div>\n\t\n<\/div>\n\n<!-- Popup de demande de connexion cach\u00e9e au d\u00e9but -->\n<!-- div id=\"login-popup\" style=\"display:flex;\" class=\"popup\">\n\t<div class=\"popup-content\" >\n\t\t<span class=\"close\" onclick=\"close_login_popup();\">&times;<\/span>\n\t\t<h3>Connexion requise<\/h3>\n\t\t<p>Pour vous inscrire \u00e0 un compte, veuillez vous connecter ou cr\u00e9er un compte.<\/p>\n\t\t<div class=\"div-button\">\n\t\t\t<a href=\"https:\/\/www.melopie.com\/mon-compte-melopie\/\"\n\t\t\t\tclass=\"nav-top-link nav-top-not-logged-in icon primary button round is-small\"\n\t\t\t\tdata-open=\"#login-form-popup\"  >\n\t\t\t\t<span>Se connecter \/ S'inscrire<\/span>\n\t\t\t<\/a>\n\t\t<\/div>\n\t<\/div>\n<\/div-->\n\n<!-- Popup d'inscription cach\u00e9e au d\u00e9but -->\n<div id=\"register-popup\" style=\"display:none;\" class=\"popup\"  onclick=\"closeIfOutside(event)\">\n\t<div class=\"popup-scroll\" >\n\t<div class=\"popup-content\" >\n\t\t<span class=\"close\" onclick=\"close_login_popup();\">&times;<\/span>\n\t\t<h3>Formulaire d'inscription<\/h3>\n\t\t<p>Cours du <span id=\"register-popup-creneau\">Lun 17h-18h30<\/span>, niveau <span id=\"register-popup-niveau\">2<\/span>.<\/p>\n\t\t<p id=\"label-date-cours-essai\">Le cours d'essai aura lieu le <span id=\"date-cours-essai\">01\/09\/2025 14h30<\/span><\/p>\n\t\t<p id=\"label-date-stage\">Le 1er jour aura lieu le <span id=\"date-stage\">00\/10\/2025<\/span><\/p>\n\t\t<div class=\"popup-line\" >\n\t\t\t<input type=\"text\" id=\"telephone-enfant-input\" placeholder=\"T\u00e9l\u00e9phone\" value=\"\">\n\t\t\t<input type=\"text\" id=\"email-enfant-input\" placeholder=\"e-mail\" value=\"\">\n\t\t<\/div>\n\t\t<!--div class=\"popup-line\" >\n\t\t\t<input type=\"text\" id=\"CP-enfant-input\" placeholder=\"Code postal\" value=\"\">\n\t\t\t<select id=\"pays-enfant-input\">\n\t\t\t\t<option value=\"FR\" selected>France<\/option>\n\t\t\t\t<option value=\"BE\">Belgique<\/option>\n\t\t\t\t<option value=\"CH\">Suisse<\/option>\n\t\t\t\t<option value=\"CA\">Canada<\/option>\n\t\t\t\t<option value=\"RE\">R\u00e9union<\/option>\n\t\t\t\t<option value=\"GP\">Guadeloupe<\/option>\n\t\t\t\t<option value=\"MQ\">Martinique<\/option>\n\t\t\t\t<option value=\"MU\">Ile-Maurice<\/option>\n\t\t\t\t<option value=\"NC\">Nouvelle-Cal\u00e9donie<\/option>\n\t\t\t\t<option value=\"PM\">St Pierre et Miquelon<\/option>\n\t\t\t\t<option value=\"MC\">Monaco<\/option>\n\t\t\t\t<option value=\"AD\">Andorre<\/option>\n\t\t\t<\/select>\n\t\t<\/div-->\n\t\t<div class=\"addr-wrap\" onclick=\"event.stopPropagation()\">\n\t\t\t<input\n\t\t\t\tid=\"address\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tplaceholder=\"Adresse\"\n\t\t\t\toninput=\"debounceSearch()\"\n\t\t\t\tonkeydown=\"handleKeyDown(event)\"\n\t\t\t\taria-expanded=\"false\"\n\t\t\t\/>\n\t\t\t<div id=\"suggestions\" role=\"listbox\"><\/div>\n\t\t<\/div>\n\t\t  \n\t\t<div class=\"popup-line\" >\n\t\t\t<input type=\"text\" id=\"prenom-enfant-input\" placeholder=\"Pr\u00e9nom de l'enfant\" value=\"\">\n\t\t\t<input type=\"text\" id=\"nom-enfant-input\" placeholder=\"Nom de l'enfant\" value=\"\">\n\t\t<\/div>\n\t\t<div class=\"popup-line\" >\n\t\t\t<select id=\"canal-input\">\n\t\t\t\t<option value=\"0\" selected> - Vous nous avez connu par - <\/option>\n\t\t\t\t<option value=\"1\">tract distribu\u00e9 devant l'\u00e9cole<\/option>\n\t\t\t\t<option value=\"2\">tract remis par un parent-h\u00f4te<\/option>\n\t\t\t\t<option value=\"3\">tract chez un commer\u00e7ant<\/option>\n\t\t\t\t<option value=\"4\">mail d'une connaissance<\/option>\n\t\t\t\t<option value=\"5\">publication WhatsApp<\/option>\n\t\t\t\t<option value=\"6\">publication Facebook\/Instagram<\/option>\n\t\t\t\t<option value=\"7\">publicit\u00e9 Facebook\/Instagram<\/option>\n\t\t\t\t<option value=\"8\">\u00e9v\u00e8nement cours essai Facebook<\/option>\n\t\t\t\t<option value=\"9\">bouche \u00e0 oreille<\/option>\n\t\t\t\t<option value=\"10\">site internet melopie.com<\/option>\n\t\t\t\t<option value=\"11\">autre<\/option>\n\t\t\t<\/select>\n\t\t<\/div>\n\t\t<div class=\"popup-line\">\n\t\t\t<label for=\"age-enfant\">Age <\/label>\n\t\t\t<select id=\"age-enfant-input\" style=\"max-width:90px;margin-right: 20px;\">\n\t\t\t\t\t\t\t\t\t<option value=\"3\">\n\t\t\t\t\t\t3 ans\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"4\">\n\t\t\t\t\t\t4 ans\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"5\">\n\t\t\t\t\t\t5 ans\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"6\">\n\t\t\t\t\t\t6 ans\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"7\">\n\t\t\t\t\t\t7 ans\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"8\">\n\t\t\t\t\t\t8 ans\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"9\">\n\t\t\t\t\t\t9 ans\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t\t\t<option value=\"10\">\n\t\t\t\t\t\t10 ans\t\t\t\t\t<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t\t<input type=\"text\" id=\"profession-input\" placeholder=\"Profession parent\" value=\"\">\n\t\t<\/div>\n\t\t<div class=\"popup-line\">\n\t\t\t<label for=\"sexe-enfant-input\">Sexe <\/label>\n\t\t\t<label><input id=\"sexe-enfant-input-garcon\" type=\"radio\" name=\"sexe\" value=\"garcon\" selected> Gar\u00e7on <\/label>\n\t\t\t<label> <input id=\"sexe-enfant-input-fille\" type=\"radio\" name=\"sexe\" value=\"fille\"> Fille <\/label>\n\t\t<\/div>\n\t\t<label style=\"text-align: left;\" id=\"label-cours-essai-paye\">\n\t\t\t<input id=\"box-cours-essai-paye\" type=\"checkbox\" name=\"accepter_conditions\" value=\"oui\"  onclick=\"cours_essai('0')\"> J'ai d\u00e9j\u00e0 pay\u00e9 un cours d'essai\n\t\t<\/label>\n\t\t\n\t\t<table id=\"tab-annuel\" class=\"popup-tab\" cellpadding=\"8\" cellspacing=\"0\"  style=\"display:flex;font-weight:bold;\">\n\t\t\t<tr>\n\t\t\t\t<td style=\"width:200px;\">\n\t\t\t\t\tCo\u00fbt annuel des cours<br>(pay\u00e9 sur 10 mois)\n\t\t\t\t\t<!--label style=\"text-align: left;\">\n\t\t\t\t\t\t<input id=\"box-paiement-10-fois\" type=\"checkbox\" name=\"paiement-10-fois\" value=\"oui\"> Payer en 10 fois\n\t\t\t\t\t<\/label-->\n\t\t\t\t<\/td>\n\t\t\t\t<td style=\"color:black;font-weight:bold;min-width:60px;\" ><span id=\"popup-cout-abonnement\">500<\/span> \u20ac<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td style=\"color:black;font-weight:normal;\">Co\u00fbt de la m\u00e9thode<br>(\u00e0 payer dans un second temps) <\/td>\n\t\t\t\t<td style=\"color:black;font-weight:normal;\">89 \u20ac<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr style=\"display:none;\">\n\t\t\t\t<td>TOTAL<\/td>\n\t\t\t\t<td style=\"color:black;font-weight:bold;\" ><span id=\"popup-cout-total\">589<\/span> \u20ac<\/td>\n\t\t\t<\/tr>\n\t\t<\/table>\n\t\t\n\t\t<table id=\"tab-essai\" class=\"popup-tab\" cellpadding=\"8\" cellspacing=\"0\" style=\"display:none;\">\n\t\t\t<tr>\n\t\t\t\t<td style=\"width:200px;\">Co\u00fbt du cours d'essai<\/td>\n\t\t\t\t<td style=\"color:black;font-weight:bold;min-width:60px;\" id=\"popup-cout-essai\">15 \u20ac<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>TOTAL<\/td>\n\t\t\t\t<td style=\"color:black;font-weight:bold;\" id=\"popup-cout-essai-total\">15 \u20ac<\/td>\n\t\t\t<\/tr>\n\t\t<\/table>\n\t\t<table id=\"tab-stage\" class=\"popup-tab\" cellpadding=\"8\" cellspacing=\"0\"  style=\"display:none;font-weight:bold;\">\n\t\t\t<tr>\n\t\t\t\t<td style=\"width:200px;\">\n\t\t\t\t\tCo\u00fbt du stage\n\t\t\t\t<\/td>\n\t\t\t\t<td style=\"color:black;font-weight:bold;min-width:60px;\" ><span id=\"popup-cout-stage\">95<\/span> \u20ac<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td style=\"color:black;font-weight:normal;\">Co\u00fbt de la m\u00e9thode<\/td>\n\t\t\t\t<td style=\"color:black;font-weight:normal;\">offert<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr style=\"display:none;\">\n\t\t\t\t<td>TOTAL<\/td>\n\t\t\t\t<td style=\"color:black;font-weight:bold;\" ><span id=\"popup-cout-total\">99,99<\/span> \u20ac<\/td>\n\t\t\t<\/tr>\n\t\t<\/table>\n\t\t<label style=\"text-align: left;\" id=\"label-cgv\">\n\t\t\t<input id=\"box-cgv\" type=\"checkbox\" name=\"accepter_conditions\" value=\"oui\"> Accepter les <a href=\"https:\/\/www.melopie.com\/conditions-generales-de-vente-2\/\" target=\"_blank\">Conditions g\u00e9n\u00e9rales de vente<\/a>\n\n\t\t<\/label>\n\t\t\n\t\t<div id=\"payer-abonnement\" class=\"div-button\">\n\t\t\tEtape 1 sur 2 \u2192 <button class='btn' onclick='paiement()'>Payer les cours<\/button>\n\t\t<\/div>\n\t\t\n\t\t<div id=\"payer-essai\" class=\"div-button\" style=\"display:none;\">\n\t\t\t<button class='btn' onclick='paiement()'>Payer<\/button>\n\t\t<\/div>\n\t\t\n\t\t<div id=\"payer-stage\" class=\"div-button\" style=\"display:none;\">\n\t\t\t<button class='btn' onclick='paiement()'>Payer le stage<\/button>\n\t\t<\/div>\n\t\t\n\t\t<input id=\"secu\" type=\"text\" name=\"website\" style=\"display:none;\">\n\t<\/div>\n\t<\/div>\n<\/div>\n    \n<script>\n\tlet searchButton = document.getElementById('search-button');\n\tlet reduction = 0;\n\tlet cout_abonnement = 0;\n\tlet id_cours = 0;\n\tlet essai_checked = false;\n\tlet pid = null;\n\tlet adresse = \"all\";\n\tlet cours = \"\";\n\tlet format_cours = \"\";\n\tlet stage_selected = false;\n\t\/\/let root_url = \"https:\/\/www.smark.tech\/\";\n\t\/\/let root_url = \"https:\/\/www.melopie.com\/\";\n\tlet root_url = window.location.origin+\"\/\";\n\t\n\tfunction paiement(){\n\t\tlet telephone = getElementById(\"#telephone-enfant-input\").value.trim();\n\t\tlet email = getElementById(\"#email-enfant-input\").value.trim();\n\t\tlet nom = getElementById(\"#nom-enfant-input\").value.trim();\n\t\tlet prenom = getElementById(\"#prenom-enfant-input\").value.trim();\n\t\tlet age = getElementById(\"#age-enfant-input\").value;\n\t\tlet essai = essai_checked;\n\t\tlet essai_paye = false;\n\t\tif(!essai_checked)essai_paye = getElementById(\"#box-cours-essai-paye\").checked;\n\t\tlet cgv = getElementById(\"#box-cgv\").checked;\n\t\t\/\/let ck = getElementById(\"#box-paiement-10-fois\");\n\t\tlet paiement10fois = true;\n\t\t\/\/if(ck)paiement10fois = ck.checked;\n\t\tlet secu = getElementById(\"#secu\").checked;\n\t\tlet sexe_garcon = getElementById(\"#sexe-enfant-input-garcon\").checked;\n\t\tlet sexe_fille = getElementById(\"#sexe-enfant-input-fille\").checked;\n\t\tlet sexe = \"gar\u00e7on\";\n\t\tlet canal = getElementById(\"#canal-input\").value;\n\t\tlet profession = getElementById(\"#profession-input\").value.trim();\n\t\tconst regex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n\t\tif (telephone == \"\") {alert(\"Veuillez renseigner un t\u00e9l\u00e9phone.\");return;}\n\t\tif(!regex.test(email)){alert(\"Veuillez renseigner un email valide.\");return;}\n\t\tif (!isAddressValidatedByClick()) {\n\t\t\talert(\"Veuillez s\u00e9lectionner une adresse dans la liste de suggestions.\");\n\t\t\t$(\"address\").focus();\n\t\t\treturn;\n\t\t}\n\t\tlet address = selectedAddress.address.house_number+\" \"+selectedAddress.address.road;\n\t\tlet cp = selectedAddress.address.postcode;\n\t\tlet ville = selectedAddress.address.city || selectedAddress.address.town || selectedAddress.address.village || selectedAddress.address.hamlet;\n\t\tlet pays = selectedAddress.address.country_code.toUpperCase();\n\t\tif (nom == \"\") {alert(\"Veuillez renseigner le nom de votre enfant.\");return;}\n\t\tif (prenom == \"\") {alert(\"Veuillez renseigner le pr\u00e9nom de votre enfant.\");return;}\n\t\tif(!sexe_garcon && !sexe_fille){alert(\"Veuillez renseigner le sexe de votre enfant.\");return;}\n\t\tif(sexe_fille)sexe = \"fille\";\n\t\tif (profession == \"\") {alert(\"Veuillez renseigner la profession des parents.\");return;}\n\t\tif (canal == 0) {alert(\"Veuillez renseigner comment vous nous avez connu.\");return;}\n\t\tif(cgv == false) {alert(\"Veuillez valider les conditions g\u00e9n\u00e9rales de vente.\");return;}\n\t\t\n\t\t\/\/ Cr\u00e9e le formulaire\n\t\tconst form = document.createElement(\"form\");\n\t\tform.method = \"POST\";\n\t\tform.action = root_url+\"PLATEFORME\/stripe_paiement.php\";\n\t\tform.target = \"_blank\"; \/\/ Ouvre dans un nouvel onglet\n\n\t\t\/\/ Liste de tes variables\n\t\tconst donnees = {\n\t\t\tid_cours: id_cours,\n\t\t\ttelephone: telephone,\n\t\t\temail: email,\n\t\t\tadresse: address,\n\t\t\tville: ville,\n\t\t\tcp: cp,\n\t\t\tpays: pays,\n\t\t\tnom: nom,\n\t\t\tprenom: prenom,\n\t\t\tage: age,\n\t\t\tessai: essai,\n\t\t\tstage: stage_selected,\n\t\t\tessai_paye: essai_paye,\n\t\t\tpaiement10fois: paiement10fois,\n\t\t\tsexe: sexe,\n\t\t\tcanal: canal,\n\t\t\tprofession: profession,\n\t\t\tsecu: secu,\n\t\t\tcout_abonnement: cout_abonnement-reduction\n\t\t};\n\n\t\t\/\/ Cr\u00e9e les champs hidden pour chaque variable\n\t\tfor (const nom in donnees) {\n\t\tconst input = document.createElement(\"input\");\n\t\t\tinput.type = \"hidden\";\n\t\t\tinput.name = nom;\n\t\t\tinput.value = donnees[nom];\n\t\t\tform.appendChild(input);\n\t\t}\n\n\t\t\/\/ Ajoute le formulaire au document, le soumet, puis le retire\n\t\tdocument.body.appendChild(form);\n\t\tform.submit();\n\t\tdocument.body.removeChild(form);\n\t\tclose_login_popup();\n\t}\n\t\n\tfunction cours_essai(essai) {\/\/Met \u00e0 jour le tableau des paiement selon si la case \"cours d'essai\" est coch\u00e9e ou pas.\n\t\tlet checked = false;\n\t\tlet champs = null;\n\t\tif(essai==\"1\")checked=true;\n\t\telse checked=false;\n\t\t\n\t\tif (checked) {\n\t\t\tchamps = document.querySelectorAll('#box-cours-essai-paye');\n\t\t\tchamps.forEach(champ => {if (isVisible(champ)){\n\t\t\t\tif(champ.checked){\n\t\t\t\t\tchamp.checked = false;\n\t\t\t\t\treduction = 0;\n\t\t\t\t\tchamps = document.querySelectorAll('#popup-cout-abonnement');\n\t\t\t\t\tchamps.forEach(champ => {if (isVisible(champ))champ.innerHTML = cout_abonnement-reduction;});\n\t\t\t\t\tchamps = document.querySelectorAll('#popup-cout-total');\n\t\t\t\t\tchamps.forEach(champ => {if (isVisible(champ))champ.innerHTML = (cout_abonnement+89-reduction);});\n\t\t\t\t}\n\t\t\t}});\n\t\t\t\n\t\t\tchamps = document.querySelectorAll('#tab-annuel');\n\t\t\tchamps.forEach(champ => {\n\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t});\n\t\t\tchamps = document.querySelectorAll('#tab-stage');\n\t\t\tchamps.forEach(champ => {\n\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t});\n\t\t\tchamps = document.querySelectorAll('#tab-essai');\n\t\t\tchamps.forEach(champ => {\n\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\tif(isVisible(parent))champ.style.display = 'flex';\n\t\t\t});\n\t\t\tchamps = document.querySelectorAll('#payer-abonnement');\n\t\t\tchamps.forEach(champ => {\n\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t});\n\t\t\tchamps = document.querySelectorAll('#payer-stage');\n\t\t\tchamps.forEach(champ => {\n\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t});\n\t\t\tchamps = document.querySelectorAll('#payer-essai');\n\t\t\tchamps.forEach(champ => {\n\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\tif(isVisible(parent))champ.style.display = 'flex';\n\t\t\t});\n\t\t} else {\n\t\t\tchamps = document.querySelectorAll('#box-cours-essai-paye');\n\t\t\tchamps.forEach(champ => {if (isVisible(champ)){\n\t\t\t\tif(champ.checked)reduction=15;\n\t\t\t\telse reduction = 0;\n\t\t\t}});\n\t\t\tchamps = document.querySelectorAll('#popup-cout-abonnement');\n\t\t\tchamps.forEach(champ => {if (isVisible(champ))champ.innerHTML = cout_abonnement-reduction;});\n\t\t\tchamps = document.querySelectorAll('#popup-cout-total');\n\t\t\tchamps.forEach(champ => {if (isVisible(champ))champ.innerHTML = (cout_abonnement+89-reduction);});\n\t\t\t\t\t\n\t\t\tif(!stage_selected){\n\t\t\t\tchamps = document.querySelectorAll('#tab-annuel');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'flex';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#tab-stage');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#tab-essai');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#payer-abonnement');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'flex';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#payer-stage');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#payer-essai');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t\t});\n\t\t\t}\n\t\t\telse{\n\t\t\t\tchamps = document.querySelectorAll('#tab-annuel');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#tab-stage');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'flex';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#tab-essai');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#payer-abonnement');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#payer-stage');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'flex';\n\t\t\t\t});\n\t\t\t\tchamps = document.querySelectorAll('#payer-essai');\n\t\t\t\tchamps.forEach(champ => {\n\t\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\t\tif(isVisible(parent))champ.style.display = 'none';\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\t\n\tfunction getElementById(id){\n\t\tlet retour = null;\n\t\tlet champs = document.querySelectorAll(id);\n\t\tchamps.forEach(champ => {\n\t\t\tconst parent = champ.parentElement;\n\t\t\tif(!!(parent.offsetWidth || parent.offsetHeight || parent.getClientRects().length)){retour = champ;}\n\t\t});\n\t\treturn retour;\n\t}\n\t\n\tfunction isVisible(elem) {\n\t  return !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);\n\t}\n\n\tdocument.addEventListener(\"DOMContentLoaded\", function() {\n\t\t\/\/ Fonction pour r\u00e9cup\u00e9rer les param\u00e8tres de l'URL\n\t\tfunction getQueryParam(param) {\n\t\t\tconst urlParams = new URLSearchParams(window.location.search);\n\t\t\treturn urlParams.get(param);\n\t\t}\n\n\t\t\/\/ R\u00e9cup\u00e9ration des 3 param\u00e8tres\n\t\tcours = getQueryParam('type');\n\t\tformat_cours = getQueryParam('format');\n\t\tadresse = getQueryParam('adresse');\n\t\tpid = getQueryParam('pid');\n\t\t\n\t\t\t\t\n\t\tif(pid != null)lancer_recherche();\n\t\telse if (cours && format_cours && adresse) {\/\/ Si les trois param\u00e8tres sont renseign\u00e9s\n\t\t\tconst typeInput = getElementById('#type-cours');\n\t\t\tconst formatInput = getElementById('#format-cours');\n\t\t\tconst adresseInput = getElementById('#adresse');\n\n\t\t\tif (typeInput) typeInput.value = mtype;\n\t\t\tif (formatInput) formatInput.value = mformat;\n\t\t\tif (adresseInput) adresseInput.value = madresse;\n\n\t\t\tlancer_recherche();\n\t\t}\n\t});\n\n\tfunction lancer_recherche(){\n\t\tlet champ = getElementById('#adresse');\n\t\tif(champ!=null)adresse = champ.value;\n\t\n\t\tchamp = getElementById('#type-cours');\n\t\tif(champ!=null)cours = champ.value;\n\t\n\t\tchamp = getElementById('#format-cours');\n\t\tif(champ!=null)format_cours = champ.value;\n\n\t\t\/\/ R\u00e9cup\u00e9ration des valeurs du formulaire\n\t\t\/\/let cours = document.getElementById('type-cours').value;\n\t\t\/\/let adresse = document.getElementById('adresse').value;\n\t\tif(adresse == null && pid == null){\n\t\t\tif(format_cours == \"en_ligne\")adresse=\"all\";\n\t\t\telse{\n\t\t\t\talert(\"Vous devez rentrer votre adresse pour trouver des cours pr\u00e8s de chez vous...\");\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\tif(adresse != null){\n\t\t\tif(adresse.length == 0 && pid == null){\n\t\t\t\tif(format_cours == \"en_ligne\")adresse=\"all\";\n\t\t\t\telse{\n\t\t\t\t\talert(\"Vous devez rentrer votre adresse pour trouver des cours pr\u00e8s de chez vous...\");\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t\n\t\tsearchButton = getElementById('#search-button');\n\t\tif(searchButton!=null)searchButton.innerHTML = \"\u23f3\";\n\t\t\n\t\t\/\/ Cr\u00e9ation de l'objet XMLHttpRequest\n\t\tlet xhr = new XMLHttpRequest();\n\t\tlet url = \"\";\n\t\tif(pid == null)url = root_url+\"PLATEFORME\/get_cours.php?cours=\" + encodeURIComponent(cours) + \"&format=\" + encodeURIComponent(format_cours) + \"&adresse=\" + encodeURIComponent(adresse);\n\t\telse url = root_url+\"PLATEFORME\/get_cours.php?pid=\" + encodeURIComponent(pid);\n\t\txhr.open(\"GET\", url, true);\n\n\t\t\/\/ Gestion de la r\u00e9ponse\n\t\txhr.onreadystatechange = function () {\n\t\t\tif (xhr.readyState === 4 && xhr.status === 200) {\n\t\t\t\ttry {\n\t\t\t\t\t\/\/ Parser la r\u00e9ponse JSON\n\t\t\t\t\tdisplayCours(xhr.responseText);\n\t\t\t\t\tif(searchButton!=null)searchButton.innerHTML = \"\ud83d\udd0d\";\n\t\t\t\t\t\/\/ Affichage dans la div.content\n\t\t\t\t\t\/\/document.querySelector('.content').innerHTML = \"<pre>\" + JSON.stringify(response, null, 4) + \"<\/pre>\";\n\t\t\t\t} catch (e) {\n\t\t\t\t\tdocument.querySelector('.content').innerHTML = \"Erreur lors de la r\u00e9cup\u00e9ration des donn\u00e9es.\";\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\t\/\/ Envoi de la requ\u00eate\n\t\txhr.send();\n\t}\n\t\n\tfunction cours_en_ligne(){\n\t\tlet champs = document.querySelectorAll('#format-cours');\n\t\tchamps.forEach(champ => {\n\t\t\tchamp.value=\"en_ligne\";\n\t\t});\n\t\tchamps = document.querySelectorAll('#adresse');\n\t\tchamps.forEach(champ => {\n\t\t\tchamp.value=\"all\";\n\t\t});\n\t\tpid=null;\n\t\tformat_cours=\"en_ligne\";\n\t\tlancer_recherche();\n\t}\n\t\n\tfunction displayCours(myJSON) {\n\t\tconst COUT_METHODE = 89;\n\t\tlet profsList = JSON.parse(myJSON);\n\t\tif(profsList.professeurs.length > 0){\n\t\t\tif(profsList.professeurs[0].professeur_en_ligne == \"0\")format_cours = \"en_physique\";\n\t\t\telse format_cours = \"en_ligne\";\n\t\t\tcours = profsList.professeurs[0].professeur_type;\n\t\t\tpid=null;\n\t\t}\n\t\t\n\t\tlet screen_width = window.innerWidth;\/\/on mesure la largeur de la fen\u00eatre pour savoir si on est en mode desktop ou mobile < 700\n\t\t\t\t\t\n\t\tlet contentDiv = document.querySelector('.content2');\n\t\tlet champs = document.querySelectorAll('.content2');\n\t\tchamps.forEach(champ => {if (isVisible(champ))contentDiv = champ;});\n\t\t\n\t\tcontentDiv.innerHTML = '';\n\t\tlet str_panel1 = \"Si vous ne trouvez pas de cours pr\u00e8s de chez vous, vous pouvez :<br>\";\n\t\tif(profsList.professeurs.length == 0)str_panel1 = \"Il semble qu'il n'y ait aucun professeur pr\u00e8s de chez vous. Vous pouvez :<br>\";\n\n\t\t\/\/Affichage de la liste des professeurs\n\t\tif(screen_width > 700){\/\/mode desktop\n\t\t\tprofsList.professeurs.forEach(profs => {\n\t\t\t\tlet panel = document.createElement('div');\n\t\t\t\tpanel.className = 'panel';\n\t\t\t\tpanel.style.width = \"1000px\";\n\t\t\t\t\n\t\t\t\tlet content = \"\";\n\t\t\t\t\n\t\t\t\tlet type_prof = \"Professeur de \"+profs.professeur_type;\n\t\t\t\tif(profs.professeur_type == \"anglais\")type_prof = \"Professeur d'anglais\";\n\t\t\t\t\n\t\t\t\tcontent = \"<div class='left-panel'>\"+\n\t\t\t\t\t\t\t\"<img src='\"+profs.professeur_photo+\"' alt='Photo'>\"+\n\t\t\t\t\t\t\t\"<div class='left-panel-center'>\"+\n\t\t\t\t\t\t\t\t\"<div class='prof-name'>\"+profs.professeur_prenom+\" \"+profs.professeur_nom+\"<\/div>\";\n\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\")content += \"<div>\ud83d\udccd\"+profs.professeur_ville+\" (\"+profs.professeur_CP+\")<\/div>\";\n\t\t\t\t\t\t\t\tcontent += \"<div style='height: 20px;'>\"+type_prof+\"<\/div>\"+\n\t\t\t\t\t\t\t\t\"<div style = 'font-size:10px;height: 20px;'>\"+ Math.round( (parseInt(profs.professeur_tarif) + COUT_METHODE)\/ parseInt(profs.professeur_volume_horaire)) +\" \u20ac \/ heure<\/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='right-panel'>\";\n\t\t\t\t\/\/affichage de la liste des cours du prof\n\t\t\t\tcontent += \"<div style='text-align:left;font-size:16px;'>Liste des cours propos\u00e9s \";\n\t\t\t\tif(profs.professeur_en_ligne==\"0\") content += \"chez un parent-h\u00f4te \";\n\t\t\t\telse content += \"en ligne \";\n\t\t\t\tcontent += \"par ce professeur<\/div>\"+\n\t\t\t\t\t\t\t\t\"<div class='panel-titre'><div id='cours-prof-\"+profs.professeur_id+\"' class='panel-reduced'><table>\"+\n\t\t\t\t\t\t\t\t\t\"<thead>\"+\n\t\t\t\t\t\t\t\t\t\t\"<tr>\";\n\t\t\t\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\")content += \"<th>Parent h\u00f4te<\/th>\";\n\t\t\t\t\t\t\t\t\t\t\tcontent += \"<th style='width:110px;'>Horaires<\/th>\"+\n\t\t\t\t\t\t\t\t\t\t\t\"<th>Niveau\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\"<span class='tooltip'><span style='font-style:normal;'>\u2139\ufe0f<\/span>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"<span class='tooltiptext'>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Niveau 1 : D\u00e9butant, de 3 \u00e0 6 ans<br>Niveau 2 : 1 an d'exp\u00e9rience, de 4 \u00e0 7 ans<br>Niveau 3 : 2 ans d'exp\u00e9rience, de 5 \u00e0 8 ans\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"<\/span>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\"<\/span>\"+\n\t\t\t\t\t\t\t\t\t\t\t\"<\/th>\";\n\t\t\t\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\")content += \"<th>Adresse<\/th>\";\n\t\t\t\t\t\t\t\t\t\t\tcontent += \"<th>Places<\/th>\"+\n\t\t\t\t\t\t\t\t\t\t\t\"<th style='width:220px;'><\/th>\"+\n\t\t\t\t\t\t\t\t\t\t\"<\/tr>\"+\n\t\t\t\t\t\t\t\t\t\"<\/thead>\"+\n\t\t\t\t\t\t\t\t\t\"<tbody>\";\n\t\t\t\tprofs.parents.forEach(parents => {\n\t\t\t\t\tif(parents.cours.length > 0){\n\t\t\t\t\t\tparents.cours.forEach(cours => {\n\t\t\t\t\t\t\tcontent += \"<tr>\";\n\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\")content += \"<td style='max-width:150px;'> <img src='\"+parents.parent_photo+\"' alt='Parent h\u00f4te'> \"+parents.parent_prenom+\" \"+parents.parent_nom+\"<\/td>\";\n\t\t\t\t\t\t\tcontent += \"<td>\"+cours.cours_creneau;\n\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"1\")content += \" (heure de \"+cours.cours_utc+\")\";\n\t\t\t\t\t\t\tcontent += \"<\/td>\"+\n\t\t\t\t\t\t\t\"<td style='text-align:center;'>\"+cours.cours_niveau+\"<\/td>\";\n\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\")content += \"<td style='max-width:200px;font-size:12px;'><a href='https:\/\/www.google.com\/maps?q=\" + parents.parent_latitude + \",\" + parents.parent_longitude + \"' target='_blank'>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tparents.parent_rue.substring(0,20)+\"... \"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tparents.parent_CP+\" \"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\u2197<\/a>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/\"<br>\"+parents.parent_distance+\" km de chez vous\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"<\/td>\";\n\t\t\t\t\t\t\tcontent += \"<td style='text-align:center;'>\"+(cours.cours_nb_eleve_max-cours.cours_nb_eleves)+\" sur \"+cours.cours_nb_eleve_max+\"<\/td>\";\n\t\t\t\t\t\t\t\/\/On d\u00e9termine laquelle des date de cours d'essai est situ\u00e9e dans l'avenir le plus proche\n\t\t\t\t\t\t\tlet date_cours_essai = cours.cours_date_cours_essai;\n\t\t\t\t\t\t\tlet now = Math.floor(Date.now() \/ 1000);\n\t\t\t\t\t\t\tif(date_cours_essai < now)date_cours_essai = cours.cours_date_cours_essai2;\n\t\t\t\t\t\t\tif(date_cours_essai < now)date_cours_essai = cours.cours_date_cours_essai3;\n\t\t\t\t\t\t\tlet date_premier_cours = cours.date_premier_cours;\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tif(cours.cours_nb_eleves < cours.cours_nb_eleve_max){\n\t\t\t\t\t\t\t\tlet m_creneau = cours.cours_creneau;\n\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"1\") m_creneau += \" <small>(heure de \"+cours.cours_utc+\")<\/small><br>\";\n\t\t\t\t\t\t\t\t\/\/if(date_cours_essai < now)content+=\"<td style='text-align:center;'><button class='btn' onclick='inscription(\"+cours.cours_id+\", \\\"\"+cours.cours_creneau+\"\\\", \"+cours.cours_niveau+\", \"+profs.professeur_tarif+\", \"+date_cours_essai+\", null)'>M'INSCRIRE<button><\/td>\";\n\t\t\t\t\t\t\t\t\/\/else \n\t\t\t\t\t\t\t\t\tcontent+=\"<td style='text-align:center;'><select class='select-btn' onchange='inscription(\"+cours.cours_id+\", \\\"\"+m_creneau+\"\\\", \"+cours.cours_niveau+\", \"+profs.professeur_tarif+\", \"+profs.professeur_tarif_stage+\", \"+date_cours_essai+\", \"+date_premier_cours+\", this)'>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \"<option hidden selected>M'INSCRIRE<\/option>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  if(cours.cours_stage==\"1\")content+=\"<option value='2'>\u00e0 ce stage<\/option>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  else{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  if(date_cours_essai > now)content+=\"<option value='1'>\u00e0 un cours d'essai<\/option>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  content+=\"<option value='0'>\u00e0 l'ann\u00e9e<\/option>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  content+=\"<\/select><\/td>\";\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\telse content += \"<td>Plein<\/td>\";\n\t\t\t\t\t\t\tcontent += \"<\/tr>\";\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tif(profs.professeur_creneaux_dispo.length > 0 && profs.professeur_en_ligne==\"0\"){\n\t\t\t\t\tprofsList.creneaux.forEach(option => {\n\t\t\t\t\t\tif(profs.professeur_creneaux_dispo.includes(option.ID)){\n\t\t\t\t\t\t\tcontent += \"<tr>\";\n\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\")content += \"<td style='max-width:150px;'> <img src='https:\/\/www.melopie.com\/wp-content\/uploads\/2025\/06\/parent-hote-min.png' alt='Parent h\u00f4te'> Vous ?<\/td>\";\n\t\t\t\t\t\t\tcontent += \"<td style='max-width:150px;'>\"+option.jour+\" \"+option.plage;\n\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"1\")content += \" (heure de \"+option.cours_utc+\")\";\n\t\t\t\t\t\t\tcontent += \"<\/td>\"+\n\t\t\t\t\t\t\t\"<td style='text-align:center;' colspan=3>\"+\n\t\t\t\t\t\t\t\"<span style='font-size:14px;'>Devenez parent-h\u00f4te sur ce cr\u00e9neau<br>et <strong>b\u00e9n\u00e9ficiez de la gratuit\u00e9 \u2728<\/strong><\/span><br>\"+\n\t\t\t\t\t\t\t\"<span style='font-size:10px;'>\u00e0 partir de 8 \u00e9l\u00e8ves inscrits<\/span><\/td>\";\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tcontent += \"<td><button class='btn' style='margin-left:10px;font-size:12px;' onclick=\\\"window.open('https:\/\/www.melopie.com\/cours-de-musique-pour-enfant-parent-hote\/', '_blank')\\\"><img src='https:\/\/www.melopie.com\/wp-content\/uploads\/2025\/05\/play.png' alt='Play' style='width: 20px; height: 20px; margin-right: 5px;'>Devenir parent h\u00f4te<\/button><\/td>\";\n\t\t\t\t\t\t\tcontent += \"<\/tr>\";\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tcontent += \"<\/tbody><\/table><\/div><\/div>\";\n\t\t\t\t\/\/if(profs.parents.length > 3)content += \"<button id='button-cours-prof-\"+profs.professeur_id+\"' onclick='voir_plus_cours(\\\"cours-prof-\"+profs.professeur_id+\"\\\")'>Voir plus<\/button>\";\n\n\t\t\t\tpanel.innerHTML = content;\n\t\t\t\tcontentDiv.appendChild(panel);\n\n\t\t\t});\n\t\t}\n\t\telse{\/\/mode mobile\n\t\t\tprofsList.professeurs.forEach(profs => {\n\t\t\t\tlet panel = document.createElement('div');\n\t\t\t\tpanel.className = 'panel';\n\t\t\t\tpanel.style.width = \"400px\";\n\t\t\t\t\n\t\t\t\tlet content = \"\";\n\t\t\t\t\n\t\t\t\tlet type_prof = \"professeur de \"+profs.professeur_type;\n\t\t\t\tif(profs.professeur_type == \"anglais\")type_prof = \"professeur d'anglais\";\n\t\t\t\t\n\t\t\t\tcontent = \"<div class='right-panel'>\";\n\t\t\t\tif(true){\n\t\t\t\t\tcontent += \"<div style='text-align:left;font-size:14px;'><img src='\"+profs.professeur_photo+\"' alt='Photo' style='float:left;border-radius: 0;width:50px;height:50px;'>\"+\n\t\t\t\t\t\tprofs.professeur_prenom+\" \"+profs.professeur_nom+\" (\"+type_prof+\") propose les cours \";\n\t\t\t\t\tif(profs.professeur_en_ligne==\"0\") ;\/\/content += \"chez un parent-h\u00f4te \";\n\t\t\t\t\telse content += \"en ligne \";\n\t\t\t\t\tcontent += \"suivant :<\/div>\"+\n\t\t\t\t\t\t\t\t\t\"<div class='panel-titre'><div id='cours-prof-\"+profs.professeur_id+\"' class='panel-reduced'>\";\n\t\t\t\t\tprofs.parents.forEach(parents => {\n\t\t\t\t\t\tif(parents.cours.length > 0){\n\t\t\t\t\t\t\tparents.cours.forEach(cours => {\n\t\t\t\t\t\t\t\tcontent += \"<table>\";\n\t\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\"){\n\t\t\t\t\t\t\t\t\t\tcontent += \"<tr><th>Parent h\u00f4te<\/th>\";\n\t\t\t\t\t\t\t\t\t\tcontent += \"<td style='max-width:150px;'> <img src='\"+parents.parent_photo+\"' alt='Parent h\u00f4te'> \"+parents.parent_prenom+\" \"+parents.parent_nom+\"<\/td><\/tr>\";\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tcontent += \"<tr><th>Horaire<\/th>\";\n\t\t\t\t\t\t\t\t\tcontent += \"<td style='max-width:150px;'>\"+cours.cours_creneau;\n\t\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"1\")content += \" (heure de \"+cours.cours_utc+\")\";\n\t\t\t\t\t\t\t\t\tcontent += \"<\/td>\";\n\t\t\t\t\t\t\t\t\tcontent += \"<\/tr><tr><th>Niveau\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"<span class='tooltip'><span style='font-style:normal;'>\u2139\ufe0f<\/span>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"<span class='tooltiptext'>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Niveau 1 : D\u00e9butant, de 3 \u00e0 6 ans<br>Niveau 2 : 1 an d'exp\u00e9rience, de 4 \u00e0 7 ans<br>Niveau 3 : 2 ans d'exp\u00e9rience, de 5 \u00e0 8 ans\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"<\/span>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"<\/span>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\"<\/th>\";\n\t\t\t\t\t\t\t\t\tcontent += \"<td style='text-align:left;'>\"+cours.cours_niveau+\"<\/td>\";\n\t\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\"){\n\t\t\t\t\t\t\t\t\t\tcontent += \"<\/tr><tr><th>Adresse<\/th>\";\n\t\t\t\t\t\t\t\t\t\tcontent += \"<td style='max-width:200px;font-size:12px;'><a href='https:\/\/www.google.com\/maps?q=\" + parents.parent_latitude + \",\" + parents.parent_longitude + \"' target='_blank'>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tparents.parent_rue.substring(0,20)+\"... \"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tparents.parent_CP+\" \"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\u2197<\/a>\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/\"<br>\"+parents.parent_distance+\" km de chez vous\"+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"<\/td>\";\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tcontent += \"<\/tr><tr><th>Places<\/th>\";\n\t\t\t\t\t\t\t\t\tcontent += \"<td style='text-align:left;'>\"+(cours.cours_nb_eleve_max-cours.cours_nb_eleves)+\" sur \"+cours.cours_nb_eleve_max+\"<\/td>\";\n\t\t\t\t\t\t\t\t\t\/\/On d\u00e9termine laquelle des date de cours d'essai est situ\u00e9e dans l'avenir le plus proche\n\t\t\t\t\t\t\t\t\tlet date_cours_essai = cours.cours_date_cours_essai;\n\t\t\t\t\t\t\t\t\tlet now = Math.floor(Date.now() \/ 1000);\n\t\t\t\t\t\t\t\t\tif(date_cours_essai < now)date_cours_essai = cours.cours_date_cours_essai2;\n\t\t\t\t\t\t\t\t\tif(date_cours_essai < now)date_cours_essai = cours.cours_date_cours_essai3;\n\t\t\t\t\t\t\t\t\tlet date_premier_cours = cours.date_premier_cours;\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tif(cours.cours_nb_eleves < cours.cours_nb_eleve_max){\n\t\t\t\t\t\t\t\t\t\tlet m_creneau = cours.cours_creneau;\n\t\t\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"1\") m_creneau += \" <small>(heure de \"+cours.cours_utc+\")<\/small><br>\";\n\t\t\t\t\t\t\t\t\t\t\/\/if(date_cours_essai < now)content+=\"<td style='text-align:center;'><button class='btn' onclick='inscription(\"+cours.cours_id+\", \\\"\"+cours.cours_creneau+\"\\\", \"+cours.cours_niveau+\", \"+profs.professeur_tarif+\", \"+date_cours_essai+\", null)'>M'INSCRIRE<button><\/td>\";\n\t\t\t\t\t\t\t\t\t\t\/\/else \n\t\t\t\t\t\t\t\t\t\t\tcontent+=\"<\/tr>\";\n\t\t\t\t\t\t\t\t\t\t\tcontent+=\"<td colspan='2' style='text-align:left;background:#def3ff;'><select class='select-btn' onchange='inscription(\"+cours.cours_id+\", \\\"\"+m_creneau+\"\\\", \"+cours.cours_niveau+\", \"+profs.professeur_tarif+\", \"+profs.professeur_tarif_stage+\", \"+date_cours_essai+\", \"+date_premier_cours+\", this)'>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  content+=\"<option hidden selected>M'INSCRIRE<\/option>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  if(cours.cours_stage==\"1\")content+=\"<option value='2'>\u00e0 ce stage<\/option>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  else{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  if(date_cours_essai > now)content+=\"<option value='1'>\u00e0 un cours d'essai<\/option>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  content+=\"<option value='0'>\u00e0 l'ann\u00e9e<\/option>\";\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  content+=\"<\/select><\/td>\";\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\telse content += \"<\/tr><tr><td colspan='2' style='text-align:left;background:#def3ff;'>Plein<\/td>\";\n\t\t\t\t\t\t\t\t\tcontent += \"<\/tr><\/table>\";\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tif(profs.professeur_creneaux_dispo.length > 0 && profs.professeur_en_ligne==\"0\"){\n\t\t\t\t\t\tprofsList.creneaux.forEach(option => {\n\t\t\t\t\t\t\tif(profs.professeur_creneaux_dispo.includes(option.ID)){\n\t\t\t\t\t\t\t\tcontent += \"<table>\";\n\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"0\"){\n\t\t\t\t\t\t\t\t\tcontent += \"<tr><th>Parent h\u00f4te<\/th>\";\n\t\t\t\t\t\t\t\t\tcontent += \"<td style='max-width:150px;'> <img src='https:\/\/www.melopie.com\/wp-content\/uploads\/2025\/06\/parent-hote-min.png' alt='Parent h\u00f4te'>Vous ?<\/td><\/tr>\";\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tcontent += \"<tr><th>Horaire<\/th>\";\n\t\t\t\t\t\t\t\tcontent += \"<td style='max-width:150px;'>\"+option.jour+\" \"+option.plage;\n\t\t\t\t\t\t\t\tif(profs.professeur_en_ligne==\"1\")content += \" (heure de \"+option.cours_utc+\")\";\n\t\t\t\t\t\t\t\tcontent += \"<\/td>\";\n\t\t\t\t\t\t\t\tcontent += \"<\/tr><tr><th rowspan=3><\/th>\";\n\t\t\t\t\t\t\t\tcontent += \"<td style='text-align:left;' rowspan=3>Devenez parent-h\u00f4te sur ce cr\u00e9neau<br>et <strong>b\u00e9n\u00e9ficiez de la gratuit\u00e9 \u2728<\/strong><\/td>\";\n\t\t\t\t\t\t\t\tcontent += \"<\/tr><tr>\";\n\t\t\t\t\t\t\t\tcontent += \"<\/tr><tr><\/tr><tr>\";\n\t\t\t\t\t\t\t\tcontent += \"<td colspan='2' style='text-align:left;background:#def3ff;'><button class='btn' style='margin-left:20px;' onclick=\\\"window.open('https:\/\/www.melopie.com\/cours-de-musique-pour-enfant-parent-hote\/', '_blank')\\\"><img src='https:\/\/www.melopie.com\/wp-content\/uploads\/2025\/05\/play.png' alt='Play' style='width: 20px; height: 20px; margin-right: 5px;'>Devenir parent h\u00f4te<\/button><\/td>\";\n\t\t\t\t\t\t\t\tcontent += \"<\/tr>\";\n\t\t\t\t\t\t\t\tcontent += \"<\/table>\";\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tcontent += \"<\/tbody><\/table><\/div><\/div>\";\n\t\t\t\t\t\/\/if(profs.parents.length > 3)content += \"<button id='button-cours-prof-\"+profs.professeur_id+\"' onclick='voir_plus_cours(\\\"cours-prof-\"+profs.professeur_id+\"\\\")'>Voir plus<\/button>\";\n\t\t\t\t}\t\n\t\t\t\t\/*else if(profs.professeur_en_ligne==\"0\"){\n\t\t\t\t\tcontent += \"<div style='text-align:left;font-size:16px;'>Ce professeur est disponible mais n'a pas encore de cours. Devenez son premier parent h\u00f4te \ud83d\ude42<\/div>\";\n\t\t\t\t\tcontent += \"<div style='display: flex; max-width: 1000px; margin: 0 auto; padding: 20px; gap: 20px; align-items: flex-start;'>\";\n\t\t\t\t\tcontent += \"<div style='flex: 1;'>\";\n\t\t\t\t\tcontent += \"<iframe title='E\u0301ditions_mE\u0301lopie (1080p)_1' src='https:\/\/player.vimeo.com\/video\/1045208773?autoplay=1&amp;muted=1&amp;loop=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479' width='600' height='200'frameborder='0'><\/iframe>\";\n\t\t\t\t\tcontent += \"<\/div>\";\n\t\t\t\t\tcontent += \"<div style='flex: 1; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.6;'>\";\n\t\t\t\t\tcontent += \"<h2 style='margin-top: 0;font-size:20px;'>Qu'est-ce qu'un parent-h\u00f4te ?<\/h2>\";\n\t\t\t\t\tcontent += \"<p>C'est le parent de l\u2019un des 8 enfants du cours M\u00e9lopie. Il s'engage \u00e0 accueillir toute l'ann\u00e9e le cours \u00e0 son domicile. Il est pr\u00e9sent et assiste le professeur pendant toute la dur\u00e9e du cours. En contrepartie, il b\u00e9n\u00e9ficie d'une r\u00e9duction de 50% sur le prix des cours.<\/p>\";\n\t\t\t\t\tcontent += \"<\/div>\";\n\t\t\t\t\tcontent += \"<\/div>\";\n\t\t\t\t}\n\t\t\t\tif(profs.professeur_creneaux_dispo.length > 0 && profs.professeur_en_ligne==\"0\"){\n\t\t\t\t\tcontent += \"<div style='text-align:left;font-size:14px;margin:10px 0;'>Ce professeur peut ouvrir \"+profs.professeur_creneaux_dispo.length+\" cours aux horaires : \";\n\t\t\t\t\tcontent += \"<select style='width:150px;display:inline;margin:0 5px'>\";\n\t\t\t\t\tprofsList.creneaux.forEach(option => {\n\t\t\t\t\t\tif(profs.professeur_creneaux_dispo.includes(option.ID)){\n\t\t\t\t\t\t\tcontent += \"<option value=\"+option.ID+\">\"+option.jour+\" \"+option.plage+\"<\/option>\";\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tcontent += \"<\/select>\";\n\t\t\t\t\tcontent += \". Proposez lui de <button class='btn' style='margin-left:10px;' onclick=\\\"window.open('https:\/\/www.melopie.com\/cours-de-musique-pour-enfant-parent-hote\/', '_blank')\\\"><img src='https:\/\/www.melopie.com\/wp-content\/uploads\/2025\/05\/play.png' alt='Play' style='width: 20px; height: 20px; margin-right: 5px;'>Devenir parent h\u00f4te<\/button><\/div>\";\n\t\t\t\t\tcontent += \"<\/div>\";\n\t\t\t\t}*\/\n\t\t\t\tpanel.innerHTML = content;\n\t\t\t\tcontentDiv.appendChild(panel);\n\n\t\t\t});\n\t\t}\n\t\t\/\/Affichage d'un  panel d'information, apr\u00e8s l'affichage des professeurs\n\t\tlet panel = document.createElement('div');\n\t\tpanel.className = 'panel';\n\t\tif(format_cours != \"en_ligne\")panel.innerHTML = \"<div style='color:gray;font-size:16px;text-align:center;width:100%;padding:10px;margin: 10px;'>\"+\n\t\t\t\t\t\t\t\"<div style='margin-bottom:10px;'>\"+str_panel1+\"<\/div>\"+\n\t\t\t\t\t\t\t\"<button class='btn-panel1' onclick=\\\"window.location.href='\"+root_url+\"formulaire-dinscription-aux-cours\/';\\\">M'inscrire sur liste d'attente<\/button> \"+\n\t\t\t\t\t\t\t\"<button class='btn-panel1' onclick=\\\"cours_en_ligne();\\\" style='margin:0 20px;'>Tenter les cours en ligne<\/button> \"+\n\t\t\t\t\t\t\t\/\/\"<button class='btn-panel1' style='margin:0 20px;' onclick=\\\"window.location.href='\"+root_url+\"formation-1-introduction\/';\\\">Devenir professeur M\u00e9lopie<\/button>\"+\n\t\t\t\t\t\t\t\"<\/div>\";\n\t\telse panel.innerHTML = \"<div style='color:gray;font-size:16px;text-align:center;width:100%;padding:10px;margin: 10px;'>\"+\n\t\t\t\t\t\t\t\"<div style='margin-bottom:10px;'>\"+str_panel1+\"<\/div>\"+\n\t\t\t\t\t\t\t\"<button class='btn-panel1' onclick=\\\"window.location.href='\"+root_url+\"formulaire-dinscription-aux-cours\/';\\\">M'inscrire sur liste d'attente<\/button> \"+\n\t\t\t\t\t\t\t\/\/\"<button class='btn-panel1' style='margin:0 20px;' onclick=\\\"window.location.href='\"+root_url+\"formation-1-introduction\/';\\\">Devenir professeur M\u00e9lopie<\/button>\"+\n\t\t\t\t\t\t\t\"<\/div>\";\n\t\tif(screen_width > 700)panel.style.width = \"1000px\";\n\t\telse panel.style.width = \"400px\";\n\t\tcontentDiv.appendChild(panel);\n\t}\n\t\n\tfunction voir_plus_cours(divID){\n\t\tpanel = getElementById(\"#\"+divID);\n\t\tbutton = getElementById(\"#button-\"+divID);\n\t\tpanel.classList.toggle('panel-reduced');\n\t\tif (panel.classList.contains('panel-reduced')) {\n\t\t  button.textContent = \"Voir plus\";\n\t\t} else {\n\t\t  button.textContent = \"Voir moins\";\n\t\t}\n\t}\n\n\tfunction inscription(coursId, creneau, niveau, tarif, tarif_stage, date_cours_essai, date_premier_cours, essai) {\n\t\t\/\/on v\u00e9rifie si l'utilisateur est connect\u00e9\n\t\t\/\/const estConnecte = false;\n\t\t\n\t\t\/*if (!estConnecte) {\n\t\t\t\/\/ Action si non connect\u00e9\n\t\t\tlet champs = document.querySelectorAll('#login-popup');\n\t\t\tchamps.forEach(champ => {\n\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\tif(isVisible(parent)){\n\t\t\t\t\tchamp.style.display = 'flex';\n\t\t\t\t\tdocument.body.appendChild(champ);\/\/positionner correctement la popup\n\t\t\t\t}\n\t\t\t});\n\t\t} else {*\/\n\t\t\t\/\/ Action si connect\u00e9\n\t\t\t\/\/alert(\"Inscription au cours ID: \" + coursId);\n\t\t\t\n\t\t\tif(essai.value==\"2\")stage_selected=true;\n\t\t\telse stage_selected=false;\n\t\t\t\n\t\t\tcout_abonnement = tarif;\n\t\t\tid_cours = coursId;\n\t\t\tlet champs = document.querySelectorAll('#register-popup');\n\t\t\tchamps.forEach(champ => {\n\t\t\t\tconst parent = champ.parentElement;\n\t\t\t\tif(isVisible(parent)){\n\t\t\t\t\tchamp.style.display = 'flex';\n\t\t\t\t\tdocument.body.appendChild(champ);\/\/positionner correctement la popup\n\t\t\t\t\t\/\/on cherche les bons champs (ceux qui sont visibles)\n\t\t\t\t\tlet champs = document.querySelectorAll('#register-popup-creneau');\n\t\t\t\t\tchamps.forEach(champ => {if (isVisible(champ))champ.innerHTML = creneau;});\n\t\t\t\t\tchamps = document.querySelectorAll('#register-popup-niveau');\n\t\t\t\t\tchamps.forEach(champ => {if (isVisible(champ))champ.innerHTML = niveau;});\n\t\t\t\t\tchamps = document.querySelectorAll('#popup-cout-abonnement');\n\t\t\t\t\tchamps.forEach(champ => {if (isVisible(champ))champ.innerHTML = tarif-reduction;});\n\t\t\t\t\tchamps = document.querySelectorAll('#popup-cout-total');\n\t\t\t\t\tchamps.forEach(champ => {if (isVisible(champ))champ.innerHTML = (tarif-reduction+89);});\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t});\n\t\t\t\n\t\t\tconst date = new Date(date_cours_essai*1000);\n\t\t\tlet options = {\n\t\t\t\ttimeZone: 'Europe\/Paris',\n\t\t\t\tday: '2-digit',\n\t\t\t\tmonth: '2-digit',\n\t\t\t\tyear: 'numeric',\n\t\t\t\thour: '2-digit',\n\t\t\t\tminute: '2-digit',\n\t\t\t\thour12: false\n\t\t\t};\n\n\t\t\tlet dateFr = date.toLocaleString('fr-FR', options);\n\t\t\t\n\t\t\tconst date2 = new Date(date_premier_cours*1000);\n\t\t\tlet options2 = {\n\t\t\t\ttimeZone: 'Europe\/Paris',\n\t\t\t\tday: '2-digit',\n\t\t\t\tmonth: '2-digit',\n\t\t\t\tyear: 'numeric',\n\t\t\t\thour12: false\n\t\t\t};\n\n\t\t\tlet date_1er_cours_Fr = date2.toLocaleString('fr-FR', options2);\n\n\t\t\tlet label_date_cours_essai = document.querySelectorAll('#date-cours-essai');\n\t\t\tlabel_date_cours_essai.forEach(label => {\n\t\t\t\tlabel.innerHTML = dateFr;\n\t\t\t\t\/\/String(date.getDate()).padStart(2, '0')+\"\/\"+String(date.getMonth() + 1).padStart(2, '0')+\"\/\"+date.getFullYear()\n\t\t\t\t\/\/+\" \u00e0 \"+String(date.getHours()).padStart(2, '0')+\":\"+String(date.getMinutes()).padStart(2, '0');\n\t\t\t});\n\t\t\tlabel_date_cours_essai = getElementById(\"#label-date-cours-essai\");\n\t\t\tlet label_date_stage = document.querySelectorAll('#date-stage');\n\t\t\tlabel_date_stage.forEach(label => {\n\t\t\t\tlabel.innerHTML = date_1er_cours_Fr;\n\t\t\t\t\/\/String(date.getDate()).padStart(2, '0')+\"\/\"+String(date.getMonth() + 1).padStart(2, '0')+\"\/\"+date.getFullYear()\n\t\t\t\t\/\/+\" \u00e0 \"+String(date.getHours()).padStart(2, '0')+\":\"+String(date.getMinutes()).padStart(2, '0');\n\t\t\t});\n\t\t\tlabel_date_stage = getElementById(\"#label-date-stage\");\n\t\t\tif(essai==null || essai.value==\"0\"){\n\t\t\t\tlabel_date_cours_essai.style.display = \"none\";\n\t\t\t\tlabel_date_stage.style.display = \"block\";\n\t\t\t}\n\t\t\telse if(essai.value==\"2\"){\n\t\t\t\tlabel_date_cours_essai.style.display = \"none\";\n\t\t\t\tlabel_date_stage.style.display = \"block\";\n\t\t\t}\n\t\t\telse{\n\t\t\t\tlabel_date_cours_essai.style.display = \"block\";\n\t\t\t\tlabel_date_stage.style.display = \"none\";\n\t\t\t}\n\t\t\t\n\t\t\tlet box_cours_essai_paye = getElementById('#label-cours-essai-paye');\n\t\t\tbox_cours_essai_paye.style.display = \"block\";\n\t\t\tif(essai==null){\n\t\t\t\tessai_checked = false;\n\t\t\t\tcours_essai(\"0\");\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif(essai.value==\"1\"){\n\t\t\t\tessai_checked = true;\n\t\t\t\tbox_cours_essai_paye.style.display = \"none\";\n\t\t\t}\n\t\t\telse essai_checked = false;\n\t\t\tcours_essai(essai.value);\n\t\t\tessai.selectedIndex = 0;\n\t\t\/\/}\n\t}\n\t\n\tfunction close_login_popup(){\n\t\tlet champs = document.querySelectorAll('#login-popup');\n\t\tchamps.forEach(champ => {champ.style.display = 'none';});\n\t\tchamps = document.querySelectorAll('#register-popup');\n\t\tchamps.forEach(champ => {champ.style.display = 'none';});\n\t}\n\t\n\t\/\/\/\/\/\/\/ Positionnement de la popup au bon endroit sous le header \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\tfunction position_popup(){\n\t\tconst header = document.querySelector('header');\n\t\tconst popups = document.querySelectorAll('.popup');\n\n\t\tif (header && popups.length > 0) {\n\t\t\tconst hauteurHeader = header.offsetHeight+20;\n\n\t\t\tpopups.forEach(popup => {\n\t\t\t  popup.style.top = `${hauteurHeader}px`;\n\t\t\t});\n\t\t}\n\t}\n\t\n\t\n<\/script>\n\n<script>\n    const NOMINATIM_URL = \"https:\/\/nominatim.openstreetmap.org\/search\";\n\tconst COUNTRY_CODES = \"fr\";\n\tconst LIMIT = 6;\n\n\tlet abortController = null;\n\tlet debounceTimer = null;\n\tlet activeIndex = -1;\n\tlet currentItems = [];\n\n\t\/\/ \u2705 \u00e9tat de validation\n\tlet selectedAddress = null; \/\/ objet Nominatim s\u00e9lectionn\u00e9 (valide)\n\tlet selectedLabel = \"\";     \/\/ libell\u00e9 exact mis dans l'input au moment du clic\n\n\tfunction $(id) {\n\t  return getElementById(\"#\"+id);\n\t}\n\n\t\/* -------------------------\n\t   Utilitaires\n\t------------------------- *\/\n\n\tfunction escapeHtml(str = \"\") {\n\t  return str.replace(\/[&<>\"']\/g, m => ({\n\t\t\"&\": \"&amp;\",\n\t\t\"<\": \"&lt;\",\n\t\t\">\": \"&gt;\",\n\t\t'\"': \"&quot;\",\n\t\t\"'\": \"&#039;\"\n\t  })[m]);\n\t}\n\n\tfunction formatAddress(addr) {\n\t  if (!addr) return \"\";\n\n\t  const parts = [];\n\n\t  const street = [addr.house_number, addr.road]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\t  if (street) parts.push(street);\n\n\t  const city = [\n\t\taddr.postcode,\n\t\taddr.city || addr.town || addr.village || addr.hamlet\n\t  ]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\t  if (city) parts.push(city);\n\n\t  if (addr.country) parts.push(addr.country);\n\n\t  return parts.join(\", \");\n\t}\n\t\n\tfunction invalidateSelection() {\n\t  selectedAddress = null;\n\t  selectedLabel = \"\";\n\t}\n\n\t\/* -------------------------\n\t   Affichage\n\t------------------------- *\/\n\n\tfunction openBox() {\n\t\tconst box = $(\"suggestions\");\n\t\tbox.style.display = \"block\";\n\t\t$(\"address\").setAttribute(\"aria-expanded\", \"true\");\n\t}\n\n\tfunction closeBox() {\n\t\tconst box = $(\"suggestions\");\n\t\tbox.style.display = \"none\";\n\t\tbox.innerHTML = \"\";\n\t\t$(\"address\").setAttribute(\"aria-expanded\", \"false\");\n\t\tactiveIndex = -1;\n\t\tcurrentItems = [];\n\t}\n\n\tfunction renderSuggestions(items) {\n\t  currentItems = items;\n\t  activeIndex = -1;\n\n\t  if (!items.length) {\n\t\tcloseBox();\n\t\treturn;\n\t  }\n\n\t  $(\"suggestions\").innerHTML = items.map((it, idx) => `\n\t\t<div class=\"item\"\n\t\t\t role=\"option\"\n\t\t\t aria-selected=\"false\"\n\t\t\t data-idx=\"${idx}\"\n\t\t\t onclick=\"selectSuggestion(${idx})\">\n\t\t  ${escapeHtml(formatAddress(it.address))}\n\t\t<\/div>\n\t  `).join(\"\");\n\n\t  openBox();\n\t}\n\n\t\/* -------------------------\n\t   API\n\t------------------------- *\/\n\n\tasync function fetchSuggestions(query) {\n\t  if (abortController) abortController.abort();\n\t  abortController = new AbortController();\n\n\t  const url = new URL(NOMINATIM_URL);\n\t  url.searchParams.set(\"q\", query);\n\t  url.searchParams.set(\"format\", \"json\");\n\t  url.searchParams.set(\"addressdetails\", \"1\");\n\t  url.searchParams.set(\"limit\", String(LIMIT));\n\t  url.searchParams.set(\"countrycodes\", COUNTRY_CODES);\n\n\t  const res = await fetch(url.toString(), {\n\t\tsignal: abortController.signal,\n\t\theaders: { \"Accept\": \"application\/json\" }\n\t  });\n\n\t  if (!res.ok) throw new Error(\"Erreur Nominatim \" + res.status);\n\t  return await res.json();\n\t}\n\n\t\/* -------------------------\n\t   Handlers appel\u00e9s depuis HTML\n\t------------------------- *\/\n\n\tfunction debounceSearch() {\n\t  \/\/ \u2705 toute modification manuelle invalide la s\u00e9lection\n\t  invalidateSelection();\n\n\t  clearTimeout(debounceTimer);\n\t  debounceTimer = setTimeout(searchAddress, 250);\n\t}\n\n\tasync function searchAddress() {\n\t  const input = $(\"address\");\n\t  const q = input.value.trim();\n\n\t  if (q.length < 3) {\n\t\tcloseBox();\n\t\treturn;\n\t  }\n\n\t  try {\n\t\tconst data = await fetchSuggestions(q);\n\t\trenderSuggestions(Array.isArray(data) ? data : []);\n\t  } catch (e) {\n\t\tif (e.name !== \"AbortError\") {\n\t\t  console.error(e);\n\t\t  closeBox();\n\t\t}\n\t  }\n\t}\n\n\tfunction handleKeyDown(e) {\n\t  if ($(\"suggestions\").style.display !== \"block\") return;\n\n\t  if (e.key === \"Escape\") {\n\t\tcloseBox();\n\t\treturn;\n\t  }\n\n\t  if (e.key === \"ArrowDown\") {\n\t\te.preventDefault();\n\t\tactiveIndex = Math.min(activeIndex + 1, currentItems.length - 1);\n\t\tupdateActive();\n\t  }\n\n\t  if (e.key === \"ArrowUp\") {\n\t\te.preventDefault();\n\t\tactiveIndex = Math.max(activeIndex - 1, 0);\n\t\tupdateActive();\n\t  }\n\n\t  if (e.key === \"Enter\" && activeIndex >= 0) {\n\t\te.preventDefault();\n\t\tselectSuggestion(activeIndex);\n\t  }\n\t}\n\n\tfunction updateActive() {\n\t  const items = document.querySelectorAll(\"#suggestions .item\");\n\t  items.forEach((el, i) => el.setAttribute(\"aria-selected\", String(i === activeIndex)));\n\n\t  if (items[activeIndex]) {\n\t\titems[activeIndex].scrollIntoView({ block: \"nearest\" });\n\t  }\n\t}\n\n\t\/* -------------------------\n\t   S\u00e9lection (VALIDATION)\n\t------------------------- *\/\n\n\tfunction selectSuggestion(idx) {\n\t  const selected = currentItems[idx];\n\t  if (!selected) return;\n\n\t  const label = formatAddress(selected.address);\n\n\t  $(\"address\").value = label;\n\n\t  \/\/ \u2705 on valide l'adresse uniquement ici (clic \/ enter sur suggestion)\n\t  selectedAddress = selected;\n\t  selectedLabel = label;\n\n\t  closeBox();\n\t}\n\n\t\/* -------------------------\n\t   Clic ext\u00e9rieur\n\t------------------------- *\/\n\n\tfunction closeIfOutside(e) {\n\t  if (!e.target.closest(\".addr-wrap\")) closeBox();\n\t}\n\n\t\/* -------------------------\n\t   Validation utilis\u00e9e par paiement()\n\t------------------------- *\/\n\n\tfunction isAddressValidatedByClick() {\n\t  const v = $(\"address\").value.trim();\n\t  return !!selectedAddress && !!selectedLabel && v === selectedLabel;\n\t}\n\n  <\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-single.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"_links":{"self":[{"href":"https:\/\/smark.tech\/index.php\/wp-json\/wp\/v2\/pages\/14062"}],"collection":[{"href":"https:\/\/smark.tech\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smark.tech\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smark.tech\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smark.tech\/index.php\/wp-json\/wp\/v2\/comments?post=14062"}],"version-history":[{"count":2,"href":"https:\/\/smark.tech\/index.php\/wp-json\/wp\/v2\/pages\/14062\/revisions"}],"predecessor-version":[{"id":14064,"href":"https:\/\/smark.tech\/index.php\/wp-json\/wp\/v2\/pages\/14062\/revisions\/14064"}],"wp:attachment":[{"href":"https:\/\/smark.tech\/index.php\/wp-json\/wp\/v2\/media?parent=14062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}