/* Polices embarquées : rendu identique sur tous les appareils et navigateurs (Newsreader & Inter, SIL OFL 1.1) */ @font-face{font-family:"Serenity Serif";src:url("../fonts/newsreader.woff2?v=4f641758a0") format("woff2");font-weight:200 800;font-style:normal;font-display:block;ascent-override:92%;descent-override:22%;line-gap-override:0%} @font-face{font-family:"Serenity Sans";src:url("../fonts/inter.woff2?v=bc7c909f2d") format("woff2");font-weight:100 900;font-style:normal;font-display:block} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} *{-webkit-tap-highlight-color:transparent} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} :root{color-scheme:only dark} #ntAsk{position:absolute;z-index:7;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translate(-50%,-14px);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;padding:10px 10px 10px 12px;border-radius:20px;border:1px solid rgba(255,213,138,.42);background:rgba(10,22,30,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#f3f7f2;box-shadow:0 12px 32px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)} #ntAsk.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} #ntAsk .tk{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,213,138,.14);color:#ffd58a} #ntAsk p{margin:0;font-size:12.5px;line-height:1.35;opacity:.92}#ntAsk p b{display:block;font-size:14px;font-weight:600;opacity:1} #ntAsk .bt{display:flex;align-items:center;gap:4px;flex:none} #ntAsk button{height:34px;padding:0 15px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid rgba(255,213,138,.55);background:rgba(255,213,138,.16);color:#ffe7b8} #ntAsk button.no{border-color:transparent;background:none;color:rgba(243,247,242,.6);padding:0 8px;font-weight:500} #ntAsk button:focus-visible{outline:2px solid #ffd58a;outline-offset:2px} @media(max-width:380px){#ntAsk p{font-size:12px}#ntAsk button{padding:0 12px}} /* ===== mini-lecteurs intégrés au sélecteur de section ===== */ #top #mode{transition:width .62s cubic-bezier(.3,1.18,.5,1)}#top #mode.still{transition:none} #top #mode button>svg{transition:transform .62s cubic-bezier(.3,1.18,.5,1),opacity .3s ease} #top #mode .lv{position:absolute;left:0;top:0;bottom:0;width:var(--cw,44px);display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;padding:0 2px;font-style:normal;opacity:0;transform:scale(.5);pointer-events:none; transition:opacity .25s ease,transform .5s cubic-bezier(.3,1.4,.5,1),width .62s cubic-bezier(.3,1.18,.5,1)} #top #mode button.live[aria-selected=false] .lv{opacity:1;transform:none;transition-delay:.1s,.1s,0s} #top #mode button.live[aria-selected=false]>svg{opacity:0;transform:scale(.4)} #top #mode .lv b{font-weight:600;font-size:12px;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:#eefbff;max-width:46px;overflow:hidden;white-space:nowrap;transition:max-width .5s cubic-bezier(.3,1.18,.5,1),opacity .3s,margin .5s} #top #mode button.cpt .lv b{max-width:0;opacity:0;margin-left:-6px} #top #mode .lo,#top #mode .lr{position:relative;flex:none;width:22px;height:22px;border-radius:50%} #top #mode .lo::before,#top #mode .lr::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--rc) calc(var(--p,0)*1turn),var(--rt) 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.3px),#000 calc(100% - 2px))} #top #mode .lo{--rc:rgba(214,243,255,.8);--rt:rgba(214,243,255,.13)} #top #mode .lo::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--pc,#7ee8fa);box-shadow:0 0 9px var(--pc,#7ee8fa);transform:scale(calc(.42 + var(--bs,0)*.72));transition:background .8s,box-shadow .8s,opacity .4s} #top #mode button.pz .lo::after{opacity:.4;box-shadow:none} #top #mode .lr{--rc:#ffd58a;--rt:rgba(255,213,138,.16);display:grid;place-items:center;color:#ffd58a} #top #mode .lr svg{grid-area:1/1;width:12px;height:12px;transform:none!important;transition:opacity .3s} #top #mode .lr .cup{opacity:0}#top #mode button.brk .lr .sp{opacity:0}#top #mode button.brk .lr .cup{opacity:1} #top #mode button.brk .lr{--rc:#bcd2ff;--rt:rgba(188,210,255,.16);color:#bcd2ff} #top #mode button.pz .lr{opacity:.6}#top #mode button.pz .lv b{animation:lvBl 1.6s ease-in-out infinite} @keyframes lvBl{50%{opacity:.35}} #top #mode .leq{display:flex;align-items:flex-end;gap:2.5px;height:16px;flex:none} #top #mode .leq u{display:block;width:3px;height:30%;border-radius:2px;background:#9ff0a8;transition:height .1s linear} #top #mode button.pz .leq u{height:24%!important;opacity:.5} #top #mode button[data-m=relax].live:not(.cpt) .lv{justify-content:flex-start;padding-left:14px} #lvPP{position:absolute;z-index:3;top:9px;left:4px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(159,240,168,.15);color:#dcffe2;cursor:pointer;opacity:0;pointer-events:none; transition:opacity .25s ease,transform .62s cubic-bezier(.3,1.18,.5,1),background .2s} #lvPP.on{opacity:1;pointer-events:auto;transition-delay:.18s,0s,0s} #lvPP:hover{background:rgba(159,240,168,.28)}#lvPP:focus-visible{outline:2px solid #9ff0a8;outline-offset:1px} #top #mode.still #lvPP{transition:none} @media(prefers-reduced-motion:reduce){#top #mode button.pz .lv b{animation:none}} .gqg{display:flex;gap:8px}.gqg>div{flex:1 1 0;min-width:0}.gqg>div[hidden]{display:none} .gq{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:11px 10px 10px 11px;box-sizing:border-box;border-radius:16px;border:1px solid rgba(120,220,255,.16);background:rgba(80,200,255,.06);color:#d6f3ff;font:inherit;text-align:left;cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s} .gq svg{opacity:.8;margin-bottom:3px}.gq b{max-width:100%;font-size:clamp(11.5px,3.2vw,13px);font-weight:600;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.gq small{max-width:100%;font-size:11px;opacity:.6;line-height:1.25;overflow-wrap:anywhere} @media(max-width:400px){.gqg{gap:6px}.gq{padding:10px 8px 9px 9px}.gq::after{right:8px}.gq::before{right:22px}} .gq::after{content:"";position:absolute;top:12px;right:10px;width:26px;height:15px;border-radius:999px;background:rgba(214,243,255,.14);box-shadow:inset 0 0 0 1px rgba(214,243,255,.22);transition:background .3s} .gq::before{content:"";position:absolute;z-index:1;top:15.5px;right:24px;width:8px;height:8px;border-radius:50%;background:#d6f3ff;transition:transform .35s cubic-bezier(.3,1.5,.5,1),background .3s} .gq[aria-checked=true]{border-color:rgba(126,232,250,.55);background:rgba(126,232,250,.11);box-shadow:0 0 18px rgba(126,232,250,.1)} .gq[aria-checked=true]::after{background:#7ee8fa;box-shadow:none}.gq[aria-checked=true]::before{transform:translateX(11px);background:#06222e} .gq:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} .gqh{margin:8px 2px 0;font-size:12px;line-height:1.35;color:#ffcfbf}.gqh:empty{display:none} @media(max-width:370px){.gq small{display:none}} .sico circle{stroke-width:1.7;transition:transform .55s cubic-bezier(.3,1.5,.5,1)} .sico .k1{transform:translateX(0)}.sico .k2{transition-delay:.04s}.sico .k3{transition-delay:.08s} #setBtn:hover .sico .k1,#setBtn.on .sico .k1{transform:translateX(-6px)} #setBtn:hover .sico .k2,#setBtn.on .sico .k2{transform:translateX(6px)} #setBtn:hover .sico .k3,#setBtn.on .sico .k3{transform:translateX(-3px)} #setBtn.on{color:#fff;border-color:rgba(160,240,255,.7)} /* Détente : minuterie juste sous le volume (plus besoin de défiler) */ #rxBody>.rx-tm{margin-top:0;margin-bottom:14px} /* ===== paramètres : ouverture fluide ===== */ #settings.op{animation:setIn .7s cubic-bezier(.2,.9,.22,1) backwards} @keyframes setIn{0%{clip-path:circle(20px at var(--ox,24px) var(--oy,24px));transform:translateY(-4px) scale(.94);opacity:.35}45%{opacity:1}100%{clip-path:circle(160% at var(--ox,24px) var(--oy,24px));transform:none;opacity:1}} #settings.cl{animation:setOut .33s cubic-bezier(.5,0,.75,.2) forwards} @keyframes setOut{0%{clip-path:circle(160% at var(--ox,24px) var(--oy,24px))}100%{clip-path:circle(18px at var(--ox,24px) var(--oy,24px));transform:scale(.95);opacity:0}} #settings::backdrop{animation:bdIn .5s ease both}#settings.cl::backdrop{animation:bdOut .33s ease both} @keyframes bdIn{from{opacity:0}}@keyframes bdOut{to{opacity:0}} #settings.op .dh,#settings.op .sgen>h3,#settings.op .gqg>div,#settings.op .gqh,#settings.op .stabs,#settings.op .spn:not([hidden]){animation:setUp .6s cubic-bezier(.2,.85,.25,1) backwards} #settings.op .dh{animation-delay:.1s}#settings.op .sgen>h3{animation-delay:.16s} #settings.op .gqg>div:nth-child(1){animation-delay:.2s}#settings.op .gqg>div:nth-child(2){animation-delay:.25s}#settings.op .gqg>div:nth-child(3){animation-delay:.3s} #settings.op .gqh{animation-delay:.32s}#settings.op .stabs{animation-delay:.34s}#settings.op .spn:not([hidden]){animation-delay:.42s} @keyframes setUp{from{opacity:0;transform:translateY(14px) scale(.98)}} #settings.op .stabs .si{animation:siIn .7s cubic-bezier(.3,1.3,.5,1) .5s backwards}@keyframes siIn{from{opacity:0;scale:.6}} #settings.op .gq[aria-checked=true]::before{animation:knob .5s cubic-bezier(.3,1.5,.5,1) .45s backwards}@keyframes knob{from{transform:none}} @media(prefers-reduced-motion:reduce){#settings.op,#settings.cl,#settings.op *{animation:none!important}} .tgrow.dat{grid-template-columns:auto minmax(0,1fr)}.datb{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.datb .chip{height:36px;padding:0 16px} #upd{position:fixed;z-index:55;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translate(-50%,-14px);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;padding:8px 8px 8px 14px;border-radius:999px;border:1px solid rgba(126,232,250,.5);background:#06121c;color:#e8fbff;box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)} #upd span{white-space:nowrap}#upd.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}#upd i{width:8px;height:8px;border-radius:50%;background:#7ee8fa;box-shadow:0 0 10px #7ee8fa;flex:none} #upd button{height:32px;padding:0 14px;border-radius:999px;border:1px solid rgba(126,232,250,.7);background:#06121c;color:#e8fbff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}#upd button.x{border:0;padding:0 8px;color:#9fb8c4;font-weight:400} /* ===== paramètres : onglets par section ===== */ #settings{height:min(82vh,700px)} .stabs{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin:20px 0 4px;border-radius:999px;border:1px solid rgba(120,220,255,.22);background:rgba(7,20,31,.94);box-shadow:0 8px 18px rgba(10,26,40,.9)} .stabs button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 6px;border:0;border-radius:999px;background:none;color:rgba(214,243,255,.6);font:inherit;font-size:14px;cursor:pointer;transition:color .35s} .stabs button[aria-selected=true]{color:#fff}.stabs button:focus-visible{outline:2px solid #9ff0ff;outline-offset:1px} .stabs .si{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 16px)/3);border-radius:999px;transition:transform .55s cubic-bezier(.3,1.2,.5,1),background .45s,box-shadow .45s; background:rgba(126,232,250,.17);box-shadow:inset 0 0 0 1px rgba(160,240,255,.6),0 0 16px rgba(126,232,250,.22)} .stabs[data-s=focus] .si{transform:translateX(calc(100% + 4px));background:rgba(255,213,138,.15);box-shadow:inset 0 0 0 1px rgba(255,230,180,.6),0 0 16px rgba(255,213,138,.2)} .stabs[data-s=relax] .si{transform:translateX(calc(200% + 8px));background:rgba(159,240,168,.14);box-shadow:inset 0 0 0 1px rgba(190,255,200,.55),0 0 16px rgba(159,240,168,.2)} .spn.in{animation:spnIn .4s cubic-bezier(.2,.8,.2,1)}@keyframes spnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #settings[data-s=focus] #sp-focus .sh{color:#ffd58a}#settings[data-s=relax] #sp-relax .sh{color:#9ff0a8} #sp-focus .fcr{margin-top:10px}#sp-focus .ftg{margin-top:8px} .sgen .tg-h{margin-top:14px} .racts{display:flex;justify-content:center;margin-top:14px} /* sections hors écran : leurs animations décoratives en boucle sont mises en pause (reprise instantanée au retour) */ #app:not(.relax) #relax,#app:not(.relax) #relax *,#app:not(.focus) #focus,#app:not(.focus) #focus *,#app.relax #ui *,#app.focus #ui *{animation-play-state:paused!important} /* Thème sombre déclaré explicitement (meta + propriété + requêtes média) : les navigateurs à « mode sombre forcé » (Chrome/Edge/Opera Android, Samsung Internet…) reconnaissent un site déjà sombre et n’altèrent plus ses couleurs. */ @media (prefers-color-scheme:dark){:root{color-scheme:only dark}html,body{background-color:#050e17;color:#d6f3ff}} @media (prefers-color-scheme:light){:root{color-scheme:only dark}html,body{background-color:#050e17;color:#d6f3ff}} html,body{margin:0;height:100%;background:#050e17;overflow:hidden;color:#d6f3ff;font-family:"Serenity Sans",system-ui,-apple-system,"Segoe UI",sans-serif} #app{position:relative;width:100%;height:100%;background:radial-gradient(ellipse at 50% 38%,#08192a 0%,#050e17 74%)} canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab} canvas:active{cursor:grabbing} #ui{position:absolute;left:0;right:0;bottom:0;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none;background:linear-gradient(to top,rgba(5,14,23,.9) 0%,rgba(5,14,23,.55) 60%,rgba(5,14,23,0) 100%)} [hidden]{display:none!important} #row{max-width:560px;margin:0 auto 14px} .rg{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px} .side{display:flex;align-items:center;gap:8px} .side.l{justify-self:start}.side.r{justify-self:end} .chip{box-sizing:border-box;min-height:34px;border:1px solid rgba(120,220,255,.5);border-radius:999px;background:rgba(80,200,255,.08);color:#d6f3ff;font:inherit;font-size:16px;font-variant-numeric:tabular-nums;padding:6px 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px} button.chip{pointer-events:auto;cursor:pointer} button.chip:hover{background:rgba(80,200,255,.2)} button.chip:focus-visible,.opt:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} .ic{width:34px;padding:0} .play{width:56px;height:56px;min-height:56px;padding:0;border-color:rgba(160,240,255,.8);background:rgba(80,200,255,.22)} #dirBtn{justify-self:end;min-width:78px} #rgt{justify-self:start} #durWrap{position:relative} .chip.on{background:rgba(80,200,255,.28);border-color:rgba(160,240,255,.8)} .opt{white-space:nowrap;font:inherit;font-size:15px;color:#d6f3ff;background:none;border:0;border-radius:10px;padding:8px 12px;text-align:left;cursor:pointer} .opt:hover,.opt.on{background:rgba(80,200,255,.22)} #phase{text-align:center;font-family:"Serenity Serif",Georgia,serif;font-size:clamp(20px,6vw,42px);font-weight:400;letter-spacing:.02em;text-shadow:0 0 22px rgba(80,225,255,.55)} @media(max-width:420px){.chip{font-size:13px;padding:5px 8px}.ic{width:30px}.rg{gap:6px}.side{gap:6px}#setup{gap:8px}} #credit{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:10px;font-size:11px;opacity:.45} #credit a{color:inherit} .pr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;max-width:560px;margin:0 auto} @media(max-width:420px){.pr{gap:6px}} .dd{position:relative;min-width:0} .dd>button{width:100%} .dbtn{justify-content:space-between;gap:8px} .dbtn svg{flex:none} .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ddm{position:absolute;left:0;bottom:calc(100% + 8px);z-index:5;display:flex;flex-direction:column;width:max-content;min-width:max(100%,112px);max-width:calc(100vw - 32px);max-height:min(50vh,340px);overflow-y:auto;padding:6px;border:1px solid rgba(120,220,255,.4);border-radius:16px;background:rgba(8,24,38,.96);pointer-events:auto} .ddm.r{left:auto;right:0} dialog{pointer-events:auto;box-sizing:border-box;width:min(560px,calc(100% - 32px));max-height:min(82vh,700px);padding:0;border:1px solid rgba(120,220,255,.45);border-radius:20px;background:#0a1a28;color:#d6f3ff;overflow:hidden} dialog[open]{display:flex;flex-direction:column} dialog::backdrop{background:rgba(2,8,14,.72)} .dh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 10px} .dh h2{margin:0;font:400 24px/1.2 "Serenity Serif",Georgia,serif} .dsub{font-size:13px;opacity:.7;margin-top:4px} #infoBody{overflow:auto;padding:0 18px 18px;font-size:15px;line-height:1.5} #infoBody h3{margin:16px 0 4px;font-size:14px;font-weight:600;color:#7fe6f2} #infoBody p,#infoBody ul{margin:0} #infoBody ul{padding-left:20px} #infoBody li{margin:2px 0} #infoBody .note{margin-top:18px;font-size:12px;opacity:.6} .gi{display:flex;align-items:center;gap:2px} #yesBtn{color:#8ff0c8} #sepc{display:block;width:min(560px,100%);height:44px;margin:0 auto;pointer-events:none;touch-action:auto;cursor:default} #setBody{overflow:auto;padding:0 18px 18px} .seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:2px 0 8px} .seg button{font:inherit;font-size:12px;line-height:1.15;color:#d6f3ff;background:rgba(80,200,255,.05);border:1px solid rgba(120,220,255,.28);border-radius:14px;padding:6px 3px 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center} .seg button::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--c);margin-bottom:3px} .seg button span{flex:1;display:flex;align-items:center;justify-content:center} .seg button b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums} .seg button.on{background:rgba(80,200,255,.18);border-color:var(--c)} .seg button:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} @media(max-width:350px){.seg{gap:4px}.seg button{font-size:10.5px;padding-left:1px;padding-right:1px}} @media(max-width:330px){.seg button{font-size:10px}} #rhythmSvg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none} #rhythmSvg #hnd:focus-visible circle:nth-of-type(2){stroke-width:4.5} .stp{display:flex;align-items:center;justify-content:center;gap:16px;margin:2px 0 6px} .stp .chip{width:46px;height:46px;min-height:46px;padding:0;border-radius:50%} .stp button:disabled{opacity:.35;cursor:default} #stepVal{min-width:150px;text-align:center} #stepNum{display:block;font:400 36px/1.05 "Serenity Serif",Georgia,serif;font-variant-numeric:tabular-nums} #stepName{display:block;font-size:12px;opacity:.7} .sum{text-align:center;font-size:13px;opacity:.75} .acts{display:flex;justify-content:space-between;gap:10px;margin-top:14px} #setBtn{position:relative} #setBtn.mod::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:#7ee8fa} #medc{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;touch-action:auto;cursor:default} .sh{margin:14px 0 8px;font-size:14px;font-weight:600;color:#7fe6f2} .sh:first-child{margin-top:2px} #setSub{font-weight:400;opacity:.7} #setSub::before{content:"· "} .anim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 6px} .anim button{font:inherit;font-size:13px;color:#d6f3ff;background:rgba(80,200,255,.05);border:1px solid rgba(120,220,255,.28);border-radius:18px;padding:10px 6px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px} .anim button svg{display:block;width:min(64px,100%);height:auto;aspect-ratio:1} .anim button.on{background:rgba(80,200,255,.18);border-color:rgba(160,240,255,.85)} .anim button:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} #rmini{display:block;box-sizing:border-box;width:calc(100% + 32px);height:calc(132px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);margin:4px -16px calc(-20px - env(safe-area-inset-bottom,0px));pointer-events:none} #top{position:absolute;z-index:4;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;pointer-events:none} #top .tl{justify-self:start;min-width:0}#top .tr{justify-self:end;display:grid;justify-items:end;align-items:center}#top .tr>*{grid-area:1/1} #mode{pointer-events:auto;position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;border:1px solid rgba(120,220,255,.3);background:rgba(8,24,38,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.35)} #mode button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:112px;height:36px;padding:0 14px;border:0;border-radius:999px;background:none;color:rgba(214,243,255,.62);font:inherit;font-size:15px;letter-spacing:.01em;cursor:pointer;transition:color .45s} #mode button[aria-selected=true]{color:#fff} #mode button:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} #mode .ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(135deg,rgba(126,232,250,.4),rgba(80,150,255,.2));box-shadow:0 0 20px rgba(126,232,250,.4),inset 0 0 0 1px rgba(160,240,255,.6);transition:transform .6s cubic-bezier(.65,0,.25,1),background .6s,box-shadow .6s} #app.relax #mode .ind{transform:translateX(100%);background:linear-gradient(135deg,rgba(159,240,168,.36),rgba(255,179,107,.22));box-shadow:0 0 20px rgba(159,240,168,.38),inset 0 0 0 1px rgba(190,255,200,.55)} @media(max-width:420px){#mode button{min-width:96px;font-size:14px;padding:0 10px;gap:5px}} .gl{transition:opacity .9s ease} #app.relax .gl{opacity:0;pointer-events:none} #ambc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;cursor:default;opacity:0;transition:opacity 1.2s ease} #app.relax #ambc{opacity:1} #ambc{filter:brightness(1.14) saturate(1.26) contrast(1.08)} #ui{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)} #app.relax #ui{opacity:0;transform:translateY(40px);visibility:hidden;transition:opacity .35s ease,transform .5s ease,visibility 0s linear .5s} #relax{position:absolute;z-index:3;left:0;right:0;bottom:0;margin:0 auto;max-width:860px;box-sizing:border-box;max-height:calc(100% - 66px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:20px 16px calc(18px + env(safe-area-inset-bottom,0px));border:1px solid rgba(120,220,255,.16);border-bottom:0;border-radius:28px 28px 0 0;background:linear-gradient(180deg,rgba(9,26,40,.58),rgba(5,14,23,.92) 46%);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 -24px 70px rgba(0,0,0,.45);opacity:0;transform:translateY(70px);visibility:hidden;transition:opacity .35s,transform .5s,visibility 0s linear .5s} #app.relax #relax{opacity:1;transform:none;visibility:visible;transition:opacity .6s ease .12s,transform .8s cubic-bezier(.2,.8,.2,1) .12s,visibility 0s} .rx-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px} .rx-hd h2{display:inline-block;vertical-align:middle;margin:0;font:400 30px/1.05 "Serenity Serif",Georgia,serif;letter-spacing:.01em;color:#e8fbff} .rx-hd h2 .gtx{display:block;height:1.2em;width:var(--tw,4.2em);overflow:visible}.rx-hd h2 .gtx text{font:inherit;letter-spacing:inherit} #rxSub{margin:5px 0 0;font-size:13px;opacity:.72;min-height:1.2em} #rxPlay{flex:none;display:grid;place-items:center;width:60px;height:60px;padding:0 0 0 2px;border-radius:50%;border:1px solid rgba(190,255,220,.75);background:radial-gradient(circle at 50% 30%,rgba(159,240,168,.5),rgba(80,200,255,.14) 75%);color:#fff;cursor:pointer;box-shadow:0 0 22px rgba(159,240,168,.25);transition:transform .2s} #rxPlay.on{padding:0;animation:rxp 3.2s ease-in-out infinite} #rxPlay:active{transform:scale(.94)} #rxPlay:focus-visible{outline:2px solid #9ff0ff;outline-offset:3px} @keyframes rxp{0%,100%{box-shadow:0 0 0 0 rgba(159,240,168,.35),0 0 22px rgba(159,240,168,.3)}50%{box-shadow:0 0 0 12px rgba(159,240,168,0),0 0 36px rgba(159,240,168,.55)}} /* hasard intelligent : « Surprends-moi » à la place de Lecture quand rien n’est choisi ; à gauche de Pause, « autre ambiance » (lecture) ou « stop » (pause) */ .rx-ctl{flex:none;display:flex;align-items:center;gap:10px} #rxPlay.surp{padding:0;color:#fff3d6;border-color:rgba(255,226,168,.8);background:radial-gradient(circle at 50% 30%,rgba(255,213,138,.5),rgba(159,240,168,.16) 75%);box-shadow:0 0 22px rgba(255,213,138,.3)} #rxShf{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(214,243,255,.32);background:rgba(214,243,255,.07);color:#e8fbff;cursor:pointer;transition:transform .2s,background .2s,border-color .2s} #rxShf[hidden]{display:none} #rxShf:hover{background:rgba(214,243,255,.14)} #rxShf:active{transform:scale(.92)} #rxShf:focus-visible{outline:2px solid #9ff0ff;outline-offset:3px} #rxShf.stop{color:#ffd9c8;border-color:rgba(255,190,170,.4);background:rgba(255,160,130,.08)} #rxShf.stop:hover{background:rgba(255,160,130,.16)} .rx-undo{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 16px);z-index:60;display:flex;align-items:center;gap:14px;padding:9px 10px 9px 16px;border-radius:999px;border:1px solid rgba(214,243,255,.22);background:rgba(8,22,34,.92);color:#e8fbff;font-size:13.5px;box-shadow:0 8px 28px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translate(-50%,-12px);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)} .rx-undo.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)} .rx-undo button{padding:6px 12px;border-radius:999px;border:0;background:rgba(159,240,168,.2);color:#d6ffe0;font:inherit;font-weight:600;cursor:pointer} .rx-undo button:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} .rx-m{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 14px 8px;border-radius:18px;background:rgba(80,200,255,.06);border:1px solid rgba(120,220,255,.16);margin-bottom:14px;color:#d6f3ff} .lb{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.6} .rx-m .lb{grid-column:1/-1} #relax output{font-variant-numeric:tabular-nums;font-size:13px;min-width:34px;text-align:right;opacity:.85} .rx-pre{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:6px -16px 14px;padding:2px 16px} .rx-pre::-webkit-scrollbar{display:none} .pre{flex:none;display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px 0 12px;border-radius:999px;border:1px solid rgba(120,220,255,.26);background:rgba(80,200,255,.05);color:#d6f3ff;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .3s,border-color .3s} .pre:hover{background:rgba(80,200,255,.14)} .pre .dots{display:inline-flex;padding-left:3px} .pre .dots i{width:9px;height:9px;border-radius:50%;margin-left:-3px;box-shadow:0 0 0 1.5px #0a1a28} .pre.on{background:rgba(80,200,255,.2);border-color:rgba(160,240,255,.85)} .pre.shf{gap:7px;padding:0 14px 0 13px;border-style:dashed;color:#ffe2a8;border-color:rgba(255,213,138,.4);background:rgba(255,213,138,.06)} .pre.shf:hover{background:rgba(255,213,138,.14)} .pre.shf.on{border-style:solid;border-color:rgba(255,213,138,.9);background:rgba(255,213,138,.2)} .pre:focus-visible,.tm:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} .rx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .rx-grid .snd:last-child{grid-column:1/-1} .snd{position:relative;overflow:hidden;border-radius:20px;border:1px solid color-mix(in srgb,var(--c) 22%,transparent);background:rgba(255,255,255,.025);transition:border-color .45s,background .45s,box-shadow .45s} .snd.on{border-color:color-mix(in srgb,var(--c) 70%,transparent);background:radial-gradient(130% 100% at 15% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 70%);box-shadow:0 0 28px color-mix(in srgb,var(--c) 16%,transparent)} .snd canvas{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%;pointer-events:none;cursor:default;touch-action:auto} .snd-t{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;padding:12px 12px 4px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:20px} .snd-t:focus-visible{outline:2px solid var(--c);outline-offset:-3px} .snd-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);transition:background .45s,color .45s,box-shadow .2s} .snd.on .snd-ic{background:var(--c);color:#06131e;box-shadow:0 0 calc(8px + var(--lv,0)*30px) color-mix(in srgb,var(--c) 75%,transparent)} .snd-n{flex:1;min-width:0;font-size:15px;font-weight:500;line-height:1.25} .snd-n small{display:block;font-size:11.5px;font-weight:400;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sw{flex:none;position:relative;width:36px;height:21px;border-radius:999px;background:rgba(214,243,255,.16);transition:background .35s} .sw::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#d6f3ff;transition:transform .35s cubic-bezier(.3,1.5,.5,1)} .snd.on .sw{background:var(--c)}.snd.on .sw::after{transform:translateX(15px);background:#fff} .snd-v{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:2px 12px 12px;transition:opacity .4s} .snd:not(.on) .snd-v{opacity:.5} @media(min-width:780px){.rx-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.rx-grid .snd:last-child{grid-column:auto}.snd-t{flex-wrap:wrap;padding-top:14px}.snd .sw{position:absolute;top:14px;right:12px}.snd-n{flex-basis:100%;margin-top:6px}} .rng{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:28px;margin:0;background:none;cursor:pointer;touch-action:pan-y;--p:50%;--c:#7ee8fa} .rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--fi,linear-gradient(var(--c),var(--c))) 0 0/var(--p) 100% no-repeat,rgba(214,243,255,.15)} .rng::-moz-range-track{height:6px;border-radius:3px;background:rgba(214,243,255,.15)} .rng::-moz-range-progress{height:6px;border-radius:3px;background:var(--c)} .rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent),0 0 14px var(--c)} .rng::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent),0 0 14px var(--c)} .rng:focus-visible{outline:none} .rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #9ff0ff,0 0 16px var(--c)} .rng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #9ff0ff,0 0 16px var(--c)} #rxMaster{--c:#e8fbff} .rx-tm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px} .rx-tm .lb{margin-right:4px} .tm{height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(120,220,255,.24);background:none;color:#d6f3ff;font:inherit;font-size:13px;cursor:pointer;transition:background .3s,border-color .3s} .tm.on{background:rgba(80,200,255,.2);border-color:rgba(160,240,255,.85)} #rxLeft{margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums;color:#ffd58a} .cred{margin:0;font-size:12px;line-height:1.55;opacity:.62} .cred a{color:inherit} @media(max-width:600px){ #relax{padding-top:16px} .rx-hd{margin-bottom:10px}.rx-hd h2{font-size:26px}#rxPlay{width:54px;height:54px}#rxShf{width:40px;height:40px}.rx-ctl{gap:8px} .rx-m{grid-template-columns:auto auto minmax(0,1fr) auto;padding:4px 12px;margin-bottom:10px}.rx-m .lb{grid-column:auto;font-size:10px;max-width:64px;line-height:1.2} .rx-pre{margin:4px -16px 10px} .snd-t{padding:10px 10px 0;gap:8px}.snd-ic{width:38px;height:38px}.snd-v{padding:0 10px 8px} .rx-grid .snd:not(:last-child) .snd-n small{display:none} .rx-tm{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px -16px 0;padding:2px 16px}.rx-tm::-webkit-scrollbar{display:none}.tm{flex:none}#rxLeft{flex:none;white-space:nowrap} } #bx{max-width:560px;margin:0 auto} #setup{display:flex;flex-direction:column;gap:10px} .pcard{pointer-events:auto;display:flex;align-items:stretch;border-radius:22px;border:1px solid rgba(120,220,255,.26);background:linear-gradient(135deg,rgba(80,200,255,.11),rgba(182,156,255,.07));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 34px rgba(0,0,0,.28);overflow:hidden;text-align:left} .pc-main{flex:1;min-width:0;display:flex;align-items:center;gap:13px;padding:10px 10px 10px 14px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .25s} .pc-main:hover,.pc-i:hover{background:rgba(80,200,255,.08)} .pc-main:focus-visible,.pc-i:focus-visible{outline:2px solid #9ff0ff;outline-offset:-3px;border-radius:20px} #pcGlyph{flex:none;width:64px;height:30px;overflow:visible;filter:drop-shadow(0 0 6px rgba(126,232,250,.35))} .pc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} #pcType{font-size:10px} #pcName{font:400 22px/1.1 "Serenity Serif",Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pcPat{font-size:12px;opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pat b{font-weight:600}.pat i{font-style:normal;opacity:.35;margin:0 3px} #pcPat em,.pn em{font-style:normal;color:#7ee8fa;font-size:11px} .pc-chev{flex:none;opacity:.55} .pc-i{pointer-events:auto;flex:none;width:52px;border:0;border-left:1px solid rgba(120,220,255,.16);background:none;color:inherit;cursor:pointer;display:grid;place-items:center;transition:background .25s} .go{display:flex;gap:10px;align-items:center} .dseg{pointer-events:auto;flex:1;min-width:0;display:flex;align-items:center;padding:4px;border-radius:999px;border:1px solid rgba(120,220,255,.22);background:rgba(8,24,38,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .dseg button{flex:1;min-width:0;height:42px;border:0;border-radius:999px;background:none;color:rgba(214,243,255,.68);font:inherit;font-size:15px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s} .dseg button:hover{color:#fff} .dseg button.on{background:rgba(126,232,250,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(160,240,255,.7),0 0 14px rgba(126,232,250,.25)} .dseg button:focus-visible{outline:2px solid #9ff0ff;outline-offset:1px} .dseg .u{flex:none;padding:0 10px 0 4px;font-size:11px;opacity:.5} .cta{pointer-events:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px 0 20px;border:0;border-radius:999px;font:inherit;font-size:16px;font-weight:600;letter-spacing:.01em;color:#04121c;background:linear-gradient(135deg,#c9f8ff,#7ee8fa 45%,#b69cff);box-shadow:0 0 0 0 rgba(126,232,250,.45),0 8px 26px rgba(126,232,250,.3);cursor:pointer;animation:ctaP 3.4s ease-in-out infinite;transition:transform .2s} .cta svg{width:18px;height:18px} .cta:active{transform:scale(.95)} .cta:focus-visible{outline:2px solid #fff;outline-offset:3px} @keyframes ctaP{50%{box-shadow:0 0 0 10px rgba(126,232,250,0),0 8px 36px rgba(126,232,250,.5)}} @media(max-width:460px){.cta span{display:none}.cta{width:52px;padding:0}.dseg button{font-size:14px}} #live{display:flex;flex-direction:column;align-items:center;gap:10px;--pc:#7ee8fa;--pp:0;--bs:0} #liveName{font-size:10.5px} .ph-row{display:flex;align-items:baseline;justify-content:center;gap:14px;min-height:54px} #phase{font:400 clamp(36px,10vw,54px)/1 "Serenity Serif",Georgia,serif;color:#fff;letter-spacing:.01em;text-shadow:0 0 26px var(--pc),0 0 2px var(--pc);transition:text-shadow .9s} #phase.in{animation:phIn .75s cubic-bezier(.2,.8,.2,1)} @keyframes phIn{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} #dur{font-size:28px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--pc);transition:color .9s;min-width:1.6em;text-align:left} #live.pz #phase{text-shadow:0 0 18px rgba(214,243,255,.4);opacity:.8} .prog{display:flex;align-items:center;gap:10px;width:100%;max-width:440px} .prog .t{font-size:12px;font-variant-numeric:tabular-nums;opacity:.7;min-width:42px;text-align:left} .prog .t:last-child{text-align:right} .bar{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(214,243,255,.12)} #progF{position:absolute;inset:0;border-radius:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='#7ee8fa'/%3E%3Cstop offset='1' stop-color='#b69cff'/%3E%3C/linearGradient%3E%3Crect width='10' height='10' fill='url(%23g)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;transform-origin:left;transform:scaleX(0)} #progC{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--pc),0 0 3px var(--pc)} .ctls .gi{display:flex;align-items:center;justify-content:center;gap:20px} .cb{pointer-events:auto;position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(120,220,255,.32);background:rgba(8,24,38,.5);color:#d6f3ff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s,border-color .25s,transform .15s} .cb svg{width:19px;height:19px} .cb:hover{background:rgba(80,200,255,.18)} .cb:active{transform:scale(.94)} .cb.on{border-color:rgba(160,240,255,.8);background:rgba(80,200,255,.22)} .cb:focus-visible,.cbt:focus-visible{outline:2px solid #9ff0ff;outline-offset:3px} @keyframes uiUp{from{opacity:0;transform:translateY(14px);filter:blur(4px)}} @keyframes uiPop{from{opacity:0;transform:scale(.55)}} @keyframes uiOut{to{opacity:0;transform:translateY(-10px) scale(.97);filter:blur(4px)}} @keyframes icSw{from{opacity:0;transform:scale(.35) rotate(-70deg)}} #setup.enter>*{animation:uiUp .6s cubic-bezier(.2,.8,.2,1) backwards} #setup.enter>*:nth-child(2){animation-delay:.09s} #setup.leave{animation:uiOut .22s ease-in forwards;pointer-events:none} #live.enter>#liveName{animation:uiUp .5s cubic-bezier(.2,.8,.2,1) backwards} #live.enter>.ph-row{animation:uiUp .65s cubic-bezier(.2,.8,.2,1) .06s backwards} #live.enter>.prog{animation:uiUp .65s cubic-bezier(.2,.8,.2,1) .14s backwards} #live.enter #ctlMain>*{animation:uiPop .6s cubic-bezier(.3,1.5,.5,1) backwards} #live.enter #ctlMain>:nth-child(1){animation-delay:.3s} #live.enter #ctlMain>:nth-child(2){animation-delay:.2s} #live.enter #ctlMain>:nth-child(3){animation-delay:.38s} #ctlMain.enter>*,#ctlConf.enter>button{animation:uiPop .45s cubic-bezier(.3,1.5,.5,1) backwards} #ctlMain.enter>:nth-child(2){animation-delay:.05s}#ctlMain.enter>:nth-child(3),#ctlConf.enter>button+button{animation-delay:.1s} #ctlConf.enter>span{animation:uiUp .4s cubic-bezier(.2,.8,.2,1) backwards} .cb.icsw svg{animation:icSw .45s cubic-bezier(.3,1.5,.5,1)} @media(prefers-reduced-motion:reduce){#setup.enter>*,#setup.leave,#live.enter>*,#live.enter #ctlMain>*,#ctlMain.enter>*,#ctlConf.enter>*,.cb.icsw svg{animation:none!important}} .cb.big{width:70px;height:70px;border:0;background:rgba(8,24,38,.62)} .cb.big svg{width:26px;height:26px;position:relative;z-index:1} .cb.big::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--pc) calc(var(--pp)*1turn),rgba(214,243,255,.13) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))} .cb.big::after{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pc) 30%,transparent),transparent 70%);opacity:calc(.3 + var(--bs)*.7);transform:scale(calc(.85 + var(--bs)*.2))} .conf{gap:10px!important} .conf span{font-size:15px;margin-right:2px;white-space:nowrap} .cbt{pointer-events:auto;height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(120,220,255,.4);background:rgba(8,24,38,.55);color:#d6f3ff;font:inherit;font-size:14px;cursor:pointer} .cbt.warn{border-color:rgba(255,170,150,.75);background:rgba(255,120,100,.18);color:#ffe0d8} dialog.sheet{width:min(640px,100%);max-width:100%;max-height:min(88vh,820px);margin:auto auto 0;border-radius:26px 26px 0 0;border-bottom:0;animation:shIn .45s cubic-bezier(.2,.8,.2,1)} /* le sélecteur de pratiques garde la même hauteur quelle que soit la famille choisie (Pranayama n’a que 4 pratiques) */ #pick.sheet{height:min(88vh,820px)} @media(min-width:700px){dialog.sheet{margin:auto;border-radius:24px;border-bottom:1px solid rgba(120,220,255,.45)}} @keyframes shIn{from{transform:translateY(46px);opacity:0}} .ptabs{flex:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 18px 12px} .ptabs::-webkit-scrollbar{display:none} .ptab{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(120,220,255,.24);background:none;color:#d6f3ff;font:inherit;font-size:14px;cursor:pointer;transition:background .25s,border-color .25s} .ptab small{opacity:.5;margin-left:7px;font-size:12px} .ptab[aria-selected=true]{background:rgba(80,200,255,.2);border-color:rgba(160,240,255,.85)} .ptab:focus-visible,.pi:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} .plist{overflow-y:auto;padding:2px 14px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:8px} .pi{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:18px;border:1px solid rgba(120,220,255,.14);background:rgba(255,255,255,.02);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s} .pi:hover{background:rgba(80,200,255,.08)} .pi[aria-selected=true]{border-color:rgba(160,240,255,.8);background:linear-gradient(135deg,rgba(80,200,255,.14),rgba(182,156,255,.08));box-shadow:0 0 24px rgba(126,232,250,.14)} .pi svg{width:76px;height:36px;overflow:visible} .pn b{display:block;font:400 18px/1.2 "Serenity Serif",Georgia,serif} .pn small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;opacity:.62;line-height:1.35;margin-top:3px} .pm{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap} .pm small{font-size:11px;opacity:.55} .pm em{font-style:normal;font-size:10.5px;color:#04121c;background:#7ee8fa;border-radius:999px;padding:1px 7px;margin-top:2px} @media(max-width:420px){.pi{grid-template-columns:60px minmax(0,1fr);gap:10px}.pi svg{width:60px}.pm{grid-column:2;flex-direction:row;align-items:center;gap:8px}} #toast{position:absolute;z-index:5;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translate(-50%,-14px);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;padding:12px 18px 12px 12px;border-radius:20px;border:1px solid rgba(159,240,168,.5);background:rgba(8,24,38,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 44px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);cursor:pointer} #toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} #toast .tk{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#9ff0a8;color:#04121c;box-shadow:0 0 18px rgba(159,240,168,.6)} #toast b{display:block;font-size:15px;font-weight:600} #toast span{display:block;font-size:12.5px;opacity:.75;margin-top:1px} .hub{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:rgba(8,24,38,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .hub::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--pc) calc(var(--pp)*1turn),rgba(214,243,255,.13) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));transition:opacity .4s} .hub::after{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pc) 32%,transparent),transparent 70%);opacity:calc(.3 + var(--bs)*.7);transform:scale(calc(.85 + var(--bs)*.2));transition:opacity .4s} #dur{position:relative;z-index:1;font-size:26px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--pc);text-shadow:0 0 12px var(--pc);transition:color .9s,opacity .3s,transform .3s;min-width:0;text-align:center} .hstop{position:absolute;z-index:2;inset:5px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,120,100,.2);box-shadow:inset 0 0 0 1.5px rgba(255,170,150,.75),0 0 22px rgba(255,120,100,.3);color:#ffe0d8;cursor:pointer;opacity:0;transform:scale(.5);visibility:hidden;transition:opacity .3s,transform .4s cubic-bezier(.3,1.4,.5,1),visibility 0s linear .4s} .hstop svg{width:24px;height:24px} .hstop:hover{background:rgba(255,120,100,.3)} .hstop:focus-visible{outline:2px solid #9ff0ff;outline-offset:3px} #live.pz .hstop{pointer-events:auto;opacity:1;transform:none;visibility:visible;transition:opacity .3s,transform .4s cubic-bezier(.3,1.4,.5,1),visibility 0s} #live.pz #dur{opacity:0;transform:scale(.6)} #live.pz .hub::before,#live.pz .hub::after{opacity:.25} #live.pz #pauseBtn{border-color:rgba(160,240,255,.9);background:rgba(80,200,255,.26);box-shadow:0 0 18px rgba(126,232,250,.45)} .pcard #setBtn{position:relative}.pcard #setBtn.mod::after{top:14px;right:12px} .pc-i+.pc-i{width:48px} .svrow+.svrow{margin-top:8px} .svrow label{font-size:14px;min-width:86px} .svrow{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px;border-radius:16px;background:rgba(80,200,255,.06);border:1px solid rgba(120,220,255,.16)} .svrow output{font-variant-numeric:tabular-nums;font-size:13px;min-width:40px;text-align:right;opacity:.85} .svh{margin:6px 2px 0;font-size:12px;opacity:.55} #app{isolation:isolate} #sky{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;cursor:default;transition:opacity 1.2s ease} #app.relax #sky{opacity:0} .tbtn{pointer-events:auto;position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(120,220,255,.3);background:rgba(8,24,38,.55);color:#d6f3ff;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:background .25s,opacity .4s,transform .4s} .tbtn:hover{background:rgba(80,200,255,.2)} .tbtn:focus-visible{outline:2px solid #9ff0ff;outline-offset:3px} .tbtn svg{width:19px;height:19px;transition:transform .6s cubic-bezier(.3,1.3,.5,1)} .tbtn:hover svg{transform:rotate(60deg)} #top #setBtn.mod::after{content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:#7ee8fa;box-shadow:0 0 8px #7ee8fa} #relax{display:flex;flex-direction:column;overflow:hidden;max-height:none;height:56%;padding:0 0 env(safe-area-inset-bottom,0px);transition:opacity .35s,transform .5s,visibility 0s linear .5s,height .45s cubic-bezier(.2,.8,.2,1)} #app.relax #relax{transition:opacity .6s ease .12s,transform .8s cubic-bezier(.2,.8,.2,1) .12s,visibility 0s,height .45s cubic-bezier(.2,.8,.2,1)} #relax.drag,#app.relax #relax.drag{transition:none} @media(max-width:600px){#relax{padding-top:0}} .rx-tt{display:inline-flex;align-items:center;gap:4px;margin-left:10px;vertical-align:middle;padding:3px 9px 3px 7px;border-radius:999px;border:1px solid rgba(255,213,138,.55);background:rgba(255,213,138,.13);color:#ffd58a;font-size:13px;line-height:1.2;font-variant-numeric:tabular-nums;box-shadow:0 0 14px rgba(255,213,138,.18);animation:bpIn .45s cubic-bezier(.3,1.5,.5,1)} .rx-tt b{font-weight:600} .inst .cbt{flex:none;height:38px;padding:0 16px;border-color:rgba(126,232,250,.6);background:rgba(126,232,250,.14);color:#d6f7ff}.inst small{display:block}.rx-tt[hidden]{display:none} .rx-hdl{flex:none;display:block;width:100%;height:24px;padding:0;border:0;background:none;cursor:grab;touch-action:none} .rx-hdl i{display:block;width:44px;height:5px;margin:9px auto 0;border-radius:3px;background:rgba(214,243,255,.3);transition:background .25s} .rx-hdl:hover i{background:rgba(214,243,255,.55)} .rx-hdl:focus-visible i{outline:2px solid #9ff0ff;outline-offset:3px} #rxHead{flex:none;padding:0 16px 10px;margin:0;touch-action:none;cursor:grab} #rxBody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 16px 18px;scrollbar-width:thin} .rx-sec{display:flex;align-items:center;justify-content:space-between;margin:2px 0 8px} #rxCount{opacity:.8} .lnk{border:0;background:none;color:#7ee8fa;font:inherit;font-size:12.5px;cursor:pointer;padding:4px} .lnk:focus-visible{outline:2px solid #9ff0ff;border-radius:6px} .rx-mix{display:grid;gap:6px;margin-bottom:10px} .mx-empty{margin:0;padding:12px 14px;border:1px dashed rgba(120,220,255,.25);border-radius:16px;font-size:13px;opacity:.7;line-height:1.45} .mx{display:grid;grid-template-columns:auto 84px minmax(0,1fr) 28px auto;align-items:center;gap:10px;padding:6px 6px 6px 6px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c) 35%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 75%);animation:mxIn .35s ease} @keyframes mxIn{from{opacity:0;transform:translateY(-4px)}} .mx-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c);color:#06131e;box-shadow:0 0 calc(6px + var(--lv,0)*22px) color-mix(in srgb,var(--c) 70%,transparent)} .mx-n{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #relax .mx output{font-size:12px;min-width:0;text-align:right;opacity:.75} .mx-x{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:rgba(214,243,255,.6);cursor:pointer} .mx-x:hover{background:rgba(255,255,255,.08);color:#fff} .mx-x:focus-visible{outline:2px solid #9ff0ff} @media(max-width:400px){.mx{grid-template-columns:auto 64px minmax(0,1fr) 26px auto;gap:7px}.mx-n{font-size:13px}} .rx-cat{position:sticky;top:-2px;z-index:2;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:8px 16px 10px;background:linear-gradient(180deg,rgba(6,17,27,.97) 72%,rgba(6,17,27,0))} .rx-cat::-webkit-scrollbar{display:none} .cat{flex:none;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(120,220,255,.22);background:none;color:rgba(214,243,255,.75);font:inherit;font-size:13px;cursor:pointer;transition:background .25s,border-color .25s,color .25s} .cat.on{background:rgba(214,243,255,.12);color:#fff;border-color:rgba(214,243,255,.6)} .cat:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} .tg-h{margin:10px 2px 8px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.55} .tg-h small{margin-left:8px;font-size:10px;font-weight:400;letter-spacing:.04em;text-transform:none;opacity:.8} .tg-h small::before{content:'·';margin-right:8px} .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px} .tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;border-radius:18px;border:1px solid rgba(120,220,255,.12);background:rgba(255,255,255,.025);color:#d6f3ff;font:inherit;cursor:pointer;transition:background .3s,border-color .3s,transform .15s} .tile:hover{background:rgba(255,255,255,.06)} .tile:active{transform:scale(.95)} .tile:focus-visible{outline:2px solid var(--c);outline-offset:2px} .t-ic{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--c);background:color-mix(in srgb,var(--c) 11%,transparent);transition:background .35s,color .35s,box-shadow .2s} .t-ic::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--v,0)*1turn),rgba(214,243,255,.1) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));opacity:0;transition:opacity .35s} .tile.on{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 18%,transparent),transparent 75%)} .tile.on .t-ic{background:var(--c);color:#06131e;box-shadow:0 0 calc(8px + var(--lv,0)*28px) color-mix(in srgb,var(--c) 70%,transparent)} .tile.on .t-ic::before{opacity:1} .t-n{font-size:12px;line-height:1.2;text-align:center;opacity:.88} .tile.pop .t-ic{animation:pop .45s cubic-bezier(.3,1.6,.5,1)} @keyframes pop{40%{transform:scale(1.15)}} @media(min-width:780px){.tiles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}} #mode{grid-template-columns:repeat(3,auto)} #mode button{min-width:0;padding:0 16px} #mode .ind{left:0;width:0;transform:none!important;transition:left .55s cubic-bezier(.65,0,.25,1),width .55s cubic-bezier(.65,0,.25,1),background .6s,box-shadow .6s} #app.focus #mode .ind{background:linear-gradient(135deg,rgba(255,213,138,.4),rgba(126,200,120,.22));box-shadow:0 0 20px rgba(255,213,138,.35),inset 0 0 0 1px rgba(255,230,180,.6)} @media(max-width:560px){#mode button{padding:0 12px;font-size:14px}#mode button[aria-selected=false] span{display:none}} #app.focus .gl{opacity:0;pointer-events:none} #app.focus #sky{opacity:0} #app.focus #ui{opacity:0;transform:translateY(40px);visibility:hidden;transition:opacity .35s ease,transform .5s ease,visibility 0s linear .5s} #top .tl{display:flex;gap:6px;align-items:center;pointer-events:none} @keyframes bpIn{from{opacity:0;transform:scale(.7)}} @media(max-width:700px){ #top .tl{flex-direction:column;align-items:flex-start;height:36px;gap:7px} #top .tl>*{animation:bpIn .45s cubic-bezier(.3,1.5,.5,1)}} #fc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;cursor:default;opacity:0;transition:opacity 1s ease} #app.focus #fc{opacity:1} #focus{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .4s} #app.focus #focus{opacity:1;visibility:visible;transition:opacity .6s ease .1s,visibility 0s} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} #fHud{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);text-align:center;pointer-events:none;padding:0 16px} #fPhase{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.72} #fTime{font:340 clamp(56px,16vw,88px)/1.05 "Serenity Serif",Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#fff;text-shadow:0 0 34px rgba(255,213,138,.35);transition:opacity .4s,text-shadow .8s} #focus.brk #fTime{text-shadow:0 0 34px rgba(188,210,255,.5)} #focus.pz #fTime{opacity:.5} #focus.pz #fTime::after{content:"";display:block;width:56px;height:2px;margin:8px auto 0;border-radius:1px;background:rgba(255,255,255,.4);animation:blink 1.6s ease-in-out infinite} @keyframes blink{50%{opacity:.2}} #fSub{font-size:13px;opacity:.66;margin-top:6px;min-height:1.2em} #fPanel{pointer-events:auto;position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;box-sizing:border-box;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;border:1px solid rgba(120,220,255,.16);border-bottom:0;background:linear-gradient(180deg,rgba(9,26,40,.55),rgba(5,14,23,.92) 55%);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 -24px 70px rgba(0,0,0,.4);transform:translateY(70px);transition:transform .8s cubic-bezier(.2,.8,.2,1)} #app.focus #fPanel{transform:none} #fIdle,#fRun{display:flex;flex-direction:column;gap:12px} #fIdle[hidden],#fRun[hidden]{display:none} .f-cats,.f-amb{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px} .f-cats::-webkit-scrollbar,.f-amb::-webkit-scrollbar{display:none} .fcat,.famb{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;border:1px solid rgba(120,220,255,.22);background:none;color:rgba(214,243,255,.8);font:inherit;font-size:13.5px;cursor:pointer;transition:background .25s,border-color .25s,color .25s} .fcat i{width:8px;height:8px;border-radius:50%;background:var(--c)} .fcat.on{background:color-mix(in srgb,var(--c) 22%,transparent);border-color:var(--c);color:#fff} .famb.on{background:rgba(214,243,255,.12);border-color:rgba(214,243,255,.6);color:#fff} .fcat:focus-visible,.famb:focus-visible,.fpre:focus-visible,.f-cta:focus-visible,.f-sum:focus-visible,.f-ic:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} .f-pre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:18px;border:1px solid rgba(120,220,255,.18);background:rgba(8,24,38,.45)} .fpre{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;border:0;border-radius:14px;background:none;color:rgba(214,243,255,.7);font:inherit;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s} .fpre b{font-size:13.5px;font-weight:600}.fpre small{font-size:11.5px;opacity:.75;font-variant-numeric:tabular-nums;white-space:nowrap} .fpre.on{background:rgba(255,213,138,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,213,138,.6)} .f-cta{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border:0;border-radius:999px;font:inherit;font-size:17px;font-weight:600;letter-spacing:.01em;color:#1b1406;background:linear-gradient(135deg,#ffe6a8,#ffd58a 40%,#9fe0a0);box-shadow:0 10px 30px rgba(255,213,138,.28);cursor:pointer;animation:ctaF 3.6s ease-in-out infinite;transition:transform .2s} .f-cta:active{transform:scale(.97)} .f-cta svg{width:22px;height:22px} @keyframes ctaF{50%{box-shadow:0 0 0 10px rgba(255,213,138,0),0 10px 40px rgba(255,213,138,.45)}} .f-foot{display:flex;gap:8px} .f-sum{flex:1;min-width:0;display:flex;align-items:center;gap:14px;height:42px;padding:0 14px;border-radius:14px;border:1px solid rgba(120,220,255,.16);background:rgba(255,255,255,.03);color:#d6f3ff;font:inherit;font-size:13.5px;cursor:pointer;font-variant-numeric:tabular-nums} .f-sum span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .f-sum svg{opacity:.75}.f-sum .fl svg{color:#ffb36b;opacity:1} .f-sum .go{margin-left:auto;opacity:.7;font-size:12.5px} @media(max-width:400px){.f-sum .go{display:none}} .f-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:14px;border:1px solid rgba(120,220,255,.16);background:rgba(255,255,255,.03);color:#d6f3ff;cursor:pointer} .f-sum:hover,.f-ic:hover{background:rgba(80,200,255,.1)} .f-ctl{display:flex;align-items:center;justify-content:center;gap:16px} .f-ctl .cb{width:62px;height:62px} .f-ctl .cb svg{width:22px;height:22px} #focus.pz #fPause{border-color:rgba(255,213,138,.9);background:rgba(255,213,138,.2);box-shadow:0 0 20px rgba(255,213,138,.35)} .f-conf{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center} .f-conf span{flex-basis:100%;font-size:14px;opacity:.85} .f-conf[hidden],.f-ctl[hidden]{display:none} /* — dock de session (après « Planter ») — */ #fRun{gap:14px} .f-trk{display:flex;align-items:center;gap:14px;padding:0 2px} .f-tr{--p:0;position:relative;flex:1;height:24px} .f-tr::before,.f-tr>i{content:"";position:absolute;left:12px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px} .f-tr::before{right:12px;background:rgba(214,243,255,.12)} .f-tr>i{width:calc(var(--p)*(100% - 24px));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='#ffd58a'/%3E%3Cstop offset='1' stop-color='#9fe0a0'/%3E%3C/linearGradient%3E%3Crect width='10' height='10' fill='url(%23g)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;box-shadow:0 0 14px rgba(159,224,160,.55);transition:width .55s linear} .f-tr>i::after{content:"";position:absolute;right:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#eaffd8;box-shadow:0 0 10px 2px rgba(190,255,190,.7);animation:fDot 2.4s ease-in-out infinite} @keyframes fDot{50%{transform:scale(.7);opacity:.7}} .f-tr .st{position:absolute;top:50%;left:calc(12px + var(--x)*(100% - 24px));transform:translate(-50%,-50%) scale(.86);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#0a1825;border:1px solid rgba(214,243,255,.18);color:rgba(214,243,255,.4);transition:transform .5s cubic-bezier(.3,1.6,.5,1),border-color .5s,color .5s,box-shadow .5s,background .5s} .f-tr .st.on{transform:translate(-50%,-50%) scale(1);border-color:rgba(159,224,160,.85);color:#e4ffd9;background:#11301f;box-shadow:0 0 14px rgba(159,224,160,.45)} .f-tr .st.now{animation:fSt 2.4s ease-in-out infinite} @keyframes fSt{50%{box-shadow:0 0 0 5px rgba(159,224,160,0),0 0 20px rgba(159,224,160,.7)}} #focus.brk .f-tr>i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='#9fd3ff'/%3E%3Cstop offset='1' stop-color='#c6b8ff'/%3E%3C/linearGradient%3E%3Crect width='10' height='10' fill='url(%23g)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;box-shadow:0 0 14px rgba(159,211,255,.5)} #focus.brk .f-tr>i::after{background:#e6f2ff;box-shadow:0 0 10px 2px rgba(170,210,255,.7)} #focus.brk .f-tr .st{opacity:0;transform:translate(-50%,-50%) scale(.4)} #focus.pz .f-tr>i::after{animation:none;opacity:.5} .f-eta{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;font-variant-numeric:tabular-nums} .f-eta small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.55} .f-eta b{font-size:16px;font-weight:600;color:#fff} .f-amb{-webkit-mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);scroll-snap-type:x proximity} .f-amb>:first-child{margin-left:auto}.f-amb>:last-child{margin-right:auto} .famb{scroll-snap-align:center;gap:0;width:auto;min-width:40px;height:40px;padding:0 11px;justify-content:center;transition:background .3s,border-color .3s,color .3s,padding .45s cubic-bezier(.3,1.3,.5,1),box-shadow .3s} .famb svg{width:17px;height:17px;opacity:.75;flex:none} .famb span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .45s cubic-bezier(.3,1.2,.5,1),opacity .3s,margin .45s} .famb.on span{max-width:96px;opacity:1;margin-left:7px} .famb.on{padding:0 15px 0 13px} .famb:hover svg{opacity:1} .famb.on svg{opacity:1;color:#ffe6a8} .famb.on{box-shadow:0 0 16px rgba(214,243,255,.12)} .f-ctl{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;padding-top:2px} .f-sd{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0} .f-sd small{font-size:11.5px;letter-spacing:.02em;color:rgba(214,243,255,.62);white-space:nowrap;transition:color .3s} .f-sd .cb{width:52px;height:52px;margin-top:9px} .f-sd.mid .cb{margin-top:0} .f-ctl .f-pp{--pp:0;--pc:#ffd58a;--bs:0;width:70px;height:70px} .f-ctl .f-pp svg{width:24px;height:24px} #focus.brk .f-pp{--pc:#9fd3ff} #focus.pz #fPause{border:0;background:rgba(255,213,138,.16);box-shadow:0 0 26px rgba(255,213,138,.35);animation:fPz 2s ease-in-out infinite} @keyframes fPz{50%{box-shadow:0 0 6px rgba(255,213,138,.15)}} #focus.pz #fPL{color:#ffe6a8} .f-hold{--hp:0;overflow:visible} .f-hold::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(#ff9b85 calc(var(--hp)*1turn),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));filter:drop-shadow(0 0 6px rgba(255,155,133,.7))} .f-hold.hd{border-color:rgba(255,155,133,.7);background:rgba(255,120,100,calc(.08 + var(--hp)*.22));transform:scale(calc(1 - var(--hp)*.06))} .f-hold.hd svg{color:#ffc2b4} #fSL.hint{color:#ffb3a3} #focus.brk .f-hold::before{display:none} .f-conf{padding:6px 0 2px} #fZenH{margin-top:22px;font-size:12.5px;opacity:0;transition:opacity .8s;letter-spacing:.02em} #focus.zen{pointer-events:auto;cursor:pointer} #focus.zen #fPanel{transform:translateY(calc(100% + 30px));transition:transform .9s cubic-bezier(.6,0,.2,1)} #focus.zen #fHud{top:36%} #focus.zen #fZenH{opacity:.5;animation:fZh 4s ease-in-out 1.2s forwards} @keyframes fZh{to{opacity:0}} #fHud{transition:top .9s cubic-bezier(.6,0,.2,1)} @media(prefers-reduced-motion:reduce){.f-tr>i::after,.f-tr .st.now,#focus.pz #fPause{animation:none}} #ftoast{position:absolute;z-index:6;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translate(-50%,-14px);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;padding:12px 18px 12px 12px;border-radius:20px;border:1px solid rgba(255,213,138,.55);background:rgba(8,24,38,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 44px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);cursor:pointer} #ftoast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} #ftoast .tk{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ffe6a8,#9fe0a0);color:#1b1406} #ftoast.warn{border-color:rgba(255,170,150,.6)}#ftoast.warn .tk{background:#c9a58a} #ftoast b{display:block;font-size:15px}#ftoast span{display:block;font-size:12.5px;opacity:.75;margin-top:1px} #fstatBody{overflow:auto;padding:0 18px calc(20px + env(safe-area-inset-bottom,0px))} .fcr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:12px 0;border-bottom:1px solid rgba(120,220,255,.1)} .fcr label{font-size:14.5px}.fcr .rng{grid-column:1/-1;--c:#ffd58a} .fst{display:flex;align-items:center;gap:8px}.fst output{min-width:62px;text-align:center;font-variant-numeric:tabular-nums;font-size:15px} .fst .chip{width:36px;height:36px;font-size:18px} .ftg{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(120,220,255,.1);cursor:pointer} .ftg span{flex:1}.ftg b{display:block;font-size:14.5px;font-weight:500}.ftg small{display:block;font-size:12px;opacity:.6;margin-top:2px} .ftg input{position:absolute;opacity:0;pointer-events:none} .ftg i{flex:none;position:relative;width:42px;height:24px;border-radius:999px;background:rgba(214,243,255,.16);transition:background .3s} .ftg i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#d6f3ff;transition:transform .35s cubic-bezier(.3,1.5,.5,1)} .ftg input:checked+i{background:#ffd58a}.ftg input:checked+i::after{transform:translateX(18px);background:#fff} .ftg input:focus-visible+i{outline:2px solid #9ff0ff;outline-offset:2px} #fstatBody{position:relative} .fs-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin-bottom:10px} .fs-card{border-radius:20px;border:1px solid rgba(120,220,255,.14);background:rgba(255,255,255,.03);padding:14px} .fs-score{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px} #fScore{width:92px;height:92px}#fScore .bg{fill:none;stroke:rgba(214,243,255,.1);stroke-width:7} #fScore .v{fill:none;stroke:url(#fsg);stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1)} #fScore text{font:400 30px "Serenity Serif",Georgia,serif;fill:#fff;text-anchor:middle} .fs-score small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.65} #fHero{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center} #fHero small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.6} #fHero b{display:block;font:400 28px/1.15 "Serenity Serif",Georgia,serif;font-variant-numeric:tabular-nums} #fHero span{font-size:12px;opacity:.6} #fStreak{margin-bottom:14px;background:linear-gradient(120deg,rgba(255,179,107,.12),rgba(255,255,255,.02) 60%)} .fsk-h{display:flex;align-items:center;gap:8px}.fsk-h svg{color:#ffb36b;filter:drop-shadow(0 0 6px rgba(255,179,107,.6))} .fsk-h b{font:400 30px/1 "Serenity Serif",Georgia,serif}.fsk-h span{opacity:.75;font-size:14px} .fsk-d{display:flex;gap:6px;margin:12px 0 8px} .fsk-d i{flex:1;display:grid;place-items:center;height:30px;border-radius:10px;font-style:normal;font-size:12px;background:rgba(214,243,255,.06);color:rgba(214,243,255,.6)} .fsk-d i.on{background:linear-gradient(160deg,#ffcf8a,#ff9a5a);color:#2a1406;font-weight:600;box-shadow:0 0 12px rgba(255,160,90,.35)} .fsk-d i.now{outline:1.5px solid rgba(214,243,255,.6);outline-offset:1px}.fsk-d i.fut{opacity:.45} #fStreak p{margin:0;font-size:12.5px;opacity:.65} .fs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 10px} .fs-head h3{margin:0;font-size:13px;font-weight:600;color:#7fe6f2} #fRange{display:inline-flex;padding:3px;border-radius:999px;border:1px solid rgba(120,220,255,.2);background:rgba(8,24,38,.5)} #fRange button{height:30px;padding:0 14px;border:0;border-radius:999px;background:none;color:rgba(214,243,255,.7);font:inherit;font-size:13px;cursor:pointer} #fRange button.on{background:rgba(214,243,255,.14);color:#fff} #fRange button:focus-visible,#fTabBtn:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} #fTot{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px} #fTot span{display:flex;flex-direction:column;font-size:11px;opacity:.7;text-align:center} #fTot b{font-size:16px;font-weight:600;opacity:1;color:#fff;font-variant-numeric:tabular-nums} #fLegend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;opacity:.85;margin-bottom:6px} #fLegend span,.fcb .n{display:inline-flex;align-items:center;gap:6px} #fLegend i,.fcb i,#fTip i{width:9px;height:9px;border-radius:3px;display:inline-block} #fChart{min-height:150px} #fChart svg{display:block;width:100%;height:auto;overflow:visible} #fChart .ax{font-size:10px;fill:rgba(214,243,255,.55)}#fChart .ax.cur{fill:#fff;font-weight:600}#fChart .ax.sm{font-size:8.5px;fill:rgba(255,255,255,.55)} #fChart rect[tabindex]:focus{outline:none;stroke:#9ff0ff;stroke-width:1.5} .fheat-lg{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:11px;opacity:.65;margin-top:6px} .fheat-lg i{width:12px;height:12px;border-radius:3px} #fTabBtn{border:0;background:none;color:#7ee8fa;font:inherit;font-size:12.5px;cursor:pointer;padding:4px 0;margin-top:4px} .ftab{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums} .ftab th,.ftab td{padding:5px 4px;text-align:right;border-bottom:1px solid rgba(120,220,255,.1)}.ftab th:first-child,.ftab td:first-child{text-align:left} .ftab th{font-weight:500;opacity:.7}.ftab caption{caption-side:bottom;padding:10px;opacity:.6} #fTip{position:absolute;z-index:5;pointer-events:none;min-width:150px;padding:9px 11px;border-radius:12px;background:rgba(5,14,23,.96);border:1px solid rgba(120,220,255,.3);box-shadow:0 8px 24px rgba(0,0,0,.4);font-size:12px} #fTip b{display:block;margin-bottom:4px;font-size:12.5px}#fTip span{display:flex;align-items:center;gap:6px;opacity:.85}#fTip em{margin-left:auto;font-style:normal;padding-left:10px;font-variant-numeric:tabular-nums} .fcb{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px;margin:7px 0} .fcb .t{height:8px;border-radius:4px;background:rgba(214,243,255,.07);overflow:hidden}.fcb .t b{display:block;height:100%;border-radius:4px} .fcb .v{font-size:12px;opacity:.8;font-variant-numeric:tabular-nums} .fempty{margin:6px 0;font-size:13px;opacity:.6} #fWeek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px} .fday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 6px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(120,220,255,.1);font-size:11px} .fday canvas{width:100%;max-width:84px;aspect-ratio:84/72} .fday span{opacity:.7;text-transform:capitalize}.fday em{font-style:normal;display:inline-flex;align-items:center;gap:2px;color:#9fe0a0;font-variant-numeric:tabular-nums} .fday.now{border-color:rgba(255,213,138,.6);background:rgba(255,213,138,.08)}.fday.fut{opacity:.4} .fnote{font-size:12px;opacity:.55;margin:8px 0 0} @media (max-height:579px) and (min-aspect-ratio:29/20){#app #fPanel{left:auto;right:12px;top:62px;bottom:10px;margin:0;width:min(400px,50vw);max-width:none;border-radius:24px;border-bottom:1px solid rgba(120,220,255,.16);padding:14px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:center}#app #fTime{font-size:clamp(40px,12vh,64px)}#app #fSub{margin-top:2px}#app #fCats{flex-wrap:wrap;overflow:visible;justify-content:center}#app #ftoast{left:27%}} /* ===== sélecteur de section ===== */ #top #mode{display:block;position:relative;width:calc(var(--ws,120px) + 2*var(--wi,44px) + 8px);height:46px;box-sizing:border-box;padding:0;overflow:hidden;contain:layout paint} #top #mode button{position:absolute;top:4px;left:4px;width:var(--ws,120px);min-width:0;height:36px;padding:0 0 0 calc((var(--wi,44px) - 18px)/2);justify-content:flex-start;gap:6px;will-change:transform; clip-path:inset(0 calc(var(--ws,120px) - var(--cw,var(--wi,44px))) 0 0 round 999px);transition:transform .62s cubic-bezier(.3,1.18,.5,1),clip-path .62s cubic-bezier(.3,1.18,.5,1),color .45s} #top #mode button[aria-selected=true]{clip-path:inset(0 0 0 0 round 999px)} #top #mode button svg{flex:none;transition:transform .62s cubic-bezier(.3,1.18,.5,1)} #top #mode button span{display:inline;white-space:nowrap;opacity:0;transform:translateX(-8px) scale(.96);transition:opacity .22s ease,transform .5s cubic-bezier(.22,1,.36,1)} #top #mode button[aria-selected=true] svg{transform:translateX(var(--off,0px))} #top #mode button[aria-selected=true] span{opacity:1;transform:translateX(var(--off,0px));transition:opacity .42s ease .14s,transform .62s cubic-bezier(.22,1,.36,1) .06s} #top #mode .ind{left:4px;top:4px;bottom:4px;width:var(--ws,120px);will-change:transform;transition:transform .62s cubic-bezier(.3,1.18,.5,1),background .6s,box-shadow .6s} #top #mode.still .ind,#top #mode.still button,#top #mode.still button *{transition:none!important} /* ===== transitions entre sections ===== */ #ambc,#fc,.gl,#sky{will-change:opacity,transform;transform:scale(1.03);transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1)!important} #app.relax #ambc,#app.focus #fc,#app:not(.relax):not(.focus) .gl,#app:not(.relax):not(.focus) #sky{transform:none;transition:opacity .75s cubic-bezier(.22,1,.36,1) .06s,transform 1.1s cubic-bezier(.22,1,.36,1) .06s!important} #relax,#focus,#fPanel,#ui,#bx{will-change:opacity,transform} /* ===== petit écran (hauteur < 440 px) : uniquement le visuel de la section — agrandir la fenêtre pour retrouver les réglages ===== */ @media (max-height:439px){ #top,#toast,#ftoast,#bx,#sepc,#focus,#relax,.gl{opacity:0!important;visibility:hidden!important;pointer-events:none!important} #top,#bx,#focus,#relax,#toast,#ftoast{transition:opacity .3s ease,visibility 0s linear .3s} #app:not(.relax):not(.focus) #ui{top:0;padding:0;background:none} #app:not(.relax):not(.focus) #rmini{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0} } /* ===== écran d'accueil : orbe qui respire pendant le chargement ; au tout premier lancement, présentation des trois espaces ===== */ #splash{position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow:auto;background:radial-gradient(ellipse at 50% 40%,#0e2840 0%,#071423 45%,#050e17 78%);color:#d6f3ff;transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s linear .9s} #splash.out{opacity:0;visibility:hidden;pointer-events:none} #splash.out .sp-in{transform:scale(1.06)} .sp-in{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:32px 22px calc(28px + env(safe-area-inset-bottom,0px));max-width:420px;transition:transform 1s cubic-bezier(.2,.8,.2,1)} .orb{position:relative;width:132px;height:132px;flex:none} .orb i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(126,232,250,.6);animation:spB 8s cubic-bezier(.45,0,.55,1) infinite} .orb i:nth-child(2){animation-delay:-.35s;border-color:rgba(126,232,250,.38)} .orb i:nth-child(3){animation-delay:-.7s;border-color:rgba(255,213,138,.3)} .orb b{position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle,#e9fcff 0%,#7ee8fa 34%,rgba(63,170,255,.25) 62%,rgba(63,170,255,0) 72%);animation:spC 8s cubic-bezier(.45,0,.55,1) infinite} @keyframes spB{0%,100%{transform:scale(.5);opacity:.2}45%,55%{transform:scale(1);opacity:.95}} @keyframes spC{0%,100%{transform:scale(.72);opacity:.55;filter:blur(1px)}50%{transform:scale(1.2);opacity:1;filter:blur(0)}} .sp-t{position:relative;height:40px;width:220px;font:300 30px/40px "Serenity Serif",Georgia,serif;color:#fff;letter-spacing:.01em} .sp-t span{position:absolute;inset:0;opacity:0;animation:spT 8s ease-in-out infinite} .sp-t span+span{animation-delay:-4s} @keyframes spT{0%{opacity:0;transform:translateY(6px)}8%,40%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-6px)}} .sp-w{display:none} html.first .sp-w{display:flex;flex-direction:column;align-items:stretch;gap:16px;width:100%} html.first .orb{width:104px;height:104px} .sp-l{margin:6px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6} .sp-w ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left} .sp-w li{opacity:0;transform:translateY(10px);animation:spI .8s cubic-bezier(.2,.8,.2,1) forwards} .sp-c{width:100%;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 14px;border-radius:18px;border:1px solid rgba(120,220,255,.16);background:linear-gradient(135deg,rgba(80,200,255,.07),rgba(80,200,255,.02));font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .3s,background .3s,box-shadow .3s,transform .2s} .sp-c>div{flex:1;min-width:0} .sp-c:disabled{cursor:progress} .sp-c:not(:disabled):hover{border-color:rgba(var(--c),.5);background:linear-gradient(135deg,rgba(var(--c),.13),rgba(var(--c),.03));box-shadow:0 8px 26px rgba(var(--c),.12)} .sp-c:not(:disabled):active{transform:scale(.98)} .sp-c:focus-visible{outline:2px solid rgb(var(--c));outline-offset:3px} .sp-c>svg.chev{flex:none;width:18px;height:18px;color:rgb(var(--c));opacity:.4;transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1)} .sp-c:not(:disabled):hover>svg.chev,.sp-c:focus-visible>svg.chev{opacity:.95;transform:translateX(3px)} .sp-c:disabled>svg.chev{opacity:.15} .sp-w li:nth-child(1){animation-delay:.5s}.sp-w li:nth-child(2){animation-delay:.68s}.sp-w li:nth-child(3){animation-delay:.86s} @keyframes spI{to{opacity:1;transform:none}} .sp-c>svg.ic{flex:none;width:40px;height:40px;padding:9px;box-sizing:border-box;border-radius:14px;background:rgba(var(--c),.14);color:rgb(var(--c))} .sp-w li b{display:block;font-size:15.5px;color:#fff} .sp-w li span{display:block;font-size:13px;line-height:1.4;opacity:.72;margin-top:2px} #spGo{height:54px;margin-top:6px;border:0;border-radius:999px;font:inherit;font-size:16.5px;font-weight:600;color:#04121c;background:linear-gradient(135deg,#c9f8ff,#7ee8fa 55%,#9fe0a0);box-shadow:0 10px 34px rgba(126,232,250,.28);cursor:pointer;opacity:0;animation:spI .8s cubic-bezier(.2,.8,.2,1) 1.05s forwards;transition:transform .2s,filter .3s} #spGo:disabled{filter:grayscale(.6) brightness(.7);cursor:progress} #spGo:active{transform:scale(.97)} #spGo:focus-visible{outline:2px solid #9ff0ff;outline-offset:3px} @media(max-height:620px){html.first .orb,.sp-t{display:none}} @media(prefers-reduced-motion:reduce){.orb i,.orb b,.sp-t span{animation-duration:16s}.sp-w li,#spGo{animation:none;opacity:1;transform:none}} /* ===== guidage (voix, vibrations) ===== */ .tgrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:rgba(80,200,255,.06);border:1px solid rgba(120,220,255,.16)} .tgrow+.tgrow{margin-top:8px} .tgrow b{display:block;font-size:14px;font-weight:500} .tgrow small{display:block;font-size:12px;opacity:.62;margin-top:1px;line-height:1.35} .tg{position:relative;width:46px;height:28px;padding:0;border-radius:999px;border:1px solid rgba(120,220,255,.35);background:rgba(8,24,38,.6);cursor:pointer;transition:background .3s,border-color .3s} .tg i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#d6f3ff;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.3,1.5,.5,1),background .3s} .tg[aria-checked=true]{background:linear-gradient(135deg,#7ee8fa,#5fd0e8);border-color:transparent} .tg[aria-checked=true] i{transform:translateX(18px);background:#04121c} .tg:focus-visible{outline:2px solid #9ff0ff;outline-offset:3px} /* ===== bilan de fin de séance ===== */ dialog.dn{width:min(420px,calc(100% - 24px));max-height:calc(100% - 24px);border-radius:28px;border-color:rgba(126,232,250,.35);background:radial-gradient(ellipse at 50% 0%,#12324a 0%,#0a1a28 55%);overflow:auto;animation:dnIn .7s cubic-bezier(.2,.9,.25,1.15)} dialog.dn::backdrop{background:rgba(2,8,14,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} @keyframes dnIn{from{opacity:0;transform:translateY(24px) scale(.94)}} #dnFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .dn-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 20px 20px} .dn-ck svg{width:68px;height:68px;fill:none;stroke-linecap:round;stroke-linejoin:round} .dn-ck circle{stroke:#7ee8fa;stroke-width:2.5;stroke-dasharray:176;stroke-dashoffset:176;animation:dnD 1s cubic-bezier(.6,0,.2,1) .15s forwards;filter:drop-shadow(0 0 8px rgba(126,232,250,.6))} .dn-ck path{stroke:#e9fcff;stroke-width:3.5;stroke-dasharray:40;stroke-dashoffset:40;animation:dnD .5s cubic-bezier(.6,0,.2,1) .9s forwards} @keyframes dnD{to{stroke-dashoffset:0}} .dn-in h2{margin:0;font:400 27px/1.15 "Serenity Serif",Georgia,serif;color:#fff} .dn-sub{margin:-8px 0 0;font-size:13.5px;opacity:.7} .dn-st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%} .dn-st>div{padding:12px 4px 10px;border-radius:16px;background:rgba(80,200,255,.06);border:1px solid rgba(120,220,255,.14);opacity:0;animation:spI .6s cubic-bezier(.2,.8,.2,1) forwards} .dn-st>div:nth-child(1){animation-delay:.35s}.dn-st>div:nth-child(2){animation-delay:.45s}.dn-st>div:nth-child(3){animation-delay:.55s} .dn-st b{display:block;font:400 26px/1.1 "Serenity Serif",Georgia,serif;color:#fff;font-variant-numeric:tabular-nums} .dn-st small{display:block;font-size:11.5px;opacity:.62;margin-top:3px} .dn-st .fl b{color:#ffc48a} .dn-day{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:18px;border:1px solid rgba(120,220,255,.14);background:rgba(255,255,255,.025);text-align:left;opacity:0;animation:spI .6s cubic-bezier(.2,.8,.2,1) .65s forwards} .dn-day>svg{flex:none;width:52px;height:52px;transform:rotate(-90deg)} .dn-day circle{fill:none;stroke-width:5} .dn-day .bg{stroke:rgba(214,243,255,.1)} .dn-day .fg{stroke:url(#dnGr);stroke-linecap:round;stroke-dasharray:132;stroke-dashoffset:132;transition:stroke-dashoffset 1.4s cubic-bezier(.3,0,.2,1) .8s} .dn-day .tx{flex:1;min-width:0} .dn-day .tx b{display:block;font-size:15px;color:#fff} .dn-day .tx small{display:block;font-size:12.5px;opacity:.65;margin-top:2px} .dn-wk{display:flex;gap:5px;margin-top:8px} .dn-wk i{position:relative;width:20px;height:20px;border-radius:50%;border:1px solid rgba(214,243,255,.16);font:600 9.5px/18px "Serenity Sans",system-ui,sans-serif;font-style:normal;text-align:center;color:rgba(214,243,255,.45);box-sizing:border-box} .dn-wk i.on{border-color:transparent;background:linear-gradient(135deg,#7ee8fa,#9fe0a0);color:#04121c} .dn-wk i.td{box-shadow:0 0 0 2px rgba(126,232,250,.35)} .dn-md{width:100%;opacity:0;animation:spI .6s cubic-bezier(.2,.8,.2,1) .8s forwards} .dn-md>span{display:block;font-size:13px;letter-spacing:.04em;opacity:.75;margin-bottom:10px} #dnMood{display:flex;justify-content:center;gap:6px} #dnMood button{display:flex;flex-direction:column;align-items:center;gap:4px;width:62px;padding:8px 0 6px;border:1px solid transparent;border-radius:16px;background:none;color:rgba(214,243,255,.7);font:inherit;font-size:11px;cursor:pointer;transition:background .25s,border-color .25s,transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s} #dnMood button svg{width:34px;height:34px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)} #dnMood button:hover{background:rgba(255,255,255,.04)} #dnMood button:hover svg{transform:scale(1.08)} #dnMood button[aria-checked=true]{border-color:rgba(var(--c),.7);background:rgba(var(--c),.12);color:#fff} #dnMood button[aria-checked=true] svg{transform:scale(1.18)} #dnMood.sel button[aria-checked=false]{opacity:.42} #dnMood button:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} #dnMsg{min-height:1.4em;margin:10px 4px 0;font-size:13.5px;line-height:1.45;color:#e9fcff;opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s} #dnMsg.on{opacity:.9;transform:none} .dn-act{display:flex;gap:10px;width:100%;margin-top:4px} .dn-act button{flex:1;height:50px;border-radius:999px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;transition:transform .2s,background .25s} .dn-act button:active{transform:scale(.97)} #dnAgain{border:1px solid rgba(120,220,255,.4);background:rgba(80,200,255,.08);color:#d6f3ff} #dnClose{border:0;color:#04121c;background:linear-gradient(135deg,#c9f8ff,#7ee8fa)} .dn-act button:focus-visible{outline:2px solid #9ff0ff;outline-offset:3px} /* ===== Détente : ciel vide = invitation ===== */ #rxHint{position:absolute;left:0;right:0;top:27%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 24px;text-align:center;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)} #app.relax.rxe #rxHint{opacity:1;transform:none;transition-delay:.4s} #rxHint svg{width:34px;height:34px;color:#ffe6a8;animation:rxS 3.2s ease-in-out infinite} @keyframes rxS{50%{transform:scale(1.12) rotate(8deg);opacity:.7}} #rxHint b{font:400 22px/1.25 "Serenity Serif",Georgia,serif;color:#fff} #rxHint span{font-size:13.5px;opacity:.65} #app.rxe #rxPlay.surp{animation:rxQ 2.6s ease-in-out infinite} @keyframes rxQ{0%,100%{box-shadow:0 0 0 0 rgba(255,213,138,.35),0 0 22px rgba(255,213,138,.3)}50%{box-shadow:0 0 0 12px rgba(255,213,138,0),0 0 36px rgba(255,213,138,.55)}} @keyframes rxP{50%{box-shadow:0 0 0 4px rgba(126,232,250,.12),0 0 22px rgba(126,232,250,.35)}} @media(max-height:439px){#rxHint{display:none}} @media(prefers-reduced-motion:reduce){#rxHint svg,#app.rxe #rxPlay.surp{animation:none}} .pl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 6px} .pl button{display:flex;align-items:center;gap:10px;padding:10px 12px;font:inherit;font-size:13.5px;text-align:left;color:#d6f3ff;background:rgba(80,200,255,.05);border:1px solid rgba(120,220,255,.28);border-radius:16px;cursor:pointer;transition:background .25s,border-color .25s} .pl button svg{flex:none;width:30px;height:46px;overflow:visible} .pl button svg .gl{transform-box:fill-box;transform-origin:50% 60%;opacity:.7;transition:opacity .3s} .pl button.on svg .gl{opacity:1;animation:plB 4.5s ease-in-out infinite} @keyframes plB{50%{transform:scale(1.07)}} @media(prefers-reduced-motion:reduce){.pl button.on svg .gl{animation:none}} .pl button span{align-self:flex-start;margin-top:7px} @media(max-width:360px){.pl button{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 6px}.pl button span{align-self:center;margin-top:0}} .pl button small{display:block;font-size:11.5px;opacity:.6;margin-top:1px} .pl button.on{background:rgba(80,200,255,.18);border-color:rgba(160,240,255,.85)} .pl button:focus-visible{outline:2px solid #9ff0ff;outline-offset:2px} /* partage */ #top .tr{pointer-events:none}#shareBtn svg{transition:transform .5s cubic-bezier(.3,1.3,.5,1)}#shareBtn:hover svg{transform:translateY(-2px)} .shb{display:grid;gap:12px;padding:4px 18px calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto} .shc{border:1px solid rgba(120,220,255,.18);border-radius:18px;padding:14px 16px;background:rgba(80,200,255,.04);min-width:0} .shc.cur{border-color:rgba(255,213,138,.38);background:linear-gradient(135deg,rgba(255,213,138,.08),rgba(159,240,168,.05))} .shc h3{margin:0;font-size:15px;font-weight:600} .shc p{margin:4px 0 10px;font-size:13px;opacity:.75} .shc code{display:block;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9ff0ff;background:rgba(0,0,0,.25);border-radius:10px;padding:8px 10px;overflow-wrap:anywhere;user-select:all} .sha{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.sha .chip{font-size:14px}.sha .chip.ok{border-color:rgba(159,240,168,.8);color:#c8f7cc}