Passa al contenuto
Eventi
Home Staging
Expat
Mobili
Vedi tutto
Divani
Poltrone
Sedie
Tavoli da pranzo
Credenze
Tavolini da salotto
Tavolini d'appoggio
Outdoor
Facebook
Instagram
022 518 00 84
Email
info@swaap.ch
Swaap Project
Menu
Chiudi
Indietro
Eventi
Home Staging
Expat
Mobili
Vedi tutto
Divani
Poltrone
Sedie
Tavoli da pranzo
Credenze
Tavolini da salotto
Tavolini d'appoggio
Outdoor
Swaap Project
Accedi
022 518 00 84
Email
info@swaap.ch
Facebook
Instagram
Home
Vedi tutto
Divani
Poltrone
Sedie
Tavoli da pranzo
Credenze
Tavolini da salotto
Tavolini d'appoggio
Outdoor
Swaap
Search
Close
Ricerca
Close
Invia
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Swaap — Composez votre logement</title> <style> @import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap'); :root{ /* Charte graphique Swaap */ --cream:#F9F7F5; --panel:#FFFFFF; --ink:#242B34; --navy:#152242; --muted:#6B727B; --accent:#D87059; --accent-dk:#C1573F; --accent-tint:#FBEEE9; --line:#EBE6E1; --line-2:#F3F0EC; --shadow:0 8px 30px rgba(21,34,66,.08); --shadow-sm:0 2px 8px rgba(21,34,66,.06); --radius:14px; --font-head:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif; --font-body:'Maven Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font-body); background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; } h1,h2,h3,.brand h1,.total-box .val,.landing h1,.landing .logo-row span,.modal-head h2,.success h2{font-family:var(--font-head)} /* Boutons principaux façon Swaap : anthracite, majuscules */ .cta,.add,.submit-btn,.close2,.lp-primary,.finalize{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.03em} .add{text-transform:none;letter-spacing:0} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img{display:block;max-width:100%} /* ---------- Layout ---------- */ .app{display:flex;flex-direction:column;height:100vh;overflow:hidden} header{ display:flex;align-items:center;gap:20px;padding:14px 22px; background:var(--panel);border-bottom:1px solid var(--line);z-index:20;flex-wrap:wrap; } .brand{display:flex;align-items:center;gap:11px} .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-dk)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:19px;letter-spacing:-1px} .brand h1{font-size:16px;font-weight:700;letter-spacing:-.2px} .brand p{font-size:11.5px;color:var(--muted);margin-top:1px} .period-wrap{display:flex;align-items:center;gap:10px;margin-left:6px} .period-lbl{font-size:12px;color:var(--muted);font-weight:600} .seg{display:flex;background:var(--line-2);border-radius:999px;padding:3px} .seg button{padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);transition:.15s} .seg button.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm)} .total-pill{margin-left:auto;display:flex;align-items:center;gap:16px} .total-box{text-align:right} .total-box .lbl{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px} .total-box .val{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.1} .total-box .val span{font-size:14px;font-weight:600;color:var(--muted)} .cta{background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-weight:700;font-size:14px; transition:.15s;white-space:nowrap;text-decoration:none;display:inline-block} .cta:hover{transform:translateY(-1px);background:#000} .main{display:grid;grid-template-columns:315px 1fr 330px;flex:1;min-height:0} /* ---------- Catalogue (left) ---------- */ .catalog{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0} .cat-head{padding:16px 18px 10px} .cat-head h2{font-size:14px;font-weight:700} .cat-head p{font-size:12px;color:var(--muted);margin-top:2px} .filters{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 12px} .chip{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted); background:var(--line-2);transition:.15s} .chip.active{background:var(--accent);color:#fff} .cat-list{overflow-y:auto;padding:4px 14px 20px;flex:1} .card{display:flex;gap:12px;padding:10px;border-radius:14px;transition:.15s;position:relative} .card:hover{background:var(--line-2)} .card .thumb{width:66px;height:66px;border-radius:11px;background:#F4F1EA center/cover no-repeat;flex:none;border:1px solid var(--line)} .card .info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center} .card .nm{font-size:13.5px;font-weight:600;line-height:1.25} .card .tp{font-size:11px;color:var(--muted);margin-top:1px} .card .pr{font-size:13px;font-weight:700;color:var(--accent-dk);margin-top:5px} .card .pr small{font-weight:600;color:var(--muted);font-size:11px} .add{align-self:center;width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff; font-size:20px;font-weight:400;line-height:1;display:flex;align-items:center;justify-content:center;flex:none;transition:.15s} .add:hover{background:var(--accent-dk);transform:scale(1.06)} /* ---------- Plan (center) ---------- */ .planwrap{display:flex;flex-direction:column;min-height:0;background: radial-gradient(circle at 30% 20%, #fff, var(--cream));position:relative} .plan-toolbar{display:flex;align-items:center;gap:10px;padding:11px 18px;flex-wrap:wrap;position:relative;z-index:10} .roomtabs{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .rtab{display:flex;align-items:center;gap:7px;padding:7px 11px 7px 13px;border-radius:11px;background:var(--panel); border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;transition:.15s;white-space:nowrap} .rtab:hover{border-color:var(--accent)} .rtab.active{border-color:var(--accent);background:#FBEEE9;color:var(--accent-dk)} .rtab .rico{font-size:14px;line-height:1} .rtab .rcount{font-size:10.5px;font-weight:700;background:var(--line-2);color:var(--muted);border-radius:999px;padding:1px 6px;min-width:17px;text-align:center} .rtab.active .rcount{background:var(--accent);color:#fff} .rtab .rclose{font-size:13px;color:var(--muted);width:16px;height:16px;border-radius:5px;display:flex;align-items:center;justify-content:center;margin-left:1px} .rtab .rclose:hover{background:#C0392B;color:#fff} .addroom{position:relative} .addroom-btn{padding:8px 13px;border-radius:11px;font-size:12.5px;font-weight:700;color:var(--accent-dk); background:#FBEEE9;border:1px dashed var(--accent);transition:.15s} .addroom-btn:hover{background:var(--accent);color:#fff;border-style:solid} .roommenu{position:absolute;top:calc(100% + 6px);left:0;background:var(--panel);border:1px solid var(--line); border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:190px;z-index:40;display:none} .roommenu.open{display:block} .roommenu .mi{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:13px;font-weight:600;width:100%;text-align:left;transition:.12s} .roommenu .mi:hover{background:var(--line-2)} .roommenu .mi .mico{font-size:16px} .roommenu .mi .mdim{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600} .hint{font-size:12px;color:var(--muted);margin-left:auto} .stage{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 24px 24px;min-height:0} .plan{position:relative;background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(0deg,transparent,transparent 39px,#F0ECE2 39px,#F0ECE2 40px), repeating-linear-gradient(90deg,transparent,transparent 39px,#F0ECE2 39px,#F0ECE2 40px); background-color:#fff;border:2px solid var(--ink);border-radius:6px;box-shadow:var(--shadow); touch-action:none;max-width:100%;max-height:100%} .plan .dim{position:absolute;font-size:11px;font-weight:700;color:var(--muted);background:var(--cream);padding:1px 6px;border-radius:5px} .plan .dim.w{top:-11px;left:50%;transform:translateX(-50%)} .plan .dim.h{left:-13px;top:50%;transform:translateY(-50%) rotate(-90deg)} .plan .roomtag{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;color:var(--accent-dk); background:#FBEEE9;border:1px solid var(--line);padding:3px 9px;border-radius:999px;pointer-events:none} .plan .empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; color:var(--muted);gap:8px;pointer-events:none;text-align:center;padding:20px} .plan .empty svg{opacity:.35} .piece{position:absolute;border-radius:8px;overflow:hidden;cursor:grab;border:1px solid var(--line); background:#fff center/contain no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.10);transition:box-shadow .15s,border-color .15s} .piece .plabel{position:absolute;bottom:0;left:0;right:0;font-size:9px;font-weight:700;color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.72));padding:8px 4px 3px;text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transition:opacity .15s} .piece:hover .plabel,.piece.sel .plabel{opacity:1} .piece.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 6px 16px rgba(0,0,0,.2);z-index:5} .piece .tools{position:absolute;top:-13px;right:-13px;display:none;gap:4px;z-index:6} .piece.sel .tools{display:flex} .ptool{width:26px;height:26px;border-radius:50%;background:var(--panel);box-shadow:var(--shadow-sm); display:flex;align-items:center;justify-content:center;font-size:13px;border:1px solid var(--line)} .ptool:hover{background:var(--accent);color:#fff} .ptool.del:hover{background:#C0392B;color:#fff} /* ---------- Recap (right) ---------- */ .recap{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0} .recap-head{padding:16px 18px 8px;border-bottom:1px solid var(--line-2)} .recap-head h2{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px} .badge{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;min-width:20px;text-align:center} .recap-list{overflow-y:auto;flex:1;padding:8px 12px} .rroom{display:flex;align-items:baseline;justify-content:space-between;margin:12px 6px 3px;gap:8px} .rroom .rr-nm{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);display:flex;align-items:center;gap:6px} .rroom .rr-sub{font-size:11.5px;font-weight:700;color:var(--accent-dk);white-space:nowrap} .rroom:first-child{margin-top:2px} .rr-empty{font-size:11.5px;color:var(--muted);margin:0 6px 6px;font-style:italic} .ritem{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px} .ritem:hover{background:var(--line-2)} .ritem .rt{width:40px;height:40px;border-radius:9px;background:#fff center/contain no-repeat;flex:none;border:1px solid var(--line)} .ritem .rn{flex:1;min-width:0} .ritem .rn a{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink);text-decoration:none;display:block} .ritem .rn a:hover{color:var(--accent-dk);text-decoration:underline} .ritem .rn .rp{font-size:11px;color:var(--muted);margin-top:2px} .qty{display:flex;align-items:center;gap:6px;flex:none} .qbtn{width:22px;height:22px;border-radius:7px;background:var(--line-2);font-size:14px;font-weight:700; display:flex;align-items:center;justify-content:center;color:var(--ink)} .qbtn:hover{background:var(--accent);color:#fff} .qn{font-size:13px;font-weight:700;min-width:16px;text-align:center} .recap-empty{padding:40px 24px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5} .summary{border-top:1px solid var(--line);padding:14px 18px 16px;background:var(--panel)} .srow{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:7px;color:var(--muted)} .srow.big{color:var(--ink);font-size:15px;font-weight:700;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)} .srow.big .amt{font-size:22px;font-weight:800;letter-spacing:-.5px} .srow .amt{font-weight:700;color:var(--ink)} .buy-note{font-size:11px;color:var(--muted);margin-top:2px} .finalize{width:100%;margin-top:12px;background:var(--accent);color:#fff;padding:13px;border-radius:12px; font-weight:700;font-size:14px;transition:.15s;text-align:center;text-decoration:none;display:block} .finalize:hover{background:var(--accent-dk)} .clearbtn{width:100%;margin-top:8px;font-size:12px;color:var(--muted);padding:6px} .clearbtn:hover{color:#C0392B} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0; background:var(--ink);color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;font-weight:600; box-shadow:var(--shadow);pointer-events:none;transition:.3s;z-index:50} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- Landing : rubrique Mobilier ---------- */ .landing{position:fixed;inset:0;z-index:200;overflow:auto;padding:34px 24px; background:radial-gradient(circle at 72% 12%, #fff, var(--cream));display:flex;align-items:center;justify-content:center} .landing-inner{max-width:780px;text-align:center;width:100%} .landing .crumb{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:22px} .landing .crumb span{margin:0 7px;opacity:.6} .landing .crumb b{color:var(--accent-dk)} .landing .logo-row{display:inline-flex;align-items:center;gap:11px;margin-bottom:24px} .landing .logo-row .logo{width:38px;height:38px;font-size:21px} .landing .logo-row span{font-size:18px;font-weight:800;letter-spacing:-.3px} .landing .eyebrow{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .landing h1{font-size:46px;font-weight:800;letter-spacing:-1.4px;line-height:1.04} .landing p{font-size:16px;color:var(--muted);line-height:1.6;max-width:580px;margin:20px auto 0} .landing-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px} .lp-primary{background:var(--accent);color:#fff;padding:16px 32px;border-radius:14px;font-size:16px;font-weight:800; transition:.15s;box-shadow:0 12px 30px rgba(216,112,89,.32)} .lp-primary:hover{background:var(--accent-dk);transform:translateY(-2px)} .lp-secondary{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:16px 26px;border-radius:14px; font-size:15px;font-weight:700;text-decoration:none;transition:.15s;display:inline-flex;align-items:center} .lp-secondary:hover{border-color:var(--accent)} .landing-feat{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:13px;color:var(--muted);font-weight:600} .landing-feat span{display:inline-flex;align-items:center;gap:7px} .landing-thumbs{display:flex;gap:13px;justify-content:center;margin-top:40px;flex-wrap:wrap} .landing-thumbs .lt{width:108px;height:108px;border-radius:16px;background:#fff center/contain no-repeat; border:1px solid var(--line);box-shadow:var(--shadow-sm)} @media(max-width:560px){ .landing h1{font-size:32px} .landing-thumbs .lt{width:78px;height:78px} } /* ---------- Modal / Formulaire ---------- */ .modal-ov{position:fixed;inset:0;background:rgba(43,42,40,.55);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;z-index:100;padding:24px} .modal-ov.open{display:flex} .modal{background:var(--panel);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.3); width:100%;max-width:640px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;position:relative;overflow:hidden} .modal-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:10px;background:var(--line-2); font-size:16px;color:var(--muted);display:flex;align-items:center;justify-content:center;z-index:3;transition:.15s} .modal-x:hover{background:#C0392B;color:#fff} .modal-head{padding:24px 26px 16px;border-bottom:1px solid var(--line-2)} .modal-head h2{font-size:19px;font-weight:800;letter-spacing:-.3px} .modal-head p{font-size:13px;color:var(--muted);margin-top:3px} .modal-recap{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .mr-chip{background:var(--line-2);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--muted);font-weight:600} .mr-chip b{display:block;font-size:15px;color:var(--ink);font-weight:800;margin-top:1px} .mr-chip.accent{background:#FBEEE9} .mr-chip.accent b{color:var(--accent-dk)} .modal-body{overflow-y:auto;padding:20px 26px 24px} .item-recap{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px} .ir-room{background:var(--line-2);padding:7px 13px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);display:flex;justify-content:space-between} .ir-room span{color:var(--accent-dk)} .ir-item{display:flex;align-items:center;gap:10px;padding:8px 13px;border-top:1px solid var(--line-2);font-size:13px} .ir-item .ir-t{width:34px;height:34px;border-radius:8px;background:#fff center/contain no-repeat;border:1px solid var(--line);flex:none} .ir-item .ir-n{flex:1;min-width:0} .ir-item .ir-q{color:var(--muted);font-size:11.5px} .ir-item .ir-p{font-weight:700;white-space:nowrap} .info-callout{display:flex;gap:11px;align-items:flex-start;background:#FBEEE9;border:1px solid #F0D5CC;border-radius:12px; padding:12px 14px;font-size:12.5px;line-height:1.5;color:#8A5545} .info-callout .ic{font-size:18px;line-height:1;flex:none} .info-callout b{color:var(--ink);font-weight:700} form .fsec{margin-bottom:18px} form .fsec h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-dk);margin-bottom:11px} .frow{display:flex;gap:12px;flex-wrap:wrap} .fld{flex:1;min-width:150px;margin-bottom:12px;display:flex;flex-direction:column} .fld.full{flex-basis:100%} .fld.small{flex:0 0 130px;min-width:110px} .fld label{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:5px} .fld label .req{color:#C0392B} .fld input,.fld select,.fld textarea{font-family:inherit;font-size:13.5px;padding:10px 12px;border:1px solid var(--line); border-radius:10px;background:var(--cream);color:var(--ink);transition:.15s;width:100%} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(216,112,89,.16)} .fld textarea{resize:vertical;min-height:64px} .seg-radio{display:flex;gap:8px;flex-wrap:wrap} .seg-radio label{display:flex;align-items:center;gap:6px;padding:9px 13px;border:1px solid var(--line);border-radius:10px; font-size:13px;font-weight:600;cursor:pointer;background:var(--cream);transition:.15s;margin:0} .seg-radio label:hover{border-color:var(--accent)} .seg-radio input{display:none} .seg-radio input:checked + span{color:var(--accent-dk)} .seg-radio label:has(input:checked){border-color:var(--accent);background:#FBEEE9} .chk{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px} .chk input{width:16px;height:16px;margin-top:1px;flex:none;accent-color:var(--accent)} .chk a{color:var(--accent-dk)} .modal-foot{padding:16px 26px 22px;border-top:1px solid var(--line-2);background:var(--panel)} .submit-btn{width:100%;background:var(--accent);color:#fff;padding:14px;border-radius:12px;font-weight:800;font-size:15px;transition:.15s} .submit-btn:hover{background:var(--accent-dk)} .foot-note{font-size:11px;color:var(--muted);text-align:center;margin-top:9px} /* success */ .success{text-align:center;padding:40px 30px} .success .chk-ic{width:66px;height:66px;border-radius:50%;background:#EAF6EC;color:#2E9E4F;display:flex;align-items:center; justify-content:center;font-size:34px;margin:0 auto 18px} .success h2{font-size:22px;font-weight:800;letter-spacing:-.3px} .success p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5;max-width:420px;margin-left:auto;margin-right:auto} .success .ref{display:inline-block;margin-top:16px;background:var(--line-2);border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700} .success .ref span{color:var(--accent-dk)} .success .s-recap{margin-top:22px;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .success .s-recap .sr-line{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:var(--muted)} .success .s-recap .sr-line b{color:var(--ink)} .success .s-recap .sr-total{border-top:1px dashed var(--line);margin-top:8px;padding-top:10px;font-size:15px;font-weight:800;color:var(--ink)} .success .close2{margin-top:22px;background:var(--ink);color:#fff;padding:12px 26px;border-radius:11px;font-weight:700;font-size:14px} .success .close2:hover{background:#000} @media(max-width:1080px){ .main{grid-template-columns:260px 1fr 300px} } @media(max-width:900px){ .main{grid-template-columns:1fr;grid-template-rows:auto auto auto;overflow-y:auto} .app{height:auto;min-height:100vh;overflow:auto} .catalog,.recap{border:none;border-bottom:1px solid var(--line)} .cat-list{max-height:340px} .stage{min-height:60vh} } </style> <link href="https://swaap.ch/it/pages/calculateur" hreflang="fr" rel="alternate"><link href="https://swaap.ch/en/it/pages/calculateur" hreflang="en" rel="alternate"><link href="https://swaap.ch/de/it/pages/calculateur" hreflang="de" rel="alternate"></head> <body> <!-- ======= PAGE D'ENTRÉE : rubrique Mobilier ======= --> <div class="landing" id="landing"> <div class="landing-inner"> <div class="crumb">Accueil <span>›</span> <b>Mobilier</b></div> <div class="logo-row"><div class="logo">S</div><span>Swaap</span></div> <div class="eyebrow">Rubrique Mobilier</div> <h1>Composez votre logement,<br>meuble par meuble.</h1> <p>Canapés, tables, fauteuils et rangements premium en location flexible. Aménagez chaque pièce, visualisez votre budget mensuel en direct, et envoyez votre proposition à Swaap en un clic.</p> <div class="landing-cta"> <button class="lp-primary" id="startBtn">Composez votre logement →</button> <a class="lp-secondary" href="https://swaap.ch/collections/mobilier" target="_blank">Voir tout le catalogue</a> </div> <div class="landing-feat"> <span>🚚 Livraison & installation en Suisse</span> <span>🔁 Location 3 · 6 · 12 mois</span> <span>⚡ Packs Express disponibles</span> </div> <div class="landing-thumbs" id="landingThumbs"></div> </div> </div> <div class="app"> <header> <div class="brand"> <div class="logo">S</div> <div> <h1>Composez votre logement</h1> <p>Mobilier premium en location — Swaap</p> </div> </div> <div class="period-wrap"> <span class="period-lbl">Durée</span> <div class="seg" id="periodSeg"> <button data-p="3">3 mois</button> <button data-p="6">6 mois</button> <button data-p="12" class="active">12 mois</button> </div> </div> <div class="total-pill"> <div class="total-box"> <div class="lbl">Total logement</div> <div class="val" id="hdrTotal">0 <span>CHF/mois</span></div> </div> <a class="cta" id="ctaTop" href="https://swaap.ch/collections/mobilier" target="_blank">Finaliser</a> </div> </header> <div class="main"> <!-- CATALOGUE --> <aside class="catalog"> <div class="cat-head"> <h2>Catalogue mobilier</h2> <p id="catCount">Ajoutez des pièces à votre plan</p> </div> <div class="filters" id="filters"></div> <div class="cat-list" id="catList"></div> </aside> <!-- PLAN --> <section class="planwrap"> <div class="plan-toolbar"> <div class="roomtabs" id="roomTabs"></div> <div class="addroom"> <button class="addroom-btn" id="addRoomBtn">+ Ajouter une pièce</button> <div class="roommenu" id="roomMenu"></div> </div> <span class="hint">Glissez les meubles · survolez-en un pour le pivoter ou le retirer</span> </div> <div class="stage"> <div class="plan" id="plan"> <div class="roomtag" id="roomTag"></div> <div class="dim w" id="dimW"></div> <div class="dim h" id="dimH"></div> <div class="empty" id="planEmpty"> <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M3 9l9-6 9 6v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"></path><path d="M9 21V12h6v9"></path></svg> <div>Cette pièce est vide.<br>Ajoutez des meubles depuis le catalogue pour les disposer ici.</div> </div> </div> </div> </section> <!-- RECAP --> <aside class="recap"> <div class="recap-head"> <h2>Mon logement <span class="badge" id="recapBadge">0</span></h2> </div> <div class="recap-list" id="recapList"></div> <div class="summary"> <div class="srow"><span id="perLbl">Location 12 mois</span><span class="amt" id="sumMonthly">0 CHF/mois</span></div> <div class="srow"><span>Soit à l'achat</span><span class="amt" id="sumBuy">0 CHF</span></div> <div class="srow big"><span>Total logement</span><span class="amt" id="sumBig">0 <span style="font-size:13px;color:var(--muted);font-weight:600">CHF/mois</span></span></div> <div class="buy-note">Frais de livraison & d'installation en sus, selon le lieu de livraison.</div> <a class="finalize" id="finalizeBtn" href="https://swaap.ch/collections/mobilier" target="_blank">Finaliser ma sélection →</a> <button class="clearbtn" id="clearBtn">Réinitialiser le logement</button> </div> </aside> </div> </div> <div class="toast" id="toast"></div> <!-- ======= MODALE : formulaire de validation ======= --> <div class="modal-ov" id="modalOv"> <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle"> <button class="modal-x" id="modalX" aria-label="Fermer">✕</button> <!-- FORMULAIRE --> <div id="modalForm"> <div class="modal-head"> <h2 id="modalTitle">Finaliser votre proposition</h2> <p>Renseignez vos coordonnées : un conseiller Swaap vous recontacte pour confirmer la livraison et l'installation.</p> <div class="modal-recap" id="modalRecap"></div> </div> <form id="propForm" novalidate=""> <div class="modal-body"> <!-- Récapitulatif détaillé --> <div class="fsec"> <h3>Votre sélection</h3> <div id="modalItemList" class="item-recap"></div> <div class="info-callout"> <span class="ic">⏱️</span> <div><b>Délais de commande.</b> Certains articles ont un délai supérieur à un mois. Pour une mise à disposition rapide, Swaap propose des <b>packs Express</b> (articles en stock, livraison sous quelques jours). Indiquez votre préférence ci-dessous.</div> </div> </div> <!-- Coordonnées --> <div class="fsec"> <h3>Vos coordonnées</h3> <div class="frow"> <div class="fld"><label>Prénom <span class="req">*</span></label><input name="prenom" required=""></div> <div class="fld"><label>Nom <span class="req">*</span></label><input name="nom" required=""></div> </div> <div class="frow"> <div class="fld"><label>E-mail <span class="req">*</span></label><input type="email" name="email" required="" placeholder="vous@exemple.ch"></div> <div class="fld"><label>Téléphone <span class="req">*</span></label><input type="tel" name="tel" required="" placeholder="+41 …"></div> </div> </div> <!-- Livraison --> <div class="fsec"> <h3>Adresse de livraison & installation</h3> <div class="frow"> <div class="fld full"><label>Rue et numéro <span class="req">*</span></label><input name="rue" required="" placeholder="Rue du Rhône 12"></div> </div> <div class="frow"> <div class="fld small"><label>NPA <span class="req">*</span></label><input name="npa" required="" inputmode="numeric" pattern="[0-9]{4}" placeholder="1204" title="4 chiffres"></div> <div class="fld"><label>Localité <span class="req">*</span></label><input name="ville" required="" placeholder="Genève"></div> </div> <div class="frow"> <div class="fld"><label>Étage</label><input name="etage" placeholder="ex. 3e"></div> <div class="fld"><label>Ascenseur</label> <select name="ascenseur"><option value="">—</option><option>Oui</option><option>Non</option></select></div> </div> </div> <!-- Projet --> <div class="fsec"> <h3>Votre projet</h3> <div class="frow"> <div class="fld"><label>Durée de location</label> <select name="duree" id="fldDuree"><option value="3">3 mois</option><option value="6">6 mois</option><option value="12">12 mois</option></select></div> <div class="fld"><label>Date de livraison souhaitée</label><input type="date" name="date"></div> </div> <div class="fld full"><label>Type de projet</label> <div class="seg-radio"> <label><input type="radio" name="typeclient" value="Particulier" checked=""><span>Particulier</span></label> <label><input type="radio" name="typeclient" value="Professionnel"><span>Professionnel</span></label> <label><input type="radio" name="typeclient" value="Événementiel"><span>Événementiel</span></label> </div> </div> <div class="fld full" style="margin-top:12px"><label>Disponibilité des articles</label> <div class="seg-radio"> <label><input type="radio" name="livraison" value="Standard" checked=""><span>Standard (délais selon articles)</span></label> <label><input type="radio" name="livraison" value="Express"><span>⚡ Pack Express (livraison rapide)</span></label> </div> </div> <div class="fld full" style="margin-top:12px"><label>Message / remarques</label> <textarea name="message" placeholder="Précisez vos contraintes d'accès, une date d'emménagement, des questions…"></textarea></div> </div> <label class="chk"><input type="checkbox" name="consent" required=""> <span>J'accepte d'être recontacté par Swaap au sujet de ma demande et que mes données soient traitées conformément à la protection des données. <span class="req">*</span></span></label> </div> <div class="modal-foot"> <button type="submit" class="submit-btn">Envoyer ma demande →</button> <div class="foot-note">Sans engagement · Un conseiller vous répond sous 24 h ouvrées</div> </div> </form> </div> <!-- CONFIRMATION --> <div id="modalSuccess" style="display:none"> <div class="modal-body success"> <div class="chk-ic">✓</div> <h2 id="succTitle">Merci !</h2> <p id="succText">Votre demande a bien été transmise. Un conseiller Swaap vous recontacte très prochainement pour finaliser la livraison et l'installation.</p> <div class="ref">Référence : <span id="succRef">—</span></div> <div class="s-recap" id="succRecap"></div> <button class="close2" id="succClose">Fermer</button> </div> </div> </div> </div> <script> /* ============ DONNÉES : catalogue réel Swaap (collection Mobilier Premium) ============ */ const CDN = "https://cdn.shopify.com/s/files/1/0567/0151/7961/files/"; const CAT = { "Canapé": {w:210,h:95}, "Fauteuil": {w:82, h:82}, "Chaise": {w:48, h:52}, "Table à manger":{w:150,h:90}, "Table basse": {w:110,h:60} }; const PRODUCTS = [ {id:"canape-amsterdam",cat:"Canapé",nm:"Canapé — Amsterdam",p:{3:349,6:197,12:125},buy:2990,img:"Gemini_Generated_Image_h6fmhxh6fmhxh6fm_d4ec08c8-8249-4a31-8503-8ad8857160c9.jpg?v=1774431385"}, {id:"canape-new-york",cat:"Canapé",nm:"Canapé — New York",p:{3:320,6:181,12:115},buy:2740,img:"Gemini_Generated_Image_te5fmzte5fmzte5f.png?v=1779961793"}, {id:"canape-veliro",cat:"Canapé",nm:"Canapé — Veliro",p:{3:240,6:135,12:86},buy:2050,img:"S81320ZF06_3A.jpg?v=1773838073"}, {id:"canape-blok",cat:"Canapé",nm:"Canapé — Blok",p:{3:212,6:120,12:76},buy:1599,img:"Gemini_Generated_Image_gzkr2gzkr2gzkr2g.jpg?v=1774431627"}, {id:"canape-martina-1",cat:"Canapé",nm:"Canapé — Martina (noir)",p:{3:303,6:172,12:109},buy:2599,img:"S83130NR36_3A.jpg?v=1773837709"}, {id:"canape-martina",cat:"Canapé",nm:"Canapé — Martina (gris)",p:{3:304,6:172,12:109},buy:2599,img:"S83130HI39_3A.jpg?v=1773836839"}, {id:"fauteuil-granite",cat:"Fauteuil",nm:"Fauteuil — Granite",p:{3:128,6:72,12:46},buy:1095,img:"S0900076CC12_3A_dc147804-ca1b-4dca-824a-2a93ff3705d0.jpg?v=1774946528"}, {id:"fauteuil-melvia",cat:"Fauteuil",nm:"Fauteuil — Melvia",p:{3:96,6:54,12:34},buy:819,img:"40cc0729-e273-476d-9b5a-e8c4cbb993c0_ef42c251-2424-4f9c-9d43-4768018385fa.png?v=1772634211"}, {id:"fauteuil-assa",cat:"Fauteuil",nm:"Fauteuil — Assa",p:{3:59,6:33,12:21},buy:499,img:"assa-faut021m__ps_02_9ca80baf-d33e-4181-bb67-6e38bda7fbea.jpg?v=1777900400"}, {id:"chaise-asen",cat:"Fauteuil",nm:"Fauteuil — Asen",p:{3:48,6:27,12:17},buy:409,img:"Captured_ecran2026-03-05a12.10.45.png?v=1772709242"}, {id:"fauteuil-petal",cat:"Fauteuil",nm:"Fauteuil — Petal",p:{3:32,6:18,12:12},buy:270,img:"petal-faut026__ps_07_jpg.webp?v=1772710712"}, {id:"table-a-manger-urban",cat:"Table à manger",nm:"Table à manger — Urban",p:{3:262,6:148,12:94},buy:2240,img:"Captured_ecran2026-06-10a14.38.05.png?v=1781095225"}, {id:"table-a-manger-ellipse",cat:"Table à manger",nm:"Table à manger — Ellipse",p:{3:262,6:148,12:94},buy:2240,img:"Captured_ecran2026-06-10a14.05.11.png?v=1781093201"}, {id:"table-a-manger-scandi",cat:"Table à manger",nm:"Table à manger — Scandi",p:{3:232,6:131,12:83},buy:1990,img:"Captured_ecran2026-06-10a14.13.07.png?v=1781093626"}, {id:"table-basse-litto",cat:"Table basse",nm:"Table basse — Litto",p:{3:80,6:45,12:29},buy:685,img:"Captured_ecran2026-03-05a12.23.06.png?v=1780313140"}, {id:"table-basse-olir",cat:"Table basse",nm:"Table basse — Olir",p:{3:58,6:33,12:21},buy:489,img:"Captured_ecran2026-03-05a16.48.44.png?v=1780313262"}, {id:"table-basse-travertin",cat:"Table basse",nm:"Table basse — Travertin",p:{3:58,6:33,12:21},buy:500,img:"Captured_ecran2026-06-11a11.53.18.png?v=1781171667"}, {id:"chaise-bosca",cat:"Chaise",nm:"Chaise — Bosca",p:{3:64,6:36,12:23},buy:549,img:"1e6ff7e1-0090-4363-9807-297edc57dd67.png?v=1775733329"}, {id:"chaise-beige-edo",cat:"Chaise",nm:"Chaise en bois — Edo",p:{3:41,6:23,12:15},buy:350,img:"1_8fefcc5b-5c7e-4de3-b93e-1ea9fa8f519e.jpg?v=1770376766"}, {id:"chaise-en-bois-cloud",cat:"Chaise",nm:"Chaise en bois — Cloud",p:{3:30,6:17,12:10},buy:250,img:"1_2ab45d54-5e9e-4e0f-8b5d-2acb1fd4ed7b.jpg?v=1770376893"}, {id:"chaise-beige-rock",cat:"Chaise",nm:"Chaise beige — Rock",p:{3:28,6:16,12:10},buy:239,img:"Captured_ecran2024-03-07a15.16.38.png?v=1709821213"}, {id:"chaise-japandi",cat:"Chaise",nm:"Chaise — Japandi",p:{3:25,6:16,12:9},buy:219,img:"1_43630d47-e625-4f2b-a4d4-0e2b6c8d910d.jpg?v=1772713535"}, {id:"chaise-scandi",cat:"Chaise",nm:"Chaise — Scandi",p:{3:25,6:16,12:9},buy:219,img:"1_2297914a-cdfb-4278-b2fb-ec0ca3168388.jpg?v=1772711067"}, {id:"chaise-beige-japandi",cat:"Chaise",nm:"Chaise beige — Japandi",p:{3:25,6:16,12:9},buy:219,img:"1_a98b6d62-2e3e-4e7b-8b0c-9a2882667b70.jpg?v=1770376632"}, {id:"chaise-beige-japandi-1",cat:"Chaise",nm:"Chaise beige — Japandi II",p:{3:25,6:16,12:9},buy:219,img:"1_99cb375b-522e-440d-bf60-80c73b29b069.jpg?v=1770376686"}, {id:"chaise-beige-scandi",cat:"Chaise",nm:"Chaise beige — Scandi",p:{3:25,6:16,12:9},buy:219,img:"1_0bf6c323-48fd-4822-8286-ab6cbe80b85b.jpg?v=1770375836"}, {id:"chaise-beige-okura",cat:"Chaise",nm:"Chaise beige — Okura",p:{3:25,6:16,12:9},buy:219,img:"1_c99e63dc-768f-4e45-8bac-520508bcd95c.jpg?v=1770376546"}, {id:"chaise-whale",cat:"Chaise",nm:"Chaise taupe — Whale",p:{3:25,6:16,12:9},buy:219,img:"Captured_ecran2024-01-15a15.28.55.png?v=1705328976"}, {id:"chaise-beige-whale-1",cat:"Chaise",nm:"Chaise beige — Whale",p:{3:25,6:16,12:9},buy:219,img:"Captured_ecran2024-03-07a15.12.41.png?v=1774959569"}, {id:"chaise-beige-whale",cat:"Chaise",nm:"Chaise coco — Whale",p:{3:25,6:16,12:9},buy:219,img:"Captured_ecran2024-01-15a15.33.37.png?v=1705329280"} ]; PRODUCTS.forEach(p=>{p.img=CDN+p.img; p.url="https://swaap.ch/products/"+p.id; p.fw=CAT[p.cat].w; p.fh=CAT[p.cat].h; p.ratio=null;}); const BYID = Object.fromEntries(PRODUCTS.map(p=>[p.id,p])); /* ============ TYPES DE PIÈCES ============ */ const ROOM_TYPES = [ {key:"Salon", ico:"🛋️", w:550,h:450}, {key:"Chambre", ico:"🛏️", w:420,h:380}, {key:"Salle à manger", ico:"🍽️", w:430,h:400}, {key:"Bureau", ico:"💼", w:340,h:300}, {key:"Cuisine", ico:"🍳", w:360,h:320}, {key:"Chambre d'amis", ico:"🛌", w:380,h:340}, {key:"Entrée", ico:"🚪", w:280,h:240} ]; const RT_BYKEY = Object.fromEntries(ROOM_TYPES.map(r=>[r.key,r])); /* ============ ÉTAT ============ */ let period = 12; let rooms = []; // {id,type,name,w,h,items:[{uid,id,x,y,rot}]} let activeRoom = null; let uidSeq = 1, roomSeq = 1; let selectedUid = null; let activeFilter = "Tous"; function cur(){ return rooms.find(r=>r.id===activeRoom); } function fmt(n){return Math.round(n).toLocaleString('fr-CH').replace(/[\s ]/g,"'");} /* ============ PIÈCES (rooms) ============ */ function addRoom(typeKey){ const t=RT_BYKEY[typeKey]; const sameCount=rooms.filter(r=>r.type===typeKey).length; const name = sameCount ? `${typeKey} ${sameCount+1}` : typeKey; const room={id:roomSeq++,type:typeKey,name,w:t.w,h:t.h,items:[]}; rooms.push(room); activeRoom=room.id; selectedUid=null; renderRoomTabs(); sizePlan(); renderRecap(); updateTotals(); toast(name,'ajoutée'); } function removeRoom(id){ const room=rooms.find(r=>r.id===id); if(rooms.length<=1){ // on ne supprime pas la dernière : on la vide room.items=[]; selectedUid=null; renderRoomTabs(); renderPlan(); renderRecap(); updateTotals(); return; } rooms=rooms.filter(r=>r.id!==id); if(activeRoom===id){ activeRoom=rooms[0].id; } selectedUid=null; renderRoomTabs(); sizePlan(); renderRecap(); updateTotals(); } function selectRoom(id){ activeRoom=id; selectedUid=null; renderRoomTabs(); sizePlan(); } function renderRoomTabs(){ const el=document.getElementById('roomTabs'); el.innerHTML=''; rooms.forEach(r=>{ const t=RT_BYKEY[r.type]; const b=document.createElement('button'); b.className='rtab'+(r.id===activeRoom?' active':''); b.innerHTML=`<span class="rico">${t?t.ico:'🏠'}</span><span>${r.name}</span> <span class="rcount">${r.items.length}</span> ${rooms.length>1?'<span class="rclose" title="Supprimer">✕</span>':''}`; b.addEventListener('click',(e)=>{ if(e.target.classList.contains('rclose')){ e.stopPropagation(); removeRoom(r.id); } else selectRoom(r.id); }); el.appendChild(b); }); } /* menu "Ajouter une pièce" */ const roomMenu=document.getElementById('roomMenu'); ROOM_TYPES.forEach(t=>{ const b=document.createElement('button'); b.className='mi'; b.innerHTML=`<span class="mico">${t.ico}</span><span>${t.key}</span><span class="mdim">${(t.w/100).toString().replace('.',',')}×${(t.h/100).toString().replace('.',',')} m</span>`; b.onclick=()=>{ addRoom(t.key); roomMenu.classList.remove('open'); }; roomMenu.appendChild(b); }); document.getElementById('addRoomBtn').addEventListener('click',(e)=>{ e.stopPropagation(); roomMenu.classList.toggle('open'); }); document.addEventListener('click',(e)=>{ if(!e.target.closest('.addroom')) roomMenu.classList.remove('open'); }); /* ============ CATALOGUE ============ */ const cats = ["Tous", ...Object.keys(CAT)]; const filtersEl = document.getElementById('filters'); cats.forEach(c=>{ const b=document.createElement('button'); b.className='chip'+(c===activeFilter?' active':''); b.textContent=c; b.onclick=()=>{activeFilter=c; document.querySelectorAll('.chip').forEach(x=>x.classList.toggle('active',x.textContent===c)); renderCatalog();}; filtersEl.appendChild(b); }); function renderCatalog(){ const list=document.getElementById('catList'); list.innerHTML=''; const items = PRODUCTS.filter(p=>activeFilter==="Tous"||p.cat===activeFilter); document.getElementById('catCount').textContent = items.length+" pièces disponibles"; items.forEach(p=>{ const c=document.createElement('div'); c.className='card'; c.innerHTML=` <div class="thumb" style="background-image:url('${p.img}')"></div> <div class="info"> <div class="nm">${p.nm}</div> <div class="tp">${p.cat}</div> <div class="pr">${p.p[period]} <small>CHF/mois</small></div> </div> <button class="add" title="Ajouter à la pièce active">+</button>`; c.querySelector('.add').onclick=()=>addPiece(p.id); list.appendChild(c); }); } /* ============ PLAN ============ */ const plan=document.getElementById('plan'); function planScale(){ return plan.getBoundingClientRect().width / cur().w; } function dispDims(p){ // dimensions affichées en cm (largeur = empreinte ; hauteur = ratio image) const ratio = p.ratio || (p.fw/p.fh); return { w:p.fw, h:p.fw/ratio }; } function sizePlan(){ const room=cur(); const stage=plan.parentElement.getBoundingClientRect(); const pad=48, availW=stage.width-pad, availH=stage.height-pad; const ratio=room.w/room.h; let w=availW, h=w/ratio; if(h>availH){h=availH; w=h*ratio;} plan.style.width=w+'px'; plan.style.height=h+'px'; const fm=v=>(v/100).toString().replace('.',','); document.getElementById('dimW').textContent=fm(room.w)+' m'; document.getElementById('dimH').textContent=fm(room.h)+' m'; const t=RT_BYKEY[room.type]; document.getElementById('roomTag').textContent=(t?t.ico+' ':'')+room.name; renderPlan(); } function addPiece(id){ const p=BYID[id], room=cur(); const n=room.items.length; const x=Math.max(p.fw/2,Math.min(room.w-p.fw/2, room.w/2 + (n%5-2)*35)); const y=Math.max(p.fh/2,Math.min(room.h-p.fh/2, room.h/2 + (Math.floor(n/5)%4-1)*35)); const uid=uidSeq++; room.items.push({uid,id,x,y,rot:0}); selectedUid=uid; renderRoomTabs(); renderPlan(); renderRecap(); updateTotals(); toast(p.nm.split(' — ')[1]||p.nm, 'ajouté'); } function removePiece(uid){ const room=cur(); room.items=room.items.filter(x=>x.uid!==uid); if(selectedUid===uid) selectedUid=null; renderRoomTabs(); renderPlan(); renderRecap(); updateTotals(); } function renderPlan(){ const room=cur(), sc=planScale(); plan.querySelectorAll('.piece').forEach(e=>e.remove()); document.getElementById('planEmpty').style.display = room.items.length?'none':'flex'; room.items.forEach(it=>{ const p=BYID[it.id]; const d=dispDims(p); it._w=d.w; it._h=d.h; // cm affichés (pour les limites) const el=document.createElement('div'); el.className='piece'+(it.uid===selectedUid?' sel':''); el.style.width=(d.w*sc)+'px'; el.style.height=(d.h*sc)+'px'; el.style.left=(it.x*sc)+'px'; el.style.top=(it.y*sc)+'px'; el.style.transform=`translate(-50%,-50%) rotate(${it.rot}deg)`; el.style.backgroundImage=`url('${p.img}')`; el.dataset.uid=it.uid; el.innerHTML=`<span class="plabel">${p.nm.split(' — ')[1]||p.nm}</span> <div class="tools"> <button class="ptool rot" title="Pivoter">⟳</button> <button class="ptool del" title="Retirer">✕</button> </div>`; el.querySelector('.rot').onclick=(e)=>{e.stopPropagation(); it.rot=(it.rot+90)60; renderPlan();}; el.querySelector('.del').onclick=(e)=>{e.stopPropagation(); removePiece(it.uid);}; attachDrag(el,it); plan.appendChild(el); }); } function attachDrag(el,it){ let start=null; const down=(e)=>{ if(e.target.classList.contains('ptool'))return; e.preventDefault(); selectedUid=it.uid; renderPlan(); const sc=planScale(); start={px:e.clientX,py:e.clientY,x:it.x,y:it.y,sc}; window.addEventListener('pointermove',move); window.addEventListener('pointerup',up); }; const move=(e)=>{ if(!start)return; const room=cur(); const dx=(e.clientX-start.px)/start.sc, dy=(e.clientY-start.py)/start.sc; let nx=start.x+dx, ny=start.y+dy; const rotated=it.rot0!==0; const halfW=(rotated?it._h:it._w)/2, halfH=(rotated?it._w:it._h)/2; nx=Math.max(halfW,Math.min(room.w-halfW,nx)); ny=Math.max(halfH,Math.min(room.h-halfH,ny)); it.x=nx; it.y=ny; const active=plan.querySelector(`.piece[data-uid='${it.uid}']`); if(active){active.style.left=(nx*start.sc)+'px'; active.style.top=(ny*start.sc)+'px';} }; const up=()=>{start=null; window.removeEventListener('pointermove',move); window.removeEventListener('pointerup',up);}; el.addEventListener('pointerdown',down); } plan.addEventListener('pointerdown',(e)=>{ if(e.target===plan||e.target.classList.contains('roomtag')){selectedUid=null; renderPlan();} }); /* ============ RECAP ============ */ function renderRecap(){ const list=document.getElementById('recapList'); const totalItems=rooms.reduce((s,r)=>s+r.items.length,0); document.getElementById('recapBadge').textContent=totalItems; if(!totalItems){ list.innerHTML='<div class="recap-empty">Aucun meuble pour l\'instant.<br>Ajoutez des pièces et composez votre logement.</div>'; return; } let html=''; rooms.forEach(r=>{ const t=RT_BYKEY[r.type]; const sub=r.items.reduce((s,it)=>s+BYID[it.id].p[period],0); html+=`<div class="rroom"><span class="rr-nm">${t?t.ico:'🏠'} ${r.name}</span> <span class="rr-sub">${sub?fmt(sub)+' CHF/mois':'—'}</span></div>`; if(!r.items.length){ html+='<div class="rr-empty">Aucun meuble dans cette pièce.</div>'; return; } const g={}; r.items.forEach(it=>{ g[it.id]=(g[it.id]||0)+1; }); Object.keys(g).forEach(id=>{ const p=BYID[id], q=g[id]; html+=`<div class="ritem"> <div class="rt" style="background-image:url('${p.img}')"></div> <div class="rn"><a href="${p.url}" target="_blank">${p.nm}</a> <div class="rp">${p.p[period]} CHF/mois × ${q} = <b>${fmt(p.p[period]*q)} CHF</b></div></div> <div class="qty"> <button class="qbtn" onclick="chgQty(${r.id},'${id}',-1)">–</button> <span class="qn">${q}</span> <button class="qbtn" onclick="chgQty(${r.id},'${id}',1)">+</button> </div></div>`; }); }); list.innerHTML=html; } function chgQty(roomId,id,d){ const prev=activeRoom; activeRoom=roomId; if(d>0){ addPiece(id); } else { const room=cur(); for(let i=room.items.length-1;i>=0;i--){ if(room.items[i].id===id){ removePiece(room.items[i].uid); break; } } } if(rooms.find(r=>r.id===prev)) { activeRoom=prev; renderRoomTabs(); sizePlan(); } } /* ============ TOTAUX ============ */ function updateTotals(){ let monthly=0, buy=0; rooms.forEach(r=>r.items.forEach(it=>{ const p=BYID[it.id]; monthly+=p.p[period]; buy+=p.buy; })); document.getElementById('hdrTotal').innerHTML=`${fmt(monthly)} <span>CHF/mois</span>`; document.getElementById('sumMonthly').textContent=`${fmt(monthly)} CHF/mois`; document.getElementById('sumBuy').textContent=`${fmt(buy)} CHF`; document.getElementById('sumBig').innerHTML=`${fmt(monthly)} <span style="font-size:13px;color:var(--muted);font-weight:600">CHF/mois</span>`; document.getElementById('perLbl').textContent=`Location ${period} mois`; } /* ============ ÉVÉNEMENTS ============ */ document.getElementById('periodSeg').addEventListener('click',(e)=>{ const b=e.target.closest('button'); if(!b)return; period=+b.dataset.p; document.querySelectorAll('#periodSeg button').forEach(x=>x.classList.toggle('active',x===b)); renderCatalog(); renderRecap(); updateTotals(); }); document.getElementById('clearBtn').onclick=()=>{ if(rooms.some(r=>r.items.length)||rooms.length>1){ if(confirm('Réinitialiser entièrement le logement ?')){ rooms=[]; roomSeq=1; selectedUid=null; addRoom("Salon"); } } }; function toast(name,verb){ const t=document.getElementById('toast'); t.textContent=`${name} ${verb} ✓`; t.classList.add('show'); clearTimeout(t._t); t._t=setTimeout(()=>t.classList.remove('show'),1600); } window.addEventListener('resize',()=>sizePlan()); /* ============ Préchargement des ratios d'images (pour un affichage complet, sans rognage) ============ */ let _rt; function scheduleRerender(){ clearTimeout(_rt); _rt=setTimeout(()=>renderPlan(),120); } PRODUCTS.forEach(p=>{ const im=new Image(); im.onload=()=>{ if(im.naturalWidth&&im.naturalHeight){ p.ratio=im.naturalWidth/im.naturalHeight; scheduleRerender(); } }; im.src=p.img; }); /* ============ MODALE : formulaire de validation ============ */ const modalOv=document.getElementById('modalOv'); let modalDur=period; function openModal(){ const totalItems=rooms.reduce((s,r)=>s+r.items.length,0); if(!totalItems){ toast('Ajoutez d\'abord des meubles','—'); return; } modalDur=period; document.getElementById('propForm').reset(); document.getElementById('fldDuree').value=String(period); buildModalRecap(); document.getElementById('modalForm').style.display=''; document.getElementById('modalSuccess').style.display='none'; modalOv.classList.add('open'); } function closeModal(){ modalOv.classList.remove('open'); } function buildModalRecap(){ const dur=modalDur; let monthly=0,items=0; rooms.forEach(r=>r.items.forEach(it=>{const p=BYID[it.id];monthly+=p.p[dur];items++;})); const nRooms=rooms.filter(r=>r.items.length).length; document.getElementById('modalRecap').innerHTML= `<div class="mr-chip accent">Total mensuel<b>${fmt(monthly)} CHF/mois</b></div> <div class="mr-chip">Meubles<b>${items}</b></div> <div class="mr-chip">Pièces<b>${nRooms}</b></div> <div class="mr-chip">Durée<b>${dur} mois</b></div>`; let html=''; rooms.forEach(r=>{ if(!r.items.length)return; const t=RT_BYKEY[r.type]; const sub=r.items.reduce((s,it)=>s+BYID[it.id].p[dur],0); html+=`<div class="ir-room">${t?t.ico:''} ${r.name}<span>${fmt(sub)} CHF/mois</span></div>`; const g={}; r.items.forEach(it=>{g[it.id]=(g[it.id]||0)+1;}); Object.keys(g).forEach(id=>{const p=BYID[id],q=g[id]; html+=`<div class="ir-item"><div class="ir-t" style="background-image:url('${p.img}')"></div> <div class="ir-n">${p.nm} <span class="ir-q">× ${q}</span></div> <div class="ir-p">${fmt(p.p[dur]*q)} CHF/mois</div></div>`;}); }); document.getElementById('modalItemList').innerHTML=html; } document.getElementById('fldDuree').addEventListener('change',(e)=>{modalDur=+e.target.value; buildModalRecap();}); document.getElementById('finalizeBtn').addEventListener('click',(e)=>{e.preventDefault(); openModal();}); document.getElementById('ctaTop').addEventListener('click',(e)=>{e.preventDefault(); openModal();}); document.getElementById('modalX').addEventListener('click',closeModal); document.getElementById('succClose').addEventListener('click',closeModal); modalOv.addEventListener('click',(e)=>{ if(e.target===modalOv) closeModal(); }); document.addEventListener('keydown',(e)=>{ if(e.key==='Escape'&&modalOv.classList.contains('open')) closeModal(); }); document.getElementById('propForm').addEventListener('submit',async function(e){ e.preventDefault(); if(!this.checkValidity()){ this.reportValidity(); return; } const fd=new FormData(this); const btn=this.querySelector('.submit-btn'); const old=btn.textContent; btn.textContent='Envoi en cours…'; btn.disabled=true; const ok=await sendContact(fd); btn.textContent=old; btn.disabled=false; if(!ok){ openMailto(fd); } // repli : ouvre l'e-mail pré-rempli si l'envoi natif échoue showSuccess(fd); }); async function sendContact(fd){ const dur=modalDur, sel=buildSelectionText(dur); const body=[ 'NOUVELLE DEMANDE — Configurateur Swaap (rubrique Mobilier)','', 'PROJET : '+(fd.get('typeclient')||'')+' · Durée '+dur+' mois · Dispo. '+(fd.get('livraison')||'Standard'), 'Date souhaitée : '+(fd.get('date')||'—'),'', 'LIVRAISON & INSTALLATION', ' Adresse : '+(fd.get('rue')||''), ' NPA/Loc.: '+(fd.get('npa')||'')+' '+(fd.get('ville')||''), ' Étage : '+(fd.get('etage')||'—')+' Ascenseur : '+(fd.get('ascenseur')||'—'),'', 'MESSAGE : '+(fd.get('message')||'—'),'', 'SÉLECTION ('+sel.items+' meubles)', '-----------------------------------', sel.text, 'TOTAL LOCATION : '+fmt(sel.monthly)+' CHF/mois ('+dur+' mois)', 'Valeur à l\'achat équivalente : '+fmt(sel.buy)+' CHF', 'Frais de livraison & installation en sus, selon le lieu.' ].join('\n'); const params=new URLSearchParams(); params.append('form_type','contact'); params.append('utf8','✓'); params.append('contact[email]', fd.get('email')||''); params.append('contact[Nom]', ((fd.get('prenom')||'')+' '+(fd.get('nom')||'')).trim()); params.append('contact[Téléphone]', fd.get('tel')||''); params.append('contact[Type]', fd.get('typeclient')||''); params.append('contact[Total mensuel]', fmt(sel.monthly)+' CHF/mois ('+dur+' mois)'); params.append('contact[body]', body); try{ const res=await fetch('/contact', {method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body:params.toString()}); return res.ok || res.status===302 || res.status===0; // Shopify redirige (302) en cas de succès }catch(err){ return false; } } function buildSelectionText(dur){ const lines=[]; let monthly=0, buy=0, items=0; rooms.forEach(r=>{ if(!r.items.length)return; const t=RT_BYKEY[r.type]; lines.push((t?t.ico+' ':'')+r.name.toUpperCase()); const g={}; r.items.forEach(it=>{g[it.id]=(g[it.id]||0)+1;}); Object.keys(g).forEach(id=>{const p=BYID[id],q=g[id]; monthly+=p.p[dur]*q; buy+=p.buy*q; items+=q; lines.push(' - '+p.nm+' x'+q+' -> '+fmt(p.p[dur]*q)+' CHF/mois');}); lines.push(''); }); return {text:lines.join('\n'), monthly, buy, items}; } function openMailto(fd){ const dur=modalDur, sel=buildSelectionText(dur); const body=[ 'NOUVELLE DEMANDE — Configurateur Swaap (rubrique Mobilier)', '=========================================================','', 'COORDONNÉES', ' Prénom : '+(fd.get('prenom')||''), ' Nom : '+(fd.get('nom')||''), ' E-mail : '+(fd.get('email')||''), ' Tél. : '+(fd.get('tel')||''),'', 'LIVRAISON & INSTALLATION', ' Adresse : '+(fd.get('rue')||''), ' NPA/Loc.: '+(fd.get('npa')||'')+' '+(fd.get('ville')||''), ' Étage : '+(fd.get('etage')||'—')+' Ascenseur : '+(fd.get('ascenseur')||'—'),'', 'PROJET', ' Type : '+(fd.get('typeclient')||''), ' Durée : '+dur+' mois', ' Date souh. : '+(fd.get('date')||'—'), ' Dispo. : '+(fd.get('livraison')||'Standard'), ' Message : '+(fd.get('message')||'—'),'', 'SÉLECTION ('+sel.items+' meubles)', '---------------------------------------------------------', sel.text, 'TOTAL LOCATION : '+fmt(sel.monthly)+' CHF/mois ('+dur+' mois)', 'Valeur à l\'achat équivalente : '+fmt(sel.buy)+' CHF', 'Frais de livraison & installation en sus, selon le lieu.' ].join('\n'); const subject='Demande configurateur — '+(fd.get('prenom')||'')+' '+(fd.get('nom')||'')+' ('+fmt(sel.monthly)+' CHF/mois)'; const a=document.createElement('a'); a.href='mailto:info@swaap.ch?subject='+encodeURIComponent(subject)+'&body='+encodeURIComponent(body); a.style.display='none'; document.body.appendChild(a); a.click(); a.remove(); } function showSuccess(fd){ const dur=modalDur; let monthly=0,buy=0,items=0; rooms.forEach(r=>r.items.forEach(it=>{const p=BYID[it.id];monthly+=p.p[dur];buy+=p.buy;items++;})); const ref='SWA-'+Math.floor(100000+Math.random()*899999); document.getElementById('succTitle').textContent='Merci '+(fd.get('prenom')||'')+' !'; const exp = fd.get('livraison')==='Express' ? ' Vous avez sélectionné un <b>pack Express</b> : nous vérifions les disponibilités immédiates pour une livraison rapide.' : ' Certains articles pouvant avoir un délai de commande supérieur à un mois, nous vous confirmerons les dates précises.'; document.getElementById('succText').innerHTML='Votre demande a bien été envoyée à <b>info@swaap.ch</b>. Un conseiller Swaap vous recontacte sous 24 h ouvrées pour organiser la livraison à '+(fd.get('npa')||'')+' '+(fd.get('ville')||'')+'.'+exp; document.getElementById('succRef').textContent=ref; document.getElementById('succRecap').innerHTML= `<div class="sr-line"><span>Meubles / pièces</span><b>${items} · ${rooms.filter(r=>r.items.length).length}</b></div> <div class="sr-line"><span>Durée de location</span><b>${dur} mois</b></div> <div class="sr-line"><span>Disponibilité</span><b>${fd.get('livraison')||'Standard'}</b></div> <div class="sr-line"><span>Valeur à l'achat équivalente</span><b>${fmt(buy)} CHF</b></div> <div class="sr-line sr-total"><span>Total location</span><span>${fmt(monthly)} CHF/mois</span></div>`; document.getElementById('modalForm').style.display='none'; document.getElementById('modalSuccess').style.display=''; } /* ============ PAGE D'ENTRÉE ============ */ document.getElementById('startBtn').addEventListener('click',()=>{ document.getElementById('landing').style.display='none'; sizePlan(); }); (function(){ const lt=document.getElementById('landingThumbs'); ['canape-amsterdam','table-a-manger-ellipse','fauteuil-melvia','table-basse-litto','chaise-bosca'].forEach(id=>{ const p=BYID[id]; if(!p)return; const d=document.createElement('div'); d.className='lt'; d.style.backgroundImage=`url('${p.img}')`; lt.appendChild(d); }); })(); /* ============ INIT ============ */ addRoom("Salon"); // pièce de départ renderCatalog(); renderRecap(); updateTotals(); </script> <style> /* Black banner behind the review stars */.ss-hero-15 .review {background-color: #000; /* black background */ color: #fff; /* make text/icons white */ width: 100%; /* full width */ text-align: center; /* center stars */ padding: 8px 0; /* spacing top/bottom */} /* Make sure stars remain visible */.ss-hero-15 .review svg,.ss-hero-15 .review span {color: #fff !important; /* force stars/text white */} </style> <div id="shopify-block-AZFd6aGFnS21FS1hVa__13768625480086291342" class="shopify-block shopify-app-block"><script> window['ShopifyForms'] = { ...window['ShopifyForms'], currentPageType: "page" }; </script> </div></body>
