/* ============================================================
   CAP QUARANTE — Espace membre (PWA)
   Surcouche de styles.css. Mobile-first, pouce-friendly.
   ============================================================ */

body.app{background:var(--paper);padding-bottom:96px}

/* ---- Top bar ---- */
.app-top{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:rgba(245,241,233,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(19,49,59,.08);
}
.app-top .nav-logo{font-size:1.06rem}
.app-top .nav-logo svg{width:30px;height:30px}
.app-avatar{width:42px;height:42px;border-radius:50%;background:var(--cap-navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1rem}

/* ---- Conteneur app ---- */
.app-main{max-width:760px;margin-inline:auto;padding:22px 18px 40px}
.app-main.wide{max-width:1040px}

/* ---- Bottom tab nav ---- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:space-around;align-items:center;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(245,241,233,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(19,49,59,.1);
}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:.7rem;font-weight:600;color:var(--slate);padding:6px 10px;border-radius:12px;transition:color .25s}
.tabbar a svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.9;fill:none}
.tabbar a.active{color:var(--signal)}
.tabbar a.tab-cta{background:var(--signal);color:#fff;padding:10px 16px;margin-top:-18px;border-radius:18px;box-shadow:var(--shadow-signal)}
.tabbar a.tab-cta svg{stroke:#fff}

/* ---- Greeting ---- */
.greet h1{font-size:clamp(1.7rem,5vw,2.2rem)}
.greet .sub{color:var(--slate);margin-top:2px}

/* ---- Progress ring ---- */
.ring{transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(19,49,59,.1);stroke-width:9}
.ring-bar{fill:none;stroke:var(--signal);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.ring-wrap{position:relative;width:128px;height:128px}
.ring-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-val b{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--cap-navy);line-height:1}
.ring-val span{font-size:.72rem;color:var(--slate)}

/* ---- Session card ---- */
.sess-card{display:flex;gap:16px;align-items:center;padding:18px;border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow-sm);border:1px solid rgba(19,49,59,.05);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.sess-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.sess-thumb{flex-shrink:0;width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#16383F,#0E161B);color:var(--signal)}
.sess-thumb svg{width:28px;height:28px;stroke:currentColor;stroke-width:2;fill:none}
.sess-meta{flex:1;min-width:0}
.sess-meta h4{margin-bottom:2px}
.sess-tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:3px 9px;border-radius:999px;background:rgba(225,116,43,.12);color:var(--signal);margin-bottom:6px}
.sess-tag.force{background:rgba(19,49,59,.1);color:var(--cap-navy)}
.sess-tag.zone2{background:rgba(47,122,87,.14);color:var(--forest)}
.sess-tag.done{background:rgba(47,122,87,.16);color:var(--forest)}
.sess-card.done{opacity:.72}

/* ---- Habit chips ---- */
.habit{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--white);border:1px solid rgba(19,49,59,.07);margin-bottom:10px;cursor:pointer;transition:background .25s}
.habit .chk{flex-shrink:0;width:26px;height:26px;border-radius:8px;border:2px solid rgba(19,49,59,.2);
  display:flex;align-items:center;justify-content:center;transition:all .25s}
.habit .chk svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transition:opacity .2s}
.habit.checked .chk{background:var(--forest);border-color:var(--forest)}
.habit.checked .chk svg{opacity:1}
.habit.checked .lbl{color:var(--slate);text-decoration:line-through}
.habit .lbl{font-weight:500}

/* ---- Phase timeline ---- */
.phase-row{display:flex;gap:14px;align-items:stretch;margin-bottom:14px}
.phase-rail{display:flex;flex-direction:column;align-items:center}
.phase-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;color:#fff;background:var(--slate);flex-shrink:0}
.phase-dot.active{background:var(--signal)}
.phase-dot.done{background:var(--forest)}
.phase-line{flex:1;width:2px;background:rgba(19,49,59,.12);margin:4px 0}

/* ---- Week pills ---- */
.weeks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.week-pill{aspect-ratio:1;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--white);border:1px solid rgba(19,49,59,.08);font-weight:700;color:var(--cap-navy);cursor:pointer;transition:all .3s}
.week-pill small{font-size:.62rem;color:var(--slate);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.week-pill.active{background:var(--signal);color:#fff;border-color:var(--signal)}
.week-pill.active small{color:rgba(255,255,255,.85)}
.week-pill.done{border-color:var(--forest);color:var(--forest)}

/* ============== LECTEUR DE SÉANCE ============== */
.player{position:fixed;inset:0;z-index:200;background:var(--cap-navy);color:var(--paper);display:flex;flex-direction:column}
.player-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.player-close{width:42px;height:42px;border-radius:50%;background:rgba(245,241,233,.1);display:flex;align-items:center;justify-content:center}
.player-close svg{width:20px;height:20px;stroke:var(--paper);stroke-width:2.4;fill:none}
.player-progress{flex:1;height:6px;border-radius:999px;background:rgba(245,241,233,.15);margin:0 16px;overflow:hidden}
.player-progress i{display:block;height:100%;background:var(--signal);width:0;transition:width .4s var(--ease)}
.player-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.player-demo{width:min(82vw,360px);aspect-ratio:1;border-radius:28px;background:linear-gradient(150deg,#16383F,#0E161B);
  display:flex;align-items:center;justify-content:center;margin-bottom:24px;position:relative;overflow:hidden;border:1px solid rgba(245,241,233,.08)}
.player-demo .demo-ico{width:96px;height:96px;stroke:var(--signal);stroke-width:1.5;fill:none;opacity:.9}
.player-phase{font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--signal);font-weight:700;margin-bottom:8px}
.player-name{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,6vw,2.4rem);color:#fff;line-height:1.1;margin-bottom:10px}
.player-cue{color:rgba(245,241,233,.72);max-width:420px;margin-bottom:6px}
.player-timer{font-family:var(--font-display);font-weight:900;font-size:clamp(3.4rem,16vw,5.5rem);color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.player-reps{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,12vw,4rem);color:var(--signal)}
.player-ctrls{display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 20px calc(28px + env(safe-area-inset-bottom))}
.pc-btn{width:60px;height:60px;border-radius:50%;background:rgba(245,241,233,.1);display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s}
.pc-btn:active{transform:scale(.92)}
.pc-btn svg{width:24px;height:24px;stroke:var(--paper);stroke-width:2;fill:var(--paper)}
.pc-btn.main{width:84px;height:84px;background:var(--signal);box-shadow:var(--shadow-signal)}
.pc-btn.main svg{width:34px;height:34px;fill:#fff;stroke:#fff}
.player-rest{color:var(--signal)}
.player-next{font-size:.85rem;color:rgba(245,241,233,.55);margin-top:14px}
.player-done{text-align:center;padding:30px}
.player-done .big{font-size:64px;margin-bottom:8px}

/* ---- Install banner ---- */
.install-banner{display:none;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--cap-navy);color:var(--paper);margin-bottom:18px}
.install-banner.show{display:flex}
.install-banner svg{width:26px;height:26px;stroke:var(--signal);stroke-width:2;fill:none;flex-shrink:0}

/* ---- Mini chart (suivi) ---- */
.chart{width:100%;height:200px}
.chart-line{fill:none;stroke:var(--signal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart-area{fill:url(#grad);opacity:.18}
.chart-dot{fill:var(--signal)}
.chart-grid{stroke:rgba(19,49,59,.08);stroke-width:1}

/* ---- Auth ---- */
.auth-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:440px}

@media (min-width:760px){
  .tabbar{max-width:520px;margin-inline:auto;bottom:18px;border-radius:var(--r-pill);border:1px solid rgba(19,49,59,.1);box-shadow:var(--shadow-md)}
}