{"id":225820,"date":"2026-03-06T23:38:44","date_gmt":"2026-03-06T22:38:44","guid":{"rendered":"https:\/\/megatraining.africa\/?page_id=225820"},"modified":"2026-03-07T00:46:22","modified_gmt":"2026-03-06T23:46:22","slug":"smartinterview","status":"publish","type":"page","link":"https:\/\/megatraining.africa\/en\/smartinterview\/","title":{"rendered":"SmartInterview"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"225820\" class=\"elementor elementor-225820\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51c3ae9 e-flex e-con-boxed e-con e-parent\" data-id=\"51c3ae9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b87cdc0 elementor-widget elementor-widget-html\" data-id=\"b87cdc0\" 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<!-- Job Interview Simulator Component (PRO SaaS Version) -->\r\n<div id=\"interview-simulator-root\"><\/div>\r\n\r\n<script>\r\n(function() {\r\n  \/\/ 1. Data Base (70 Questions & Expert Advice)\r\n  const interviewData =[\r\n    {\r\n      catFr: \"1. Introduction et Pr\u00e9sentation\",\r\n      catEn: \"1. Introduction and Presentation\",\r\n      questions:[\r\n        { fr: \"Parlez-moi de vous.\", en: \"Tell me about yourself.\", advFr: \"R\u00e9sumez votre parcours (pr\u00e9sent, pass\u00e9, futur) en vous concentrant sur ce qui est pertinent pour le poste.\", advEn: \"Summarize your background (present, past, future) focusing on what is relevant to the role.\" },\r\n        { fr: \"Comment vos anciens coll\u00e8gues (ou amis) vous d\u00e9criraient-ils ?\", en: \"How would your former colleagues (or friends) describe you?\", advFr: \"Citez 2-3 traits professionnels positifs accompagn\u00e9s d'un exemple concret.\", advEn: \"Mention 2-3 positive professional traits backed up by a concrete example.\" },\r\n        { fr: \"Comment vous d\u00e9cririez-vous en trois mots ?\", en: \"How would you describe yourself in three words?\", advFr: \"Choisissez des mots qui refl\u00e8tent \u00e0 la fois vos comp\u00e9tences techniques et votre savoir-\u00eatre.\", advEn: \"Choose words that reflect both your hard skills and your soft skills.\" },\r\n        { fr: \"Quel est votre plus grand accomplissement personnel en dehors du travail ?\", en: \"What is your greatest personal achievement outside of work?\", advFr: \"Montrez votre engagement, votre discipline ou votre passion \u00e0 travers un projet personnel ou associatif.\", advEn: \"Show your commitment, discipline, or passion through a personal or volunteer project.\" },\r\n        { fr: \"Quelles sont vos passions ou que faites-vous pendant votre temps libre ?\", en: \"What are your passions or what do you do in your free time?\", advFr: \"Soyez authentique. Les recruteurs cherchent \u00e0 voir si vous correspondez \u00e0 la culture de l'entreprise.\", advEn: \"Be authentic. Recruiters are looking to see if you fit the company culture.\" },\r\n        { fr: \"Quelle est votre philosophie de travail ?\", en: \"What is your work philosophy?\", advFr: \"Mettez en avant vos valeurs fondamentales (ex: qualit\u00e9, esprit d'\u00e9quipe, am\u00e9lioration continue).\", advEn: \"Highlight your core values (e.g., quality, teamwork, continuous improvement).\" },\r\n        { fr: \"Quel est le trait de votre personnalit\u00e9 qui vous aide le plus au quotidien ?\", en: \"What personality trait helps you the most on a daily basis?\", advFr: \"Liez ce trait \u00e0 une situation professionnelle o\u00f9 il a fait la diff\u00e9rence.\", advEn: \"Link this trait to a professional situation where it made a difference.\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"2. Motivation et Int\u00e9r\u00eat\",\r\n      catEn: \"2. Motivation and Interest\",\r\n      questions:[\r\n        { fr: \"Pourquoi souhaitez-vous rejoindre notre entreprise ?\", en: \"Why do you want to join our company?\", advFr: \"Montrez que vous avez fait des recherches sur leurs valeurs et projets r\u00e9cents.\", advEn: \"Show that you have researched their values and recent projects.\" },\r\n        { fr: \"Que savez-vous de notre entreprise, de nos produits ou de nos services ?\", en: \"What do you know about our company, products, or services?\", advFr: \"Mentionnez des faits pr\u00e9cis : positionnement, concurrents, derni\u00e8res actualit\u00e9s.\", advEn: \"Mention specific facts: positioning, competitors, latest news.\" },\r\n        { fr: \"Pourquoi avez-vous postul\u00e9 \u00e0 cette offre en particulier ?\", en: \"Why did you apply for this specific job offer?\", advFr: \"Faites le lien entre les missions de l'offre et vos comp\u00e9tences cl\u00e9s.\", advEn: \"Connect the job responsibilities with your core skills.\" },\r\n        { fr: \"Qu'est-ce qui vous motive le plus \u00e0 vous lever le matin ?\", en: \"What motivates you the most to get up in the morning?\", advFr: \"Parlez de ce qui vous stimule intellectuellement ou professionnellement.\", advEn: \"Talk about what stimulates you intellectually or professionally.\" },\r\n        { fr: \"Pourquoi devrions-nous vous embaucher, vous, plut\u00f4t qu'un autre candidat ?\", en: \"Why should we hire you over another candidate?\", advFr: \"R\u00e9sumez votre valeur ajout\u00e9e unique sans d\u00e9nigrer les autres.\", advEn: \"Summarize your unique added value without putting down others.\" },\r\n        { fr: \"Quels sont les crit\u00e8res les plus importants pour vous dans le choix de votre futur employeur ?\", en: \"What are the most important criteria for you in choosing your future employer?\", advFr: \"Soyez honn\u00eate mais \u00e9vitez de vous focaliser uniquement sur le salaire ou les horaires.\", advEn: \"Be honest but avoid focusing solely on salary or hours.\" },\r\n        { fr: \"Quels sont, selon vous, les plus grands d\u00e9fis actuels de notre secteur d'activit\u00e9 ?\", en: \"What do you think are the biggest current challenges in our industry?\", advFr: \"D\u00e9montrez votre expertise et votre vision macro-\u00e9conomique du march\u00e9.\", advEn: \"Demonstrate your expertise and macro-economic vision of the market.\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"3. Exp\u00e9rience et Parcours\",\r\n      catEn: \"3. Experience and Career Path\",\r\n      questions:[\r\n        { fr: \"Pouvez-vous me r\u00e9sumer votre parcours professionnel ?\", en: \"Can you summarize your career path?\", advFr: \"Suivez un fil conducteur logique montrant votre \u00e9volution.\", advEn: \"Follow a logical thread showing your career progression.\" },\r\n        { fr: \"Quelle a \u00e9t\u00e9 votre exp\u00e9rience professionnelle la plus enrichissante et pourquoi ?\", en: \"What has been your most rewarding professional experience and why?\", advFr: \"Mettez l'accent sur ce que vous avez appris et apport\u00e9.\", advEn: \"Focus on what you learned and what you contributed.\" },\r\n        { fr: \"Pourquoi avez-vous quitt\u00e9 votre dernier emploi ?\", en: \"Why did you leave your last job?\", advFr: \"Restez positif. Ne critiquez jamais un ancien employeur.\", advEn: \"Stay positive. Never criticize a former employer.\" },\r\n        { fr: \"Pouvez-vous m'expliquer cette p\u00e9riode d'inactivit\u00e9 sur votre CV ?\", en: \"Can you explain this employment gap on your resume?\", advFr: \"Assumez cette p\u00e9riode (formation, voyage, raisons personnelles) et montrez-vous pr\u00eat \u00e0 reprendre.\", advEn: \"Own this gap (training, travel, personal reasons) and show you are ready to return.\" },\r\n        { fr: \"Quelle est la r\u00e9alisation professionnelle dont vous \u00eates le plus fier ?\", en: \"What professional achievement are you most proud of?\", advFr: \"Utilisez la m\u00e9thode STAR (Situation, T\u00e2che, Action, R\u00e9sultat).\", advEn: \"Use the STAR method (Situation, Task, Action, Result).\" },\r\n        { fr: \"Parlez-moi d'un projet qui n'a pas abouti ou d'un \u00e9chec. Qu'en avez-vous appris ?\", en: \"Tell me about a failed project. What did you learn?\", advFr: \"L'important n'est pas l'\u00e9chec, mais votre capacit\u00e9 d'analyse et de rebond.\", advEn: \"The key is not the failure, but your analytical skills and ability to bounce back.\" },\r\n        { fr: \"Avez-vous d\u00e9j\u00e0 eu \u00e0 prendre une d\u00e9cision tr\u00e8s difficile au travail ?\", en: \"Have you ever had to make a very difficult decision at work?\", advFr: \"Expliquez votre processus de r\u00e9flexion et la fa\u00e7on dont vous \u00e9valuez les risques.\", advEn: \"Explain your thought process and how you evaluate risks.\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"4. Qualit\u00e9s, D\u00e9fauts et Conscience\",\r\n      catEn: \"4. Strengths, Weaknesses, Self-Awareness\",\r\n      questions:[\r\n        { fr: \"Quelles sont vos trois principales qualit\u00e9s ?\", en: \"What are your three main strengths?\", advFr: \"Citez des qualit\u00e9s utiles pour le poste, avec de courts exemples.\", advEn: \"Name strengths useful for the job, with short examples.\" },\r\n        { fr: \"Quels sont vos trois principaux axes d'am\u00e9lioration (d\u00e9fauts) ?\", en: \"What are your three main areas for improvement (weaknesses)?\", advFr: \"Donnez de vrais d\u00e9fauts mais expliquez comment vous travaillez pour les corriger.\", advEn: \"Give real weaknesses but explain how you are working to correct them.\" },\r\n        { fr: \"Parlez-moi d'une erreur que vous avez commise et de la fa\u00e7on dont vous l'avez g\u00e9r\u00e9e.\", en: \"Tell me about a mistake you made and how you handled it.\", advFr: \"Montrez votre transparence et votre capacit\u00e9 \u00e0 assumer vos responsabilit\u00e9s.\", advEn: \"Show your transparency and ability to take responsibility.\" },\r\n        { fr: \"Avez-vous d\u00e9j\u00e0 d\u00fb changer de comportement ou d'attitude pour r\u00e9ussir une mission ?\", en: \"Have you ever had to change your behavior to succeed in a task?\", advFr: \"D\u00e9montrez votre adaptabilit\u00e9 et votre intelligence \u00e9motionnelle.\", advEn: \"Demonstrate your adaptability and emotional intelligence.\" },\r\n        { fr: \"De quelle comp\u00e9tence manquez-vous aujourd'hui selon vous ?\", en: \"What skill do you feel you are currently lacking?\", advFr: \"Identifiez une comp\u00e9tence technique non cruciale et montrez votre d\u00e9sir d'apprendre.\", advEn: \"Identify a non-critical hard skill and show your willingness to learn.\" },\r\n        { fr: \"Comment g\u00e9rez-vous la critique ou les retours n\u00e9gatifs ?\", en: \"How do you handle criticism or negative feedback?\", advFr: \"Expliquez que vous prenez le feedback comme une opportunit\u00e9 de croissance.\", advEn: \"Explain that you take feedback as an opportunity for growth.\" },\r\n        { fr: \"Qu'est-ce qui vous agace le plus chez les autres en milieu professionnel ?\", en: \"What annoys you the most about others in the workplace?\", advFr: \"Restez diplomate. Parlez de comportements professionnels (ex: manque de ponctualit\u00e9).\", advEn: \"Stay diplomatic. Talk about professional behaviors (e.g., lack of punctuality).\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"5. Travail en \u00e9quipe et Relations\",\r\n      catEn: \"5. Teamwork and Relations\",\r\n      questions:[\r\n        { fr: \"Pr\u00e9f\u00e9rez-vous travailler de mani\u00e8re autonome ou en \u00e9quipe ? Pourquoi ?\", en: \"Do you prefer working independently or in a team? Why?\", advFr: \"L'id\u00e9al est de montrer un \u00e9quilibre et une capacit\u00e9 d'adaptation aux deux.\", advEn: \"Ideally, show balance and adaptability to both.\" },\r\n        { fr: \"Quel r\u00f4le jouez-vous g\u00e9n\u00e9ralement au sein d'un groupe ?\", en: \"What role do you generally play within a group?\", advFr: \"Adaptez votre r\u00e9ponse selon que vous postulez pour un poste de leader ou d'ex\u00e9cutant.\", advEn: \"Adapt your answer depending on whether you are applying for a leadership or execution role.\" },\r\n        { fr: \"Parlez-moi d'une situation o\u00f9 vous avez d\u00fb collaborer avec une personne difficile.\", en: \"Tell me about a time you had to collaborate with a difficult person.\", advFr: \"Focalisez-vous sur la communication et la recherche de solutions, pas sur le conflit.\", advEn: \"Focus on communication and problem-solving, not on the conflict.\" },\r\n        { fr: \"Comment r\u00e9agissez-vous face \u00e0 un coll\u00e8gue qui ne fait pas sa part de travail ?\", en: \"How do you react to a colleague who isn't pulling their weight?\", advFr: \"Privil\u00e9giez le dialogue ouvert avant d'escalader au management.\", advEn: \"Favor open dialogue before escalating to management.\" },\r\n        { fr: \"Avez-vous d\u00e9j\u00e0 encadr\u00e9 d'autres personnes ? Si oui, quel est votre style de management ?\", en: \"Have you managed people? What is your management style?\", advFr: \"D\u00e9crivez une approche bas\u00e9e sur l'\u00e9coute, la confiance et l'accompagnement.\", advEn: \"Describe an approach based on listening, trust, and guidance.\" },\r\n        { fr: \"Comment faites-vous pour motiver les membres de votre \u00e9quipe ?\", en: \"How do you motivate your team members?\", advFr: \"Mentionnez la reconnaissance, les objectifs clairs et l'exemplarit\u00e9.\", advEn: \"Mention recognition, clear goals, and leading by example.\" },\r\n        { fr: \"Pr\u00e9f\u00e9rez-vous recevoir des directives pr\u00e9cises ou qu'on vous laisse une totale libert\u00e9 ?\", en: \"Do you prefer precise instructions or total freedom?\", advFr: \"Montrez que vous aimez l'autonomie mais que vous savez respecter un cadre.\", advEn: \"Show you enjoy autonomy but know how to respect boundaries.\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"6. Gestion des conflits et du stress\",\r\n      catEn: \"6. Conflict and Stress Management\",\r\n      questions:[\r\n        { fr: \"Comment g\u00e9rez-vous la pression ou les p\u00e9riodes de grand stress ?\", en: \"How do you handle pressure or highly stressful periods?\", advFr: \"Donnez des m\u00e9thodes concr\u00e8tes (priorisation, pauses, sport).\", advEn: \"Give concrete methods (prioritization, breaks, sports).\" },\r\n        { fr: \"Racontez-moi un d\u00e9saccord que vous avez eu avec un sup\u00e9rieur. Comment cela s'est-il termin\u00e9 ?\", en: \"Tell me about a disagreement with a manager. How did it end?\", advFr: \"Montrez votre capacit\u00e9 \u00e0 argumenter professionnellement puis \u00e0 accepter la d\u00e9cision finale.\", advEn: \"Show your ability to argue professionally and then accept the final decision.\" },\r\n        { fr: \"Comment r\u00e9agissez-vous face \u00e0 un client (ou coll\u00e8gue) tr\u00e8s en col\u00e8re ?\", en: \"How do you react to a very angry client (or colleague)?\", advFr: \"Mettez en avant l'empathie, l'\u00e9coute active et le calme.\", advEn: \"Highlight empathy, active listening, and calmness.\" },\r\n        { fr: \"Avez-vous d\u00e9j\u00e0 \u00e9t\u00e9 face \u00e0 un probl\u00e8me totalement inattendu ? Comment avez-vous r\u00e9agi ?\", en: \"Have you faced a totally unexpected problem? How did you react?\", advFr: \"D\u00e9montrez votre sang-froid et votre cr\u00e9ativit\u00e9 face \u00e0 l'impr\u00e9vu.\", advEn: \"Demonstrate your composure and creativity in the face of the unexpected.\" },\r\n        { fr: \"Que faites-vous lorsque vous vous rendez compte que vous ne pourrez pas respecter une date butoir ?\", en: \"What do you do when you realize you won't meet a deadline?\", advFr: \"L'anticipation et la communication imm\u00e9diate avec les parties prenantes sont cl\u00e9s.\", advEn: \"Anticipation and immediate communication with stakeholders are key.\" },\r\n        { fr: \"D\u00e9crivez une situation o\u00f9 vous avez d\u00fb g\u00e9rer plusieurs urgences en m\u00eame temps.\", en: \"Describe a situation where you had to handle multiple emergencies at once.\", advFr: \"Expliquez comment vous \u00e9valuez l'urgence vs l'importance (Matrice d'Eisenhower).\", advEn: \"Explain how you evaluate urgency vs importance (Eisenhower Matrix).\" },\r\n        { fr: \"Racontez-moi une fois o\u00f9 vous avez d\u00fb dire 'non' \u00e0 une demande d'un sup\u00e9rieur.\", en: \"Tell me about a time you had to say 'no' to a superior's request.\", advFr: \"Expliquez comment vous avez justifi\u00e9 ce 'non' de fa\u00e7on constructive (ex: surcharge).\", advEn: \"Explain how you justified this 'no' constructively (e.g., overload).\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"7. Organisation et M\u00e9thodologie\",\r\n      catEn: \"7. Organization and Methodology\",\r\n      questions:[\r\n        { fr: \"Comment organisez-vous votre journ\u00e9e de travail type ?\", en: \"How do you organize your typical workday?\", advFr: \"Mentionnez des routines claires et des moments d\u00e9di\u00e9s \u00e0 la planification.\", advEn: \"Mention clear routines and dedicated planning times.\" },\r\n        { fr: \"Quels outils ou m\u00e9thodes utilisez-vous pour g\u00e9rer votre temps et vos t\u00e2ches ?\", en: \"What tools or methods do you use to manage your time and tasks?\", advFr: \"Citez des outils (Trello, Jira) ou m\u00e9thodes (Pomodoro, Time-blocking).\", advEn: \"Name tools (Trello, Jira) or methods (Pomodoro, Time-blocking).\" },\r\n        { fr: \"Face \u00e0 plusieurs t\u00e2ches importantes, comment d\u00e9finissez-vous vos priorit\u00e9s ?\", en: \"Faced with multiple important tasks, how do you prioritize?\", advFr: \"\u00c9valuez l'impact business et les d\u00e9lais de chaque t\u00e2che.\", advEn: \"Evaluate the business impact and deadlines of each task.\" },\r\n        { fr: \"\u00cates-vous plut\u00f4t ax\u00e9(e) sur les d\u00e9tails ou sur la vue d'ensemble ?\", en: \"Are you more detail-oriented or focused on the big picture?\", advFr: \"Id\u00e9alement, montrez que vous pouvez jongler entre les deux selon le besoin.\", advEn: \"Ideally, show you can juggle between both depending on the need.\" },\r\n        { fr: \"Comment vous assurez-vous de la qualit\u00e9 et de la pr\u00e9cision de votre travail ?\", en: \"How do you ensure the quality and accuracy of your work?\", advFr: \"Mentionnez vos processus de relecture ou de tests.\", advEn: \"Mention your proofreading or testing processes.\" },\r\n        { fr: \"Avez-vous d\u00e9j\u00e0 mis en place un nouveau processus pour am\u00e9liorer l'efficacit\u00e9 ?\", en: \"Have you implemented a new process to improve efficiency?\", advFr: \"Donnez un exemple pr\u00e9cis o\u00f9 votre initiative a fait gagner du temps ou de l'argent.\", advEn: \"Give a specific example where your initiative saved time or money.\" },\r\n        { fr: \"Comment restez-vous concentr\u00e9(e) sur une t\u00e2che r\u00e9p\u00e9titive ou peu stimulante ?\", en: \"How do you stay focused on a repetitive or unstimulating task?\", advFr: \"Montrez votre rigueur professionnelle et votre auto-discipline.\", advEn: \"Show your professional rigor and self-discipline.\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"8. Adaptabilit\u00e9 et Probl\u00e8mes\",\r\n      catEn: \"8. Adaptability and Problems\",\r\n      questions:[\r\n        { fr: \"Racontez-moi une fois o\u00f9 vous avez d\u00fb vous adapter rapidement \u00e0 un changement majeur.\", en: \"Tell me about a time you had to adapt quickly to a major change.\", advFr: \"Focalisez-vous sur votre r\u00e9silience et votre acceptation rapide de la nouvelle donne.\", advEn: \"Focus on your resilience and quick acceptance of the new situation.\" },\r\n        { fr: \"Comment vous y prenez-vous pour apprendre un nouveau logiciel ou comp\u00e9tence ?\", en: \"How do you go about learning new software or a new skill?\", advFr: \"Montrez votre proactivit\u00e9 (tutoriels, auto-formation, demande d'aide).\", advEn: \"Show your proactivity (tutorials, self-learning, asking for help).\" },\r\n        { fr: \"Parlez-moi d'une fois o\u00f9 l'on vous a confi\u00e9 une t\u00e2che sans directives claires.\", en: \"Tell me about a time you were given a task without clear directions.\", advFr: \"Expliquez comment vous avez cherch\u00e9 l'information et structur\u00e9 l'inconnu.\", advEn: \"Explain how you sought information and structured the unknown.\" },\r\n        { fr: \"Comment prenez-vous des d\u00e9cisions lorsque vous n'avez pas toutes les informations ?\", en: \"How do you make decisions when you don't have all the information?\", advFr: \"Parlez de l'\u00e9valuation des risques et de l'intuition bas\u00e9e sur l'exp\u00e9rience.\", advEn: \"Talk about risk assessment and intuition based on experience.\" },\r\n        { fr: \"Racontez-moi une fois o\u00f9 vous avez pris une initiative qui sortait du cadre strict de vos fonctions.\", en: \"Tell me about an initiative you took outside your strict job description.\", advFr: \"D\u00e9montrez votre sens des responsabilit\u00e9s et votre engagement envers l'entreprise.\", advEn: \"Demonstrate your sense of responsibility and commitment to the company.\" },\r\n        { fr: \"Comment r\u00e9agissez-vous si la direction modifie compl\u00e8tement les objectifs en cours de route ?\", en: \"How do you react if management completely changes objectives mid-project?\", advFr: \"Montrez votre flexibilit\u00e9 et votre absence de frustration face \u00e0 l'agilit\u00e9.\", advEn: \"Show your flexibility and lack of frustration in an agile environment.\" },\r\n        { fr: \"Parlez-moi d'un probl\u00e8me complexe que vous avez d\u00fb r\u00e9soudre r\u00e9cemment.\", en: \"Tell me about a complex problem you recently had to solve.\", advFr: \"D\u00e9cortiquez votre logique de r\u00e9flexion \u00e9tape par \u00e9tape.\", advEn: \"Break down your logical thought process step by step.\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"9. Vision de carri\u00e8re et Projets\",\r\n      catEn: \"9. Career Vision and Projects\",\r\n      questions:[\r\n        { fr: \"O\u00f9 vous voyez-vous dans 3 \u00e0 5 ans ? Et dans 10 ans ?\", en: \"Where do you see yourself in 3 to 5 years? And in 10 years?\", advFr: \"Affichez de l'ambition tout en restant r\u00e9aliste et align\u00e9 avec l'entreprise.\", advEn: \"Show ambition while remaining realistic and aligned with the company.\" },\r\n        { fr: \"Quel serait l'emploi de vos r\u00eaves ?\", en: \"What would be your dream job?\", advFr: \"D\u00e9crivez un poste qui inclut les missions de l'offre actuelle.\", advEn: \"Describe a role that includes the responsibilities of the current offer.\" },\r\n        { fr: \"Que recherchez-vous comme prochain grand d\u00e9fi professionnel ?\", en: \"What are you looking for as your next big professional challenge?\", advFr: \"Prouvez que vous avez soif d'apprendre et de progresser.\", advEn: \"Prove that you are hungry to learn and grow.\" },\r\n        { fr: \"Comment comptez-vous vous former ou d\u00e9velopper vos comp\u00e9tences \u00e0 l'avenir ?\", en: \"How do you plan to train or develop your skills in the future?\", advFr: \"Montrez que vous \u00eates acteur de votre propre formation (veille, cours du soir).\", advEn: \"Show that you take charge of your own training (industry watch, evening classes).\" },\r\n        { fr: \"Qu'attendez-vous de votre futur manager pour vous aider \u00e0 donner le meilleur ?\", en: \"What do you expect from your future manager to help you perform at your best?\", advFr: \"Pr\u00e9f\u00e9rez des termes comme 'mentorat', 'confiance' et 'feedback constructif'.\", advEn: \"Favor terms like 'mentorship', 'trust', and 'constructive feedback'.\" },\r\n        { fr: \"Seriez-vous pr\u00eat(e) \u00e0 d\u00e9m\u00e9nager ou \u00e0 vous expatrier pour une \u00e9volution de carri\u00e8re ?\", en: \"Would you be willing to relocate or move abroad for career advancement?\", advFr: \"Soyez honn\u00eate sur vos limites g\u00e9ographiques d\u00e8s le d\u00e9part.\", advEn: \"Be honest about your geographical limits from the start.\" },\r\n        { fr: \"Comment cette opportunit\u00e9 s'inscrit-elle dans votre plan de carri\u00e8re global ?\", en: \"How does this opportunity fit into your overall career plan?\", advFr: \"Faites comprendre que ce n'est pas juste un emploi par d\u00e9faut.\", advEn: \"Make it clear that this isn't just a default job.\" }\r\n      ]\r\n    },\r\n    {\r\n      catFr: \"10. Conditions, Logistique, Conclusion\",\r\n      catEn: \"10. Conditions, Logistics, Conclusion\",\r\n      questions:[\r\n        { fr: \"Quelles sont vos pr\u00e9tentions salariales ?\", en: \"What are your salary expectations?\", advFr: \"Donnez une fourchette r\u00e9aliste bas\u00e9e sur les prix du march\u00e9 et votre exp\u00e9rience.\", advEn: \"Give a realistic range based on market rates and your experience.\" },\r\n        { fr: \"Quel est votre d\u00e9lai de pr\u00e9avis actuel ?\", en: \"What is your current notice period?\", advFr: \"Soyez pr\u00e9cis. N'offrez pas de rompre un contrat ill\u00e9galement.\", advEn: \"Be specific. Don't offer to break a contract illegally.\" },\r\n        { fr: \"Quel mode de travail vous convient le mieux (pr\u00e9sentiel, hybride, t\u00e9l\u00e9travail) ?\", en: \"What work mode suits you best (on-site, hybrid, remote)?\", advFr: \"Adaptez-vous \u00e0 la culture de l'entreprise tout en fixant vos limites.\", advEn: \"Adapt to the company culture while setting your boundaries.\" },\r\n        { fr: \"\u00cates-vous pr\u00eat(e) \u00e0 voyager r\u00e9guli\u00e8rement dans le cadre de vos fonctions ?\", en: \"Are you willing to travel regularly for your job?\", advFr: \"R\u00e9pondez honn\u00eatement selon vos contraintes personnelles.\", advEn: \"Answer honestly according to your personal constraints.\" },\r\n        { fr: \"\u00cates-vous actuellement en processus de recrutement avec d'autres entreprises ?\", en: \"Are you currently interviewing with other companies?\", advFr: \"Dire 'oui' montre que vous \u00eates d\u00e9sirable sur le march\u00e9 (sans arrogance).\", advEn: \"Saying 'yes' shows you are desirable on the market (without arrogance).\" },\r\n        { fr: \"Que retenez-vous de notre \u00e9change aujourd'hui ?\", en: \"What are your key takeaways from our conversation today?\", advFr: \"Faites un r\u00e9sum\u00e9 rapide et r\u00e9affirmez votre motivation forte.\", advEn: \"Provide a quick summary and reaffirm your strong motivation.\" },\r\n        { fr: \"Avez-vous des questions \u00e0 me poser ?\", en: \"Do you have any questions for me?\", advFr: \"Ayez toujours 2-3 questions pr\u00eates (sur l'\u00e9quipe, les projets, la suite du process).\", advEn: \"Always have 2-3 questions ready (about the team, projects, next steps).\" }\r\n      ]\r\n    }\r\n  ];\r\n\r\n  \/\/ 2. State & LocalStorage Setup\r\n  const savedState = JSON.parse(localStorage.getItem('interviewSimProData')) || {};\r\n  \r\n  \/\/ LANGUE PAR D\u00c9FAUT : 'en' (Anglais)\r\n  let state = {\r\n    lang: 'en',\r\n    catIndex: 0,\r\n    qIndex: 0,\r\n    timerSeconds: 0,\r\n    timerInterval: null,\r\n    isRecordingAudio: false,\r\n    mediaRecorder: null,\r\n    audioChunks:[],\r\n    scores: savedState.scores || {}, \r\n    textResponses: savedState.textResponses || {},\r\n    audioResponses: {},\r\n    activeTab: 'text'\r\n  };\r\n\r\n  const saveToLocalStorage = () => {\r\n    localStorage.setItem('interviewSimProData', JSON.stringify({\r\n      scores: state.scores,\r\n      textResponses: state.textResponses\r\n    }));\r\n  };\r\n\r\n  \/\/ 3. Mount Shadow DOM\r\n  const root = document.getElementById('interview-simulator-root');\r\n  const shadow = root.attachShadow({ mode: 'open' });\r\n\r\n  \/\/ 4. Icons (SVG)\r\n  const icons = {\r\n    bulb: `<svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M9 21h6\"\/><path d=\"M12 21v-4\"\/><path d=\"M12 17c3 0 5-2.5 5-5.5C17 8 14.5 6 12 6S7 8 7 11.5C7 14.5 9 17 12 17z\"\/><\/svg>`,\r\n    mic: `<svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z\"\/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"\/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"\/><\/svg>`,\r\n    stop: `<svg width=\"18\" height=\"18\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\"\/><\/svg>`,\r\n    play: `<svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>`,\r\n    pause: `<svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"\/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"\/><\/svg>`,\r\n    reset: `<svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>`,\r\n    check: `<svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>`,\r\n    arrowRight: `<svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>`,\r\n    arrowLeft: `<svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line><polyline points=\"12 19 5 12 12 5\"><\/polyline><\/svg>`\r\n  };\r\n\r\n  \/\/ 5. CSS (SaaS Premium Style)\r\n  const styles = `\r\n    <style>\r\n      :host {\r\n        all: initial;\r\n        display: block;\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n        color: #0f172a;\r\n        --primary: #2563eb;\r\n        --primary-hover: #1d4ed8;\r\n        --bg-main: #f8fafc;\r\n        --bg-card: #ffffff;\r\n        --border: #e2e8f0;\r\n        --text-muted: #64748b;\r\n        --success: #10b981;\r\n        --warning: #f59e0b;\r\n        --radius: 12px;\r\n        --shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.05), 0 2px 4px -2px rgb(0 0 0 \/ 0.05);\r\n        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.05), 0 4px 6px -4px rgb(0 0 0 \/ 0.05);\r\n      }\r\n      \r\n      * { box-sizing: border-box; }\r\n\r\n      .app-wrapper {\r\n        max-width: 960px;\r\n        margin: 0 auto;\r\n        background: var(--bg-main);\r\n        border-radius: var(--radius);\r\n        box-shadow: var(--shadow-lg);\r\n        border: 1px solid var(--border);\r\n        overflow: hidden;\r\n      }\r\n\r\n      \/* Header *\/\r\n      header {\r\n        background: var(--bg-card);\r\n        padding: 20px 30px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        border-bottom: 1px solid var(--border);\r\n      }\r\n      header h1 {\r\n        margin: 0;\r\n        font-size: 1.25rem;\r\n        font-weight: 700;\r\n        color: #0f172a;\r\n        letter-spacing: -0.025em;\r\n      }\r\n      .lang-toggle {\r\n        background: #f1f5f9;\r\n        border: 1px solid var(--border);\r\n        color: #334155;\r\n        padding: 6px 14px;\r\n        border-radius: 20px;\r\n        font-weight: 600;\r\n        font-size: 0.85rem;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n      }\r\n      .lang-toggle:hover { background: #e2e8f0; }\r\n\r\n      \/* Progress Bar *\/\r\n      .progress-container { width: 100%; height: 4px; background: #e2e8f0; }\r\n      .progress-bar { height: 100%; background: var(--primary); width: 0%; transition: width 0.5s ease-out; }\r\n\r\n      \/* Main Body *\/\r\n      .main-content { padding: 30px; }\r\n\r\n      \/* Stats Row *\/\r\n      .stats-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 15px;\r\n        margin-bottom: 30px;\r\n      }\r\n      .stat-card {\r\n        background: var(--bg-card);\r\n        border: 1px solid var(--border);\r\n        border-radius: 10px;\r\n        padding: 15px;\r\n        text-align: left;\r\n        box-shadow: var(--shadow);\r\n      }\r\n      .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); line-height: 1; }\r\n      .stat-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-top: 5px; }\r\n\r\n      \/* Selectors *\/\r\n      .nav-row {\r\n        display: grid;\r\n        grid-template-columns: 1fr 2fr;\r\n        gap: 15px;\r\n        margin-bottom: 30px;\r\n      }\r\n      .select-wrapper { position: relative; }\r\n      .select-wrapper select {\r\n        width: 100%;\r\n        appearance: none;\r\n        background: var(--bg-card);\r\n        border: 1px solid var(--border);\r\n        padding: 12px 40px 12px 16px;\r\n        border-radius: 8px;\r\n        font-size: 0.95rem;\r\n        font-weight: 500;\r\n        color: #1e293b;\r\n        cursor: pointer;\r\n        box-shadow: var(--shadow);\r\n        transition: border-color 0.2s, box-shadow 0.2s;\r\n      }\r\n      .select-wrapper select:focus {\r\n        outline: none;\r\n        border-color: var(--primary);\r\n        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\r\n      }\r\n      .select-wrapper::after {\r\n        content: \"\u25bc\";\r\n        font-size: 0.7rem;\r\n        color: var(--text-muted);\r\n        position: absolute;\r\n        right: 16px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        pointer-events: none;\r\n      }\r\n\r\n      \/* Question Area *\/\r\n      .question-section { margin-bottom: 30px; }\r\n      .question-title {\r\n        font-size: 1.6rem;\r\n        font-weight: 700;\r\n        color: #0f172a;\r\n        line-height: 1.4;\r\n        margin: 0 0 15px 0;\r\n      }\r\n      .expert-box {\r\n        background: #f0fdf4;\r\n        border: 1px solid #bbf7d0;\r\n        border-radius: 8px;\r\n        padding: 16px;\r\n        display: flex;\r\n        gap: 12px;\r\n        align-items: flex-start;\r\n      }\r\n      .expert-box .icon { color: var(--success); margin-top: 2px; }\r\n      .expert-box .content { font-size: 0.95rem; color: #166534; line-height: 1.5; }\r\n      .expert-box strong { display: block; margin-bottom: 4px; font-weight: 600; color: #14532d; }\r\n\r\n      \/* Workspace (Tabs, Timer, Input) *\/\r\n      .workspace {\r\n        background: var(--bg-card);\r\n        border: 1px solid var(--border);\r\n        border-radius: var(--radius);\r\n        box-shadow: var(--shadow);\r\n        overflow: hidden;\r\n      }\r\n      \r\n      .workspace-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        padding: 0 20px;\r\n        border-bottom: 1px solid var(--border);\r\n        background: #f8fafc;\r\n      }\r\n      \r\n      .tabs { display: flex; gap: 20px; }\r\n      .tab {\r\n        padding: 16px 0;\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        color: var(--text-muted);\r\n        background: none;\r\n        border: none;\r\n        border-bottom: 2px solid transparent;\r\n        cursor: pointer;\r\n        transition: color 0.2s;\r\n      }\r\n      .tab:hover { color: #0f172a; }\r\n      .tab.active { color: var(--primary); border-bottom-color: var(--primary); }\r\n\r\n      .timer-widget {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        background: var(--bg-card);\r\n        border: 1px solid var(--border);\r\n        padding: 4px 12px;\r\n        border-radius: 20px;\r\n      }\r\n      .timer-display { font-family: 'SFMono-Regular', Consolas, monospace; font-weight: 700; font-size: 0.95rem; color: #334155; width: 45px; text-align: center; }\r\n      .timer-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; padding: 4px; border-radius: 4px; transition: background 0.2s, color 0.2s;}\r\n      .timer-btn:hover { background: #e2e8f0; color: #0f172a; }\r\n\r\n      .workspace-body { padding: 20px; position: relative; }\r\n      \r\n      \/* Text Area *\/\r\n      textarea {\r\n        width: 100%;\r\n        min-height: 160px;\r\n        border: 1px solid var(--border);\r\n        border-radius: 8px;\r\n        padding: 16px;\r\n        font-family: inherit;\r\n        font-size: 0.95rem;\r\n        line-height: 1.5;\r\n        color: #334155;\r\n        resize: vertical;\r\n        outline: none;\r\n        transition: border-color 0.2s, box-shadow 0.2s;\r\n      }\r\n      textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }\r\n      \r\n      .save-toast {\r\n        position: absolute;\r\n        bottom: 30px;\r\n        right: 30px;\r\n        background: var(--success);\r\n        color: white;\r\n        font-size: 0.75rem;\r\n        font-weight: 600;\r\n        padding: 4px 10px;\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 4px;\r\n        opacity: 0;\r\n        transition: opacity 0.3s;\r\n        pointer-events: none;\r\n      }\r\n      .save-toast.visible { opacity: 1; }\r\n\r\n      \/* Audio Area *\/\r\n      .audio-area { text-align: center; padding: 30px 0; }\r\n      .record-btn {\r\n        background: var(--primary);\r\n        color: white;\r\n        border: none;\r\n        padding: 12px 24px;\r\n        border-radius: 30px;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: transform 0.2s, background 0.2s, box-shadow 0.2s;\r\n        box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39);\r\n      }\r\n      .record-btn:hover { transform: translateY(-2px); background: var(--primary-hover); }\r\n      .record-btn.recording {\r\n        background: #ef4444;\r\n        box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.39);\r\n        animation: pulse 2s infinite;\r\n      }\r\n      @keyframes pulse {\r\n        0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }\r\n        70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }\r\n        100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }\r\n      }\r\n\r\n      .audio-player-wrapper {\r\n        margin-top: 25px;\r\n        background: #f8fafc;\r\n        border: 1px solid var(--border);\r\n        border-radius: 8px;\r\n        padding: 15px;\r\n        display: none;\r\n      }\r\n      .audio-player-wrapper.visible { display: inline-block; width: 100%; max-width: 400px; }\r\n      audio { width: 100%; height: 40px; outline: none; }\r\n\r\n      \/* Footer Actions (Eval & Nav) *\/\r\n      .app-footer {\r\n        margin-top: 30px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        padding-top: 25px;\r\n        border-top: 1px solid var(--border);\r\n      }\r\n\r\n      .eval-group { display: flex; align-items: center; gap: 15px; }\r\n      .eval-label { font-size: 0.9rem; font-weight: 600; color: #475569; }\r\n      .stars { display: flex; gap: 4px; }\r\n      .star {\r\n        font-size: 1.75rem;\r\n        color: #cbd5e1;\r\n        cursor: pointer;\r\n        line-height: 1;\r\n        transition: color 0.2s, transform 0.2s;\r\n      }\r\n      .star:hover { transform: scale(1.15); }\r\n      .star.active { color: var(--warning); }\r\n      @keyframes pop { 50% { transform: scale(1.3); } 100% { transform: scale(1); } }\r\n      .star.pop { animation: pop 0.3s ease; }\r\n\r\n      \/* NAV BUTTONS (IMPROVED NEXT BUTTON) *\/\r\n      .nav-btns { display: flex; gap: 15px; }\r\n      .btn-nav {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding: 12px 24px;\r\n        border-radius: 8px;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n      }\r\n      .btn-prev { \r\n        background: var(--bg-card); \r\n        border: 1px solid var(--border); \r\n        color: #334155; \r\n      }\r\n      .btn-prev:hover:not(:disabled) { \r\n        background: #f1f5f9; \r\n        transform: translateX(-2px);\r\n      }\r\n      \r\n      \/* The Clear & Prominent NEXT Button *\/\r\n      .btn-next { \r\n        background: var(--primary); \r\n        border: 1px solid var(--primary); \r\n        color: white; \r\n        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);\r\n      }\r\n      .btn-next:hover:not(:disabled) { \r\n        background: var(--primary-hover); \r\n        border-color: var(--primary-hover); \r\n        transform: translateX(4px); \r\n        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);\r\n      }\r\n      .btn-nav:disabled { \r\n        opacity: 0.4; \r\n        cursor: not-allowed; \r\n        transform: none; \r\n        box-shadow: none; \r\n      }\r\n\r\n      .hidden { display: none !important; }\r\n\r\n      \/* Responsive *\/\r\n      @media (max-width: 768px) {\r\n        .nav-row { grid-template-columns: 1fr; gap: 10px; }\r\n        .stats-grid { grid-template-columns: 1fr; gap: 10px; }\r\n        .app-footer { flex-direction: column; gap: 20px; align-items: stretch; }\r\n        .eval-group { flex-direction: column; align-items: flex-start; gap: 5px; }\r\n        .nav-btns { justify-content: space-between; gap: 10px; }\r\n        .btn-nav { padding: 12px 16px; flex: 1; justify-content: center; }\r\n        .workspace-toolbar { flex-direction: column; gap: 15px; padding: 15px; }\r\n      }\r\n    <\/style>\r\n  `;\r\n\r\n  \/\/ 6. Helpers\r\n  const t = () => {\r\n    const isFr = state.lang === 'fr';\r\n    return {\r\n      title: isFr ? \"Simulateur d'Entretien PRO\" : \"PRO Interview Simulator\",\r\n      globalAvg: isFr ? \"Score Global\" : \"Global Score\",\r\n      catAvg: isFr ? \"Score Cat\u00e9gorie\" : \"Category Score\",\r\n      progress: isFr ? \"Progression\" : \"Progress\",\r\n      expertAdvice: isFr ? \"Le conseil de l'expert\" : \"Expert's Advice\",\r\n      tabText: isFr ? \"Notes & Texte\" : \"Notes & Text\",\r\n      tabAudio: isFr ? \"Enregistrement Audio\" : \"Audio Recording\",\r\n      placeholder: isFr ? \"R\u00e9digez vos \u00e9l\u00e9ments de r\u00e9ponse ici (sauvegarde automatique)...\" : \"Draft your talking points here (auto-saved)...\",\r\n      saved: isFr ? \"Enregistr\u00e9\" : \"Saved\",\r\n      recordBtn: isFr ? \"Commencer l'enregistrement\" : \"Start Recording\",\r\n      stopBtn: isFr ? \"Arr\u00eater l'enregistrement\" : \"Stop Recording\",\r\n      evalLabel: isFr ? \"Auto-\u00e9valuation :\" : \"Self-evaluation:\",\r\n      prev: isFr ? \"Pr\u00e9c\u00e9dent\" : \"Previous\",\r\n      next: isFr ? \"Suivant\" : \"Next\",\r\n      notSupported: isFr ? \"Votre navigateur ne supporte pas l'audio.\" : \"Browser doesn't support audio.\"\r\n    };\r\n  };\r\n\r\n  const formatTime = (sec) => {\r\n    const m = Math.floor(sec \/ 60).toString().padStart(2, '0');\r\n    const s = (sec % 60).toString().padStart(2, '0');\r\n    return `${m}:${s}`;\r\n  };\r\n\r\n  const calcStats = () => {\r\n    let totScore = 0, count = 0, catScore = 0, catCount = 0;\r\n    Object.keys(state.scores).forEach(k => {\r\n      const [cIdx] = k.split('-');\r\n      const s = state.scores[k];\r\n      if(s > 0) {\r\n        totScore += s; count++;\r\n        if(parseInt(cIdx) === state.catIndex) { catScore += s; catCount++; }\r\n      }\r\n    });\r\n    return {\r\n      gAvg: count > 0 ? (totScore\/count).toFixed(1) : \"0.0\",\r\n      cAvg: catCount > 0 ? (catScore\/catCount).toFixed(1) : \"0.0\",\r\n      answered: count,\r\n      total: 70,\r\n      percent: Math.round((count\/70)*100)\r\n    };\r\n  };\r\n\r\n  \/\/ 7. Render logic\r\n  const render = () => {\r\n    const txt = t();\r\n    const isFr = state.lang === 'fr';\r\n    const cat = interviewData[state.catIndex];\r\n    const q = cat.questions[state.qIndex];\r\n    const stats = calcStats();\r\n    const key = `${state.catIndex}-${state.qIndex}`;\r\n    const curScore = state.scores[key] || 0;\r\n    const curText = state.textResponses[key] || '';\r\n    const curAudioUrl = state.audioResponses[key] || null;\r\n\r\n    const catOptions = interviewData.map((c, i) => `<option value=\"${i}\" ${i === state.catIndex ? 'selected' : ''}>${isFr ? c.catFr : c.catEn}<\/option>`).join('');\r\n    const qOptions = cat.questions.map((q, i) => `<option value=\"${i}\" ${i === state.qIndex ? 'selected' : ''}>Question ${i+1}\/${cat.questions.length}<\/option>`).join('');\r\n\r\n    let starsHtml = '';\r\n    for(let i=1; i<=5; i++) {\r\n      starsHtml += `<span class=\"star ${i <= curScore ? 'active' : ''}\" data-val=\"${i}\">\u2605<\/span>`;\r\n    }\r\n\r\n    const html = `\r\n      <div class=\"app-wrapper\">\r\n        <header>\r\n          <h1>${txt.title}<\/h1>\r\n          <button class=\"lang-toggle\" id=\"btn-lang\">${state.lang === 'fr' ? 'Switch to English' : 'Passer en Fran\u00e7ais'}<\/button>\r\n        <\/header>\r\n        \r\n        <div class=\"progress-container\"><div class=\"progress-bar\" id=\"prog-bar\" style=\"width: ${stats.percent}%\"><\/div><\/div>\r\n\r\n        <div class=\"main-content\">\r\n          <div class=\"stats-grid\">\r\n            <div class=\"stat-card\">\r\n              <div class=\"stat-value\" id=\"val-gAvg\">${stats.gAvg}<span style=\"font-size:1rem;color:#94a3b8\">\/5<\/span><\/div>\r\n              <div class=\"stat-label\">${txt.globalAvg}<\/div>\r\n            <\/div>\r\n            <div class=\"stat-card\">\r\n              <div class=\"stat-value\" id=\"val-cAvg\">${stats.cAvg}<span style=\"font-size:1rem;color:#94a3b8\">\/5<\/span><\/div>\r\n              <div class=\"stat-label\">${txt.catAvg}<\/div>\r\n            <\/div>\r\n            <div class=\"stat-card\">\r\n              <div class=\"stat-value\" id=\"val-prog\">${stats.answered}<span style=\"font-size:1rem;color:#94a3b8\">\/70<\/span><\/div>\r\n              <div class=\"stat-label\">${txt.progress}<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"nav-row\">\r\n            <div class=\"select-wrapper\"><select id=\"sel-cat\">${catOptions}<\/select><\/div>\r\n            <div class=\"select-wrapper\"><select id=\"sel-q\">${qOptions}<\/select><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"question-section\">\r\n            <h2 class=\"question-title\">${isFr ? q.fr : q.en}<\/h2>\r\n            <div class=\"expert-box\">\r\n              <div class=\"icon\">${icons.bulb}<\/div>\r\n              <div class=\"content\">\r\n                <strong>${txt.expertAdvice}<\/strong>\r\n                ${isFr ? q.advFr : q.advEn}\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"workspace\">\r\n            <div class=\"workspace-toolbar\">\r\n              <div class=\"tabs\">\r\n                <button class=\"tab ${state.activeTab === 'text' ? 'active' : ''}\" id=\"tab-text\">${txt.tabText}<\/button>\r\n                <button class=\"tab ${state.activeTab === 'audio' ? 'active' : ''}\" id=\"tab-audio\">${txt.tabAudio}<\/button>\r\n              <\/div>\r\n              \r\n              <div class=\"timer-widget\">\r\n                <button class=\"timer-btn\" id=\"btn-t-play\" title=\"Play\/Pause\">${state.timerInterval ? icons.pause : icons.play}<\/button>\r\n                <div class=\"timer-display\" id=\"timer-val\">${formatTime(state.timerSeconds)}<\/div>\r\n                <button class=\"timer-btn\" id=\"btn-t-reset\" title=\"Reset\">${icons.reset}<\/button>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"workspace-body\">\r\n              <!-- Text Area -->\r\n              <div id=\"area-text\" class=\"${state.activeTab === 'text' ? '' : 'hidden'}\">\r\n                <textarea id=\"val-text\" placeholder=\"${txt.placeholder}\">${curText}<\/textarea>\r\n                <div class=\"save-toast\" id=\"save-toast\">${icons.check} ${txt.saved}<\/div>\r\n              <\/div>\r\n\r\n              <!-- Audio Area -->\r\n              <div id=\"area-audio\" class=\"audio-area ${state.activeTab === 'audio' ? '' : 'hidden'}\">\r\n                <button class=\"record-btn ${state.isRecordingAudio ? 'recording' : ''}\" id=\"btn-record\">\r\n                  ${state.isRecordingAudio ? icons.stop : icons.mic}\r\n                  <span id=\"record-text\">${state.isRecordingAudio ? txt.stopBtn : txt.recordBtn}<\/span>\r\n                <\/button>\r\n                \r\n                <div class=\"audio-player-wrapper ${curAudioUrl ? 'visible' : ''}\" id=\"audio-wrap\">\r\n                  ${curAudioUrl ? `<audio controls src=\"${curAudioUrl}\"><\/audio>` : ''}\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"app-footer\">\r\n            <div class=\"eval-group\">\r\n              <span class=\"eval-label\">${txt.evalLabel}<\/span>\r\n              <div class=\"stars\">${starsHtml}<\/div>\r\n            <\/div>\r\n            <div class=\"nav-btns\">\r\n              <button class=\"btn-nav btn-prev\" id=\"btn-prev\" ${state.catIndex===0 && state.qIndex===0 ? 'disabled':''}>\r\n                ${icons.arrowLeft} ${txt.prev}\r\n              <\/button>\r\n              <button class=\"btn-nav btn-next\" id=\"btn-next\" ${state.catIndex===interviewData.length-1 && state.qIndex===cat.questions.length-1 ? 'disabled':''}>\r\n                ${txt.next} ${icons.arrowRight}\r\n              <\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n    shadow.innerHTML = styles + html;\r\n    attachEvents();\r\n  };\r\n\r\n  \/\/ 8. Events\r\n  let typingTimer;\r\n  const attachEvents = () => {\r\n    \/\/ Top nav\r\n    shadow.getElementById('btn-lang').addEventListener('click', () => { state.lang = state.lang === 'fr' ? 'en' : 'fr'; render(); });\r\n    shadow.getElementById('sel-cat').addEventListener('change', e => { state.catIndex = parseInt(e.target.value); state.qIndex = 0; resetTimerAndRender(); });\r\n    shadow.getElementById('sel-q').addEventListener('change', e => { state.qIndex = parseInt(e.target.value); resetTimerAndRender(); });\r\n\r\n    \/\/ Prev \/ Next\r\n    shadow.getElementById('btn-prev').addEventListener('click', () => {\r\n      if(state.qIndex > 0) state.qIndex--;\r\n      else if(state.catIndex > 0) { state.catIndex--; state.qIndex = interviewData[state.catIndex].questions.length - 1; }\r\n      resetTimerAndRender();\r\n    });\r\n    shadow.getElementById('btn-next').addEventListener('click', () => {\r\n      if(state.qIndex < interviewData[state.catIndex].questions.length - 1) state.qIndex++;\r\n      else if(state.catIndex < interviewData.length - 1) { state.catIndex++; state.qIndex = 0; }\r\n      resetTimerAndRender();\r\n    });\r\n\r\n    \/\/ Timer\r\n    shadow.getElementById('btn-t-play').addEventListener('click', () => {\r\n      if(state.timerInterval) { clearInterval(state.timerInterval); state.timerInterval = null; }\r\n      else { state.timerInterval = setInterval(() => { state.timerSeconds++; shadow.getElementById('timer-val').innerText = formatTime(state.timerSeconds); }, 1000); }\r\n      shadow.getElementById('btn-t-play').innerHTML = state.timerInterval ? icons.pause : icons.play;\r\n    });\r\n    shadow.getElementById('btn-t-reset').addEventListener('click', () => {\r\n      clearInterval(state.timerInterval); state.timerInterval = null; state.timerSeconds = 0;\r\n      shadow.getElementById('timer-val').innerText = \"00:00\";\r\n      shadow.getElementById('btn-t-play').innerHTML = icons.play;\r\n    });\r\n\r\n    \/\/ Text & Auto-save\r\n    shadow.getElementById('val-text').addEventListener('input', e => {\r\n      const key = `${state.catIndex}-${state.qIndex}`;\r\n      state.textResponses[key] = e.target.value;\r\n      saveToLocalStorage();\r\n      \r\n      clearTimeout(typingTimer);\r\n      const toast = shadow.getElementById('save-toast');\r\n      toast.classList.add('visible');\r\n      typingTimer = setTimeout(() => toast.classList.remove('visible'), 1500);\r\n    });\r\n\r\n    \/\/ Stars\r\n    const stars = shadow.querySelectorAll('.star');\r\n    stars.forEach(star => {\r\n      star.addEventListener('click', e => {\r\n        const val = parseInt(e.target.getAttribute('data-val'));\r\n        const key = `${state.catIndex}-${state.qIndex}`;\r\n        state.scores[key] = val;\r\n        saveToLocalStorage();\r\n        \r\n        \/\/ Update UI\r\n        stars.forEach(s => {\r\n          s.classList.remove('active', 'pop');\r\n          if(parseInt(s.getAttribute('data-val')) <= val) {\r\n            s.classList.add('active');\r\n            void s.offsetWidth; \/\/ trigger reflow\r\n            s.classList.add('pop');\r\n          }\r\n        });\r\n        \r\n        const stats = calcStats();\r\n        shadow.getElementById('val-gAvg').innerHTML = `${stats.gAvg}<span style=\"font-size:1rem;color:#94a3b8\">\/5<\/span>`;\r\n        shadow.getElementById('val-cAvg').innerHTML = `${stats.cAvg}<span style=\"font-size:1rem;color:#94a3b8\">\/5<\/span>`;\r\n        shadow.getElementById('val-prog').innerHTML = `${stats.answered}<span style=\"font-size:1rem;color:#94a3b8\">\/70<\/span>`;\r\n        shadow.getElementById('prog-bar').style.width = `${stats.percent}%`;\r\n      });\r\n    });\r\n\r\n    \/\/ Tabs\r\n    shadow.getElementById('tab-text').addEventListener('click', () => { state.activeTab = 'text'; render(); });\r\n    shadow.getElementById('tab-audio').addEventListener('click', () => { state.activeTab = 'audio'; render(); });\r\n\r\n    \/\/ Audio\r\n    shadow.getElementById('btn-record').addEventListener('click', toggleAudio);\r\n  };\r\n\r\n  const resetTimerAndRender = () => {\r\n    if(state.timerInterval) clearInterval(state.timerInterval);\r\n    state.timerInterval = null; state.timerSeconds = 0;\r\n    render();\r\n  };\r\n\r\n  const toggleAudio = async () => {\r\n    const txt = t();\r\n    if(!state.isRecordingAudio) {\r\n      if(!navigator.mediaDevices) return alert(txt.notSupported);\r\n      try {\r\n        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\r\n        state.mediaRecorder = new MediaRecorder(stream);\r\n        state.audioChunks =[];\r\n        state.mediaRecorder.ondataavailable = e => { if(e.data.size > 0) state.audioChunks.push(e.data); };\r\n        state.mediaRecorder.onstop = () => {\r\n          const blob = new Blob(state.audioChunks, { type: 'audio\/webm' });\r\n          const url = URL.createObjectURL(blob);\r\n          const key = `${state.catIndex}-${state.qIndex}`;\r\n          state.audioResponses[key] = url;\r\n          const wrap = shadow.getElementById('audio-wrap');\r\n          wrap.innerHTML = `<audio controls src=\"${url}\"><\/audio>`;\r\n          wrap.classList.add('visible');\r\n        };\r\n        state.mediaRecorder.start();\r\n        state.isRecordingAudio = true;\r\n        \r\n        if(!state.timerInterval) shadow.getElementById('btn-t-play').click();\r\n        \r\n        const btn = shadow.getElementById('btn-record');\r\n        btn.classList.add('recording');\r\n        btn.innerHTML = `${icons.stop} <span id=\"record-text\">${txt.stopBtn}<\/span>`;\r\n      } catch(err) { alert(\"Mic error: \" + err.message); }\r\n    } else {\r\n      if(state.mediaRecorder && state.mediaRecorder.state !== 'inactive') {\r\n        state.mediaRecorder.stop();\r\n        state.mediaRecorder.stream.getTracks().forEach(t => t.stop());\r\n      }\r\n      state.isRecordingAudio = false;\r\n      \r\n      if(state.timerInterval) shadow.getElementById('btn-t-play').click();\r\n\r\n      const btn = shadow.getElementById('btn-record');\r\n      btn.classList.remove('recording');\r\n      btn.innerHTML = `${icons.mic} <span id=\"record-text\">${txt.recordBtn}<\/span>`;\r\n    }\r\n  };\r\n\r\n  \/\/ 9. Init\r\n  render();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-225820","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages\/225820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/comments?post=225820"}],"version-history":[{"count":31,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages\/225820\/revisions"}],"predecessor-version":[{"id":225851,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages\/225820\/revisions\/225851"}],"wp:attachment":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/media?parent=225820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}