/* ANAPNOÉ — respiration guidée.
   Direction : une source thermale la nuit. Eau turquoise, profondeur d'encre,
   une lumière qui respire. Calme, jamais clignotant. */
:root{
  /* Crépuscule apaisant : violet doux, jamais noir ; accents menthe et pêche. */
  --nuit:#221c40;
  --abysse:#141029;
  --haut:#4a3d78;
  --eau:#5f8fc9;
  --eau-clair:#8fc4de;
  --ecume:#bdeee0;
  --or-doux:#cfc3f2;
  --or-profond:#a893e6;
  --brume:#e6e1f4;
  --brume-faible:#a49bc4;
  --texte:#f6f3fc;
  --safe-t:env(safe-area-inset-top);
  --safe-b:env(safe-area-inset-bottom);
  --lisser:cubic-bezier(.4,.14,.3,1);
  /* surfaces thémables */
  --surface1:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.02);
  --lisere:rgba(189,238,224,.12);
  --creux:rgba(20,16,41,.4);
  --ombre:rgba(20,16,41,.4);
  --zone-txt:#2a2347;
  --tube-a:rgba(20,16,41,.6);
  --tube-b:rgba(95,143,201,.12);
  --marque1:#ffffff;
  --astre1:rgba(143,196,222,.4);
  --astre2:rgba(189,238,224,.28);
  --astre3:rgba(207,195,242,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(140% 100% at 50% -20%, var(--haut) 0%, var(--nuit) 52%, var(--abysse) 100%);
  color:var(--texte);
  overflow:hidden;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}

/* ── ciel vivant ── */
.ciel{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.astre{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5;
  animation:derive 28s ease-in-out infinite alternate}
.a1{width:360px;height:360px;left:-90px;top:-70px;
  background:radial-gradient(circle,var(--astre1),transparent 70%)}
.a2{width:320px;height:320px;right:-110px;top:34%;
  background:radial-gradient(circle,var(--astre2),transparent 70%);animation-duration:36s}
.a3{width:300px;height:300px;left:22%;bottom:-100px;
  background:radial-gradient(circle,var(--astre3),transparent 70%);animation-duration:44s}
@keyframes derive{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(22px,-28px,0) scale(1.12)}}

/* ── écrans ── */
.ecran{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;height:var(--h,100dvh);z-index:1;
  display:none;flex-direction:column;
  padding:calc(var(--safe-t) + 20px) 22px calc(var(--safe-b) + 20px);
  opacity:0;transition:opacity .7s var(--lisser)}
.ecran.actif{display:flex;opacity:1}

/* ── coque à onglets (mobile-first) ── */
.app{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;height:var(--h,100dvh);z-index:1;
  display:flex;flex-direction:column}
.app.cache{display:none}
.entete{text-align:center;padding:calc(var(--safe-t) + 16px) 20px 10px;
  display:flex;flex-direction:column;align-items:center;gap:9px;flex:none}
.vue{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;
  flex-direction:column;gap:12px;padding:6px 20px 16px}
.vue.actif{display:flex}
#vue-reglages{gap:15px}
/* barre d'onglets en bas */
.tabbar{flex:none;display:flex;gap:4px;
  padding:9px 18px calc(var(--safe-b) + 9px);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.06) 40%);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.tab{flex:1;background:none;border:none;cursor:pointer;color:var(--brume-faible);
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;
  font-size:10.5px;font-weight:500;letter-spacing:.03em;transition:color .25s var(--lisser)}
.tab svg{width:24px;height:24px;transition:transform .25s var(--lisser)}
.tab.actif{color:var(--ecume)}
.tab.actif svg{transform:scale(1.08)}
.tab:active{transform:scale(.94)}
/* guide */
.fiche{background:linear-gradient(158deg,var(--surface1),var(--surface2));
  box-shadow:inset 0 0 0 1px var(--lisere);border-radius:20px;padding:18px 20px;
  display:flex;flex-direction:column;gap:8px}
.fiche h2{font-size:17px;font-weight:500;letter-spacing:.03em;color:var(--texte)}
.fiche p{font-size:13.5px;line-height:1.6;color:var(--brume);font-weight:300}
.fiche-note{color:var(--brume-faible);font-size:12.5px}
.sceau{width:46px;height:46px;display:grid;place-items:center;position:relative}
.sceau::before,.sceau::after,.sceau span{content:"";position:absolute;border-radius:50%}
.sceau::before{width:46px;height:46px;box-shadow:0 0 0 1px rgba(189,238,224,.5);animation:souffle 8s var(--lisser) infinite}
.sceau::after{width:30px;height:30px;box-shadow:0 0 0 1px rgba(143,196,222,.6);animation:souffle 8s var(--lisser) infinite .3s}
.sceau span{width:12px;height:12px;background:radial-gradient(circle at 40% 35%,#fff,var(--ecume) 55%,var(--eau) 100%);
  box-shadow:0 0 16px rgba(189,238,224,.7)}
@keyframes souffle{0%,100%{transform:scale(.82);opacity:.55}45%{transform:scale(1.08);opacity:1}}
.marque{font-weight:200;font-size:clamp(24px,7.4vw,32px);letter-spacing:.44em;text-indent:.44em;
  background:linear-gradient(180deg,var(--marque1),var(--brume) 60%,var(--brume-faible));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.devise{font-weight:300;font-size:12px;letter-spacing:.34em;color:var(--eau-clair);text-transform:uppercase;opacity:.85}

.prog{position:relative;text-align:left;cursor:pointer;color:var(--texte);border:none;
  background:linear-gradient(158deg,var(--surface1),var(--surface2));
  box-shadow:inset 0 0 0 1px var(--lisere),0 6px 22px var(--ombre);
  border-radius:22px;padding:17px 19px;display:flex;flex-direction:column;gap:5px;overflow:hidden;
  transition:transform .24s var(--lisser),box-shadow .24s}
.prog::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:linear-gradient(158deg,rgba(189,238,224,.1),transparent 42%);opacity:0;transition:opacity .24s}
.prog:active{transform:scale(.975)}
.prog:active::after{opacity:1}
.prog-478{background:linear-gradient(150deg,rgba(143,196,222,.2),rgba(189,238,224,.12) 92%);
  box-shadow:inset 0 0 0 1px rgba(189,238,224,.3),0 8px 30px rgba(95,143,201,.22)}
.prog-ligne{display:flex;align-items:center;justify-content:space-between}
.prog-nom{font-size:20px;font-weight:500;letter-spacing:.03em}
.prog-478 .prog-nom{font-size:23px;letter-spacing:.2em}
.prog-fleche{font-size:22px;font-weight:300;color:var(--brume-faible);line-height:1;
  transition:transform .24s var(--lisser),color .24s}
.prog:active .prog-fleche{transform:translateX(4px);color:var(--ecume)}
.prog-desc{font-size:13px;line-height:1.5;color:var(--brume);font-weight:300}
.prog-meta{font-size:11.5px;color:var(--or-doux);letter-spacing:.05em;margin-top:1px;font-weight:400}
.prog-meta-min{color:var(--brume-faible)}

.reglage{display:flex;align-items:center;justify-content:space-between;gap:12px}
.reglage-nom{font-size:13px;color:var(--brume);font-weight:400;letter-spacing:.02em;white-space:nowrap}
.reglage-aide{font-size:10px;color:var(--brume-faible);letter-spacing:.01em;font-weight:300;opacity:.7}
.choix{display:flex;gap:5px;background:var(--creux);border-radius:13px;padding:4px}
.choix button{border:none;background:transparent;color:var(--brume-faible);cursor:pointer;
  font-size:12.5px;font-weight:400;padding:8px 12px;border-radius:9px;min-width:44px;
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1;transition:background .22s,color .22s}
.choix button small{font-size:9px;letter-spacing:.06em;opacity:.7;font-weight:300}
.choix button.on{background:linear-gradient(160deg,rgba(143,196,222,.34),rgba(95,143,201,.24));color:var(--texte)}
.reglage-col,.reglage-son{flex-direction:column;align-items:flex-start;gap:9px}
.reglage-col .reglage-nom,.reglage-son .reglage-nom{display:flex;align-items:baseline;gap:8px}
.choix-large,.choix-son{width:100%;justify-content:space-between}
.choix-large button,.choix-son button{flex:1;min-width:0;padding:9px 4px;font-size:12px}

/* ── séance ── */
#ecran-seance{justify-content:space-between;text-align:center}
.seance-haut{padding-top:6px;display:flex;flex-direction:column;gap:14px}
.phase-bloc{min-height:92px;display:flex;flex-direction:column;gap:4px}
.phase{font-size:clamp(23px,7.2vw,30px);font-weight:300;letter-spacing:.16em;color:var(--texte);transition:color .6s var(--lisser)}
.phase.p-inspire{color:var(--ecume)}
.phase.p-retiens{color:var(--or-doux)}
.phase.p-expire{color:var(--eau-clair)}
.decompte{font-size:56px;font-weight:100;line-height:1;color:var(--brume);font-variant-numeric:tabular-nums;opacity:.9}

/* ── UN SEUL RUBAN : le cycle entier, zones proportionnelles aux secondes,
     un curseur de lumière le parcourt en continu ── */
.ruban{position:relative;height:46px;border-radius:23px;overflow:hidden;margin:0 6px;
  background:var(--creux);box-shadow:inset 0 0 0 1px var(--lisere),inset 0 4px 14px rgba(0,0,0,.18)}
.ruban-zones{position:absolute;inset:0;display:flex}
.zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(180deg,var(--zc1),var(--zc2));opacity:.34;transition:opacity .5s var(--lisser)}
.zone.actif{opacity:.85}
.zone-txt{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--zone-txt);text-transform:uppercase}
.zone-sec{font-size:9px;font-weight:500;color:rgba(42,35,71,.72);font-variant-numeric:tabular-nums}
.zone.zi{--zc1:#cdf5e7;--zc2:#8fd8c8}
.zone.zr{--zc1:#e6def8;--zc2:#bfaee9}
.zone.ze{--zc1:#b5dcf1;--zc2:#7fadd6}
.ruban-voile{position:absolute;inset:0;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25) 92%,rgba(255,255,255,.55));
  mix-blend-mode:screen;pointer-events:none}
.ruban-curseur{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;will-change:transform;
  background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.85),0 0 30px 8px rgba(189,238,224,.5);
  pointer-events:none}

.colonne{flex:1;display:flex;align-items:center;justify-content:center}
.tube{position:relative;width:96px;height:min(58vh,520px)}
.tube-verre{position:absolute;inset:0;border-radius:48px;overflow:hidden;
  background:linear-gradient(180deg,var(--tube-a),var(--tube-b));
  box-shadow:inset 0 0 0 1px rgba(189,238,224,.18),inset 0 2px 30px rgba(0,0,0,.55),0 0 50px rgba(95,143,201,.14)}
.eau{position:absolute;left:0;right:0;top:0;height:100%;transform:translateY(92%);will-change:transform;
  background:linear-gradient(180deg,rgba(143,196,222,.34),rgba(95,143,201,.5) 40%,rgba(38,48,94,.62));
  box-shadow:0 -10px 28px rgba(143,196,222,.28),inset 0 6px 18px rgba(189,238,224,.12)}
.onde{position:absolute;top:-1px;left:0;right:0;height:10px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(189,238,224,.4),transparent 70%)}
.o1{animation:ondule 5s ease-in-out infinite}
.o2{animation:ondule 7s ease-in-out infinite reverse;opacity:.5}
@keyframes ondule{0%,100%{transform:translateX(-6%) scaleX(1)}50%{transform:translateX(6%) scaleX(1.06)}}
/* perles d'air : ne remontent que pendant l'inspiration */
.perle{position:absolute;bottom:12px;z-index:2;width:5px;height:5px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(189,238,224,.75) 60%,rgba(189,238,224,.2));
  filter:drop-shadow(0 0 3px rgba(189,238,224,.5))}
.tube.inspire .perle{animation:perle-monte 2.6s ease-in infinite}
.p1{left:26%;animation-delay:0s}
.p2{left:48%;width:3.5px;height:3.5px;animation-delay:.9s}
.p3{left:66%;animation-delay:1.5s}
.p4{left:38%;width:3px;height:3px;animation-delay:2s}
@keyframes perle-monte{0%{transform:translateY(0);opacity:0}12%{opacity:.85}
  85%{opacity:.5}100%{transform:translateY(-320px);opacity:0}}
.bulle{position:absolute;left:50%;bottom:0;width:72px;height:72px;margin-left:-36px;transform:translateY(0);will-change:transform}
.bulle-corps{position:absolute;inset:0;will-change:transform;transition:none}
.bulle-echo{position:absolute;inset:-8px;border-radius:50%;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(circle at 42% 36%,rgba(255,255,255,.7),rgba(189,238,224,.25) 55%,transparent 75%)}
.bulle-lueur{position:absolute;inset:-26px;border-radius:50%;filter:blur(6px);
  background:radial-gradient(circle,rgba(189,238,224,.42),transparent 68%);transition:background .6s var(--lisser)}
.bulle-coeur{position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 37% 30%,#fff 0%,var(--ecume) 32%,var(--eau-clair) 68%,var(--eau) 100%);
  box-shadow:0 0 22px rgba(189,238,224,.5),inset -6px -8px 16px rgba(26,20,50,.4);
  transition:background .6s var(--lisser),box-shadow .6s var(--lisser)}
.bulle.retiens .bulle-lueur{background:radial-gradient(circle,rgba(207,195,242,.5),transparent 68%);
  animation:pulse-retiens 3.2s ease-in-out infinite}
@keyframes pulse-retiens{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.1);opacity:1}}
.bulle.retiens .bulle-coeur{background:radial-gradient(circle at 37% 30%,#fff 0%,var(--or-doux) 34%,var(--or-profond) 78%,#8d78cf 100%);
  box-shadow:0 0 30px rgba(207,195,242,.6),inset -6px -8px 16px rgba(44,36,80,.4)}
.anneau{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#anneau-arc{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:207.3;stroke-dashoffset:207.3;filter:drop-shadow(0 0 3px rgba(189,238,224,.6))}

.seance-bas{min-height:110px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px}
.progression{font-size:12.5px;color:var(--brume-faible);letter-spacing:.08em;min-height:15px}
.seance-actions{display:flex;gap:12px;justify-content:center}
.rond{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(189,238,224,.2);color:var(--texte);
  font-size:14.5px;font-weight:400;letter-spacing:.05em;padding:13px 28px;border-radius:40px;cursor:pointer;
  border:none;min-width:118px;transition:transform .2s var(--lisser),background .2s}
.rond:active{transform:scale(.96);background:rgba(255,255,255,.12)}
.rond.discret{background:transparent;color:var(--brume-faible);box-shadow:inset 0 0 0 1px rgba(230,225,244,.12)}

/* voiles de phase : la couleur de la pièce respire avec elle */
.voile-phase{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1.6s var(--lisser)}
.vp-inspire{background:radial-gradient(120% 90% at 50% 30%,rgba(189,238,224,.14),transparent 70%)}
.vp-retiens{background:radial-gradient(120% 90% at 50% 30%,rgba(207,195,242,.16),transparent 70%)}
.vp-expire{background:radial-gradient(120% 90% at 50% 70%,rgba(143,196,222,.14),transparent 70%)}
body.ph-inspire .vp-inspire,body.ph-retiens .vp-retiens,body.ph-expire .vp-expire{opacity:1}

/* grain léger : jamais d'aplat parfait */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;mix-blend-mode:overlay;
  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'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── fin ── */
#ecran-fin{justify-content:center;align-items:center;text-align:center}
.fin-bloc{display:flex;flex-direction:column;gap:13px;align-items:center;max-width:320px}
.fin-sceau{width:60px;height:60px;position:relative;display:grid;place-items:center;margin-bottom:8px}
.fin-sceau span{width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,var(--ecume) 55%,var(--eau) 100%);box-shadow:0 0 30px rgba(189,238,224,.7)}
.fin-sceau::before{content:"";position:absolute;width:60px;height:60px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(189,238,224,.35);animation:souffle 9s var(--lisser) infinite}
.fin-titre{font-size:29px;font-weight:200;letter-spacing:.16em;color:var(--brume)}
.fin-resume{font-size:14.5px;color:var(--eau-clair);font-weight:300;letter-spacing:.04em}
.fin-note{font-size:13.5px;color:var(--brume-faible);font-weight:300;line-height:1.6;margin-bottom:10px}
.fin-actions{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:6px}
.fin-actions .rond{width:100%}

@media (prefers-reduced-motion:reduce){
  .ecran{transition:none}
  .astre,.sceau::before,.sceau::after,.onde,.fin-sceau::before{animation:none}
}

/* ── AMBIANCES VISUELLES ────────────────────────────────────────────────── */
/* Aube : lever du jour, rose poudré et lavande pâle, lumière montante. */
:root[data-theme="aube"]{
  --haut:#ffe4d6; --nuit:#f3e3ea; --abysse:#e3d8ef;
  --eau:#7fa3dc; --eau-clair:#5f96c9; --ecume:#57bfa4;
  --or-doux:#9c86dd; --or-profond:#8d78cf;
  --brume:#544a7d; --brume-faible:#8a7fa8; --texte:#3a3160;
  --surface1:rgba(255,255,255,.6); --surface2:rgba(255,255,255,.28);
  --lisere:rgba(87,191,164,.25); --creux:rgba(122,100,160,.14);
  --ombre:rgba(122,100,160,.22); --zone-txt:#3a3160;
  --tube-a:rgba(255,255,255,.5); --tube-b:rgba(127,163,220,.14);
  --marque1:#3a3160;
  --astre1:rgba(255,178,150,.5); --astre2:rgba(255,214,170,.45); --astre3:rgba(190,170,235,.4);
}
:root[data-theme="aube"] .marque{background:linear-gradient(180deg,#463c72,#544a7d 60%,#8a7fa8);
  -webkit-background-clip:text;background-clip:text}
:root[data-theme="aube"] .bulle-coeur{background:radial-gradient(circle at 37% 30%,#fff 0%,#ffd9c9 34%,#8fc9b8 70%,#7fa3dc 100%)}
:root[data-theme="aube"] .rond{background:rgba(255,255,255,.5);color:var(--texte)}
:root[data-theme="aube"] .rond.discret{background:transparent}

/* Plein soleil : midi d'été, ciel franc, eau claire, énergie tranquille. */
:root[data-theme="soleil"]{
  --haut:#bfe6f7; --nuit:#e8f4fa; --abysse:#d2e9f4;
  --eau:#2a8fb8; --eau-clair:#1f7fae; --ecume:#1fa88c;
  --or-doux:#7d68c9; --or-profond:#6d58b9;
  --brume:#1d4b66; --brume-faible:#5b83a0; --texte:#12384f;
  --surface1:rgba(255,255,255,.72); --surface2:rgba(255,255,255,.4);
  --lisere:rgba(31,168,140,.25); --creux:rgba(42,110,150,.12);
  --ombre:rgba(42,110,150,.2); --zone-txt:#12384f;
  --tube-a:rgba(255,255,255,.55); --tube-b:rgba(42,143,184,.14);
  --marque1:#12384f;
  --astre1:rgba(255,236,160,.55); --astre2:rgba(160,224,255,.5); --astre3:rgba(120,210,190,.4);
}
:root[data-theme="soleil"] .marque{background:linear-gradient(180deg,#0e2f42,#1d4b66 60%,#5b83a0);
  -webkit-background-clip:text;background-clip:text}
:root[data-theme="soleil"] .bulle-coeur{background:radial-gradient(circle at 37% 30%,#fff 0%,#c9f0e6 32%,#4fb8d8 68%,#2a8fb8 100%)}
:root[data-theme="soleil"] .rond{background:rgba(255,255,255,.6);color:var(--texte)}
:root[data-theme="soleil"] .rond.discret{background:transparent}
:root[data-theme="aube"] .decompte,:root[data-theme="soleil"] .decompte{opacity:1}