{"id":19533,"date":"2025-12-03T18:38:08","date_gmt":"2025-12-03T17:38:08","guid":{"rendered":"https:\/\/nina.solutions\/?page_id=19533"},"modified":"2025-12-11T17:16:38","modified_gmt":"2025-12-11T16:16:38","slug":"software-migration","status":"publish","type":"page","link":"https:\/\/nina.solutions\/en\/software-migration\/","title":{"rendered":"Software Migration"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n \n \n Configurateur NINA Solutions<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n },\n colors: {\n nina: {\n \/*dark: '#030a18', \/* Slate 900 *\/\/\/#0f172a*\/\n dark: '#0f172a',\n card: '#1e293b', \/* Slate 800 *\/\n primary: '#cc59a4', \/* Cyan 500 *\/\/\/06b6d4\n hover: '#3e76ed', \/* Cyan 600 *\/\/\/0891b2\n accent: '#3e76ed' \/* Blue 500 *\/\/\/3b82f6\n \/\/#cc59a4 #3e76ed\n\n\n \/\/#030a18 #0f172a;\n }\n },\n animation: {\n 'bounce-slight': 'bounce-slight 0.3s ease-in-out',\n 'fade-in': 'fadeIn 0.5s ease-out forwards',\n },\n keyframes: {\n 'bounce-slight': {\n '0%, 100%': { transform: 'scale(1)' },\n '50%': { transform: 'scale(1.02)' },\n },\n fadeIn: {\n '0%': { opacity: '0', transform: 'translateY(10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n }\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* Styles de secours si Tailwind met du temps \u00e0 charger *\/\n body { \n background-color: #0f172a;\n color: white;\n font-family: 'Inter', sans-serif;\n }\n \n .card-transition { \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); \n }\n \n .selected-card {\n \/*border-color: #cc59a4!important;*\/\n \/*box-shadow: 0 0 20px rgba(204, 89, 164, 0.3);*\/\n \/*background-color: rgba(30, 41, 59, 0.9);*\/\n }\n\n .check-icon {\n opacity: 0;\n transform: scale(0);\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .selected-card .check-icon {\n opacity: 1;\n transform: scale(1);\n }\n\n \/* Scrollbar *\/\n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #0f172a; }\n ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }\n \n \/* Loading overlay *\/\n #loading-screen {\n position: fixed; inset: 0; \n background: #0f172a;\n z-index: 100;\n display: flex; \n flex-direction: column; \n align-items: center; \n justify-content: center;\n }\n .spinner {\n width: 40px; height: 40px; \n border: 4px solid #334155;\n border-top: 4px solid #cc59a4; \n border-radius: 50%;\n animation: spin 1s linear infinite; \n margin-bottom: 20px;\n }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n \n #error-box {\n display: none;\n color: #f87171;\n background: rgba(255,0,0,0.1); \n padding: 20px;\n border: 1px solid #f87171;\n margin: 20px;\n border-radius: 8px;\n max-width: 600px;\n text-align: left;\n font-family: monospace;\n }\n\n\n\n\n\n \/*MAP*\/\n\n \/* Style des continents *\/\n .continent {\n cursor: pointer;\n fill: white;\n transition: fill 0.3s ease, stroke 0.3s ease;\n }\n\n \/* Changement de couleur au survol *\/\n .continent:hover {\n fill: #cc59a4;\n }\n \/* Continent s\u00e9lectionn\u00e9 *\/\n \/* Effet de s\u00e9lection active *\/\n .continent.selected {\n fill:#cc59a4!important;\n \/*stroke: #3e76ed;\n stroke-width: 3px;\n stroke-dashoffset:-3px;\n stroke-linejoin: round;*\/\n }\n\n <\/style>\n<\/head>\n<div class=\"nina-form bg-nina-dark text-slate-200 min-h-screen flex flex-col overflow-x-hidden\">\n\n <div id=\"loading-screen\">\n <div class=\"spinner\"><\/div>\n <p class=\"text-xl font-light text-gray-50\">Loading ...<\/p>\n <div id=\"error-box\"><\/div>\n <\/div>\n\n <!--<header class=\"w-full py-6 px-8 flex items-center justify-between border-b border-slate-800 bg-nina-dark\/95 sticky top-0 z-50 backdrop-blur-sm\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-lg bg-gradient-to-br from-nina-primary to-nina-accent flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-cyan-500\/20\">N<\/div>\n <span class=\"font-bold text-xl tracking-tight text-white\">NINA<span class=\"text-nina-primary font-light\">.solutions<\/span><\/span>\n <\/div>\n \n <div class=\"w-10\"><\/div>\n <\/header>-->\n\n <main class=\"flex-grow flex flex-col items-center justify-center py-10 px-4 w-full max-w-6xl mx-auto\">\n \n\n\n <div id=\"question-container\" class=\"w-full max-w-5xl\"><\/div>\n\n\n\n <div id=\"summary-container\" class=\"hidden w-full max-w-4xl bg-nina-card border border-slate-700 rounded-2xl p-8 md:p-12 shadow-2xl animate-fade-in\">\n <!--<div class=\"text-center mb-10\">\n <div class=\"w-20 h-20 bg-green-500\/20 text-green-400 rounded-full flex items-center justify-center mx-auto mb-6 text-4xl\">\n <i class=\"fas fa-check\"><\/i>\n <\/div>\n <h2 class=\"text-3xl font-bold text-white mb-4\">Configuration Termin\u00e9e !<\/h2>\n <p class=\"text-slate-400\">Voici le r\u00e9capitulatif de vos besoins.<\/p>\n <\/div>-->\n <div id=\"summary-list\" class=\"mb-10 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar\"><\/div>\n <div class=\"gap-4 justify-center\">\n<!-- flex flex-col md:flex-row -->\n <div class=\"text-center text-slate-300\">\n <div class=\"flex justify-center gap-4 items-center\">\n Join the community :\n <!--Rejoignez la communaut\u00e9 :-->\n <a href=\"https:\/\/linkedin.com\/company\/nina-solutions\" target=\"_blank\" class=\"px-4 py-2 rounded-lg transition bg-[#0A66C2] hover:bg-[#0957a6] text-white\">LinkedIn<\/a>\n <a href=\"https:\/\/www.instagram.com\/nina.solutions\" target=\"_blank\" class=\"px-4 py-2 rounded-lg transition bg-gradient-to-r from-[#F58529] via-[#DD2A7B] to-[#8134AF]\n hover:from-[#d47224] hover:via-[#c1296e] hover:to-[#6f269e]\n transition-colors duration-300 text-white\">Instagram<\/a>\n <!--<a href=\"https:\/\/www.facebook.com\/NinaSolutionsMedia\/\" target=\"_blank\" class=\"px-4 py-2 rounded-lg transition bg-[#1877F2] hover:bg-[#145dbf] text-white\">Facebook<\/a>-->\n <\/div>\n <\/div>\n <!--<div class=\"text-center\">\n <button onclick=\"resetForm()\" class=\"px-8 py-4 rounded-xl border border-slate-600 text-slate-300 font-semibold hover:bg-slate-700 transition-colors\">Restart<\/button>\n <\/div>-->\n <!--<button class=\"px-8 py-4 rounded-xl bg-gradient-to-r from-nina-primary to-nina-accent text-white font-bold text-lg shadow-lg shadow-cyan-500\/25 hover:shadow-cyan-500\/40 transform hover:-translate-y-1 transition-all\">\n Demander mon Devis <i class=\"fas fa-arrow-right ml-2\"><\/i>\n <\/button>-->\n <\/div>\n <\/div>\n\n <div class=\"mb-10 pb-5 sm:pb-10\"><\/div>\n <\/main>\n\n <footer id=\"nav-footer\" class=\"fixed bottom-0 w-full bg-nina-dark\/95 border-t border-slate-800 py-4 px-8 backdrop-blur-md z-40 transition-transform duration-300\">\n <div class=\"max-w-6xl mx-auto flex justify-between items-center\">\n \n\n <div class=\"hidden md:flex flex-col w-1\/3\">\n <div class=\"flex justify-between text-xs font-medium text-slate-400 mb-2\">\n <span>Progress<\/span>\n <span id=\"progress-text\">10%<\/span>\n <\/div>\n <div class=\"w-full bg-slate-800 rounded-full h-2.5 overflow-hidden\">\n <div id=\"progress-bar\" class=\"bg-gradient-to-r from-nina-primary to-nina-accent h-2.5 rounded-full transition-all duration-500 ease-out\" style=\"width: 10%\"><\/div>\n <\/div>\n <\/div>\n <span class=\"md:hidden text-sm text-slate-500 font-mono\" id=\"mobile-step-indicator\">1 \/ 10<\/span>\n \n <span class=\"grow\"><\/span>\n\n <button id=\"btn-prev\" onclick=\"prevStep()\" class=\"text-slate-400 hover:text-white font-medium px-3 py-2 sm:px-6 sm:py-3 rounded-lg hover:!bg-slate-800 transition-colors opacity-0 pointer-events-none\">\n <i class=\"fas fa-arrow-left mr-2\"><\/i> Back\n <\/button>\n\n <span class=\"ms-2 sm:ms-4\"><\/span>\n\n <button id=\"btn-next\" onclick=\"nextStep()\" disabled class=\"bg-slate-700 text-slate-400 cursor-not-allowed font-semibold px-4 py-2 sm:px-8 sm:py-3 rounded-xl transition-all flex items-center gap-2\">\n Next <i class=\"fas fa-chevron-right text-sm\"><\/i>\n <\/button>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ Gestion globale des erreurs\n window.onerror = function(message, source, lineno, colno, error) {\n const errorBox = document.getElementById('error-box');\n const loadingScreen = document.getElementById('loading-screen');\n const spinner = document.querySelector('.spinner');\n \n if(errorBox && loadingScreen) {\n spinner.style.display = 'none';\n errorBox.style.display = 'block';\n errorBox.innerHTML = `<strong>Erreur d\u00e9tect\u00e9e :<\/strong><br>${message}<br><small>${source}:${lineno}<\/small>`;\n loadingScreen.style.background = '#0f172a'; \/\/ Garder le fond\n }\n };\n\n try {\n \/\/ --- DONN\u00c9ES ---\n const questions = [\n \n {\n id: 1,\n titleFr: \"O\u00f9 vous cachez-vous ?\",\n title:\"Where are you hiding?\",\n subtitleFr: \"S\u00e9lectionnez votre coin de plan\u00e8te.\",\n subtitle:\"Select your planet zone.\",\n type: \"single\",\n options: [\n { label: \"Europe\", desc: \"European Union\", icon: \"\ud83c\udf0d\" },\n { label: \"MENA\", desc: \"Middle East & North Africa\", icon: \"\ud83d\udd4c\" },\n { label: \"LAC\", desc: \"Latin America & Caribbean\", icon: \"\ud83c\udf34\" },\n { label: \"NORAM\", desc: \"North America\", icon: \"\ud83c\uddfa\ud83c\uddf8\" },\n { label: \"APAC\", desc: \"Asia & Pacific\", icon: \"\ud83d\udc3c\" }\n ]\n },\n {\n id: 2,\n titleFr: \"Votre r\u00f4le dans le monde de l'audiovisuel ?\",\n title: \"Your role in the world of audiovisual media?\",\n subtitleFr: \"Choisissez votre super-pouvoir.\",\n subtitle: \"Choose your superpower.\",\n type: \"multiple\",\n options: [\n \/*{ label: \"Doublage\", desc: \"Direction & Voix\", icon: \"\ud83c\udf99\ufe0f\" },\n { label: \"Sous-titrage\", desc: \"Traduction & Timing\", icon: \"\u270d\ufe0f\" },\n { label: \"Sous-titrage SME\", desc: \"Sourds et malentendants\", icon: \"\ud83d\udc42\" },\n { label: \"Audiodescription\", desc: \"Accessibilit\u00e9\", icon: \"\ud83d\udc41\ufe0f\" },\n { label: \"Post Synchro\", desc: \"ADR \/ Studio\", icon: \"\ud83c\udfa7\" },\n { label: \"Post Production\", desc: \"Cr\u00e9ation originale\", icon: \"\ud83c\udfac\" },*\/\n { label: \"Dubbing\", desc: \"Direction & Vocals\", icon: \"\ud83c\udf99\ufe0f\" },\n { label: \"Subtitling \", desc: \"Translation & Timing\", icon: \"\u270d\ufe0f\" },\n { label: \"SDH\", desc: \"Deaf and hard of hearing\", icon: \"\ud83d\udc42\" },\n { label: \"Audiodescription\", desc: \"Accessibility\", icon: \"\ud83d\udc41\ufe0f\" },\n { label: \"ADR\", desc: \"Audio recording\", icon: \"\ud83c\udfa7\" },\n { label: \"Post-Production\", desc: \"Original creation\", icon: \"\ud83c\udfac\" }\n ]\n },\n {\n id: 3,\n title: \"Votre r\u00f4le dans le monde de l'audiovisuel ?\",\n title:\"What's your profile?\",\n subtitle: \"Ready... Player one... Multiplayer...\",\n type: \"single\",\n options: [\n \/*{ label: \"Solo\", desc: \"Freelance, Ind\u00e9pendant, Intermittant\", icon: \"\ud83d\udc69\ud83c\udffb\u200d\ud83d\udcbb\" },\n { label: \"Entreprise\", desc: \"Studio, Diffuseur, Agence \u00e9v\u00e9nementiel\", icon: \"\ud83d\udc69\ud83c\udffb\u200d\ud83d\udcbb\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb\ud83d\udc69\ud83c\udffb\u200d\ud83d\udcbb\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb\" },*\/\n { label: \"Solo\", desc: \"Freelance, Independent, Intermittent\", icon: \"\ud83d\udc69\ud83c\udffb\u200d\ud83d\udcbb\" },\n { label: \"Company\", desc: \"Studio, Broadcaster, Event Agency\", icon: \"\ud83d\udc69\ud83c\udffb\u200d\ud83d\udcbb\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb\ud83d\udc69\ud83c\udffb\u200d\ud83d\udcbb\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb\" },\n ]\n },\n {\n id: 4,\n titleFr: \"Quels produits NINA vous int\u00e9ressent ?\",\n title: \"Which NINA products are right for you?\",\n subtitleFr: \"Pas de jalousie, vous pouvez tout cocher.\",\n subtitle:\"No need to be jealous, you can select everything.\",\n type: \"multiple\",\n options: [\n { label: \"NINA Dubbing\", icon: \"\ud83c\udf9b\ufe0f\" },\n { label: \"NINA Subtitling\", icon: \"\ud83d\udcac\" },\n { label: \"NINA Prompting\", icon: \"\ud83c\udfa4\" },\n { label: \"NINA SDH\", icon: \"\ud83e\uddbb\" },\n { label: \"NINA Audiodescription\", icon: \"\ud83c\udfa7\" },\n { label: \"NINA Convert\", icon: \"\ud83d\udd04\" },\n ]\n },\n\n {\n id: 5,\n titleFr: \"Quel(s) outil(s) utilisez-vous actuellement ?\",\n title: \"What tool(s) are you currently using?\",\n subtitleFr: \"On ne dira rien, promis.\",\n subtitle:\"We won't say anything, I promise.\",\n type: \"multiple\",\n options: [\n \/\/DOUBLAGE\n { label: \"Mosaic 1\" },\n { label: \"Mosaic 2\" },\n { label: \"Capella\" },\n { label: \"e-Rythmo\" },\n { label: \"VoiceQ\" },\n { label: \"DubStudio\" },\n \/\/SOUS-TITRAGE \/ SOUS-TITRAGE SME\n { label: \"EZTitles\" },\n { label: \"OOONA\" },\n { label: \"AYATO PRO\" },\n { label: \"AYATO 3\" },\n \/\/POST SYNCHRO\n \/\/{ label: \"Mosaic 2\" },\n\n { label: \"None\" },\n ]\n },\n\n \n {\n id: 6,\n titleFr: \"Voulez vous changer de logiciel ?\",\n title:\"Do you wish to use the NINA platform?\",\n subtitleFr: \"Comme pour la reprise des anciens smartphones : une remise \u00e0 la cl\u00e9.\",\n subtitle: \"Just like with trade-ins of old smartphones: a discount is offered.\",\n type: \"boolean\", \/\/ true\/false\n \/\/dependsOn: { step: 4, value: [0,1,2,3,4,5,6,7,8,9] },\n options: [\n \/*{ label: \"Oui\", desc: \"Je tourne la page\", icon: \"\u2705\" },\n { label: \"Non\", desc: \"Je suis sentimental\u00b7e\", icon: \"\u274c\" },*\/\n { label: \"Yes\", desc: \"I'm turning the page\", icon: \"\u2705\" },\n { label: \"No\", desc: \"I'm sentimental\", icon: \"\u274c\" },\n ]\n },\n\n {\n id: 7,\n titleFr: \"Upload votre document\",\n subtitleFr: \"Envoyez le fichier n\u00e9cessaire pour votre configuration.\",\n title: \"Upload your proof of purchase\",\n subtitle: \"Send the invoice for your current software license.\",\n type: \"upload\",\n dependsOn: { step: 5, value: 0 }, \/\/ afficher index de la question (id-1) = Oui\n maxSizeMB: 10, \/\/ taille max en Mo\n acceptedTypes: ['.pdf','.docx','.txt'] \/\/ extensions accept\u00e9es\n },\n {\n id: 8,\n title: \"Your first name\",\n type: \"input\",\n },\n\n {\n id: 9,\n title: \"Your last name\",\n type: \"input\",\n },\n\n {\n id: 10,\n title: \"Your email address\",\n type: \"input\",\n },\n \/*\n {\n id: 7,\n title: \"\u23f1\ufe0f Volume mensuel\",\n subtitle: \"Estimation du flux de travail.\",\n type: \"single\",\n options: [\n { label: \"< 60 min\", desc: \"Ponctuel\", icon: \"\ud83c\udf31\" },\n { label: \"1h - 10h\", desc: \"R\u00e9gulier\", icon: \"\ud83c\udf3f\" },\n { label: \"10h - 50h\", desc: \"Intense\", icon: \"\ud83c\udf33\" },\n { label: \"50h +\", desc: \"Industriel\", icon: \"\ud83c\udfed\" }\n ]\n },\n {\n id: 8,\n title: \"\ud83d\udc65 Utilisateurs\",\n subtitle: \"Combien de licences ?\",\n type: \"single\",\n options: [\n { label: \"1 (Solo)\", desc: \"Usage personnel\", icon: \"\ud83d\udc64\" },\n { label: \"2 - 5\", desc: \"Petite \u00e9quipe\", icon: \"\ud83e\udd1d\" },\n { label: \"6 - 20\", desc: \"Studio\", icon: \"\ud83c\udfe2\" },\n { label: \"20+\", desc: \"Entreprise\", icon: \"\ud83c\udf10\" }\n ]\n },\n {\n id: 9,\n title: \"\u2699\ufe0f Technique\",\n subtitle: \"Besoins d'int\u00e9gration ?\",\n type: \"single\",\n options: [\n { label: \"SaaS (Web)\", desc: \"Acc\u00e8s standard\", icon: \"\u2601\ufe0f\" },\n { label: \"API\", desc: \"Automatisation\", icon: \"\ud83d\udd0c\" },\n { label: \"On-Premise\", desc: \"Serveur local\", icon: \"\ud83d\udd12\" }\n ]\n },\n {\n id: 10,\n title: \"\ud83d\udcc5 D\u00e9marrage\",\n subtitle: \"Quelle est l'urgence ?\",\n type: \"single\",\n options: [\n { label: \"Urgent\", desc: \"Imm\u00e9diat\", icon: \"\ud83d\udd25\" },\n { label: \"Ce mois-ci\", desc: \"Court terme\", icon: \"\ud83d\uddd3\ufe0f\" },\n { label: \"Exploration\", desc: \"Futur projet\", icon: \"\ud83d\udd2d\" }\n ]\n }*\/\n ];\n\n \/\/ --- VARIABLES ---\n let currentStep = JSON.parse(localStorage.getItem('ninaCurrentStep')) || 0;\n let answers = JSON.parse(localStorage.getItem('ninaAnswers')) || {};\n\n \/\/ --- DOM ELEMENTS ---\n const container = document.getElementById('question-container');\n const nextBtn = document.getElementById('btn-next');\n const prevBtn = document.getElementById('btn-prev');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n const mobileStep = document.getElementById('mobile-step-indicator');\n const summaryContainer = document.getElementById('summary-container');\n const navFooter = document.getElementById('nav-footer');\n const loadingScreen = document.getElementById('loading-screen');\n\n \/\/ --- LOGIC ---\n \n function renderStep(index, direction=\"forward\") {\n \/\/ Fade effect wrapper\n \/\/container.style.opacity = '0';\n \n\n \/\/ quitter le mode summary\n container.style.display = 'block';\n navFooter.style.transform = '';\n summaryContainer.classList.add('hidden');\n \n\n \/\/setTimeout(() => {\n container.innerHTML = '';\n const q = questions[index];\n \n\n \/\/ V\u00e9rification des conditions\n if(q.dependsOn){\n const dep = q.dependsOn;\n\n console.log(\"dependsOn\", dep, answers[dep.step], answers[dep.step]);\n if(!answers[dep.step] || !answers[dep.step].includes(dep.value)){\n \/\/if(!answers[dep.step] || !dep.value.includes(answers[dep.step])) {\n \/\/ Question non affich\u00e9e \u2192 on met la r\u00e9ponse \u00e0 null\n answers[index] = null;\n saveAnswers();\n \n \/\/ Passer \u00e0 la prochaine question visible\n if(direction === \"forward\"){ \n nextStep();\n }else{\n prevStep(); \n }\n return;\n }\n }\n\n\n\n\n\n \/\/ Header\n const header = document.createElement('div');\n header.className = \"text-center mb-5 sm:mb-10\";\n header.innerHTML = `\n <h1 class=\"text-3xl md:text-4xl font-bold text-white mb-0 sm:mb-3 tracking-tight\">${q.title}<\/h1>\n ${q.subtitle ? `<p class=\"text-slate-400 text-lg font-light\">${q.subtitle}<\/p>`:``}\n\n ${q.type === 'multiple' ? `<span class=\"inline-block mt-3 px-3 py-1 bg-slate-800 text-nina-primary text-xs font-bold rounded-full uppercase tracking-wider\">Multiple choice${q.min && q.max ? ` (between ${q.min} and ${q.max})`: q.min ? `(minimum ${q.min})`: q.max? `(maximum ${q.max})`: ''}<\/span>` : ''}\n `;\n container.appendChild(header);\n\n\n\n\n\nif(q.type === 'input'){\n const inputWrapper = document.createElement('div');\n inputWrapper.className = \"flex flex-col items-center gap-4 w-full\";\n\n const input = document.createElement('input');\n input.type = q.title.toLowerCase().includes(\"mail\") ? \"email\" : \"text\";\n input.placeholder = q.subtitle || \"\";\n input.value = answers[index]?.[0] || \"\";\n input.className = \"w-full md:w-1\/2 px-4 py-3 !rounded-xl !bg-slate-800 !border !border-slate-600 !text-white focus:!border-nina-primary !outline-none\";\n\n const error = document.createElement('div');\n error.className = \"text-red-400 text-sm\";\n\n input.addEventListener('input', ()=>{\n let val = input.value.trim();\n let valid = true;\n\n if(input.type === \"email\"){\n valid = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(val);\n error.innerText = valid ? \"\" : \"Invalid email address\";\/\/Adresse email invalide\";\n }\n\n answers[index] = valid && val !== \"\" ? [val] : [];\n saveAnswers();\n updateButtons();\n });\n\n inputWrapper.appendChild(input);\n inputWrapper.appendChild(error);\n container.appendChild(inputWrapper);\n\n input.focus();\n} else\n\n if(q.type === 'upload'){\n const uploadWrapper = document.createElement('div');\n uploadWrapper.className = 'flex flex-col items-center justify-center gap-4';\n\n \/\/ Loading indicator\n const loadingIndicator = document.createElement('div');\n loadingIndicator.className = 'mt-2 text-sm text-slate-400';\n\n\n \/\/ Lien d\u00e9j\u00e0 upload\u00e9\n const uploadedLinkWrapper = document.createElement('div');\n uploadedLinkWrapper.className = 'text-center';\n\n const uploadedLink = document.createElement('a');\n uploadedLink.className = 'text-nina-accent underline';\n uploadedLink.target = '_blank';\n\n const removeBtn = document.createElement('button');\n removeBtn.className = 'mt-3 block text-red-400 hover:text-white text-sm text-slate-400 hover:text-white font-medium px-3 py-2 sm:px-6 sm:py-3 rounded-lg hover:bg-red-900 transition-colors';\n removeBtn.innerText = 'Delete';\/\/Supprimer';\n removeBtn.onclick = () => {\n answers[index] = [];\n console.log(\"supprimer\", answers);\n saveAnswers();\n uploadedLinkWrapper.remove();\n dropZone.style.display = 'flex';\n updateButtons();\n };\n\n \n\n\n \/\/ Input file & zone droppable\n const dropZone = document.createElement('div');\n dropZone.className = 'flex flex-col items-center justify-center gap-2 p-6 border-2 border-dashed border-slate-600 rounded-xl w-full md:w-1\/2 cursor-pointer hover:border-nina-primary transition-colors';\n dropZone.setAttribute('tabindex', '0');\n dropZone.innerHTML = `\n <p class=\"text-slate-400 text-center\">Drag and drop a file or click to select<\/p>\n <input type=\"file\" accept=\"${q.acceptedTypes.join(',')}\" class=\"hidden\">\n `;\n \/\/Glissez-d\u00e9posez un fichier ou cliquez pour s\u00e9lectionner\n const fileInput = dropZone.querySelector('input');\n\n \/\/ Gestion glisser-d\u00e9poser\n dropZone.addEventListener('keydown', e => {\n if(e.key === 'Enter' || e.key === ' ') e.preventDefault(); fileInput.click();\n });\n dropZone.addEventListener('click', ()=>fileInput.click());\n dropZone.addEventListener('dragover', e=>{ e.preventDefault(); dropZone.classList.add('border-nina-primary'); });\n dropZone.addEventListener('dragleave', e=>{ e.preventDefault(); dropZone.classList.remove('border-nina-primary'); });\n dropZone.addEventListener('drop', e=>{\n e.preventDefault();\n dropZone.classList.remove('border-nina-primary');\n if(e.dataTransfer.files.length) fileInput.files = e.dataTransfer.files;\n fileInput.dispatchEvent(new Event('change'));\n });\n\n\n\n\n\n\n \/\/ Gestion du choix de fichier\n fileInput.addEventListener('change', async (e)=>{\n const file = e.target.files[0];\n if(!file){\n oadingIndicator.innerText = `No files selected`;\/\/Aucun fichier s\u00e9lectionn\u00e9`;\n return;\n }\n if(file.size > q.maxSizeMB*1024*1024){\n loadingIndicator.innerText = `File exceeds ${q.maxSizeMB} MB`;\/\/Le fichier d\u00e9passe ${q.maxSizeMB} Mo`\n fileInput.value = '';\n return;\n }\n\n\n\n\n\n try{ \n \/\/ Passer en mode upload\n dropZone.style.display = 'none';\n loadingIndicator.innerText = 'Uploading...';\/\/Upload en cours...';\n\n \/\/ Upload sur Google Drive\n const fileUrl = await uploadToGoogleDrive(file);\n\n \/\/ Stocker l'URL dans answers\n answers[index] = [{url:fileUrl, name:file.name}];\n saveAnswers();\n\n\n loadingIndicator.innerText = '';\n uploadedLink.href = fileUrl;\n uploadedLink.innerText = file.name;\n uploadedLinkWrapper.appendChild(uploadedLink);\n uploadedLinkWrapper.appendChild(removeBtn);\n uploadWrapper.appendChild(uploadedLinkWrapper);\n\n updateButtons();\n fileInput.value = '';\n }catch(err){\n\n dropZone.style.display = 'flex';\n\n\n loadingIndicator.innerText = 'Error uploading';\/\/Erreur lors de l\u2019upload';\n alert('Erreur upload: ' + err.message);\n fileInput.value = '';\n \/\/nextBtn.disabled = true;\n }\n\n });\n\n\n \/\/ Affichage selon l\u2019\u00e9tat\n uploadWrapper.appendChild(dropZone);\n\n if(answers[index]?.length){\n dropZone.style.display = 'none';\n\n uploadedLink.href = answers[index][0].url;\n uploadedLink.innerText = answers[index][0].name;\n uploadedLinkWrapper.appendChild(uploadedLink);\n uploadedLinkWrapper.appendChild(removeBtn);\n\n uploadWrapper.appendChild(uploadedLinkWrapper);\n }\n\n\n \n uploadWrapper.appendChild(loadingIndicator);\n container.appendChild(uploadWrapper);\n}\n\nelse\n\n{\n\n\n \/\/ Grid\n const grid = document.createElement('div');\n grid.className = \"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 sm:gap-6\";\n \n \/\/ Nombre total de cartes\n const total = q.options.length;\n const remainder = total % 3; \/\/ car 3 cards par ligne (chaque col-span-2)\n\n const remainderMd = total % 2; \/\/ car 3 cards par ligne (chaque col-span-2)\n const lastLineStart = total - remainder; \n const lastLineStartMd = total - remainderMd; \n\n\n q.options.forEach((opt, optIndex) => {\n\n\n \/\/ Juste avant d'afficher la premi\u00e8re card de la derni\u00e8re ligne :\n if (optIndex === lastLineStart && remainder !== 0) {\n\n \/\/ Si 1 card \u2192 2-col spacer AVANT\n if (remainder === 1) {\n const spacer = document.createElement('div');\n spacer.className = \"hidden lg:block col-span-2 \";\n grid.appendChild(spacer);\n }\n\n \/\/ Si 2 cards \u2192 1-col spacer AVANT\n if (remainder === 2) {\n const spacer = document.createElement('div');\n spacer.className = \"hidden lg:block col-span-1\";\n grid.appendChild(spacer);\n }\n }\n if (optIndex === lastLineStartMd && remainderMd !== 0) {\n const spacer = document.createElement('div');\n spacer.className = \"hidden md:block lg:hidden col-span-1 \";\n grid.appendChild(spacer);\n }\n\n\n const isSelected = answers[index]?.includes(optIndex);\n \n \n const card = document.createElement('div');\n card.className = `col-span-2 relative bg-nina-card !border-solid !border-2 ${isSelected ? 'selected-card !border-nina-primary shadow-nina-primary\/15' : 'border-transparent'} hover:border-nina-hover p-3 sm:p-6 rounded-2xl cursor-pointer group flex flex-col items-center text-center h-full shadow-lg hover:shadow-nina-hover\/15`;\n card.setAttribute('tabindex','0'); \/\/ rend focusable\n card.setAttribute('role','button'); \/\/ accessibilit\u00e9 screen reader\n \/\/card.setAttribute('aria-pressed', isSelected ? 'true' : 'false');\n\n\n\n \/\/ S\u00e9lection \u00e0 la souris\n card.onclick = ()=>handleSelection(index,optIndex,q.type,q.max);\n\n \/\/ S\u00e9lection via clavier\n card.addEventListener('keydown', (e)=>{\n if(e.key === 'Enter' || e.key === ' '){ \/\/ Enter ou espace\n e.preventDefault();\n handleSelection(index,optIndex,q.type,q.max);\n }\n });\n\n const check = document.createElement('div');\n check.className = \"check-icon absolute top-3 right-3 w-6 h-6 bg-nina-primary rounded-full flex items-center justify-center text-white text-xs shadow-lg z-10\";\n check.innerHTML = '<i class=\"fas fa-check\"><\/i>';\n card.innerHTML = `\n ${opt.icon ? `<div class=\"text-4xl mb-4 group-hover:scale-110 transition-transform duration-300\">${opt.icon}<\/div>` : ''}\n <h3 class=\"text-xl font-bold text-white\">${opt.label}<\/h3>\n ${opt.desc ? `<p class=\"sm:mt-2 text-sm text-slate-400 leading-relaxed\">${opt.desc}<\/p>` : ''}\n `;\n card.appendChild(check);\n grid.appendChild(card);\n });\n\n container.appendChild(grid);\n\n\n}\n\n\n\n\n\n\n\n\n\n \n \/\/ Fade in\n \/\/container.classList.add('animate-fade-in');\n \/\/ container.style.opacity = '1';\n \n updateProgress();\n updateButtons();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n \/\/}, 150);\n }\n\n\n\nasync function uploadToGoogleDrive(file){\n const reader = new FileReader();\n reader.readAsDataURL(file);\n\n return new Promise((resolve,reject)=>{\n reader.onload = async ()=>{\n const base64Data = reader.result.split(',')[1]; \/\/ enlever le prefixe data:...\n try{\n const res = await fetch('https:\/\/script.google.com\/macros\/s\/AKfycby26Uu2tmBj9PAz1tjiuw_cKa3j61JhnOIwPyqzDwwWJ7v6JS8-C4HKrc6qSgJ1Tbdc\/exec', {\n method:'POST',\n headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n body: new URLSearchParams({\n fileData: base64Data,\n fileName: file.name,\n fileType: file.type\n })\n });\n const json = await res.json();\n if(json.success){\n \/\/alert(\"Fichier t\u00e9l\u00e9vers\u00e9 avec succ\u00e8s !\\nURL: \"+json.fileUrl);\n resolve(json.fileUrl);\n } else reject(json.error);\n } catch(err){\n alert(\"Erreur upload: \"+err.message);\n reject(err);\n }\n }\n reader.onerror = err=>reject(err);\n });\n}\n\n\nfunction saveAnswers() {\n localStorage.setItem('ninaAnswers', JSON.stringify(answers));\n}\nfunction saveStep() {\n localStorage.setItem('ninaCurrentStep', currentStep);\n}\n\n\n \/\/ Expos\u00e9 globalement pour l'HTML\n \/*window.handleSelection = function(stepIndex, optionIndex, type) {\n if (!answers[stepIndex]) answers[stepIndex] = [];\n\n if (type === 'single') {\n answers[stepIndex] = [optionIndex];\n renderStep(stepIndex);\n } else {\n const pos = answers[stepIndex].indexOf(optionIndex);\n if (pos === -1) answers[stepIndex].push(optionIndex);\n else answers[stepIndex].splice(pos, 1);\n renderStep(stepIndex);\n }\n };*\/\n function handleSelection(stepIndex, optionIndex, type, max = null) {\n if (!answers[stepIndex]) answers[stepIndex] = [];\n\n if(type === 'single' || type === 'boolean'){\n answers[stepIndex] = [optionIndex];\n saveAnswers();\n saveStep();\n renderStep(stepIndex);\n nextStep(); \/\/ auto next\n } else if(type === 'multiple'){\n const pos = answers[stepIndex].indexOf(optionIndex);\n if(pos === -1){\n if(!max || answers[stepIndex].length < max) answers[stepIndex].push(optionIndex);\n } else {\n answers[stepIndex].splice(pos,1);\n }\n saveAnswers();\n saveStep();\n renderStep(stepIndex);\n console.log(\"max\",max, answers[stepIndex].length);\n if(max === answers[stepIndex].length) nextStep(); \/\/ auto next\n }\n }\n\n\n function validStep(){\n const hasAnswer = answers[currentStep] && answers[currentStep].length > 0;\n\n let dep = questions[currentStep].dependsOn;\n let dependsOn = dep && (!answers[dep.step] || !answers[dep.step].includes(dep.value));\n if(dependsOn) return true; \n\n if(!hasAnswer) return false;\n return true;\n }\n\n window.nextStep = function() {\n let stepValidated = validStep();\n if(!stepValidated) return;\n\n if (currentStep < questions.length - 1) {\n currentStep++;\n renderStep(currentStep);\n saveStep();\n } else {\n showSummary();\n }\n };\n\n window.prevStep = function() {\n if (currentStep > 0) {\n currentStep--;\n saveStep();\n renderStep(currentStep, \"backward\");\n }\n };\n\n function updateProgress() {\n const percent = ((currentStep + 1) \/ questions.length) * 100;\n progressBar.style.width = `${percent}%`;\n progressText.innerText = `${Math.round(percent)}%`;\n mobileStep.innerText = `${currentStep + 1} \/ ${questions.length}`;\n }\n\n function updateButtons() {\n \/\/ Prev\n if (currentStep === 0) prevBtn.classList.add('opacity-0', 'pointer-events-none');\n else prevBtn.classList.remove('opacity-0', 'pointer-events-none');\n\n \/\/ Next\n let stepValidated = validStep();\n if (stepValidated) {\n nextBtn.disabled = false;\n nextBtn.className = \"bg-gradient-to-r from-nina-primary to-nina-accent text-white hover:shadow-lg hover:shadow-nina-primary\/25 font-semibold px-4 py-2 sm:px-8 sm:py-3 rounded-xl transition-all flex items-center gap-2 cursor-pointer\";\n nextBtn.innerHTML = currentStep === questions.length - 1 ? \n 'Send <i class=\"fas fa-check ml-2\"><\/i>' : \n 'Next <i class=\"fas fa-chevron-right ml-2 text-sm\"><\/i>';\n } else {\n nextBtn.disabled = true;\n nextBtn.className = \"bg-slate-700 text-slate-400 cursor-not-allowed font-semibold px-4 py-2 sm:px-8 sm:py-3 rounded-xl transition-all flex items-center gap-2\";\n nextBtn.innerHTML = 'Next <i class=\"fas fa-chevron-right ml-2 text-sm\"><\/i>';\n }\n }\n\n function showSummary() {\n container.style.display = 'none';\n navFooter.style.transform = 'translateY(100%)';\n summaryContainer.classList.remove('hidden');\n \n const list = document.getElementById('summary-list');\n list.innerHTML = '';\n\n questions.forEach((q, idx) => {\n const userIndices = answers[idx] || [];\n if (userIndices.length === 0) return;\n\n const item = document.createElement('div');\n item.className = \"flex flex-col md:flex-row pb-1\";\/\/border-b border-slate-700 py-2 last:border-0\n \n const qTitle = document.createElement('div');\n qTitle.className = \"w-full md:w-1\/2 text-slate-400 text-sm md:text-base font-medium mb-2 md:mb-0\";\n qTitle.innerText = `${idx + 1}. ${q.title}`;\n \n const aContent = document.createElement('div');\n aContent.className = \"w-full md:w-1\/2 flex flex-wrap gap-2\";\n \n userIndices.forEach(optIdx => {\n const tag = document.createElement('span');\n tag.className = \"bg-slate-800 border border-slate-600 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-2\";\n if(q.options){\n const opt = q.options[optIdx];\n console.log(opt);\n if(opt){\n tag.innerHTML = `${opt.icon ? `<span>${opt.icon}<\/span>` : ''} ${opt.label}`;\n }\n\n }else if(optIdx.url){\n tag.innerHTML = `<span><a href=\"${optIdx.url}\">${optIdx.name}<\/a><\/span>`;\n }else if(optIdx.name){\n tag.innerHTML = `<span>${optIdx.name}<\/span>`;\n }else{\n tag.innerHTML = `<span>${optIdx}<\/span>`;\n }\n aContent.appendChild(tag);\n });\n\n item.appendChild(qTitle);\n item.appendChild(aContent);\n list.appendChild(item);\n });\n\n \/\/ envoyer \u00e0 Google Form\n postToGoogleForm();\n }\n\n\nfunction postToGoogleForm(){\n const url = \"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSdt3iIi0uA1pDNC-OHePCIl22Rcv9Cz7tQPpmxsxa0Sm2q6yQ\/formResponse\";\n\n \/\/ Mapping entre index de question et entry ID du Google Form\n const entryMap = {\n 0: \"1421425615\",\n 1: \"649932180\",\n 2: \"1164470252\",\n 3: \"1261298084\",\n 4: \"536470040\",\n 5: \"1249998472\",\n 6: \"944564035\",\n 7: \"724962880\",\/\/pr\u00e9nom \/\/\n 8: \"1378682167\",\/\/nom\n 9: \"1707196805\",\/\/mail\n \/\/10: \"1709084958\",\n };\n\n console.log(answers);\n const formData = new FormData();\n Object.keys(answers).forEach(k => {\n const entryId = entryMap[k];\n if (!entryId) return;\n\n let valueToSend = \"\";\n const ans = answers[k];\n let q = questions[k];\n if(q.options){\n \/\/ options\n valueToSend = answers[k].map(i=>q.options[i].label).join(', ');\n }else if(ans && ans[0] && ans[0].url){\n \/\/ fichier\n valueToSend = ans[0].url.replace(\"\/view?usp=drivesdk\", \"\");\n }else{\n \/\/ input\n valueToSend = ans[0];\n }\n console.log(k, valueToSend);\n formData.append(`entry.${entryId}`, valueToSend);\n });\n fetch(url, { method:'POST', mode:'no-cors', body: formData });\n \/\/resetForm();\n}\n\n\nfunction resetForm(){\n localStorage.removeItem('ninaAnswers');\n localStorage.removeItem('ninaCurrentStep');\n \/\/answers = {};\n \/\/currentStep = 0;\n \/\/location.reload();\n \/\/renderStep(0);\n \/\/summaryContainer.classList.add('hidden');\n \/\/container.style.display = 'block';\n \/\/navFooter.style.transform = 'translateY(0)';\n}\n\n\n \n\/\/ --- NAVIGATION CLAVIER ---\nwindow.addEventListener('keydown',(e)=>{\n const activeTag = document.activeElement.tagName.toLowerCase();\n const inInput = activeTag === 'input' || activeTag === 'textarea';\n\n if (inInput && e.key === 'Escape') document.activeElement.blur();\n if(e.key === 'ArrowDown') nextStep();\n if(!inInput && e.key === 'ArrowRight') nextStep();\n if(e.key === 'Enter') nextStep();\n if(e.key === 'ArrowUp') prevStep();\n if(!inInput && e.key === 'ArrowLeft') prevStep();\n if(e.key==='Enter'){\n const firstOption = container.querySelector('div div'); \n if(firstOption) firstOption.click();\n }\n});\n\n \/\/ INIT\n window.addEventListener('load', () => {\n setTimeout(() => {\n renderStep(currentStep);\n \/\/ Hide loading screen\n loadingScreen.style.opacity = '0';\n setTimeout(() => { loadingScreen.style.display = 'none'; }, 500);\n }, 500); \/\/ Petit d\u00e9lai pour laisser le temps au CSS de s'appliquer\n });\n\n } catch (e) {\n alert(\"Une erreur critique est survenue dans le script : \" + e.message);\n }\n <\/script>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Configurateur NINA Solutions Loading … Join the community : LinkedIn Instagram Progress 10% 1 \/ 10 Back Next<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-19533","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/nina.solutions\/en\/wp-json\/wp\/v2\/pages\/19533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nina.solutions\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nina.solutions\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nina.solutions\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/nina.solutions\/en\/wp-json\/wp\/v2\/comments?post=19533"}],"version-history":[{"count":51,"href":"https:\/\/nina.solutions\/en\/wp-json\/wp\/v2\/pages\/19533\/revisions"}],"predecessor-version":[{"id":19667,"href":"https:\/\/nina.solutions\/en\/wp-json\/wp\/v2\/pages\/19533\/revisions\/19667"}],"wp:attachment":[{"href":"https:\/\/nina.solutions\/en\/wp-json\/wp\/v2\/media?parent=19533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}