/* ===== plus.css : téléphone mis en avant, sélection des jars, observer les produits, iPhone flou ===== */

/* ---------- iPhone ouvert : vrai flou derrière, plus de plateau visible ---------- */
#f.phz{filter:blur(48px) brightness(.3) saturate(1.3)!important;transition:transform .7s cubic-bezier(.65,0,.35,1),filter .6s ease!important}
.phov{background:transparent!important;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s!important}
.phov.on{background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(28,28,36,.72),rgba(0,0,0,.94))!important;-webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3)}
.phov .phx{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}

/* ---------- téléphone sur le plateau (posé exactement sur celui de la photo k0) ---------- */
.trayph{position:absolute;left:31.98%;top:83.94%;width:13.93cqw;height:26.8cqw;transform:translate(-50%,-50%) rotate(52.6deg);border-radius:2.4cqw;z-index:7;pointer-events:none;display:none}
.mode-k0 .trayph{display:block}
.trayph .rim{position:absolute;inset:0;border-radius:2.4cqw;animation:phidle 3.2s ease-in-out infinite}
@keyframes phidle{0%,100%{box-shadow:0 0 0 0 rgba(241,213,138,0)}50%{box-shadow:0 0 0 .25cqw rgba(241,213,138,.5),0 0 3.5cqw rgba(241,213,138,.35)}}
.trayph .ls{position:absolute;inset:.6cqw;border-radius:1.9cqw;overflow:hidden;opacity:0;transition:opacity .35s;background:#000 url("phone/wallpaper.jpg") center/cover}
.trayph .ls::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 40%,rgba(0,0,0,.45))}
.trayph .ls::after{content:"";position:absolute;left:36%;right:36%;top:2.2%;height:3%;border-radius:99px;background:#000}
.trayph .tm{position:absolute;top:11%;left:0;right:0;text-align:center;color:#fff;font:700 4.3cqw/1 -apple-system,"SF Pro Display",Inter,system-ui,sans-serif;letter-spacing:-.03em;text-shadow:0 .2cqw .8cqw rgba(0,0,0,.5)}
.trayph .nt{position:absolute;left:6%;right:6%;top:42%;padding:.7cqw;border-radius:1.3cqw;background:rgba(36,36,40,.7);display:flex;gap:.6cqw;align-items:center}
.trayph .nt i{flex:none;width:2.2cqw;height:2.2cqw;border-radius:.6cqw;background:#30d158}
.trayph .nt span{flex:1;height:.7cqw;border-radius:9px;background:rgba(255,255,255,.55);box-shadow:0 1.1cqw 0 rgba(255,255,255,.3)}
#f.buzz .trayph{animation:buzz .5s linear 3}
#f.buzz .trayph .ls{opacity:1}
#f.buzz .trayph .rim{animation:none;box-shadow:0 0 3cqw rgba(160,185,255,.4)}
@keyframes buzz{0%,100%{transform:translate(-50%,-50%) rotate(52.6deg)}10%{transform:translate(calc(-50% - .4cqw),-50%) rotate(51.4deg)}20%{transform:translate(calc(-50% + .4cqw),-50%) rotate(53.8deg)}30%{transform:translate(calc(-50% - .3cqw),-50%) rotate(51.8deg)}40%{transform:translate(calc(-50% + .3cqw),-50%) rotate(53.4deg)}50%{transform:translate(-50%,-50%) rotate(52.6deg)}}
.phtag{position:absolute;left:31%;top:94.4%;transform:translateX(-50%);z-index:9;white-space:nowrap;background:rgba(0,0,0,.66);color:#fff;border:1px solid rgba(241,213,138,.4);border-radius:999px;padding:1.2cqw 3cqw;font:600 3cqw/1 Inter,system-ui,sans-serif;cursor:pointer;display:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mode-k0 .phtag{display:block}

/* bannière de notification façon iOS */
.ntf{position:absolute;left:5%;right:5%;top:2.4%;z-index:16;display:flex;align-items:center;gap:2.6cqw;padding:2.6cqw 3.2cqw;border-radius:4.6cqw;cursor:pointer;
 background:rgba(30,30,34,.72);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.1);box-shadow:0 2cqw 7cqw rgba(0,0,0,.55);
 color:#fff;font-family:-apple-system,Inter,system-ui,sans-serif;transform:translateY(-140%);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s;pointer-events:none}
.ntf.on{transform:none;opacity:1;pointer-events:auto}
.ntf .ic{flex:none;width:9cqw;height:9cqw;border-radius:2.2cqw;display:grid;place-items:center;font-size:5cqw}
.ntf .tx{flex:1;min-width:0}.ntf .tx b{display:flex;justify-content:space-between;font-size:3.3cqw;font-weight:600}.ntf .tx b small{font-weight:400;color:#bbb;font-size:2.8cqw}
.ntf .tx span{display:block;font-size:3.2cqw;color:#e6e6e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.5cqw}

/* ---------- téléphone posé sur le bureau (scène PC) : découpé de l'image retouchée ---------- */
.deskph{position:absolute;left:2.348%;top:73.421%;width:25.827%;height:15.137%;z-index:3;cursor:pointer;background:url("img/desk_phone.png") 0 0/100% 100% no-repeat;transition:opacity .8s}
.deskph .scrn{position:absolute;left:0;top:0;width:200px;height:430px;transform-origin:0 0;opacity:0;transition:opacity .4s;border-radius:30px;overflow:hidden;
 background:#000 url("phone/wallpaper.jpg") center/cover;box-shadow:0 0 70px 10px rgba(150,175,255,.45);pointer-events:none}
.deskph .scrn::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 40%,rgba(0,0,0,.45))}
.deskph .scrn b{position:absolute;left:0;right:0;top:11%;text-align:center;color:#fff;font:700 52px/1 -apple-system,"SF Pro Display",Inter,system-ui,sans-serif;letter-spacing:-.03em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.deskph .scrn i{position:absolute;left:7%;right:7%;top:38%;height:11%;border-radius:16px;background:rgba(36,36,40,.72)}
.deskph.lit .scrn{opacity:.88}
.deskph.lit{animation:dbuzz .45s linear 3}
@keyframes dbuzz{0%,100%{translate:0 0}25%{translate:-.35cqw 0}75%{translate:.35cqw 0}}
.sc.arriving .deskph{opacity:0;pointer-events:none}
/* ---------- sélection des jars ---------- */
.spot{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .35s;
 background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(0,0,0,0) 0,rgba(0,0,0,0) var(--r,10cqw),rgba(0,0,0,.6) calc(var(--r,10cqw)*2.2))}
.mode-k0 .spot.on{opacity:1}
.hs[data-j]::before{content:"";position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,rgba(255,236,180,.22),rgba(255,236,180,0) 70%);opacity:0;transition:opacity .3s,transform .3s;transform:scale(.8);pointer-events:none}
.hs[data-j]:hover::before{opacity:1;transform:scale(1)}
.flashz{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,240,200,.55),rgba(255,240,200,0) 45%);mix-blend-mode:screen}

/* fiche produit animée */
.jar .jt b i.ch{font-style:normal;display:inline-block;opacity:0;transform:translateY(60%) rotate(6deg)}
.mode-jar .jar .jt b i.ch{animation:chIn .55s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i)*28ms + 120ms)}
@keyframes chIn{to{opacity:1;transform:none}}
.mode-jar .jar .jt span,.mode-jar .jar .jt small{animation:up .6s cubic-bezier(.16,1,.3,1) both .35s}
.mode-jar .jar .jb>*{animation:up .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k,0)*70ms + .45s)}
@keyframes up{from{opacity:0;transform:translateY(3cqw)}}

/* ---------- Observer le produit ---------- */
.obsv{position:absolute;inset:0;z-index:45;display:none;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background:rgba(0,0,0,0);transition:background .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s;touch-action:none}
.obsv.show{display:block}
.obsv.on{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.obsv .ring{position:absolute;left:50%;top:44%;width:88cqw;height:88cqw;transform:translate(-50%,-50%) scale(.6);opacity:0;border-radius:50%;overflow:hidden;
 box-shadow:0 0 0 1.6cqw #121212,0 0 0 2.2cqw #3a3a3c,0 3cqw 12cqw rgba(0,0,0,.8);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s;cursor:grab;background:#000}
.obsv.on .ring{transform:translate(-50%,-50%);opacity:1}
.obsv .ring:active{cursor:grabbing}
.obsv .im{position:absolute;inset:0;background-size:cover;background-position:center;transform-origin:50% 50%;will-change:transform}
.obsv .glare{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.22),rgba(255,255,255,0) 32%),radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.55) 100%)}
.obsv .lid{position:absolute;inset:0;border-radius:50%;pointer-events:none;display:grid;place-items:center;
 background:radial-gradient(circle at 40% 32%,#3a3a3a,#141414 55%,#060606 100%);box-shadow:inset 0 0 0 2cqw #1d1d1d,inset 0 0 0 2.5cqw rgba(214,177,92,.55),inset 0 0 4cqw #000}
.obsv .lid span{font:italic 700 15cqw/1 Georgia,"Times New Roman",serif;color:#d6b15c;text-shadow:0 .4cqw 1cqw #000;letter-spacing:-.04em}
.obsv .lid small{position:absolute;bottom:24%;left:0;right:0;text-align:center;font:600 3.2cqw/1 Georgia,serif;color:#d6b15c;letter-spacing:.06em}
.obsv.open .lid{animation:lidOff 1.05s cubic-bezier(.6,0,.3,1) forwards .25s}
@keyframes lidOff{0%{transform:none}30%{transform:rotate(-28deg)}100%{transform:translate(70%,-95%) rotate(-140deg) scale(.9);opacity:0}}
.obsv .ot{position:absolute;left:0;right:0;top:6%;text-align:center;text-shadow:0 2px 14px #000;opacity:0;transform:translateY(-2cqw);transition:opacity .5s .3s,transform .5s .3s}
.obsv.on .ot{opacity:1;transform:none}
.obsv .ot b{display:block;font-size:6.6cqw;color:#f1d58a}.obsv .ot span{display:inline-block;margin-top:1.4cqw;font-size:3.3cqw;background:#000a;border-radius:999px;padding:1cqw 3cqw}
.obsv .oh{position:absolute;left:0;right:0;top:79%;text-align:center;font-size:3.1cqw;color:#cfc8b6;opacity:0;transition:opacity .5s 1s}
.obsv.on .oh{opacity:1}
.obsv .ox{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);white-space:nowrap}
.obsv .zm{position:absolute;right:4%;top:58%;display:flex;flex-direction:column;gap:1.6cqw}
.obsv .zm button{width:9cqw;height:9cqw;border-radius:50%;border:1px solid #ffffff30;background:rgba(20,20,20,.75);color:#fff;font:600 5cqw/1 Inter,system-ui,sans-serif;cursor:pointer}


/* ---------- balance : écran posé sur la vraie zone d'affichage, visible seulement quand rien ne passe devant ---------- */
#lcd{left:39.2%!important;top:70.75%!important;width:9.2cqw!important;height:3.1cqw!important;transform:translate(-50%,-50%) rotate(14.5deg)!important;border-radius:.3cqw!important;
 background:linear-gradient(175deg,rgba(18,30,34,.92),rgba(8,14,16,.95))!important;box-shadow:inset 0 0 .4cqw rgba(0,0,0,.8),0 0 .9cqw rgba(110,200,255,.10)!important;
 color:#9fd8ff!important;text-shadow:0 0 .5cqw rgba(120,200,255,.55)!important;opacity:0!important;transition:opacity .35s!important}
#lcd.on2{opacity:.92!important}
#lcd small{display:none!important}
#lcd b{font-size:2.3cqw!important;letter-spacing:.06em!important;line-height:1}
#lcd b i{font-size:1.3cqw!important}

/* noir de transition avant les vidéos des weeds */
.blk2{position:absolute;inset:0;z-index:44;background:#000;opacity:0;pointer-events:none;transition:opacity .55s ease}
.blk2.on{opacity:1;pointer-events:auto}

/* le joint reste bien visible devant l'écran : rien */

#f.hxroll .jar{opacity:0!important;transition:opacity .3s!important;pointer-events:none!important}
.blk2{transition:opacity .6s ease!important}

/* Ledger allumée sur le bureau */
.deskled{position:absolute;left:0;top:0;width:300px;height:60px;transform-origin:0 0;z-index:3;pointer-events:none;transition:opacity .25s}
.deskled .scr{position:absolute;inset:6px 70px 6px 14px;border-radius:4px;background:#030405;overflow:hidden;display:flex;align-items:center;justify-content:center;
 box-shadow:0 0 10px 2px rgba(190,220,255,.55),inset 0 0 6px rgba(150,200,255,.35);animation:ledpulse 2.6s ease-in-out infinite}
.deskled .scr span{font:700 26px/1 "Share Tech Mono",ui-monospace,monospace;letter-spacing:.08em;color:#f2f6ff;text-shadow:0 0 6px rgba(200,225,255,.95),0 0 14px rgba(160,200,255,.7)}
.deskled .scr i{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);transform:translateX(-120%);animation:ledsheen 4.2s ease-in-out infinite 1s}
.deskhalo{position:absolute;left:79%;top:60.8%;width:11%;height:3.6%;z-index:3;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,rgba(185,215,255,.3),rgba(185,215,255,0) 68%);mix-blend-mode:screen;animation:ledhalo 2.6s ease-in-out infinite;transition:opacity .25s}
.deskled.hov .scr{box-shadow:0 0 16px 5px rgba(200,228,255,.8),inset 0 0 8px rgba(160,210,255,.5)}.deskhalo.hov{opacity:1!important;filter:brightness(1.5)}
.deskled.off,.deskhalo.off{opacity:0!important}
@keyframes ledpulse{50%{box-shadow:0 0 16px 4px rgba(190,220,255,.8),inset 0 0 8px rgba(150,200,255,.5)}}
@keyframes ledhalo{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes ledsheen{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.deskled .scr,.deskhalo,.deskled .scr i{animation:none}}

/* ===== mobile ===== */
html,body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.phov .phx{bottom:max(14px,env(safe-area-inset-bottom))!important}
.x{top:max(16px,env(safe-area-inset-top))!important;right:max(16px,env(safe-area-inset-right))!important}
.rothint{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:52;display:none;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(18,18,18,.82);border:1px solid rgba(255,255,255,.16);color:#fff;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rothint i{display:inline-block;font-style:normal;font-size:17px;animation:rotph 2.2s ease-in-out infinite}
@keyframes rotph{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (max-width:700px) and (orientation:portrait){
 .box:not(.lg){--bw:min(calc(100vw - 20px),calc((100vh - 140px)*.5625));--bw:min(calc(100vw - 20px),calc((100dvh - 140px)*.5625));width:var(--bw)!important;height:calc(var(--bw)*16/9)!important;aspect-ratio:auto!important}
 .box:not(.lg)>iframe{position:absolute;left:50%;top:50%;width:calc(var(--bw)*16/9)!important;height:var(--bw)!important;transform:translate(-50%,-50%) rotate(90deg)}
 .ov.on .box:not(.lg)~.rothint,.ov.on .rothint.pc{display:flex;animation:rothf 4.5s ease forwards}
 .box.lg{height:min(88vh,700px)!important}
}
@keyframes rothf{0%{opacity:0}10%,75%{opacity:1}100%{opacity:0}}