Créateur d'Expériences

{"time":1754647521599,"blocks":[{"id":"q0XAf7pDmF","type":"RawTool","data":{"html":"\n<style>\n  :root{\n    --primary:#940422;\n    --text:#404968;\n    --muted:#e9e9ee;\n    --muted-2:#f6f6f9;\n    --accent:#f7e7ec;\n    --green:#0f7c6c;\n  }\n  *{box-sizing:border-box}\n  body{margin:0;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}\n  .container{max-width:960px;margin:0 auto;padding:24px}\n  h1,h2{color:var(--primary);text-align:center;margin:0 0 16px;font-weight:700}\n  .progress{display:flex;gap:8px;margin:8px 0 24px}\n  .progress div{flex:1;padding:10px;text-align:center;border-bottom:3px solid var(--muted);font-weight:600;font-size:14px}\n  .progress .active{border-color:var(--primary);color:var(--primary)}\n  .step{display:none;animation:fade .25s ease-in-out}\n  .step.active{display:block}\n  @keyframes fade{from{opacity:0}to{opacity:1}}\n\n  \/* Cartes (boutons) *\/\n  .cards{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:20px 0}\n  .card{min-width:220px;flex:1 1 220px;background:#fff;border:2px solid var(--muted);border-radius:12px;padding:18px 14px;text-align:center;cursor:pointer;transition:.2s;user-select:none;pointer-events:auto;position:relative}\n  .card:hover{border-color:var(--primary)}\n  .card.selected{border-color:var(--primary);background:var(--accent)}\n  .card .icon{display:block;font-size:28px;margin-bottom:8px}\n  .card:focus-visible{outline:3px solid var(--primary);outline-offset:2px}\n  button.card{border:2px solid var(--muted);background:#fff;font:inherit;color:inherit}\n  button.card::-moz-focus-inner{border:0}\n\n  label{font-weight:700;display:block;margin:10px 0 6px}\n  input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;padding:10px;border:1px solid #cfd3da;border-radius:8px}\n  textarea{min-height:110px;resize:vertical}\n  .row{display:flex;gap:16px}\n  .row>*{flex:1}\n  .navigation{display:flex;justify-content:space-between;gap:12px;margin-top:20px}\n  .btn{border:none;border-radius:10px;padding:12px 18px;color:#fff;background:var(--primary);font-weight:700;cursor:pointer}\n  .btn[disabled]{opacity:.5;cursor:not-allowed}\n  .btn.secondary{background:#7e879e}\n  .summary{background:#fff;border:1px solid var(--muted);border-radius:12px;padding:16px}\n  .slider-wrap{margin:22px 0 8px}\n  input[type=range]{width:100%}\n  .budget-value{text-align:center;font-size:18px;font-weight:700;color:var(--primary)}\n\n  \/* Date range picker *\/\n  .drp{background:#fff;border:1px solid var(--muted);border-radius:16px;padding:18px}\n  .drp .months{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n  .cal{padding:6px}\n  .cal .month-name{text-align:center;font-weight:700;margin-bottom:8px}\n  .cal .dow,.cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px}\n  .cal .dow span{text-align:center;color:#7e879e}\n  .day{text-align:center;padding:8px 0;border-radius:8px;cursor:pointer;user-select:none}\n  .day.disabled{color:#bbb;cursor:not-allowed}\n  .day.in-range{background:var(--accent)}\n  .day.start,.day.end{background:var(--primary);color:#fff}\n  .drp .actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px}\n  .link-like{color:var(--primary);background:none;border:none;cursor:pointer;font-weight:700;padding:0}\n\n  \/* S\u00e9lecteur voyageurs *\/\n  .traveller-box{border:1px solid var(--muted);border-radius:12px;background:#fff;padding:16px 20px;max-width:620px;margin:0 auto}\n  .traveller-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:14px;padding:10px 0}\n  .traveller-row+.traveller-row{border-top:1px solid var(--muted)}\n  .age-help{color:#0b7;opacity:.8;font-size:13px;margin-top:4px}\n  .count{width:28px;text-align:center;font-weight:700}\n  .circle-btn{width:28px;height:28px;border-radius:50%;border:2px solid var(--green);color:var(--green);display:grid;place-items:center;background:#fff;cursor:pointer;font-weight:900;line-height:1}\n  .circle-btn:disabled{opacity:.35;cursor:not-allowed}\n  .total-wrap{display:flex;justify-content:center;margin-top:10px}\n  .badge{display:inline-block;background:var(--primary);color:#fff;padding:8px 14px;border-radius:999px;font-weight:800}\n\n  \/* --- HOTFIX CLICS contre overlays \/ th\u00e8mes agressifs --- *\/\n  .cards, .cards *{pointer-events:auto !important}\n  .card{position:relative !important;z-index:2 !important}\n  .cards::before,.cards::after,.cards>*::before,.cards>*::after{pointer-events:none !important}\n<\/style>\n\n<div class=\"container\" id=\"devis-app\">\n  <div class=\"progress\">\n    <div id=\"pi1\" class=\"active\">1. Voyage<\/div>\n    <div id=\"pi2\">2. Dates & Voyageurs<\/div>\n    <div id=\"pi3\">3. Occasion & envies<\/div>\n    <div id=\"pi4\">4. Budget<\/div>\n    <div id=\"pi5\">5. Coordonn\u00e9es<\/div>\n    <div id=\"pi6\">6. R\u00e9sum\u00e9<\/div>\n  <\/div>\n\n  \n  <section class=\"step active\" id=\"s1\">\n    <h2>Quel type de voyage vous int\u00e9resse ?<\/h2>\n    <div class=\"cards\" id=\"trip-type\">\n      <button type=\"button\" class=\"card\" data-value=\"S\u00e9jour\"><span class=\"icon\">\ud83d\udecf\ufe0f<\/span> S\u00e9jour<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Circuit\"><span class=\"icon\">\ud83d\uddfa\ufe0f<\/span> Circuit<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Soir\u00e9e\"><span class=\"icon\">\ud83c\udf77<\/span> Soir\u00e9e<\/button>\n    <\/div>\n\n    <h2>\u00c0 quel stade en \u00eates-vous ?<\/h2>\n    <div class=\"cards\" id=\"stage\">\n      <button type=\"button\" class=\"card\" data-value=\"Je m\u2019informe\"><span class=\"icon\">\ud83d\udcac<\/span> Je m\u2019informe<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Je commence \u00e0 planifier\"><span class=\"icon\">\ud83d\uddd3\ufe0f<\/span> Je commence \u00e0 planifier<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Je souhaite partir rapidement\"><span class=\"icon\">\u23f1\ufe0f<\/span> Je souhaite partir rapidement<\/button>\n    <\/div>\n\n    <label for=\"city\">O\u00f9 souhaitez-vous partir ?<\/label>\n    <select id=\"city\">\n      <option value=\"\" selected disabled>Choisissez une ville<\/option>\n      <option>F\u00e8s<\/option><option>Casablanca<\/option><option>Agadir<\/option><option>Zagora<\/option>\n      <option>Ouzoud<\/option><option>Ourika<\/option><option>Ouarzazate<\/option>\n      <option>Marrakech<\/option><option>Essaouira<\/option><option>Merzouga<\/option>\n    <\/select>\n\n    <div class=\"navigation\">\n      <button class=\"btn secondary\" disabled>\u2190 Pr\u00e9c\u00e9dent<\/button>\n      <button class=\"btn\" id=\"next1\">Suivant \u2192<\/button>\n    <\/div>\n  <\/section>\n\n  \n  <section class=\"step\" id=\"s2\">\n    <h2>Quand souhaitez-vous voyager ?<\/h2>\n    <div class=\"drp\" id=\"rangePicker\">\n      <div class=\"months\" id=\"months\"><\/div>\n      <div class=\"actions\">\n        <button class=\"link-like\" id=\"resetRange\">R\u00e9initialiser<\/button>\n        <div><small id=\"rangeInfo\"><\/small><\/div>\n      <\/div>\n    <\/div>\n\n    <h2 style=\"margin-top:22px;\">Qui voyage ?<\/h2>\n    <div class=\"traveller-box\">\n      <div class=\"traveller-row\">\n        <div><div style=\"font-weight:700;\">Adultes<\/div><div class=\"age-help\">12 ans et plus<\/div><\/div>\n        <button class=\"circle-btn\" id=\"adultsMinus\" type=\"button\">\u2212<\/button>\n        <div class=\"count\" id=\"adultsCount\">1<\/div>\n        <button class=\"circle-btn\" id=\"adultsPlus\" type=\"button\">+<\/button>\n      <\/div>\n      <div class=\"traveller-row\">\n        <div><div style=\"font-weight:700;\">Enfants<\/div><div class=\"age-help\">De 2 \u00e0 11 ans<\/div><\/div>\n        <button class=\"circle-btn\" id=\"childrenMinus\" type=\"button\">\u2212<\/button>\n        <div class=\"count\" id=\"childrenCount\">0<\/div>\n        <button class=\"circle-btn\" id=\"childrenPlus\" type=\"button\">+<\/button>\n      <\/div>\n      <div class=\"traveller-row\">\n        <div><div style=\"font-weight:700;\">B\u00e9b\u00e9s<\/div><div class=\"age-help\">Moins de 2 ans<\/div><\/div>\n        <button class=\"circle-btn\" id=\"babiesMinus\" type=\"button\">\u2212<\/button>\n        <div class=\"count\" id=\"babiesCount\">0<\/div>\n        <button class=\"circle-btn\" id=\"babiesPlus\" type=\"button\">+<\/button>\n      <\/div>\n    <\/div>\n    <div class=\"total-wrap\"><span class=\"badge\" id=\"totalBadge\">Total voyageurs : 1<\/span><\/div>\n\n    <div class=\"navigation\">\n      <button class=\"btn secondary\" id=\"back2\" type=\"button\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n      <button class=\"btn\" id=\"next2\" type=\"button\">Suivant \u2192<\/button>\n    <\/div>\n  <\/section>\n\n  \n  <section class=\"step\" id=\"s3\">\n    <h2>Occasion & envies<\/h2>\n    <label>Voyagez-vous pour une occasion particuli\u00e8re ?<\/label>\n    <div class=\"cards\" id=\"occasion\">\n      <button type=\"button\" class=\"card\" data-value=\"R\u00e9union familiale\"><span class=\"icon\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66<\/span> R\u00e9union familiale<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Voyage de noces\"><span class=\"icon\">\ud83d\udc8d<\/span> Voyage de noces<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Anniversaire\"><span class=\"icon\">\ud83c\udf82<\/span> Anniversaire<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Autre\"><span class=\"icon\">\u2728<\/span> Autre<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Aucune occasion\"><span class=\"icon\">\u2796<\/span> Aucune occasion<\/button>\n    <\/div>\n\n    <label>Quelles sont vos envies de voyage ?<\/label>\n    <div class=\"cards\" id=\"envie\">\n      <button type=\"button\" class=\"card\" data-value=\"Culture\"><span class=\"icon\">\ud83c\udfdb\ufe0f<\/span> Culture<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Aventure\"><span class=\"icon\">\ud83e\udded<\/span> Aventure<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"D\u00e9tente\"><span class=\"icon\">\ud83e\uddd8<\/span> D\u00e9tente<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Nature\"><span class=\"icon\">\ud83c\udf3f<\/span> Nature<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Rencontres authentiques\"><span class=\"icon\">\ud83e\udd1d<\/span> Rencontres authentiques<\/button>\n      <button type=\"button\" class=\"card\" data-value=\"Autre\"><span class=\"icon\">\u2728<\/span> Autre<\/button>\n    <\/div>\n\n    <div class=\"navigation\">\n      <button class=\"btn secondary\" id=\"back3\" type=\"button\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n      <button class=\"btn\" id=\"next3\" type=\"button\">Suivant \u2192<\/button>\n    <\/div>\n  <\/section>\n\n  \n  <section class=\"step\" id=\"s4\">\n    <h2>Budget<\/h2>\n    <div class=\"slider-wrap\"><input type=\"range\" id=\"budget\" min=\"1000\" max=\"10000\" step=\"100\" value=\"3000\"><\/div>\n    <div class=\"budget-value\"><span id=\"budgetOut\">3000<\/span> \u20ac<\/div>\n    <small style=\"display:block;text-align:center;opacity:.8;\">Glissez le curseur (1000\u20ac \u2192 10000\u20ac)<\/small>\n    <div class=\"navigation\">\n      <button class=\"btn secondary\" id=\"back4\" type=\"button\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n      <button class=\"btn\" id=\"next4\" type=\"button\">Suivant \u2192<\/button>\n    <\/div>\n  <\/section>\n\n  \n  <section class=\"step\" id=\"s5\">\n    <h2>Vos coordonn\u00e9es<\/h2>\n    <div class=\"row\">\n      <div><label for=\"firstname\">Pr\u00e9nom<\/label><input id=\"firstname\" type=\"text\" placeholder=\"Votre pr\u00e9nom\"><\/div>\n      <div><label for=\"lastname\">Nom<\/label><input id=\"lastname\" type=\"text\" placeholder=\"Votre nom\"><\/div>\n    <\/div>\n    <div class=\"row\">\n      <div><label for=\"email\">E-mail<\/label><input id=\"email\" type=\"email\" placeholder=\"email@example.com\"><\/div>\n      <div><label for=\"phone\">T\u00e9l\u00e9phone<\/label><input id=\"phone\" type=\"tel\" placeholder=\"0601020304\"><\/div>\n    <\/div>\n    <label for=\"message\">Informations compl\u00e9mentaires<\/label>\n    <textarea id=\"message\" placeholder=\"D\u00e9crivez votre projet de voyage\"><\/textarea>\n    <div class=\"navigation\">\n      <button class=\"btn secondary\" id=\"back5\" type=\"button\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n      <button class=\"btn\" id=\"next5\" type=\"button\">Suivant \u2192<\/button>\n    <\/div>\n  <\/section>\n\n  \n  <section class=\"step\" id=\"s6\">\n    <h2>R\u00e9capitulatif<\/h2>\n    <div class=\"summary\" id=\"summary\"><\/div>\n    <div class=\"navigation\">\n      <button class=\"btn secondary\" id=\"back6\" type=\"button\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n      <button class=\"btn\" id=\"submitBtn\" type=\"button\">Envoyer la demande \u2709\ufe0f<\/button>\n    <\/div>\n  <\/section>\n<\/div>\n\n<script>\n(function(){\n  \/\/ ---- Etat global ----\n  const data = {\n    tripType:'', stage:'', city:'',\n    start:null, end:null, adults:1, children:0, babies:0,\n    occasion:'', envie:'',\n    budget:3000,\n    firstname:'', lastname:'', email:'', phone:'', message:''\n  };\n  const steps=['s1','s2','s3','s4','s5','s6'];\n  const pis  =['pi1','pi2','pi3','pi4','pi5','pi6'];\n  let currentStep=0;\n  function showStep(i){\n    steps.forEach((id,idx)=>{\n      document.getElementById(id).classList.toggle('active',idx===i);\n      document.getElementById(pis[idx]).classList.toggle('active',idx===i);\n    });\n    currentStep=i;\n    if(i===5) renderSummary();\n  }\n\n  \/\/ ---- S\u00e9lection cartes (robuste) ----\n  function selectCard(card, groupId, key){\n    if(!card) return;\n    document.querySelectorAll('#'+groupId+' .card').forEach(c=>c.classList.remove('selected'));\n    card.classList.add('selected');\n    data[key]=card.dataset.value;\n  }\n  \/\/ D\u00e9l\u00e9gation clic + pointerdown (capture) -> r\u00e9sistant aux re-renders\/overlays\n  document.addEventListener('pointerdown', function(e){\n    const card=e.target.closest('.card'); if(!card) return;\n    const parent=card.parentElement; if(!parent) return;\n    if(parent.id==='trip-type') selectCard(card,'trip-type','tripType');\n    else if(parent.id==='stage') selectCard(card,'stage','stage');\n    else if(parent.id==='occasion') selectCard(card,'occasion','occasion');\n    else if(parent.id==='envie') selectCard(card,'envie','envie');\n    e.stopPropagation();\n  }, true);\n  document.addEventListener('click', function(e){\n    const card=e.target.closest('.card'); if(!card) return;\n    const parent=card.parentElement; if(!parent) return;\n    if(parent.id==='trip-type') selectCard(card,'trip-type','tripType');\n    else if(parent.id==='stage') selectCard(card,'stage','stage');\n    else if(parent.id==='occasion') selectCard(card,'occasion','occasion');\n    else if(parent.id==='envie') selectCard(card,'envie','envie');\n  });\n  document.addEventListener('keydown', (e)=>{\n    if((e.key==='Enter'||e.key===' ') && document.activeElement && document.activeElement.classList.contains('card')){\n      e.preventDefault(); document.activeElement.click();\n    }\n  });\n\n  \/\/ ---- Etape 1 ----\n  document.getElementById('next1').onclick=()=>{\n    data.city=document.getElementById('city').value;\n    if(!data.tripType||!data.stage||!data.city){ alert('S\u00e9lectionnez le type de voyage, le stade et la ville.'); return; }\n    showStep(1);\n  };\n\n  \/\/ ---- Calendrier plage de dates ----\n  const today=new Date(); today.setHours(0,0,0,0);\n  const monthsEl=document.getElementById('months');\n  const rangeInfo=document.getElementById('rangeInfo');\n  const resetBtn=document.getElementById('resetRange');\n  const back2=document.getElementById('back2');\n  const next2=document.getElementById('next2');\n  let baseMonth=new Date(today.getFullYear(), today.getMonth(), 1);\n  function addMonths(d,n){ return new Date(d.getFullYear(), d.getMonth()+n, 1); }\n  function daysInMonth(y,m){ return new Date(y, m+1, 0).getDate(); }\n  function renderMonth(first){\n    const y=first.getFullYear(), m=first.getMonth();\n    const name=first.toLocaleString('fr-FR',{month:'long',year:'numeric'}).toUpperCase();\n    const firstWD=(new Date(y,m,1).getDay()+6)%7, total=daysInMonth(y,m);\n    let grid=''; for(let i=0;i<firstWD;i++) grid+='<span><\/span>';\n    for(let d=1; d<=total; d++){\n      const cur=new Date(y,m,d), ts=cur.getTime();\n      let cls='day';\n      if(ts<today.getTime()) cls+=' disabled';\n      if(data.start && ts===data.start.getTime()) cls+=' start';\n      if(data.end && ts===data.end.getTime()) cls+=' end';\n      if(data.start && data.end && ts>data.start.getTime() && ts<data.end.getTime()) cls+=' in-range';\n      grid+=`<div class=\"${cls}\" data-date=\"${y}-${m+1}-${d}\">${d}<\/div>`;\n    }\n    return `<div class=\"cal\">\n        <div class=\"month-name\">${name}<\/div>\n        <div class=\"dow\"><span>lun.<\/span><span>mar.<\/span><span>mer.<\/span><span>jeu.<\/span><span>ven.<\/span><span>sam.<\/span><span>dim.<\/span><\/div>\n        <div class=\"grid\">${grid}<\/div>\n      <\/div>`;\n  }\n  function renderPicker(){\n    monthsEl.innerHTML=renderMonth(baseMonth)+renderMonth(addMonths(baseMonth,1));\n    monthsEl.querySelectorAll('.day').forEach(el=>{\n      if(el.classList.contains('disabled')) return;\n      el.onclick=()=>{\n        const [y,m,d]=el.dataset.date.split('-').map(Number);\n        const clicked=new Date(y,m-1,d);\n        if(!data.start||(data.start&&data.end)){ data.start=clicked; data.end=null; }\n        else if(clicked.getTime()<data.start.getTime()){ data.start=clicked; }\n        else { data.end=clicked; }\n        renderPicker(); updateRangeInfo();\n      };\n    });\n  }\n  function updateRangeInfo(){\n    if(data.start&&data.end) rangeInfo.textContent=`Du ${data.start.toLocaleDateString('fr-FR')} au ${data.end.toLocaleDateString('fr-FR')}`;\n    else if(data.start) rangeInfo.textContent=`Choisissez votre date de retour`;\n    else rangeInfo.textContent=``;\n  }\n  resetBtn.onclick=()=>{ data.start=null; data.end=null; updateRangeInfo(); renderPicker(); };\n\n  \/\/ ---- Voyageurs + badge total ----\n  const adultsMinus=document.getElementById('adultsMinus');\n  const adultsPlus=document.getElementById('adultsPlus');\n  const childrenMinus=document.getElementById('childrenMinus');\n  const childrenPlus=document.getElementById('childrenPlus');\n  const babiesMinus=document.getElementById('babiesMinus');\n  const babiesPlus=document.getElementById('babiesPlus');\n  const adultsCount=document.getElementById('adultsCount');\n  const childrenCount=document.getElementById('childrenCount');\n  const babiesCount=document.getElementById('babiesCount');\n  const totalBadge=document.getElementById('totalBadge');\n  function updateTotalBadge(){\n    const total=data.adults+data.children+data.babies;\n    totalBadge.textContent=`Total voyageurs : ${total}`;\n  }\n  function updateTravellerUI(){\n    adultsCount.textContent=data.adults;\n    childrenCount.textContent=data.children;\n    babiesCount.textContent=data.babies;\n    adultsMinus.disabled=data.adults<=1;\n    childrenMinus.disabled=data.children<=0;\n    babiesMinus.disabled=data.babies<=0;\n    updateTotalBadge();\n  }\n  adultsMinus.onclick=()=>{ if(data.adults>1){ data.adults--; updateTravellerUI(); } };\n  adultsPlus.onclick =()=>{ data.adults++; updateTravellerUI(); };\n  childrenMinus.onclick=()=>{ if(data.children>0){ data.children--; updateTravellerUI(); } };\n  childrenPlus.onclick =()=>{ data.children++; updateTravellerUI(); };\n  babiesMinus.onclick  =()=>{ if(data.babies>0){ data.babies--; updateTravellerUI(); } };\n  babiesPlus.onclick   =()=>{ data.babies++; updateTravellerUI(); };\n  updateTravellerUI();\n\n  back2.onclick=()=>showStep(0);\n  next2.onclick=()=>{\n    if(!data.start||!data.end){ alert('Merci de s\u00e9lectionner vos dates (aller et retour).'); return; }\n    if(data.end<=data.start){ alert('La date de retour doit \u00eatre post\u00e9rieure \u00e0 la date de d\u00e9part.'); return; }\n    const t0=(new Date()).setHours(0,0,0,0);\n    if(data.start.getTime()<t0 || data.end.getTime()<t0){ alert('Les dates ne peuvent pas pr\u00e9c\u00e9der aujourd\u2019hui.'); return; }\n    if(data.adults<1){ alert('Au moins 1 adulte.'); return; }\n    showStep(2);\n  };\n\n  renderPicker(); updateRangeInfo();\n\n  \/\/ ---- Etape 3 ----\n  document.getElementById('back3').onclick=()=>showStep(1);\n  document.getElementById('next3').onclick=()=>{\n    if(!data.occasion||!data.envie){ alert('S\u00e9lectionnez une occasion et une envie.'); return; }\n    showStep(3);\n  };\n\n  \/\/ ---- Etape 4 ----\n  const budget=document.getElementById('budget');\n  const budgetOut=document.getElementById('budgetOut');\n  budget.oninput=()=>{ data.budget=parseInt(budget.value,10); budgetOut.textContent=data.budget; };\n  document.getElementById('back4').onclick=()=>showStep(2);\n  document.getElementById('next4').onclick=()=>showStep(4);\n\n  \/\/ ---- Etape 5 ----\n  document.getElementById('back5').onclick=()=>showStep(3);\n  document.getElementById('next5').onclick=()=>{\n    data.firstname=document.getElementById('firstname').value.trim();\n    data.lastname =document.getElementById('lastname').value.trim();\n    data.email    =document.getElementById('email').value.trim();\n    data.phone    =document.getElementById('phone').value.trim();\n    data.message  =document.getElementById('message').value.trim();\n    const nameOk=\/^[A-Za-z\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff' -]{2,}$\/.test(data.firstname)&&\/^[A-Za-z\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff' -]{2,}$\/.test(data.lastname);\n    const mailOk=\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(data.email);\n    const phoneOk=\/^[+\\d][\\d\\s]{6,}$\/.test(data.phone);\n    if(!nameOk){ alert('V\u00e9rifiez pr\u00e9nom\/nom.'); return; }\n    if(!mailOk){ alert('E-mail invalide.'); return; }\n    if(!phoneOk){ alert('T\u00e9l\u00e9phone invalide.'); return; }\n    showStep(5);\n  };\n\n  \/\/ ---- Etape 6 ----\n  document.getElementById('back6').onclick=()=>showStep(4);\n  document.getElementById('submitBtn').onclick=()=>{\n    alert('Merci ! Votre demande a \u00e9t\u00e9 envoy\u00e9e.');\n    \/\/ TODO: fetch('\/api\/devis', {method:'POST', headers:{'Content-Type':'application\/json'}, body:JSON.stringify(data)});\n  };\n\n  function renderSummary(){\n    const s=document.getElementById('summary');\n    const fmt=d=>d?d.toLocaleDateString('fr-FR'):'\u2014';\n    s.innerHTML = `\n      <p><strong>Type de voyage :<\/strong> ${data.tripType}<\/p>\n      <p><strong>Stade :<\/strong> ${data.stage}<\/p>\n      <p><strong>Ville :<\/strong> ${data.city}<\/p>\n      <p><strong>Dates :<\/strong> du ${fmt(data.start)} au ${fmt(data.end)}<\/p>\n      <p><strong>Voyageurs :<\/strong> ${data.adults} adulte(s), ${data.children} enfant(s), ${data.babies} b\u00e9b\u00e9(s)<\/p>\n      <p><strong>Occasion :<\/strong> ${data.occasion}<\/p>\n      <p><strong>Envie :<\/strong> ${data.envie}<\/p>\n      <p><strong>Budget :<\/strong> ${data.budget} \u20ac<\/p>\n      <p><strong>Nom :<\/strong> ${data.firstname} ${data.lastname}<\/p>\n      <p><strong>E-mail :<\/strong> ${data.email}<\/p>\n      <p><strong>T\u00e9l\u00e9phone :<\/strong> ${data.phone}<\/p>\n      <p><strong>Message :<\/strong><br>${data.message||'\u2014'}<\/p>\n    `;\n  }\n})();\n<\/script>\n\n\n\n"}}],"version":"2.31.0-rc.7"}

We use cookies to ensure that we give you the best experience on our website. Privacy Policy