Diagnostic Digital Tower — Analysez votre besoin *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #C9A84C; --gold-light: #E8C96A; --gold-pale: #F5E6B8; --black: #0A0A0A; --dark: #0d0d0d; --dark2: #1A1A1A; --dark3: #242424; --text: #E8E8E8; --muted: #888; --border: rgba(201,168,76,.2); --font-t: 'Playfair Display', serif; --font-b: 'DM Sans', sans-serif; } html { scroll-behavior: smooth; } body { background: var(--black); color: var(--text); font-family: var(--font-b); -webkit-font-smoothing: antialiased; min-height: 100vh; } /* ── NAV ── */ .nav { background: rgba(10,10,10,.95); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); padding: .9rem 2rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 99; } .nav-logo img { height: 40px; mix-blend-mode: lighten; } .nav-back { color: var(--gold); font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: .5rem; transition: gap .2s; } .nav-back:hover { gap: .9rem; } /* ── HERO DIAG ── */ .diag-hero { background: var(--dark); border-bottom: 1px solid var(--border); padding: 4rem 2rem 3rem; text-align: center; position: relative; overflow: hidden; } .diag-hero::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 600px; border-radius: 50%; border: 1px solid rgba(201,168,76,.06); pointer-events: none; } .diag-hero::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(201,168,76,.1); pointer-events: none; } .diag-badge { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid rgba(201,168,76,.4); color: var(--gold); font-size: .65rem; letter-spacing: 3px; text-transform: uppercase; padding: .4rem 1rem; margin-bottom: 1.5rem; background: rgba(201,168,76,.05); } .diag-badge::before { content: ''; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; animation: blink 1.8s ease-in-out infinite; } @keyframes blink { 0%,100%{opacity:1;box-shadow:0 0 5px var(--gold)} 50%{opacity:.15;box-shadow:none} } .diag-hero h1 { font-family: var(--font-t); font-size: clamp(1.8rem,4vw,2.8rem); color: #fff; margin-bottom: 1rem; } .diag-hero h1 em { color: var(--gold); font-style: normal; } .diag-hero p { color: var(--muted); max-width: 580px; margin: 0 auto 2rem; line-height: 1.8; font-size: .95rem; } /* ── PROGRESS ── */ .progress-wrap { max-width: 680px; margin: 0 auto 0; padding: 0 2rem; } .progress-bar { height: 2px; background: rgba(201,168,76,.12); margin-bottom: .75rem; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width .5s cubic-bezier(.4,0,.2,1); } .progress-labels { display: flex; justify-content: space-between; font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .progress-labels span.active { color: var(--gold); } /* ── MAIN ── */ .diag-main { max-width: 760px; margin: 0 auto; padding: 3rem 2rem 5rem; } /* ── ÉTAPES ── */ .step { display: none; animation: fadeUp .45s ease; } .step.active { display: block; } @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } .step-num { font-size: .65rem; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: .75rem; } .step-title { font-family: var(--font-t); font-size: clamp(1.4rem,3vw,2rem); color: #fff; margin-bottom: .75rem; } .step-subtitle { color: var(--muted); font-size: .92rem; line-height: 1.7; margin-bottom: 2.5rem; } /* Options cliquables */ .options-grid { display: grid; gap: 12px; } .options-grid.col2 { grid-template-columns: repeat(2,1fr); } .options-grid.col3 { grid-template-columns: repeat(3,1fr); } .opt { background: var(--dark2); border: 1px solid var(--border); padding: 1.25rem 1.5rem; cursor: pointer; transition: all .2s; display: flex; align-items: flex-start; gap: 1rem; position: relative; overflow: hidden; text-align: left; } .opt::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gold); transition: width .3s; } .opt:hover { border-color: rgba(201,168,76,.45); background: var(--dark3); } .opt:hover::after { width: 100%; } .opt.selected { border-color: var(--gold); background: rgba(201,168,76,.07); } .opt.selected::after { width: 100%; } .opt-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; margin-top: 2px; } .opt-label { font-size: .92rem; color: var(--text); font-weight: 500; line-height: 1.3; } .opt-desc { font-size: .78rem; color: var(--muted); margin-top: .25rem; line-height: 1.5; } .opt-check { position: absolute; top: .75rem; right: .75rem; width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 50%; transition: all .2s; display: flex; align-items: center; justify-content: center; font-size: .7rem; } .opt.selected .opt-check { background: var(--gold); border-color: var(--gold); color: var(--black); } /* Multi-select hint */ .multi-hint { font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; } .multi-hint::before { content: ''; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; } /* Champ texte libre */ .text-input-wrap { position: relative; } .text-input { width: 100%; background: var(--dark2); border: 1px solid var(--border); color: var(--text); padding: 1.1rem 1.25rem; font-family: var(--font-b); font-size: 1rem; outline: none; transition: border-color .2s; resize: vertical; min-height: 130px; } .text-input:focus { border-color: var(--gold); } .text-input::placeholder { color: var(--muted); opacity: .6; } .char-count { font-size: .7rem; color: var(--muted); text-align: right; margin-top: .4rem; } /* Navigation boutons */ .step-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem; flex-wrap: wrap; gap: 1rem; } .btn-next { background: var(--gold); color: var(--black); border: none; padding: .9rem 2.25rem; font-family: var(--font-b); font-weight: 500; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .2s; position: relative; overflow: hidden; } .btn-next::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255,255,255,.15); transition: left .3s; } .btn-next:hover::before { left: 100%; } .btn-next:hover { background: var(--gold-light); } .btn-next:disabled { opacity: .35; cursor: not-allowed; } .btn-prev { background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,.1); padding: .9rem 1.5rem; font-family: var(--font-b); font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all .2s; } .btn-prev:hover { color: var(--text); border-color: rgba(255,255,255,.25); } /* ── RÉSULTAT IA ── */ .result-wrap { display: none; animation: fadeUp .5s ease; } .result-wrap.active { display: block; } .result-header { text-align: center; margin-bottom: 3rem; } .result-header .dt-badge { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid rgba(201,168,76,.4); color: var(--gold); font-size: .65rem; letter-spacing: 3px; text-transform: uppercase; padding: .4rem 1rem; margin-bottom: 1.5rem; background: rgba(201,168,76,.05); } .result-header h2 { font-family: var(--font-t); font-size: clamp(1.6rem,3.5vw,2.4rem); color: #fff; margin-bottom: .75rem; } .result-header p { color: var(--muted); font-size: .92rem; line-height: 1.7; } /* Carte profil */ .profile-card { background: var(--dark2); border: 1px solid var(--border); padding: 2rem 2.25rem; margin-bottom: 1.5px; position: relative; overflow: hidden; } .profile-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .profile-card h3 { font-family: var(--font-t); font-size: 1rem; color: var(--gold); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; } .profile-card h3::before { content: attr(data-icon); font-style: normal; } /* Analyse IA streaming */ .ai-analysis { background: var(--dark2); border: 1px solid var(--border); padding: 2.25rem; margin-bottom: 2rem; position: relative; } .ai-analysis::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .ai-label { font-size: .65rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; } .ai-label::before { content: ''; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; animation: blink 1.8s ease-in-out infinite; } .ai-text { color: var(--text); line-height: 1.85; font-size: .93rem; min-height: 120px; } .ai-cursor { display: inline-block; width: 2px; height: 1em; background: var(--gold); vertical-align: text-bottom; animation: cursor .7s ease-in-out infinite; margin-left: 2px; } @keyframes cursor { 0%,100%{opacity:1} 50%{opacity:0} } /* Recommandations */ .reco-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; background: var(--border); margin-bottom: 2rem; } .reco-card { background: var(--dark2); padding: 1.75rem 1.5rem; transition: background .2s; } .reco-card:hover { background: var(--dark3); } .reco-priority { font-size: .6rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; } .reco-title { font-family: var(--font-t); font-size: 1rem; color: #fff; margin-bottom: .5rem; font-weight: 400; } .reco-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; } .reco-badge { display: inline-block; font-size: .6rem; padding: .2rem .7rem; border: 1px solid var(--border); color: var(--gold); letter-spacing: 1px; text-transform: uppercase; margin-top: .75rem; } /* CTA final */ .result-cta { background: var(--dark2); border: 1px solid var(--border); padding: 2.5rem; text-align: center; position: relative; overflow: hidden; } .result-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .result-cta h3 { font-family: var(--font-t); font-size: 1.5rem; color: #fff; margin-bottom: .75rem; } .result-cta p { color: var(--muted); font-size: .9rem; margin-bottom: 2rem; line-height: 1.7; max-width: 500px; margin-left: auto; margin-right: auto; } .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-primary { display: inline-block; background: var(--gold); color: var(--black); padding: .9rem 2rem; font-weight: 500; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background .2s; border: none; cursor: pointer; } .btn-primary:hover { background: var(--gold-light); } .btn-ghost { display: inline-block; background: transparent; color: var(--gold); border: 1px solid rgba(201,168,76,.4); padding: .9rem 2rem; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: all .2s; cursor: pointer; } .btn-ghost:hover { background: rgba(201,168,76,.08); border-color: var(--gold); } /* Loader */ .loader-wrap { text-align: center; padding: 4rem 2rem; display: none; } .loader-wrap.active { display: block; } .loader-radar { width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(201,168,76,.2); margin: 0 auto 1.5rem; position: relative; animation: radarSpin 2s linear infinite; } .loader-radar::before { content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); transform-origin: left center; } .loader-radar::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; background: var(--gold); border-radius: 50%; } @keyframes radarSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } .loader-text { font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} } .loader-steps { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; max-width: 280px; margin-left: auto; margin-right: auto; } .loader-step { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: .75rem; opacity: 0; transition: opacity .4s; } .loader-step.show { opacity: 1; } .loader-step::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } /* Divider */ .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .2; margin: 2rem 0; } @media(max-width:640px) { .options-grid.col2, .options-grid.col3 { grid-template-columns: 1fr; } .reco-grid { grid-template-columns: 1fr; } .step-nav { flex-direction: column-reverse; } .btn-next, .btn-prev { width: 100%; text-align: center; } }
Diagnostic personnalisé

Identifiez votre besoin digital
en 5 minutes

Notre questionnaire intelligent analyse votre profil, votre domaine et vos objectifs pour vous proposer une feuille de route sur-mesure par nos experts Business Analysts.

Profil Domaine Situation Besoins Priorités Résultat
Étape 1 sur 5

Qui êtes-vous ?

Aidez-nous à comprendre votre contexte pour personnaliser votre diagnostic.

🎯
Dirigeant / Fondateur
TPE, PME, startup — vous portez la vision
📊
Manager / Responsable
Chef de projet, responsable métier ou IT
💼
Indépendant / Freelance
Auto-entrepreneur, consultant, artisan
🤝
Association / Collectivité
Secteur public, associatif, culturel
Étape 2 sur 5

Votre secteur d'activité

Votre domaine métier nous permet d'adapter nos recommandations à vos réalités terrain.

🛍️
Commerce / Retail
🏥
Santé / Bien-être
🏗️
Immobilier / BTP
💳
Finance / Assurance
💻
Tech / Numérique
🎓
Formation / RH
🍽️
Restauration / Hôtellerie
⚙️
Industrie / Logistique
Autre secteur
Étape 3 sur 5

Votre situation actuelle

Où en êtes-vous dans votre transformation digitale ?

🚀
Je démarre de zéro
Pas encore de présence digitale ni d'outils — tout reste à construire
🔧
J'ai déjà des outils à améliorer
Site web, outils internes ou processus qui ne donnent pas satisfaction
📈
Je suis en croissance et dois structurer
Mon activité se développe mais mes outils et process ne suivent plus
🔄
Je vis une transformation organisationnelle
Fusion, pivot, changement de modèle — j'ai besoin d'accompagnement au changement
Étape 4 sur 5

Quels sont vos besoins ?

Sélectionnez tout ce qui correspond à votre situation.

Sélection multiple possible
🌐
Créer / refaire mon site web
Vitrine, e-commerce ou application
🎨
Logo & identité visuelle
Charte graphique, kit de marque
🔍
Analyser et formaliser mes besoins
Cahier des charges, expression du besoin
⚙️
Optimiser mes processus métier
Automatisation, flux, gain de temps
🎓
Former mes équipes
Outils digitaux, méthodes agiles
🔄
Accompagnement au changement
Conduite du projet, adhésion des équipes
Étape 5 sur 5

En quelques mots, quel est votre défi principal ?

Cette dernière étape nous permet de personnaliser votre diagnostic. Soyez direct et concis — il n'y a pas de mauvaise réponse.

0 / 600 caractères

Votre budget estimé pour ce projet :

<div class="opt" data-value="
Moins de 2 000 €
2 000 – 5 000 €
5 000 – 15 000 €
15k">
+ de 15 000 €
Je ne sais pas encore
Analyse en cours…
Analyse de votre profil
Identification des enjeux clés
Croisement avec notre expertise BA
Génération des recommandations
Finalisation du diagnostic
✦ Diagnostic personnalisé

Votre feuille de route digitale

Analyse générée sur la base de vos réponses par notre moteur d'expertise Business Analyst.

Votre profil détecté

Analyse expert Digital Tower

Prêt à concrétiser votre projet ?

Nos Business Analysts ont analysé votre profil. Passons à l'étape suivante avec un premier échange gratuit de 30 minutes pour affiner votre feuille de route.

Prendre rendez-vous →
/* ═══════════════════════════════════════════════════════ STATE ═══════════════════════════════════════════════════════ */ var answers = { profil:'', secteur:'', situation:'', besoins:[], budget:'', contexte:'' }; var currentStep = 0; var totalSteps = 5; /* ═══════════════════════════════════════════════════════ OPTIONS : SÉLECTION ═══════════════════════════════════════════════════════ */ document.querySelectorAll('.options-grid').forEach(function(grid) { var type = grid.dataset.type; var field = grid.dataset.field; grid.querySelectorAll('.opt').forEach(function(opt) { opt.addEventListener('click', function() { if(type === 'single') { grid.querySelectorAll('.opt').forEach(function(o){ o.classList.remove('selected'); }); opt.classList.add('selected'); answers[field] = opt.dataset.value; } else { opt.classList.toggle('selected'); var vals = []; grid.querySelectorAll('.opt.selected').forEach(function(o){ vals.push(o.dataset.value); }); answers[field] = vals; } checkCurrentStep(); }); }); }); /* ═══════════════════════════════════════════════════════ VALIDATION PAR ÉTAPE ═══════════════════════════════════════════════════════ */ function checkCurrentStep() { var valid = false; switch(currentStep) { case 0: valid = !!answers.profil; break; case 1: valid = !!answers.secteur; break; case 2: valid = !!answers.situation; break; case 3: valid = answers.besoins.length > 0; break; case 4: valid = answers.budget !== ''; break; } var btn = document.getElementById('next-' + currentStep); if(btn) btn.disabled = !valid; } function checkStep4() { answers.contexte = document.getElementById('contexte-libre').value; checkCurrentStep(); } function updateCharCount(el) { document.getElementById('charCount').textContent = el.value.length; } /* ═══════════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════════ */ function nextStep(from) { document.getElementById('step-' + from).classList.remove('active'); currentStep = from + 1; document.getElementById('step-' + currentStep).classList.add('active'); updateProgress(); checkCurrentStep(); window.scrollTo({ top: 0, behavior: 'smooth' }); } function prevStep(from) { document.getElementById('step-' + from).classList.remove('active'); currentStep = from - 1; document.getElementById('step-' + currentStep).classList.add('active'); updateProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); } function updateProgress() { var pct = (currentStep / totalSteps) * 100; document.getElementById('progressFill').style.width = pct + '%'; for(var i = 0; i <= totalSteps; i++) { var el = document.getElementById('pl' + i); if(el) el.classList.toggle('active', i === currentStep); } } /* ═══════════════════════════════════════════════════════ LABELS LISIBLES ═══════════════════════════════════════════════════════ */ var labels = { profil: { dirigeant:'Dirigeant / Fondateur', manager:'Manager / Responsable', independant:'Indépendant / Freelance', association:'Association / Collectivité' }, secteur: { commerce:'Commerce / Retail', sante:'Santé / Bien-être', immobilier:'Immobilier / BTP', finance:'Finance / Assurance', tech:'Tech / Numérique', formation:'Formation / RH', restauration:'Restauration / Hôtellerie', industrie:'Industrie / Logistique', autre:'Autre secteur' }, situation: { depart:'Démarre de zéro', existant_ameliorer:'Outils à améliorer', croissance:'En croissance à structurer', transformation:'Transformation organisationnelle' }, besoins: { site_web:'Site web', identite:'Identité visuelle', analyse:'Analyse des besoins', processus:'Optimisation processus', formation_equipe:'Formation équipe', changement:'Accompagnement au changement' }, budget: { '<2k':'15k':'> 15 000 €', 'nsp':'Budget non défini' } }; function getLabel(cat, val) { return labels[cat] && labels[cat][val] ? labels[cat][val] : val; } /* ═══════════════════════════════════════════════════════ GÉNÉRATION DU DIAGNOSTIC (Claude API) ═══════════════════════════════════════════════════════ */ async function generateDiagnostic() { answers.contexte = document.getElementById('contexte-libre').value; // Masquer étape 4, afficher loader document.getElementById('step-4').classList.remove('active'); var loader = document.getElementById('loader'); loader.classList.add('active'); updateProgress(); // Animer les étapes du loader var lsItems = ['ls0','ls1','ls2','ls3','ls4']; lsItems.forEach(function(id, i) { setTimeout(function(){ document.getElementById(id).classList.add('show'); }, i * 700); }); // Remplir le récap profil var summary = document.getElementById('profileSummary'); summary.innerHTML = ''; var items = [ { label: getLabel('profil', answers.profil), cat: 'Profil' }, { label: getLabel('secteur', answers.secteur), cat: 'Secteur' }, { label: getLabel('situation', answers.situation), cat: 'Situation' }, { label: getLabel('budget', answers.budget), cat: 'Budget' } ]; (Array.isArray(answers.besoins) ? answers.besoins : []).forEach(function(b) { items.push({ label: getLabel('besoins', b), cat: 'Besoin' }); }); items.forEach(function(item) { var span = document.createElement('span'); span.style.cssText = 'display:inline-flex;align-items:center;gap:.4rem;background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.2);padding:.3rem .9rem;font-size:.72rem;color:var(--gold-pale)'; span.textContent = item.cat + ' · ' + item.label; summary.appendChild(span); }); // Construire le prompt var besoinsStr = Array.isArray(answers.besoins) ? answers.besoins.map(function(b){ return getLabel('besoins', b); }).join(', ') : ''; var contexteStr = answers.contexte ? '\nContexte libre du client : "' + answers.contexte + '"' : ''; var prompt = 'Tu es un expert Business Analyst chez Digital Tower, cabinet de conseil en transformation digitale. ' + 'Un prospect vient de remplir notre questionnaire de diagnostic. Rédige une analyse personnalisée, professionnelle et bienveillante en français.\n\n' + 'PROFIL DU PROSPECT :\n' + '- Type : ' + getLabel('profil', answers.profil) + '\n' + '- Secteur : ' + getLabel('secteur', answers.secteur) + '\n' + '- Situation : ' + getLabel('situation', answers.situation) + '\n' + '- Besoins identifiés : ' + besoinsStr + '\n' + '- Budget estimé : ' + getLabel('budget', answers.budget) + '\n' + contexteStr + '\n\n' + 'CONSIGNES DE RÉDACTION :\n' + '1. Commence par une phrase d\'accroche personnalisée qui montre que tu as compris leur situation spécifique (2-3 phrases max)\n' + '2. Identifie les 2-3 enjeux clés de leur profil (utilise des termes métier Business Analyst)\n' + '3. Explique en quoi leur situation nécessite une approche structurée\n' + '4. Conclude par un message motivant sur leurs opportunités\n\n' + 'Style : professionnel mais accessible, direct, orienté solutions. Pas de bullet points. Environ 200-250 mots. ' + 'Ne mentionne pas que tu es une IA. Parle en tant qu\'expert Business Analyst de Digital Tower.\n\n' + 'Après ta prose d\'analyse, ajoute une section JSON (uniquement du JSON brut, pas de markdown) structurée ainsi :\n' + '{"recos":[{"priorite":"Priorité 1","titre":"...","description":"...","service":"..."},{"priorite":"Priorité 2","titre":"...","description":"...","service":"..."},{"priorite":"Priorité 3","titre":"...","description":"...","service":"..."},{"priorite":"À considérer","titre":"...","description":"...","service":"..."}]}\n' + 'Les services doivent être parmi : Audit & Analyse, Site Web, Identité Visuelle, Formation, Accompagnement au changement.'; try { var res = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: 1000, stream: true, messages: [{ role: 'user', content: prompt }] }) }); // Afficher le résultat loader.classList.remove('active'); var result = document.getElementById('result'); result.classList.add('active'); updateProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); // Streaming var reader = res.body.getReader(); var decoder = new TextDecoder(); var aiEl = document.getElementById('aiText'); aiEl.innerHTML = ''; var fullText = ''; while(true) { var _ref = await reader.read(), done = _ref.done, value = _ref.value; if(done) break; var chunk = decoder.decode(value); var lines = chunk.split('\n'); for(var i = 0; i -1 ? fullText.slice(0, jsonIdx) : fullText; aiEl.innerHTML = prose.replace(/\n/g, '
') + ''; } } catch(e) {} } } // Parser le JSON des recommandations var jsonIdx2 = fullText.indexOf('{"recos"'); if(jsonIdx2 > -1) { try { var jsonStr = fullText.slice(jsonIdx2); var endIdx = jsonStr.lastIndexOf('}') + 1; var recoData = JSON.parse(jsonStr.slice(0, endIdx)); buildRecos(recoData.recos); } catch(e) { buildRecos([]); } } // Retirer le curseur final aiEl.innerHTML = aiEl.innerHTML.replace('', ''); } catch(err) { // Fallback si API indisponible loader.classList.remove('active'); var result2 = document.getElementById('result'); result2.classList.add('active'); var fallback = buildFallbackAnalysis(); var aiEl2 = document.getElementById('aiText'); aiEl2.innerHTML = fallback.prose; buildRecos(fallback.recos); window.scrollTo({ top: 0, behavior: 'smooth' }); } } /* ═══════════════════════════════════════════════════════ RECOMMANDATIONS ═══════════════════════════════════════════════════════ */ function buildRecos(recos) { var grid = document.getElementById('recoGrid'); grid.innerHTML = ''; if(!recos || recos.length === 0) return; recos.forEach(function(r) { var card = document.createElement('div'); card.className = 'reco-card'; card.innerHTML = '
' + (r.priorite||'') + '
' + '
' + (r.titre||'') + '
' + '
' + (r.description||'') + '
' + '
' + (r.service||'') + '
'; grid.appendChild(card); }); } /* ═══════════════════════════════════════════════════════ FALLBACK (sans API) ═══════════════════════════════════════════════════════ */ function buildFallbackAnalysis() { var profLabel = getLabel('profil', answers.profil); var secLabel = getLabel('secteur', answers.secteur); var sitLabel = getLabel('situation', answers.situation); var prose = 'Votre profil de ' + profLabel + ' dans le secteur ' + secLabel + ' présente des caractéristiques que nous rencontrons fréquemment chez Digital Tower.

' + 'Votre situation — ' + sitLabel.toLowerCase() + ' — implique une approche structurée qui commence toujours par une expression claire des besoins avant toute mise en œuvre technique. C\'est précisément là que notre expertise Business Analyst fait la différence.

' + 'Les enjeux identifiés dans votre questionnaire montrent qu\'une démarche progressive et priorisée sera votre meilleur atout pour réussir cette transformation. Nos recommandations ci-dessous ont été construites pour correspondre à votre réalité terrain.'; var recos = [ { priorite:'Priorité 1', titre:'Audit & cadrage des besoins', description:'Avant toute action, formalisons ensemble vos besoins réels via un atelier de cadrage structuré.', service:'Audit & Analyse' }, { priorite:'Priorité 2', titre:'Définition de la feuille de route', description:'Priorisation des chantiers et planification selon votre budget et vos ressources disponibles.', service:'Accompagnement au changement' }, { priorite:'Priorité 3', titre:'Mise en œuvre progressive', description:'Déploiement itératif des solutions retenues avec des points de validation réguliers.', service:'Site Web' }, { priorite:'À considérer', titre:'Montée en compétences des équipes', description:'Formation et accompagnement pour garantir l\'adoption durable des nouveaux outils.', service:'Formation' } ]; return { prose: prose, recos: recos }; } /* ═══════════════════════════════════════════════════════ RESET ═══════════════════════════════════════════════════════ */ function resetDiag() { answers = { profil:'', secteur:'', situation:'', besoins:[], budget:'', contexte:'' }; currentStep = 0; document.querySelectorAll('.opt').forEach(function(o){ o.classList.remove('selected'); }); document.getElementById('contexte-libre').value = ''; document.getElementById('charCount').textContent = '0'; document.getElementById('result').classList.remove('active'); document.getElementById('step-0').classList.add('active'); document.querySelectorAll('.btn-next').forEach(function(b){ b.disabled = true; }); updateProgress(); window.scrollTo({ top: 0, behavior: 'smooth' }); }