:root { --black: #0a0a0f; --dark: #111118; --card: #16161f; --card2: #1c1c27; --border: rgba(255,255,255,0.08); --bh: rgba(255,255,255,0.18); --text: #f0f0f8; --muted: rgba(240,240,248,0.45); --muted2: rgba(240,240,248,0.22); --pink: #f040a0; --purple: #8b5cf6; --teal: #00e5c4; --r: 12px; --rl: 18px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Space Grotesk', sans-serif; background: var(--black); color: var(--text); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── WRAPPER ── */ .wrap { max-width: 680px; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; } /* ── PROGRESS BAR ── */ .progress-bar { display: flex; align-items: center; gap: 0; margin-bottom: 2.5rem; } .prog-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; cursor: default; } .prog-step:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; transition: background .4s; } .prog-step.done:not(:last-child)::after { background: var(--teal); } .prog-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--muted2); position: relative; z-index: 1; transition: all .3s; font-family: 'Outfit', sans-serif; } .prog-step.active .prog-dot { border-color: var(--teal); background: rgba(0,229,196,0.12); color: var(--teal); box-shadow: 0 0 12px rgba(0,229,196,0.3); } .prog-step.done .prog-dot { border-color: var(--teal); background: var(--teal); color: var(--black); font-size: .8rem; } .prog-label { font-size: .65rem; font-weight: 600; color: var(--muted2); margin-top: .4rem; letter-spacing: .04em; text-align: center; white-space: nowrap; } .prog-step.active .prog-label { color: var(--teal); } .prog-step.done .prog-label { color: var(--muted); } /* ── STEP PANELS ── */ .step-panel { display: none; } .step-panel.active { display: block; animation: fadeIn .3s ease; } @keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } /* ── CARD ── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.75rem; margin-bottom: 1.25rem; } .card:last-child { margin-bottom: 0; } .step-chip { font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); margin-bottom: .45rem; } .card h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: .25rem; } .card .sub { font-size: .8rem; color: var(--muted); margin-bottom: 1.25rem; } /* ── PILLS ── */ .pill-group { display: flex; flex-wrap: wrap; gap: .5rem; } .pill-group input[type="radio"] { display: none; } .pill-group label { padding: .5rem 1.1rem; border-radius: 100px; border: 1px solid var(--border); font-size: .85rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: all .2s; user-select: none; } .pill-group label:hover { border-color: var(--teal); color: var(--teal); } .pill-group input:checked + label { background: rgba(0,229,196,0.12); border-color: var(--teal); color: var(--teal); font-weight: 600; } /* ── CHECKBOXES ── */ .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } @media (max-width: 480px) { .check-grid { grid-template-columns: 1fr; } } .check-item input[type="checkbox"] { display: none; } .check-item label { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .85rem; border-radius: var(--r); border: 1px solid var(--border); cursor: pointer; background: var(--card2); transition: all .2s; font-size: .82rem; color: var(--muted); font-weight: 500; line-height: 1.35; } .check-item label:hover { border-color: var(--bh); color: var(--text); } .check-item input:checked + label { background: rgba(0,229,196,0.07); border-color: rgba(0,229,196,0.35); color: var(--teal); } .chk-box { width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid currentColor; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 10px; } .check-item input:checked + label .chk-box { background: var(--teal); border-color: var(--teal); color: var(--black); } .check-item input:checked + label .chk-box::after { content: '✓'; font-weight: 700; } /* ── PAGE LIST ── */ /* ── TOGGLES ── */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; border-bottom: 1px solid var(--border); gap: 1rem; } .toggle-row:last-child { border-bottom: none; } .tgl-name { font-size: .88rem; font-weight: 600; margin-bottom: .1rem; } .tgl-desc { font-size: .75rem; color: var(--muted); } .tgl-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .tgl-switch input { display: none; } .tgl-slider { position: absolute; inset: 0; background: var(--card2); border: 1px solid var(--border); border-radius: 100px; cursor: pointer; transition: .25s; } .tgl-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--muted); border-radius: 50%; transition: .25s; } .tgl-switch input:checked + .tgl-slider { background: rgba(0,229,196,0.15); border-color: var(--teal); } .tgl-switch input:checked + .tgl-slider::before { transform: translateX(18px); background: var(--teal); } .tgl-switch input:disabled + .tgl-slider { opacity: .5; cursor: default; } /* ── PAGES TOTAL BADGE ── */ .pages-total { margin-top: 1rem; padding: .6rem 1rem; border-radius: 8px; background: rgba(0,229,196,0.07); border: 1px solid rgba(0,229,196,0.2); font-size: .8rem; color: var(--teal); font-weight: 500; } /* ── NAV BUTTONS ── */ .nav-row { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; } .btn-back { padding: .75rem 1.5rem; border-radius: 100px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: 'Space Grotesk', sans-serif; font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s; } .btn-back:hover { border-color: var(--bh); color: var(--text); } .btn-next { padding: .75rem 1.75rem; border-radius: 100px; background: linear-gradient(135deg, var(--teal) 0%, var(--purple) 100%); color: var(--black); border: none; font-family: 'Outfit', sans-serif; font-size: .95rem; font-weight: 700; cursor: pointer; transition: all .2s; letter-spacing: .01em; } .btn-next:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,229,196,0.3); } /* ── STEP 2 : FORMULAIRE ── */ .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 480px) { .field-grid { grid-template-columns: 1fr; } } .field-label { display: block; font-size: .75rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; } .field-input { width: 100%; background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: .88rem; outline: none; transition: border-color .2s; } .field-input::placeholder { color: var(--muted2); } .field-input:focus { border-color: var(--teal); } /* ── STEP 3 : RÉSULTAT ── */ .result-hero { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 2rem; text-align: center; margin-bottom: 1.25rem; position: relative; overflow: hidden; } .result-hero::before { content: ''; position: absolute; width: 300px; height: 300px; top: -100px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 65%); pointer-events: none; } .result-badge { display: inline-block; padding: .25rem .9rem; border-radius: 100px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; margin-bottom: .75rem; } .b-std { background: rgba(0,229,196,0.12); color: var(--teal); border: 1px solid rgba(0,229,196,0.3); } .b-adv { background: rgba(139,92,246,0.14); color: var(--purple); border: 1px solid rgba(139,92,246,0.3); } .b-cpx { background: rgba(240,64,160,0.12); color: var(--pink); border: 1px solid rgba(240,64,160,0.3); } .result-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); margin-bottom: .5rem; } .result-price { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.03em; line-height: 1.1; color: var(--text); margin-bottom: .3rem; } .result-price .sep { color: var(--teal); } .result-ttc { font-size: .75rem; color: var(--muted2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; } .result-sub { font-size: .82rem; color: var(--muted); } /* breakdown */ .breakdown-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.5rem; margin-bottom: 1.25rem; } .bd-title { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); margin-bottom: 1rem; } .bdl { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: .83rem; } .bdl:last-child { border-bottom: none; } .bdl-name { color: var(--muted); } .bdl-val { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .83rem; color: var(--text); } .bdl-val.free { color: var(--muted2); font-weight: 400; font-family: inherit; } /* timeline */ .timeline-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.5rem; margin-bottom: 1.25rem; } .tl-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); margin-bottom: 1rem; } .tl-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: .83rem; } .tl-row:last-child { border-bottom: none; } .tl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .tl-dot.teal { background: var(--teal); box-shadow: 0 0 6px rgba(0,229,196,0.5); } .tl-dot.purple { background: var(--purple); box-shadow: 0 0 6px rgba(139,92,246,0.5); } .tl-dot.pink { background: var(--pink); box-shadow: 0 0 6px rgba(240,64,160,0.5); } .tl-name { flex: 1; color: var(--muted); } .tl-name strong { color: var(--text); } .tl-dur { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .8rem; color: var(--text); } /* note + cta */ .r-note { font-size: .75rem; color: var(--muted2); line-height: 1.55; padding: 1rem; border-radius: var(--r); background: var(--card); border: 1px solid var(--border); margin-bottom: 1.25rem; } .cta-btn { display: block; width: 100%; background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%); color: white; border: none; border-radius: 100px; padding: 1rem 1.5rem; font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; letter-spacing: .01em; transition: all .2s; } .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,92,246,0.35); } .cta-sec { display: block; width: 100%; margin-top: .75rem; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 100px; padding: .75rem; font-family: 'Space Grotesk', sans-serif; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .2s; text-align: center; } .cta-sec:hover { border-color: var(--bh); color: var(--text); } /* success */ .success-box { text-align: center; padding: 2.5rem 1.5rem; background: var(--card); border: 1px solid rgba(0,229,196,0.2); border-radius: var(--rl); } .success-icon { font-size: 2.5rem; margin-bottom: 1rem; } .success-box h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; } .success-box p { color: var(--muted); font-size: .9rem; } // ── PRICING ── const P = { pageS:[150,250], pageM:[450,650], pageL:[900,1300], designNone:[500,800], designPartial:[200,400], designFull:[0,0], infra:[130,160], setup:[250,380], ecom:[600,1200], seo:[400,700], multi:[350,600], blog:[150,300], forms:[200,400], anim:[300,500], maint:[300,480], mig:[150,300], form2:[150,250], }; function f(n) { return Math.round(n).toLocaleString('fr-FR')+'\u202f€'; } function fr(a,b){ return f(a)+' – '+f(b); } // ── PROGRESS CHIP UPDATE ── function updateProgress() { const boxes = document.querySelectorAll('input[data-type]:checked'); const tot = boxes.length; const pt = document.getElementById('pages-total'); let nS=0,nM=0,nL=0; boxes.forEach(cb=>{ if(cb.dataset.type==='S')nS++; else if(cb.dataset.type==='M')nM++; else nL++; }); const parts=[]; if(nS) parts.push(`${nS} simple${nS>1?'s':''}`); if(nM) parts.push(`${nM} medium`); if(nL) parts.push(`${nL} complexe${nL>1?'s':''}`); pt.textContent = parts.length ? `→ ${parts.join(' + ')} = ${tot} page${tot>1?'s':''} sélectionnée${tot>1?'s':''}` : 'Cochez les pages souhaitées ci-dessus'; } // ── COMPUTE ESTIMATE ── function compute() { const type = document.querySelector('[name="siteType"]:checked').value; const design = document.querySelector('[name="design"]:checked').value; const opts = ['seo','multi','blog','forms','anim','maint','mig','form2'] .filter(id => document.getElementById(id).checked); let mn=0, mx=0; const lines=[]; // Pages const boxes = document.querySelectorAll('input[data-type]:checked'); let nS=0,nM=0,nL=0; boxes.forEach(cb=>{ if(cb.dataset.type==='S')nS++; else if(cb.dataset.type==='M')nM++; else nL++; }); const tot = nS+nM+nL; const pMin = nS*P.pageS[0]+nM*P.pageM[0]+nL*P.pageL[0]; const pMax = nS*P.pageS[1]+nM*P.pageM[1]+nL*P.pageL[1]; mn+=pMin; mx+=pMax; if(tot>0) lines.push({n:`Développement (${tot} page${tot>1?'s':''})`,a:pMin,b:pMax}); // Design const dk = design==='none'?'designNone':design==='partial'?'designPartial':'designFull'; const dl = design==='none'?'Création charte graphique':design==='partial'?'Intégration (logo fourni)':'Intégration (charte fournie)'; mn+=P[dk][0]; mx+=P[dk][1]; lines.push({n:dl,a:P[dk][0],b:P[dk][1]}); // Setup mn+=P.setup[0]; mx+=P.setup[1]; lines.push({n:'Coordination & setup',a:P.setup[0],b:P.setup[1]}); // Infra mn+=P.infra[0]; mx+=P.infra[1]; lines.push({n:'Hébergement + domaine (1 an)',a:P.infra[0],b:P.infra[1]}); // Ecom if(type==='ecommerce'){ mn+=P.ecom[0]; mx+=P.ecom[1]; lines.push({n:'Module boutique e-commerce',a:P.ecom[0],b:P.ecom[1]}); } // Options const labels={seo:'Référencement SEO',multi:'Site multilingue',blog:'Module blog', forms:'Formulaires avancés',anim:'Animations & interactions',maint:'Maintenance annuelle', mig:'Migration site existant',form2:'Formation administration'}; opts.forEach(k=>{ mn+=P[k][0]; mx+=P[k][1]; lines.push({n:labels[k],a:P[k][0],b:P[k][1]}); }); return { mn, mx, lines, tot, nS, nM, nL, type, design, opts }; } // ── NAVIGATION ── function goTo(n) { document.querySelectorAll('.step-panel').forEach((p,i)=>{ p.classList.toggle('active', i===n-1); }); document.querySelectorAll('.prog-step').forEach((s,i)=>{ s.classList.remove('active','done'); if(i<n-1) s.classList.add('done'); if(i===n-1) s.classList.add('active'); if(i=6||e.mn>3000){ cls='b-adv'; label='Projet avancé'; } if(e.tot>=9||e.mn>5000){ cls='b-cpx'; label='Projet complexe'; } const badge = document.getElementById('res-badge'); badge.className='result-badge '+cls; badge.textContent=label; // Title & name const typeLabel={vitrine:'Site vitrine',ecommerce:'E-commerce',portfolio:'Portfolio',institutionnel:'Site institutionnel'}[e.type]; document.getElementById('res-title').textContent=`${typeLabel} · ${e.tot} page${e.tot>1?'s':''}`; document.getElementById('res-name').textContent = nom ? `Bonjour ${nom.split(' ')[0]} 👋` : ''; // Price document.getElementById('res-price').innerHTML=`${f(e.mn)} – ${f(e.mx)}`; // Breakdown document.getElementById('res-breakdown').innerHTML = e.lines.map(l=>{ const zero=l.a===0&&l.b===0; const val=zero?'Inclus':(l.a===l.b?f(l.a):fr(l.a,l.b)); return ``; }).join(''); // Timeline const dW=e.design==='none'?'2 – 3 sem.':e.design==='partial'?'1 – 2 sem.':'1 sem.'; const deW=e.tot<=4?'2 – 3 sem.':e.tot<=7?'3 – 4 sem.':'4 – 6 sem.'; const tW=e.tot<=4?'5 – 7 semaines':e.tot<=7?'7 – 10 semaines':'10 – 14 semaines'; document.getElementById('res-timeline').innerHTML=` `; } // ── FORMSPREE ── async function sendToFormspree(nom, email) { const e = compute(); const pages = [...document.querySelectorAll('input[data-type]:checked')] .map(cb=>cb.closest('.check-item').querySelector('span:last-child').textContent.trim()); const optLabels={seo:'SEO',multi:'Multilingue',blog:'Blog',forms:'Formulaires',anim:'Animations',maint:'Maintenance',mig:'Migration',form2:'Formation'}; const opts = Object.keys(optLabels).filter(k=>document.getElementById(k)?.checked).map(k=>optLabels[k]); const typeLabel={vitrine:'Site vitrine',ecommerce:'E-commerce',portfolio:'Portfolio',institutionnel:'Site institutionnel'}[e.type]; const fd = new FormData(); fd.append('Nom', nom); fd.append('Email', email); fd.append('Entreprise', document.getElementById('f-entreprise').value); fd.append('Téléphone', document.getElementById('f-tel').value); fd.append('Message', document.getElementById('f-message').value); fd.append('Type de site', typeLabel); fd.append('Estimation TTC', `${f(e.mn)} – ${f(e.mx)}`); fd.append('Pages', pages.join(', ')||'Aucune'); fd.append('Options', opts.join(', ')||'Aucune'); fd.append('Design', e.design); try { await fetch('https://formspree.io/f/mykverak', { method:'POST', body:fd, headers:{Accept:'application/json'} }); } catch(err) { console.warn('Formspree error', err); } } // ── DOWNLOAD RECAP (simple text) ── function downloadRecap() { const e = compute(); const nom = document.getElementById('f-nom').value.trim() || 'Client'; const typeLabel={vitrine:'Site vitrine',ecommerce:'E-commerce',portfolio:'Portfolio',institutionnel:'Site institutionnel'}[e.type]; const pages=[...document.querySelectorAll('input[data-type]:checked')].map(cb=>cb.closest('.check-item').querySelector('span:last-child').textContent.trim()); const optLabels={seo:'SEO',multi:'Multilingue',blog:'Blog',forms:'Formulaires avancés',anim:'Animations',maint:'Maintenance',mig:'Migration',form2:'Formation'}; const opts=Object.keys(optLabels).filter(k=>document.getElementById(k)?.checked).map(k=>optLabels[k]); const txt=`ESTIMATION PRÉ-DEVIS — AGENCE LAIKA ===================================== Date : ${new Date().toLocaleDateString('fr-FR')} Client : ${nom} TYPE DE PROJET ${typeLabel} PAGES SÉLECTIONNÉES (${e.tot}) ${pages.join('\n') || 'Aucune'} OPTIONS ${opts.join(', ') || 'Aucune'} ESTIMATION TTC ${f(e.mn)} – ${f(e.mx)} DÉTAIL ${e.lines.map(l=>`- ${l.n} : ${l.a===0&&l.b===0?'Inclus':fr(l.a,l.b)}`).join('\n')} ------------------------------------- Estimation indicative. Devis précis établi lors d'un premier échange. contact@agence-laika.fr `; const a=document.createElement('a'); a.href='data:text/plain;charset=utf-8,'+encodeURIComponent(txt); a.download=`estimation-laika-${Date.now()}.txt`; a.click(); } // init document.querySelectorAll('[name="siteType"],[name="design"]').forEach(el=>el.addEventListener('change',updateProgress));