.ip{--w:19rem;position:relative;width:var(--w);max-width:100%;aspect-ratio:71.9/150;border-radius:calc(var(--w) * .165);padding:calc(var(--w) * .013);background:linear-gradient(135deg,#f4f4f2 0,#c9c9c6 22%,#eeeeec 48%,#b9b9b5 76%,#e6e6e3 100%);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 70px -26px rgba(60,40,20,.45),inset 0 0 1px 1px rgba(255,255,255,.7)}@media (max-width:56rem){.ip{--w:17rem}}@media (max-width:46rem){.ip{--w:min(19rem, 82vw)}}.ip-btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#a9a9a5,#e2e2df)}.ip-btn.l{left:-2px}.ip-btn.r{right:-2px}.ip-btn.act{top:17%;height:6%}.ip-btn.vup{top:26%;height:10%}.ip-btn.vdn{top:38%;height:10%}.ip-btn.pwr{top:28%;height:15%}.ip-btn.cam{top:62%;height:9%}.ip-glass{position:relative;height:100%;background:#0b0b0c;padding:calc(var(--w) * .022);border-radius:calc(var(--w) * .152)}.ip-screen{position:relative;height:100%;overflow:hidden;overflow:clip;container-type:inline-size;border-radius:calc(var(--w) * .132);background:#efebe3;isolation:isolate;font-family:-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.ip-screen{--u:calc(100cqw / 402)}.world{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2, .8, .2, 1)}.world svg{position:absolute;left:-25%;top:-25%;width:150%;height:150%;display:block}.me{position:absolute;left:52%;top:52%;width:calc(16 * var(--u));height:calc(16 * var(--u));margin:calc(-8 * var(--u));border-radius:50%;background:#0a84ff;border:calc(3 * var(--u)) solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}.me::before{content:"";position:absolute;inset:calc(-14 * var(--u));border-radius:50%;background:rgba(10,132,255,.18);animation:me-pulse 2.4s ease-out infinite;z-index:-1}@keyframes me-pulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.3);opacity:0}}.mpin{position:absolute;left:var(--x);top:var(--y);width:max-content;transform:translate(-50%,calc(-24 * var(--u)));display:flex;flex-direction:column;align-items:center;gap:calc(1 * var(--u));padding:calc(6 * var(--u));margin:0;border:0;background:0 0;cursor:pointer;font:inherit;color:inherit;z-index:2}.mpin img{display:block;width:calc(36 * var(--u));height:calc(36 * var(--u));transition:transform 220ms cubic-bezier(.22, 1, .36, 1)}.mpin.sel img{width:calc(40 * var(--u));height:calc(40 * var(--u));margin:calc(-2 * var(--u)) 0;transform:scale(1.12)}.mpin.sel{z-index:3}.mpin.dot{transform:translate(-50%,-50%)}.mpin.dot img{width:calc(12 * var(--u));height:calc(12 * var(--u))}.mpin.dot .mpin-name{display:none}.mpin-name{font-size:calc(11 * var(--u));font-weight:600;line-height:1.15;color:#3a3530;white-space:nowrap;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff;max-width:calc(132 * var(--u));overflow:hidden;text-overflow:ellipsis}.mpin:focus-visible{outline:2px solid var(--sage);outline-offset:0;border-radius:calc(12 * var(--u))}.mpin.static{cursor:default}.sbar{position:absolute;z-index:6;top:0;left:0;right:0;height:calc(54 * var(--u));display:flex;align-items:center;justify-content:space-between;padding:calc(4 * var(--u)) calc(34 * var(--u)) 0 calc(48 * var(--u));font-size:calc(17 * var(--u));font-weight:600;color:#000;pointer-events:none}.sbar svg{height:calc(13 * var(--u));width:auto;display:block}.sbar .ico{display:flex;gap:calc(6 * var(--u));align-items:center}.island{position:absolute;z-index:7;top:calc(11 * var(--u));left:50%;transform:translateX(-50%);width:calc(124 * var(--u));height:calc(36 * var(--u));border-radius:999px;background:#000}.mtop{position:absolute;z-index:5;top:calc(58 * var(--u));left:calc(16 * var(--u));right:calc(16 * var(--u))}.mrow{display:flex;gap:calc(12 * var(--u))}.msearch{flex:1;display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(48 * var(--u));padding:0 calc(16 * var(--u));border-radius:999px;font-size:calc(15 * var(--u));color:#6b665f;background:rgba(253,252,250,.92);box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(60,40,20,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.msearch svg{width:calc(17 * var(--u));height:calc(17 * var(--u));flex:none}.mchips{display:flex;gap:calc(8 * var(--u));margin-top:calc(12 * var(--u))}.mround{flex:none;width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:50%;display:grid;place-items:center;background:rgba(253,252,250,.92);color:#1c1917;box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(60,40,20,.14)}.mround svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}.mround.sm{width:calc(40 * var(--u));height:calc(40 * var(--u))}.mround.sm svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}.mchips{align-items:center}.mchip svg{width:calc(16 * var(--u));height:calc(16 * var(--u));flex:none}.mchip{display:inline-flex;align-items:center;gap:calc(7 * var(--u));height:calc(40 * var(--u));font:inherit;font-size:calc(14 * var(--u));font-weight:500;white-space:nowrap;cursor:pointer;padding:0 calc(13 * var(--u));border-radius:999px;border:0;color:#1c1917;background:rgba(253,252,250,.95);box-shadow:0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(60,40,20,.12);transition:background-color 160ms,color 160ms}.mchip[aria-pressed=true]{background:var(--sage);color:#fff}.tabs{position:absolute;z-index:4;left:calc(18 * var(--u));right:calc(18 * var(--u));bottom:calc(26 * var(--u));height:calc(62 * var(--u));border-radius:999px;display:flex;align-items:center;justify-content:space-around;background:rgba(253,252,250,.78);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(60,40,20,.16),inset 0 0 0 1px rgba(255,255,255,.6);pointer-events:none}.tabs span{display:flex;flex-direction:column;align-items:center;gap:calc(2 * var(--u));font-size:calc(10 * var(--u));font-weight:600;color:#5c5550}.tabs span.on{color:var(--sage)}.tabs svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}.homebar{position:absolute;z-index:9;bottom:calc(8 * var(--u));left:50%;transform:translateX(-50%);width:calc(140 * var(--u));height:calc(5 * var(--u));border-radius:999px;background:#000;pointer-events:none}.sheet{position:absolute;z-index:8;left:calc(8 * var(--u));right:calc(8 * var(--u));bottom:calc(8 * var(--u));border-radius:calc(38 * var(--u));background:#fdfcfa;padding:calc(8 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u));box-shadow:0 calc(-6 * var(--u)) calc(30 * var(--u)) rgba(60,40,20,.22);transform:translateY(0);transition:transform 460ms cubic-bezier(.2, .9, .25, 1),visibility 0s}.sheet[hidden]{display:block;visibility:hidden;transform:translateY(110%);transition:transform .3s cubic-bezier(.4, 0, .9, .5),visibility 0s .3s}.grab{width:calc(36 * var(--u));height:calc(5 * var(--u));border-radius:999px;background:#d6cfc4;margin:0 auto calc(14 * var(--u))}.sh-head{display:flex;align-items:center;gap:calc(14 * var(--u))}.sh-tile{width:calc(56 * var(--u));height:calc(56 * var(--u));border-radius:calc(14 * var(--u));flex:none;display:grid;place-items:center;background:var(--tile);color:var(--glyph)}.sh-tile svg{width:calc(28 * var(--u));height:calc(28 * var(--u))}.sh-name{margin:0;font-family:var(--display);font-weight:700;font-size:calc(21 * var(--u));line-height:1.15;color:var(--text);letter-spacing:-.01em}.sh-meta{margin:calc(2 * var(--u)) 0 0;font-size:calc(15 * var(--u));font-weight:600;color:var(--glyph)}[data-cat=cafe]{--tile:#FFE1BF;--glyph:#754200}[data-cat=restaurant]{--tile:#FFDCC6;--glyph:#7E3A06}[data-cat=boulangerie]{--tile:#F7E4BD;--glyph:#6B4900}[data-cat=parc]{--tile:#D4F0CD;--glyph:#2A5E1E}[data-cat=librairie]{--tile:#DEE3FF;--glyph:#45468A}[data-cat=shopping]{--tile:#CBEAFF;--glyph:#125289}.sh-x{margin-left:auto;align-self:flex-start;flex:none;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:50%;border:0;background:#efe9e0;color:#1c1917;cursor:pointer;display:grid;place-items:center;padding:0}.sh-x svg{width:calc(12 * var(--u));height:calc(12 * var(--u))}.sh-x{position:relative}.sh-x::before{content:"";position:absolute;inset:50% auto auto 50%;width:44px;height:44px;transform:translate(-50%,-50%)}.sh-groups{display:grid;gap:calc(12 * var(--u));margin-top:calc(20 * var(--u))}.grp{border-radius:calc(18 * var(--u));padding:calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));background:#f7f4ef}.grp.ok{background:#e6f3e6}.grp-h{display:flex;align-items:baseline;gap:calc(8 * var(--u));margin:0;font-size:calc(15 * var(--u));line-height:1.2}.grp-h b{font-weight:700;color:var(--text)}.grp-h span{margin-left:auto;font-size:calc(13 * var(--u));color:var(--text-3);white-space:nowrap}.grp.ok .grp-h b,.grp.ok .grp-h span{color:#315833}.grp.ok .grp-h span{font-weight:600}.atiles{display:grid;grid-template-columns:repeat(3,1fr);column-gap:calc(8 * var(--u));margin-top:calc(14 * var(--u))}.atile{display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u));text-align:center;font-size:calc(13 * var(--u));line-height:1.25;font-weight:600;color:var(--text-2)}.grp.ok .atile{color:#315833}.disc{position:relative;width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:50%;display:grid;place-items:center;background:#efe9e0;color:#6b665f}.disc svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}.grp.ok .disc{background:#cbe2cb;color:#315833}.grp.est .disc{background:0 0;border:calc(2 * var(--u)) dashed #a8a29a;color:#5c5550}.disc i{position:absolute;top:calc(-3 * var(--u));right:calc(-5 * var(--u));width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;border:calc(2 * var(--u)) solid #fff;display:grid;place-items:center}.disc i::after{content:"";width:35%;height:60%;border:solid #fff;border-width:0 calc(2 * var(--u)) calc(2 * var(--u)) 0;transform:translateY(-12%) rotate(45deg)}.grp.ok .disc i{background:#427044}.grp.est .disc i{background:#e4dbd0;border-color:#f7f4ef}.grp.est .disc i::after{border-color:#6b665f}.sheet .rows-in .grp{animation:row-in 420ms cubic-bezier(.2,.8,.2,1) both}.sheet .rows-in .grp:nth-child(2){animation-delay:70ms}.sheet .rows-in .grp:nth-child(3){animation-delay:140ms}@keyframes row-in{from{opacity:0;transform:translateY(calc(10 * var(--u)))}}.tap{position:absolute;z-index:10;width:calc(44 * var(--u));height:calc(44 * var(--u));margin:calc(-22 * var(--u));border-radius:50%;background:rgba(28,25,23,.18);border:calc(2 * var(--u)) solid rgba(255,255,255,.9);pointer-events:none;opacity:0}.tap.go{animation:tap .7s ease-out}@keyframes tap{0%{opacity:0;transform:scale(1.5)}35%{opacity:1;transform:scale(1)}55%{transform:scale(.82)}100%{opacity:0;transform:scale(1.1)}}.demo-hint{display:none;position:absolute;margin:0;left:50%;bottom:-2.4rem;transform:translateX(-50%);white-space:nowrap;font-size:.82rem;color:var(--text-3);align-items:center;gap:.4rem}.demo-hint::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--sage)}@media (max-width:56rem){.stage .float.f1{display:none}.demo-hint{display:flex}.stage{margin-bottom:2rem}}@media (prefers-reduced-motion:reduce){.mchip,.mpin img,.sheet,.sheet[hidden],.world{transition:none}.me::before,.sheet .rows-in .grp{animation:none}}.clu{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:1;width:calc(32 * var(--u));height:calc(32 * var(--u));border-radius:50%;background:#fff;display:grid;place-items:center;font-size:calc(14 * var(--u));font-weight:700;color:#1c1917;box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(60,40,20,.25)}.stage .float{z-index:3}
