Voici l'itinéraire que je vous propose. Ajoutez ou retirez des villes, ajustez les nuits, puis validez — je chercherai ensuite les meilleurs prix.
{i+1}{s.city}
{s.nights}n
{s.summary}
} {s.see && s.see.length>0 &&{s.see.map((it,k)=>{it})}
}
setAdd(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addCity()} />
Webbina a préparé {options.length} itinéraires complets. Comparez, ouvrez le détail, puis choisissez le vôtre.
{options.map((o,i)=>{ const st=STRAT[o.strategy]||STRAT.balanced; const cur=o.budget.currency==='EUR'?'€':o.budget.currency; const best=o.budget.total===cheapest;
return (
{best && Le moins cher}
); })}
{o.label}
{o.stops.length} étapes · {o.stops.reduce((s,x)=>s+x.nights,0)} nuits
{fmt(o.budget.total)} {cur}
≈ {fmt(o.budget.perPerson)} {cur}/pers
{o.angle}
}{o.stops.map((s,k)=>({k>0 && ))}
{o.flight &&
{o.flight.compared.map(c=>(
))}
{busy? 'Recalcul en cours…' : (withP.length? <>✓ {o.flight.origin} retenu · touchez un aéroport pour recalculer depuis là : 'Tarifs indicatifs indisponibles pour ces dates — aéroport le plus proche retenu')}
{o.car &&
Inclus : accès aéroport · vol{o.car?' · voiture':''} · hôtels ({o.stops.reduce((s,x)=>s+x.nights,0)} nuits) · visites · carburant/péages
{/* Stepper */}
{e.target.style.display='none';}} />}
{plan.stops.map((s,i)=>(
)}
{/* ÉTAPE VOLS */}
{cur_id==='Vols' && plan.flight && (
{ setTier(i,t); setPicks(p=>{ const n=[...p]; n[i]=null; return n; }); }}
onPick={(h)=>setPicks(p=>{ const n=[...p]; n[i]=h; return n; })} />
))}
)}
{/* (ancien bloc hôtels remplacé par HotelPicker) */}
{false && (
{plan.stops.map((s,i)=>{ const list=(s.hotels||[]).filter(h=>hotelFilter==='tous'||h.tier===hotelFilter).slice().sort((a,b)=>a.pricePerNight-b.pricePerNight); return (
); })}
)}
{/* ÉTAPE ACTIVITÉS */}
{cur_id==='Activités' && (
);
}
/* ---- Sélecteur d'hôtel réel (Google Places) + carte + filtres ---- */
function HotelPicker({ idx, city, region, nights, rooms, cur, tierHotels, tier, pick, onTier, onPick }){
const [open,setOpen]=React.useState(false);
const [data,setData]=React.useState(null);
const [state,setState]=React.useState('idle');
const [minRating,setMinRating]=React.useState(0);
const [sort,setSort]=React.useState('price');
const [htype,setHtype]=React.useState('hotel');
async function load(t){
setState('loading'); setData(null);
try{ const r=window.WebbinaBackend&&WebbinaBackend.cityHotels?await WebbinaBackend.cityHotels(city,region,t):null; if(r&&r.items&&r.items.length){ setData(r); setState('done'); } else setState('empty'); }
catch(e){ setState('empty'); }
}
function expand(){ setOpen(o=>!o); if(!open && !data) load(htype); }
function pickType(t){ setHtype(t); load(t); }
const api=(window.WEBBINA_API||'').replace(/\/+$/,'');
let list=data?data.items.slice():[];
if(minRating) list=list.filter(h=>(h.rating||0)>=minRating);
list.sort((a,b)=> sort==='rating' ? (b.rating||0)-(a.rating||0) : a.pricePerNight-b.pricePerNight);
const mapUrl = data&&api ? api+'/api/map/route.png?points='+encodeURIComponent(city+(region?', '+region:''))+'&size=560x200' : null;
const chosenLabel = pick? pick.name : (tier+' (estimation)');
const chosenPrice = pick? pick.pricePerNight : (()=>{ const h=(tierHotels.find(x=>x.tier===tier)||tierHotels[0]); return h?h.pricePerNight:90; })();
return (
{STEPS.map((s,i)=>(
))}
{/* Bandeau budget live */}
Budget total{fmt(total)} {cur}≈ {fmt(perPerson)} {cur}/pers
{/* Guide vocal Webbina (personnes peu à l'aise) */}
{guided ? (
Webbina vous guide
{GUIDE[cur_id]}
Votre itinéraire — {plan.stops.length} étapes
{mapUrl &&
{s.driveFromPrev &&
))}
{i+1}{s.city}{s.nights} nuit{s.nights>1?'s':''}
{s.summary && {s.summary}
} {s.days && s.days[0] && s.days[0].items &&{s.days.flatMap(d=>d.items).slice(0,4).map((it,k)=>{it})}
}
Votre vol
{plan.flight.origin} → {plan.flight.arrival}{plan.flight.returnAirport?' · retour '+plan.flight.returnAirport:''}
{plan.flight.real?fmt(plan.flight.price)+' '+cur:'—'}
{plan.flight.real?`Meilleur tarif A/R · ${pax} pers.`:'Aéroport conseillé'}{plan.flight.lowcost?' · low-cost':''}
{plan.flight.note}
}
{plan.flight.real && }
{plan.access && Accès aéroport — {plan.access.label}
{plan.access.cost?fmt(plan.access.cost)+' '+cur:'—'}{Math.round(plan.access.durationMin)} min
Location de voiture
Prise à {plan.flight?plan.flight.arrival:'l\'arrivée'}{plan.flight&&plan.flight.returnAirport&&plan.flight.returnAirport!==plan.flight.arrival?<> · restitution à {plan.flight.returnAirport} (open-jaw):' · restitution au même endroit'} · {days} jours
{CAR_CATS.map(c=>{ const sel=carCat===c[0]; return (
); })}
Hôtels par étape
{plan.stops.map((s,i)=>(Hôtels réels (Google) × {rooms} chambre{rooms>1?'s':''}. Prix estimés selon la catégorie ; tarifs & prestations exacts (petit-déj, chambre) dès l'activation des partenaires.
Hôtels par étape
{i+1}. {s.city}{s.nights} nuit{s.nights>1?'s':''}
{list.map((h,k)=>{ const t=RT_TIERS[h.tier]||RT_TIERS.confort; const sel=tiers[i]===h.tier; return (
); })}
Estimations haute saison × {rooms} chambre{rooms>1?'s':''}. Réservation en direct dès activation partenaires.
Activités à ajouter
Optionnel — ~25 {cur}/personne par activité. Cochez ce qui vous tente.
{plan.stops.map((s,ci)=>(
{s.city}
))}
{[...new Set(s.days.flatMap(d=>d.items))].slice(0,5).map((it,ai)=>{ const k=ci+':'+ai; const on=!!acts[k]; return (
); })}
{step>0 && }
{stepsetStep(step+1)}>{guided?'On continue':'Continuer'}
{idx+1}. {city}
{nights} nuit{nights>1?'s':''} × {rooms} ch. · {chosenLabel}
{fmt(chosenPrice*nights*rooms)} {cur}
{fmt(chosenPrice)} {cur}/nuit
{tierHotels.map((h,k)=>{ const t=RT_TIERS[h.tier]||RT_TIERS.confort; const sel=!pick&&tier===h.tier; return (
); })}
{open && (
Recherche en cours…
}
{state==='empty' && Rien trouvé ici — essayez un autre type.
}
{state==='done' && (
<>
{mapUrl &&
{list.slice(0,8).map((h,k)=>{ const sel=pick&&pick.name===h.name; return (
); })}
Prix estimé d'après la catégorie et la note. Tarif ferme + prestations (petit-déj, type de chambre) dès l'activation des partenaires.
)}
Votre itinéraire
{onEdit && }{plan.stops.map((s,k)=>({k>0 && ))}
{plan.flight &&