/* ═══════════════════════════════════════════════════════════
   QENTINA JARVIS — Liquid Glass design system
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#f5f1e8; --ink2:rgba(245,241,232,.66); --ink3:rgba(245,241,232,.40);
  --glass:rgba(255,255,255,.075); --glass2:rgba(255,255,255,.12); --glass3:rgba(255,255,255,.18);
  --stroke:rgba(255,255,255,.14); --stroke2:rgba(255,255,255,.26);
  --teal:#2fb3a8; --teal-d:#0f5460; --cream:#f4ecd9; --ember:#ff8a3d; --ember2:#ffb35c;
  --ok:#4ade80; --warn:#fbbf24; --bad:#ff5a5f;
  --r-xl:30px; --r-l:22px; --r-m:16px; --r-s:12px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.55), 0 2px 0 0 rgba(255,255,255,.06) inset;
  --blur:saturate(180%) blur(28px);
  --ease:cubic-bezier(.2,.9,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  font-synthesis:none;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#050807;color:var(--ink);overflow:hidden;
  font-family:"Inter",-apple-system,"SF Pro Display",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none}
input,textarea{user-select:text;-webkit-user-select:text}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.serif{font-family:"Fraunces",Georgia,serif}
.num{font-variant-numeric:tabular-nums}

/* ── fond vivant ───────────────────────────────── */
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px) saturate(140%);opacity:.9}
/* Fond FIXE : l'animation d'un calque flouté (blur 70px) recalculait tout l'écran à chaque image → 300 ms/image sur la tablette. */
.aurora{contain:strict}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){width:55vmax;height:55vmax;left:-5%;top:-10%;background:radial-gradient(circle,#0f5460 0%,transparent 65%)}
.aurora i:nth-child(2){width:45vmax;height:45vmax;right:-8%;bottom:-12%;background:radial-gradient(circle,#b8461a 0%,transparent 62%);animation-duration:32s}
.aurora i:nth-child(3){width:35vmax;height:35vmax;left:40%;top:30%;background:radial-gradient(circle,#1d7f76 0%,transparent 60%);animation-duration:22s;opacity:.7}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-4vh) scale(1.12)}100%{transform:translate(-4vw,5vh) scale(.95)}}

/* ── verre ─────────────────────────────────────── */
.glass{position:relative;background:linear-gradient(160deg,var(--glass2),var(--glass) 55%);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--stroke);border-radius:var(--r-l);box-shadow:var(--shadow);isolation:isolate}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 38%);opacity:.55;mask:linear-gradient(#000,transparent 60%)}
.glass.hi{background:linear-gradient(160deg,var(--glass3),var(--glass2))}
.pill{border-radius:999px}
.press{transition:transform .35s var(--spring),background .2s,opacity .2s}
.press:active{transform:scale(.95)}

/* ── app shell ─────────────────────────────────── */
#app{position:relative;z-index:2;height:100dvh;display:flex;flex-direction:column;padding:14px 16px 12px;gap:12px}
.topbar{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand b{font-family:"Fraunces",serif;font-weight:600;font-size:21px;letter-spacing:.5px;color:var(--cream)}
.brand small{font-size:10px;letter-spacing:2.6px;color:var(--ink3);text-transform:uppercase}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.dot.ok{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.dot.err{background:var(--bad);box-shadow:0 0 12px var(--bad)}
.spacer{flex:1}
.clock-s{font-weight:300;font-size:34px;letter-spacing:1px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.08);border:1px solid var(--stroke)}
.chip.midi{background:rgba(255,179,92,.16);border-color:rgba(255,179,92,.35);color:#ffd9ad}
.chip.soir{background:rgba(47,179,168,.16);border-color:rgba(47,179,168,.35);color:#b6f1ea}
.iconbtn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:19px;
  background:rgba(255,255,255,.08);border:1px solid var(--stroke)}

/* ── segmented ─────────────────────────────────── */
.seg{display:inline-flex;padding:4px;gap:2px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid var(--stroke);position:relative}
.seg button{position:relative;z-index:1;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink2);transition:color .25s}
.seg button.on{color:#06201e}
.seg .thumb{position:absolute;z-index:0;top:4px;bottom:4px;border-radius:999px;background:linear-gradient(180deg,#fff,#dff3ef);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:left .45s var(--spring),width .45s var(--spring)}

/* ── scroll zone ───────────────────────────────── */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:10px}
.scroll::-webkit-scrollbar{display:none}

/* ── states ────────────────────────────────────── */
.empty{display:grid;place-items:center;text-align:center;gap:10px;padding:60px 20px;color:var(--ink2)}
.empty .big{font-size:52px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.empty h3{font-family:"Fraunces",serif;font-weight:500;font-size:24px;color:var(--ink)}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--r-m)}
@keyframes sk{to{background-position:-200% 0}}
.fade-in{animation:fin .5s var(--ease) both}
@keyframes fin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ── sheet ─────────────────────────────────────── */
.sheet-back{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-back.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:51;left:50%;bottom:0;width:min(760px,100%);max-height:88dvh;transform:translate(-50%,105%);
  transition:transform .55s var(--spring);border-radius:32px 32px 0 0;display:flex;flex-direction:column;overflow:hidden}
.sheet.on{transform:translate(-50%,0)}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:rgba(255,255,255,.3);margin:10px auto 2px}
.sheet .body{overflow-y:auto;padding:8px 22px 28px;scrollbar-width:none}

.toast{position:fixed;left:50%;top:18px;z-index:90;transform:translate(-50%,-140%);transition:transform .5s var(--spring);
  padding:12px 20px;font-weight:600;font-size:14px}
.toast.on{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── interrupteur iOS ─────────────────────────── */
.switch{width:52px;height:32px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;transition:background .3s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .4s var(--spring);box-shadow:0 3px 8px rgba(0,0,0,.35)}
.switch.on{background:var(--ok)} .switch.on::after{left:23px}