:root{
  /* palette ultra-colorée */
  --c1:#f72585; --c2:#4361ee; --c3:#06d6a0; --c4:#ff9f1c; --c5:#9b5de5; --c6:#ef233c;
  --yellow:#fff200; --txt:#ffffff; --ink:#1a1030;
  --ok:#06d6a0; --bad:#ef233c; --accent:#f72585;
  --r:20px; --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#7b2ff7}
body{
  margin:0;padding:0;min-height:100vh;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--txt); line-height:1.4;
  background:transparent;
  padding-bottom:calc(80px + var(--safe-b));
  -webkit-font-smoothing:antialiased;
}
/* fond dégradé sur une couche fixe dédiée (évite le bug iOS de background-attachment:fixed) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(160deg,#7b2ff7 0%,#f72585 52%,#ff8a00 100%);
}
#app{max-width:680px;margin:0 auto;padding:18px 16px 8px}

h1{font-size:32px;margin:8px 0 2px;letter-spacing:-1px;font-weight:900;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.2)}
h2{font-size:22px;margin:18px 0 12px;font-weight:900;text-transform:uppercase;letter-spacing:-.5px}
h3{font-size:13px;margin:0 0 12px;color:#fff;text-transform:uppercase;letter-spacing:1.2px;font-weight:900;opacity:.95}
p.sub{color:rgba(255,255,255,.92);margin:0 0 14px;font-size:14px;font-weight:600}
.muted{color:rgba(255,255,255,.85)}

/* ---- cards : aplats de couleur pleins ---- */
.card{border:none;border-radius:var(--r);padding:18px;margin-bottom:16px;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.card:nth-of-type(6n+1){background:var(--c1)}
.card:nth-of-type(6n+2){background:var(--c2)}
.card:nth-of-type(6n+3){background:var(--c3)}
.card:nth-of-type(6n+4){background:var(--c4)}
.card:nth-of-type(6n+5){background:var(--c5)}
.card:nth-of-type(6n+6){background:var(--c6)}
.card.tap{cursor:pointer;transition:transform .08s}
.card.tap:active{transform:scale(.985)}

/* ---- forms : îlots blancs lisibles ---- */
label{display:block;font-size:12px;color:#fff;margin:14px 0 5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
input,select{
  width:100%;background:#fff;border:none;color:var(--ink);
  border-radius:12px;padding:13px 14px;font-size:16px;outline:none;font-weight:700;
}
input:focus,select:focus{box-shadow:0 0 0 4px var(--yellow)}
.row{display:flex;gap:12px}
.row>*{flex:1}

/* ---- curseur d'intensité ---- */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;background:rgba(255,255,255,.4);outline:none;padding:0;margin:10px 0 4px;box-shadow:none}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--yellow);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--yellow);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.intlabel{font-weight:900;font-size:18px;text-align:center;margin-top:2px}
.cible{padding:10px 16px 0;font-weight:800;font-size:13px;color:#fff;letter-spacing:.2px}
.lastperf{padding:4px 16px 0;font-size:12px;font-weight:700;color:rgba(255,255,255,.9)}
.lastperf .lpd{opacity:.7;font-weight:600}

/* minuteur de repos */
#resttimer{position:fixed;left:0;right:0;bottom:calc(78px + var(--safe-b));z-index:45;max-width:680px;margin:0 auto;padding:0 14px}
.rt-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.35);overflow:hidden;margin:0 4px 6px}
.rt-fill{height:100%;background:linear-gradient(90deg,#ff0a78,#ff8a00);transition:width 1s linear}
.rt-row{display:flex;align-items:center;gap:10px;background:#1a1030;border-radius:14px;padding:10px 12px;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.rt-t{font-weight:900;font-size:22px;min-width:48px}
.rt-n{flex:1;font-weight:700;font-size:13px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-b{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:10px;padding:9px 12px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
#resttimer.done .rt-row{background:#0a8f3c}

/* calendrier d'assiduité */
.cal-title{text-align:center;font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:13px;margin-bottom:8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-h{text-align:center;font-size:11px;font-weight:800;opacity:.7;padding:2px 0}
.cal-d{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;font-weight:700;background:rgba(255,255,255,.12)}
.cal-d.empty{background:transparent}
.cal-d.on{background:#fff;color:#e21f1f}
.cal-d.today{box-shadow:0 0 0 2px #fff200}

/* calculateur de disques */
.plates{display:flex;flex-wrap:wrap;gap:8px}
.plate{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4361ee,#06d6a0);color:#fff;font-weight:900;font-size:14px;box-shadow:0 3px 8px rgba(0,0,0,.25)}

/* photos de progression */
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.photo{position:relative;cursor:pointer;border-radius:10px;overflow:hidden;aspect-ratio:3/4;background:rgba(255,255,255,.12)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:700;text-align:center;padding:2px}

/* favoris dans le sélecteur */
.pickact{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.favbtn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.5);color:#fff200;border-radius:10px;width:40px;height:38px;font-size:18px;cursor:pointer}
.favbtn.on{background:#fff200;color:#1a1030;border-color:#fff200}
.grouplbl{font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin:16px 0 8px;opacity:.95}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.chip{
  background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.65);color:#fff;
  padding:9px 15px;border-radius:999px;font-size:14px;font-weight:800;cursor:pointer;transition:.1s;
}
.chip.on{background:#fff;border-color:#fff}
.chips .chip.on:nth-of-type(6n+1){color:var(--c1)}
.chips .chip.on:nth-of-type(6n+2){color:var(--c2)}
.chips .chip.on:nth-of-type(6n+3){color:#059e76}
.chips .chip.on:nth-of-type(6n+4){color:#d97e00}
.chips .chip.on:nth-of-type(6n+5){color:var(--c5)}
.chips .chip.on:nth-of-type(6n+6){color:var(--c6)}

/* ---- buttons : dégradés punchy ---- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:linear-gradient(135deg,#ff0a78,#ff8a00);color:#fff;border:none;border-radius:14px;
  padding:16px;font-size:15px;font-weight:900;cursor:pointer;margin-top:12px;
  text-transform:uppercase;letter-spacing:.6px;box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.btn:active{transform:translateY(1px)}
.btn.sec{background:linear-gradient(135deg,#4361ee,#06d6a0)}
.btn.ghost{background:rgba(255,255,255,.16);border:2px solid #fff;box-shadow:none}
.btn.sm{padding:9px 16px;font-size:12px;width:auto}
.btn.danger{background:#fff;color:var(--bad)}
.btnrow{display:flex;gap:10px}
.btnrow .btn{margin-top:0}

/* ---- header / logo ---- */
.apphead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.logo{
  display:inline-block;background:#fff;color:#f72585;font-weight:900;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 11px;border-radius:8px;line-height:1.1;box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* ---- exercise item ---- */
.ex{border-radius:var(--r);margin-bottom:14px;overflow:hidden;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.ex:nth-of-type(6n+1){background:var(--c2)}
.ex:nth-of-type(6n+2){background:var(--c1)}
.ex:nth-of-type(6n+3){background:var(--c3)}
.ex:nth-of-type(6n+4){background:var(--c5)}
.ex:nth-of-type(6n+5){background:var(--c4)}
.ex:nth-of-type(6n+6){background:var(--c6)}
.ex-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;gap:10px;border-bottom:2px solid rgba(255,255,255,.22)}
.exinfo{display:flex;align-items:center;gap:12px;min-width:0}
.exanim{flex:0 0 auto;width:66px;height:66px;border-radius:14px;background:#f3eee7;display:flex;align-items:center;justify-content:center;padding:3px}
.exanim.sm{width:52px;height:52px;border-radius:11px}
.exanim svg{width:100%;height:100%;display:block}
.exanim[data-detail]{cursor:pointer}
/* photos d'exercices (2 images alternées) */
.exphoto{position:relative;display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:#fff}
.exphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.exphoto img.f2{animation:exoflip 1.4s steps(1,end) infinite}
@keyframes exoflip{0%,50%{opacity:0}50.01%,100%{opacity:1}}
.exfallback{display:none}
.exphoto.failed img{display:none}
.exphoto.failed .exfallback{display:block;position:absolute;inset:0}
.bodybig.move .exphoto{width:100%;aspect-ratio:1/1;border-radius:12px}
.bodybig.move .exphoto img{object-fit:contain;background:#fff}
.bodybig{background:#f3eee7;border-radius:16px;padding:12px;margin:6px 0}
.bodybig svg{width:100%;height:auto;max-height:300px;display:block}
.bodybig.move{max-width:230px;margin:6px auto}
.dlabel{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;margin:14px 0 2px;opacity:.95}
.cues{margin:6px 0 0;padding:0;list-style:none}
.cues li{position:relative;padding:6px 0 6px 22px;font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.18)}
.cues li:last-child{border-bottom:none}
.cues li::before{content:"›";position:absolute;left:4px;font-weight:900;color:#fff200}
.legend{display:flex;flex-direction:column;gap:8px;margin:12px 0;font-weight:700;font-size:14px}
.legend .dot{display:inline-block;width:15px;height:15px;border-radius:4px;vertical-align:-2px;margin-right:7px}
.legend .dot.p{background:#e21f1f}
.legend .dot.s{background:#f3a3a3}
.heatlegend{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;font-weight:700;color:#fff;justify-content:center}
.heatlegend i{flex:1;max-width:200px;height:10px;border-radius:999px;background:linear-gradient(90deg,#e7dccd,#f3a3a3,#e21f1f)}
.ex-head .t{font-weight:900;font-size:16px}
.ex-head .g{font-size:12px;color:rgba(255,255,255,.85);font-weight:700}
.badge{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.25);color:#fff;white-space:nowrap;font-weight:800}
.sets{padding:8px 12px 14px}
.set{display:grid;grid-template-columns:28px 1fr 1fr 44px;gap:8px;align-items:center;margin-top:8px}
.set .n{color:#fff;font-size:14px;text-align:center;font-weight:900}
.set input{padding:10px;text-align:center;font-size:15px}
.set .chk{width:42px;height:42px;border-radius:12px;border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.18);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ok);font-weight:900}
.set .chk.done{background:#fff}
.setlabels{display:grid;grid-template-columns:28px 1fr 1fr 44px;gap:8px;font-size:10px;color:rgba(255,255,255,.85);padding:4px 0 0;text-align:center;font-weight:800;text-transform:uppercase}
.feel{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 0 4px 38px}
.feell{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;opacity:.85;margin-right:2px}
.fbtn{width:38px;height:34px;border-radius:10px;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.fbtn.on{background:#fff;border-color:#fff;transform:scale(1.08)}
.feelsel{font-size:12px;font-weight:800;margin-left:2px}
.addset{background:rgba(255,255,255,.14);border:2px dashed rgba(255,255,255,.65);color:#fff;width:100%;padding:11px;border-radius:12px;margin-top:12px;cursor:pointer;font-size:13px;font-weight:800}
.rmx{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;font-weight:900;opacity:.9}

/* ---- list rows ---- */
.lrow{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:2px solid rgba(255,255,255,.2)}
.lrow:last-child{border-bottom:none}
.lrow .meta{font-size:13px;color:rgba(255,255,255,.88);font-weight:600}

/* ---- stats : blocs blancs, chiffres colorés ---- */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.stat{flex:1;min-width:90px;background:#fff;border-radius:16px;padding:16px 14px;color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.stat .v{font-size:27px;font-weight:900;letter-spacing:-.5px}
.stat:nth-of-type(3n+1) .v{color:var(--c1)}
.stat:nth-of-type(3n+2) .v{color:var(--c2)}
.stat:nth-of-type(3n+3) .v{color:#d97e00}
.stat .l{font-size:11px;margin-top:2px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;color:#6b6b7b}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(20,5,40,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{width:100%;max-width:680px;max-height:85vh;overflow:auto;border-radius:22px 22px 0 0;padding:20px 16px calc(24px + var(--safe-b));color:#fff;
  background:linear-gradient(160deg,#7209b7,#f72585)}
.sheet h2{margin-top:4px}

/* ---- tab bar ---- */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;display:flex;
  background:#1a1030;
  border-top:1px solid rgba(255,255,255,.15);padding-bottom:var(--safe-b);z-index:40;
}
.tab{flex:1;background:none;border:none;color:rgba(255,255,255,.6);padding:10px 0 9px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.tab .ic{font-size:22px;filter:grayscale(1) opacity(.6)}
.tab.on .ic{filter:none}
.tab[data-tab="seance"].on{color:#06d6a0}
.tab[data-tab="historique"].on{color:#4cc9f0}
.tab[data-tab="progres"].on{color:#ff8a00}
.tab[data-tab="profil"].on{color:#f72585}

/* ---- misc ---- */
.empty{text-align:center;color:#fff;padding:46px 20px;font-weight:700}
.empty .big{font-size:50px;margin-bottom:8px}
svg.chart{width:100%;height:180px;display:block;margin-top:6px}
.tag{display:inline-block;font-size:12px;color:#7209b7;background:#fff;padding:3px 10px;border-radius:6px;margin:2px 5px 2px 0;font-weight:800}
.toast{position:fixed;bottom:calc(92px + var(--safe-b));left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ff0a78,#ff8a00);color:#fff;padding:13px 22px;border-radius:999px;font-weight:900;font-size:14px;z-index:60;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 8px 24px rgba(0,0,0,.35)}