:root{--bg:#faf8ff;--card:#fff;--card2:#eaedff;--tx:#131b2e;--tx2:#3f4850;--pri:#0284c7;--pri2:#1e40af;--cy:#06b6d4;--ok:#10b981;--warn:#f59e0b;--err:#ba1a1a;--ln:#dae2fd;--sh:0 8px 28px rgba(19,27,46,.08);--r:1.5rem}
:root[data-theme=dark]{--bg:#0f172a;--card:#1e293b;--card2:#26334d;--tx:#f1f5f9;--tx2:#b6c2d4;--pri:#38bdf8;--ln:#334155;--sh:0 8px 28px rgba(0,0,0,.35)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f172a;--card:#1e293b;--card2:#26334d;--tx:#f1f5f9;--tx2:#b6c2d4;--pri:#38bdf8;--ln:#334155;--sh:0 8px 28px rgba(0,0,0,.35)}}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:clamp(14px,2.6vw,16px);overflow:hidden;transition:background .3s,color .3s}
#app{height:100dvh;position:relative;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img{max-width:100%}
.view{position:absolute;inset:0;display:flex;flex-direction:column;animation:in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.wrap{width:100%;max-width:560px;margin:0 auto}
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem;border-radius:999px;background:linear-gradient(135deg,var(--pri2),var(--pri));color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(2,132,199,.3);transition:transform .15s,opacity .2s}
.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.6}
.btn.ghost{background:var(--card2);color:var(--pri);box-shadow:none}
.link{color:var(--pri);font-weight:600;font-size:.9em;padding:.5rem}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:1.25rem}
h1{font-size:clamp(1.5rem,6vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.mut{color:var(--tx2)}
/* slides */
.slides{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:1rem;max-width:560px;margin:0 auto;width:100%;min-height:0}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r)}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;text-align:center;padding:1.5rem 1rem}
.slide svg{width:min(46vw,40dvh,200px);height:auto;margin-bottom:1rem}
.slide p{margin-top:.6rem;max-width:34ch;margin-inline:auto}
.dots{display:flex;gap:.4rem;justify-content:center}.dots i{width:8px;height:8px;border-radius:9px;background:var(--ln);transition:all .3s}.dots i.on{width:26px;background:var(--pri)}
.brand{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;font-weight:800}.brand img{width:40px;height:40px;object-fit:contain}
/* forms */
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--card2);border-radius:999px;padding:.25rem;margin-bottom:1.2rem}
.seg button{padding:.7rem;border-radius:999px;font-weight:700;color:var(--tx2);transition:all .25s}.seg .on{background:var(--card);color:var(--pri);box-shadow:var(--sh)}
.fld{display:block;margin-bottom:.9rem}.fld span{display:block;font-size:.8em;font-weight:600;margin-bottom:.3rem}
.fld input{width:100%;padding:.9rem 1rem;border-radius:1rem;border:2px solid transparent;background:var(--card2);outline:0;transition:border .2s}
.fld input:focus{border-color:var(--pri)}.row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pin{letter-spacing:.7em;text-align:center;font-weight:800;font-size:1.3em}
.ph{display:flex;gap:.5rem}.ph b{padding:.9rem .8rem;border-radius:1rem;background:var(--card2)}.ph input{flex:1}
/* shell */
.shell{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr}
.top{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.nav{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);box-shadow:0 -4px 20px rgba(19,27,46,.07);padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom))}
.nav button{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem;font-size:.7em;font-weight:600;color:var(--tx2);border-radius:1rem;transition:all .25s;position:relative}
.nav button.on{color:var(--pri);background:var(--card2)}.nav svg{width:24px;height:24px;transition:transform .3s}.nav .on svg{transform:translateY(-2px) scale(1.1)}
.stage{position:relative;overflow:hidden}
.tab{position:absolute;inset:0;overflow:auto;padding:1rem;opacity:0;transform:translateX(28px);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.tab.before{transform:translateX(-28px)}.tab.on{opacity:1;transform:none;pointer-events:auto}
.ico{width:42px;height:42px;border-radius:50%;background:var(--card2);display:grid;place-items:center;color:var(--pri)}
.clock{display:inline-block;background:var(--card2);padding:.35rem .8rem;border-radius:999px;font-size:.8em;font-variant-numeric:tabular-nums;margin-top:.6rem}
/* large / foldable / square / landscape-short : menu latéral */
@media(min-width:820px),(orientation:landscape) and (max-height:520px){
 .shell{grid-template-rows:auto 1fr;grid-template-columns:92px 1fr}
 .top{grid-column:2}.nav{grid-row:1/3;grid-column:1;grid-template-columns:1fr;align-content:center;gap:.4rem;box-shadow:4px 0 20px rgba(19,27,46,.07);padding:.5rem}
 .stage{grid-column:2}.tab>.wrap{max-width:760px}}
@media(max-width:340px){.row{grid-template-columns:1fr}.nav button{font-size:.62em;padding:.4rem .1rem}}
@media(max-aspect-ratio:5/4) and (min-aspect-ratio:4/5) and (min-width:400px){.slide svg{width:min(30vw,28dvh,160px)}}
/* toasts */
#toasts{position:fixed;left:0;right:0;top:calc(.7rem + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:99;pointer-events:none;padding:0 1rem}
.toast{pointer-events:auto;display:flex;align-items:center;gap:.7rem;max-width:480px;background:var(--tx);color:var(--bg);padding:.8rem 1rem;border-radius:1rem;box-shadow:var(--sh);font-size:.9em;font-weight:600;animation:in .35s;border-left:5px solid var(--pri)}
.toast.ok{border-color:var(--ok)}.toast.err{border-color:var(--err)}.toast.warn{border-color:var(--warn)}.toast button{color:var(--cy);font-weight:800}
.toast.out{opacity:0;transform:translateY(-10px);transition:all .3s}
/* install */
.inst{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.2rem + env(safe-area-inset-bottom));width:min(92vw,460px);z-index:60;display:flex;gap:.8rem;align-items:center;animation:in .45s}
@media(min-width:820px){.inst{left:calc(50% + 46px);bottom:1.5rem}}
.inst img{width:46px;height:46px}.inst .x{margin-left:auto;font-size:1.4em;color:var(--tx2)}
/* preloader */
.pre{align-items:center;justify-content:center;text-align:center;gap:1.2rem;padding:2rem}
.pre img{width:min(40vw,34dvh,170px);animation:float 2.4s ease-in-out infinite}@keyframes float{50%{transform:translateY(-10px)}}
.bar{width:min(70vw,320px);height:8px;background:var(--card2);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pri),var(--cy));transition:width 10s linear}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* bouteilles */
.chips{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin:1rem 0 .8rem;padding-bottom:.2rem}.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;padding:.6rem 1rem;border-radius:1rem;background:var(--card2);font-weight:700;color:var(--tx2);transition:all .25s;text-align:left}.chips button small{display:block;font-weight:600;opacity:.8;font-size:.7em}
.chips .on{background:var(--pri);color:#fff}.chips .add{background:transparent;border:2px dashed var(--ln);color:var(--pri)}
.pages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:1rem;margin:0 -.2rem}.pages::-webkit-scrollbar{display:none}
.pgc{flex:0 0 100%;scroll-snap-align:center;padding:.2rem}
.bh{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.8rem}
.pill{font-size:.65em;font-weight:800;letter-spacing:.05em;padding:.35rem .7rem;border-radius:999px;background:var(--card2);color:var(--pri)}
.pill.ok{background:rgba(16,185,129,.15);color:var(--ok)}.pill.warn{background:rgba(245,158,11,.18);color:#b45309}.pill.err{background:rgba(186,26,26,.14);color:var(--err)}
.bt{display:grid;grid-template-columns:minmax(120px,1fr) 1fr;gap:1rem;align-items:end}
.wrap2{position:relative;justify-self:center;height:calc(min(36dvh,300px)*var(--hh))}.wrap2 img{height:100%;width:auto;display:block}
.wrap2 .bg{filter:grayscale(1) opacity(.22)}.wrap2 .fl{position:absolute;left:0;top:0;transition:clip-path 1.4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.pc{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);color:#0f172a;font-weight:800;padding:.2rem .7rem;border-radius:999px;box-shadow:var(--sh)}
.inf{display:flex;flex-direction:column;gap:.35rem;align-self:center}.big{font-size:clamp(1.5rem,6vw,2rem);font-weight:800;line-height:1}
.chip{align-self:flex-start;margin-top:.3rem;padding:.4rem .8rem;border-radius:999px;background:var(--card2);color:var(--pri);font-weight:700;font-size:.8em}
.acts{display:grid;gap:.6rem;margin-top:1rem}
.note{width:100%;text-align:left;margin-top:1rem;padding:.8rem 1rem;border-radius:1rem;background:rgba(245,158,11,.15);color:var(--tx);font-weight:600;font-size:.88em}
.tips{margin:.6rem 0 1rem 1.1rem;color:var(--tx2);font-size:.9em;display:grid;gap:.4rem}.btn.leak{background:linear-gradient(135deg,#991b1b,#dc2626);box-shadow:0 8px 20px rgba(220,38,38,.3)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}.stats div{background:var(--card);border-radius:1rem;padding:.9rem;box-shadow:var(--sh);text-align:center}.stats b{display:block;font-size:1.5em}.stats small{color:var(--tx2)}
.hi{margin-top:.8rem}.nf{margin-top:.8rem}.nf.w{border-left:5px solid var(--warn)}.nd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pri)}
.nav button.dot::after{content:"";position:absolute;top:.4rem;right:32%;width:9px;height:9px;border-radius:50%;background:var(--err)}
/* feuille modale */
.ov{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:80;display:flex;align-items:flex-end;justify-content:center;animation:fade .25s}.ov.out{opacity:0;transition:opacity .25s}@keyframes fade{from{opacity:0}}
.sh{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--bg);border-radius:var(--r) var(--r) 0 0;padding:.6rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));animation:up .4s cubic-bezier(.2,.8,.2,1)}@keyframes up{from{transform:translateY(100%)}}
@media(min-width:820px),(max-height:520px){.ov{align-items:center}.sh{border-radius:var(--r)}}
.grip{display:block;width:44px;height:5px;border-radius:9px;background:var(--ln);margin:.2rem auto 1rem}.sh h2{font-size:1.15rem;font-weight:800;margin-bottom:.4rem}
.opt{display:block;width:100%;text-align:left;padding:1rem;margin-bottom:.6rem;border-radius:1rem;background:var(--card);box-shadow:var(--sh);border:2px solid transparent}.opt:active,.opt:hover{border-color:var(--pri)}.opt small{display:block;color:var(--tx2)}
.tp{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.8rem 0 1rem}.tp button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.2rem;padding:.7rem .3rem;border-radius:1rem;background:var(--card2);border:2px solid transparent;transition:all .25s}.tp button.on{border-color:var(--pri);background:var(--card)}.tp img{width:auto;max-width:90%}.tp small{font-size:.65em;color:var(--tx2);text-align:center}
.tg{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;border-radius:1rem;background:var(--card2);margin-bottom:.9rem}.tg small{display:block}.tg input{width:46px;height:26px;accent-color:var(--pri)}
.pv{padding:.8rem 1rem;border-radius:1rem;background:var(--card2);color:var(--pri)}
.lk{margin:.8rem 0 .8rem 1.2rem;display:grid;gap:.6rem}
.stp{list-style:none;color:var(--ok);font-size:.85em;font-weight:600;display:grid;gap:.2rem;text-align:left}
@media(max-width:380px){.bt{grid-template-columns:1fr}.inf{align-items:center;text-align:center}.chip{align-self:center}}
.av{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.av img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:var(--sh)}
.sel{width:100%;padding:.9rem 1rem;border-radius:1rem;border:2px solid transparent;background:var(--card2);outline:0}