/* ================= GLOFIT — Design System =================
   Deviens ce que tu projettes.
   Lime #C8F135 · Orange #FF6B35 · Bleu #4FC3F7 · Vert #00FF88
   Titres: Syne · Corps: DM Sans
   ========================================================= */
:root{
  --lime:#C8F135; --lime-d:#A8D010; --lime-soft:rgba(200,241,53,.14);
  --black:#0A0A0A; --bg:#050505; --dark:#111; --card:#1A1A1A; --card2:#222;
  --text:#F0F0F0; --muted:#999; --faint:#5A5A5A;
  --orange:#FF6B35; --blue:#4FC3F7; --green:#00FF88; --border:#2A2A2A;
  --r-lg:24px; --r-md:18px; --r-sm:12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--text);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.45; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.syne{font-family:'Syne','Syne fallback',-apple-system,'Segoe UI',sans-serif;font-weight:700;letter-spacing:-.3px;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;border:none;background:none;}
img{max-width:100%;display:block;}

/* ---------- Frame ---------- */
#app{
  width:100%; max-width:440px; height:100dvh; background:var(--black);
  position:relative; display:flex; flex-direction:column; overflow:hidden;
}
@media(min-width:520px) and (min-height:800px){
  #app{height:880px;border-radius:44px;border:2px solid #191919;
    box-shadow:0 40px 120px rgba(200,241,53,.05),0 24px 70px rgba(0,0,0,.9);}
}
#view{flex:1;display:flex;flex-direction:column;min-height:0;}
.screen{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:0;}
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:24px;}
.scroll::-webkit-scrollbar{width:0;height:0;}

/* ---------- Status bar ---------- */
.statusbar{height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;font-size:13px;font-weight:600;color:var(--text);}
.statusbar .right{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:11px;}

/* ---------- Header ---------- */
.hdr{padding:6px 20px 14px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.hdr .title{font-size:22px;font-weight:800;flex:1;}
.hdr .sub{font-size:12px;color:var(--muted);}
.iconbtn{width:38px;height:38px;border-radius:12px;background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);flex-shrink:0;}
.iconbtn:active{transform:scale(.94);}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--lime),var(--lime-d));
  display:flex;align-items:center;justify-content:center;color:var(--black);font-weight:800;font-size:17px;flex-shrink:0;
  font-family:'Syne',sans-serif;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.center > .avatar{margin-left:auto;margin-right:auto;}

/* ---------- Tab bar ---------- */
.tabbar{height:calc(72px + var(--safe-b));padding-bottom:var(--safe-b);flex-shrink:0;
  background:rgba(13,13,13,.97);backdrop-filter:blur(20px);border-top:1px solid var(--border);
  display:flex;justify-content:space-around;align-items:center;}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--faint);
  font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:8px 12px;transition:color .15s;}
.tab .ic{font-size:19px;line-height:1;filter:grayscale(1) opacity(.65);transition:filter .15s;}
.tab.on{color:var(--lime);} .tab.on .ic{filter:none;}
.tab .dot{position:absolute;}

/* ---------- Blocks ---------- */
.sec{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);padding:0 20px;margin:22px 0 10px;display:flex;justify-content:space-between;align-items:center;}
.sec .act{color:var(--lime);letter-spacing:.5px;text-transform:none;font-size:11px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;margin:0 16px 12px;}
.card.tight{padding:14px;}
.card.lime{background:linear-gradient(140deg,#1C2B0A,#0f1705);border-color:rgba(200,241,53,.28);}
.card.blue{background:linear-gradient(140deg,#0d1a2a,#050d15);border-color:rgba(79,195,247,.28);}
.row{display:flex;align-items:center;gap:12px;}
.row.between{justify-content:space-between;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.muted{color:var(--muted);} .faint{color:var(--faint);}
.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}
.lime{color:var(--lime)} .blue{color:var(--blue)} .green{color:var(--green)} .orange{color:var(--orange)}
.spacer{height:14px}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{display:block;width:100%;padding:16px;background:var(--lime);color:var(--black);border-radius:var(--r-md);
  font-family:'Syne',sans-serif;font-size:15px;font-weight:700;letter-spacing:.4px;transition:transform .12s,opacity .12s;}
.btn:active{transform:scale(.975);}
.btn[disabled]{opacity:.35;pointer-events:none;}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border);font-weight:600;font-size:14px;}
.btn.danger{background:transparent;color:var(--orange);border:1px solid rgba(255,107,53,.35);}
.btn.blue-b{background:var(--blue);}
.btn.sm{width:auto;padding:10px 16px;font-size:12px;border-radius:var(--r-sm);}
.btn.row-btn{margin-top:12px;}
.btnbar{padding:12px 16px calc(16px + var(--safe-b));flex-shrink:0;display:flex;gap:10px;}
.btnbar .btn{margin:0;}

/* ---------- Connexion sociale & photo de profil ---------- */
.btn.oauth{display:flex;align-items:center;justify-content:center;gap:10px;background:#161616;
  border:1px solid var(--border);color:var(--text);font-family:'Syne',sans-serif;font-weight:700;font-size:14px;}
.btn.oauth .oico{display:flex;align-items:center;font-size:16px;line-height:1;}
.avatarpick{position:relative;display:inline-block;cursor:pointer;}
.avatarcam{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;
  background:var(--lime);color:#0A0A0A;display:flex;align-items:center;justify-content:center;
  font-size:13px;border:3px solid var(--black);}

/* ---------- Pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;background:var(--card2);
  font-size:11px;color:var(--muted);border:1px solid var(--border);}
.pill.on{background:var(--lime-soft);color:var(--lime);border-color:rgba(200,241,53,.35);}
.badge-ai{background:var(--lime-soft);color:var(--lime);font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;
  border:1px solid rgba(200,241,53,.3);font-family:'Syne',sans-serif;letter-spacing:.5px;white-space:nowrap;}

/* ---------- Inputs ---------- */
.field{margin-bottom:14px;}
.label{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;display:block;}
.input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:14px 15px;font-size:15px;outline:none;transition:border-color .15s;}
.input:focus{border-color:var(--lime);}
.input::placeholder{color:var(--faint);}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat;}
.choice{display:flex;flex-direction:column;gap:9px;}
.opt{display:flex;align-items:center;gap:13px;padding:15px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);transition:all .15s;text-align:left;width:100%;}
.opt .emo{font-size:22px;width:26px;text-align:center;flex-shrink:0;}
.opt .t{display:block;font-family:'Syne',sans-serif;font-weight:700;font-size:14px;}
.opt .d{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35;}
.opt.on{background:rgba(200,241,53,.07);border-color:var(--lime);}
.opt.on .t{color:var(--lime);}
.opt .check{margin-left:auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--black);}
.opt.on .check{background:var(--lime);border-color:var(--lime);}
.switch{width:46px;height:27px;border-radius:14px;background:var(--card2);border:1px solid var(--border);position:relative;flex-shrink:0;transition:background .2s;}
.switch i{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--faint);transition:all .2s;}
.switch.on{background:rgba(200,241,53,.25);border-color:var(--lime);}
.switch.on i{left:21px;background:var(--lime);}

/* ---------- Progress ---------- */
.bar{height:6px;background:var(--card2);border-radius:4px;overflow:hidden;}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--lime-d),var(--lime));border-radius:4px;transition:width .5s;}
.bar.thin{height:4px;}
.steps{display:flex;gap:5px;padding:0 20px 14px;}
.steps>i{flex:1;height:3px;border-radius:2px;background:var(--card2);}
.steps>i.on{background:var(--lime);}

/* ---------- Stat cards ---------- */
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 8px;text-align:center;}
.stat .ic{font-size:19px;margin-bottom:6px;}
.stat .v{font-family:'Syne',sans-serif;font-size:21px;font-weight:800;line-height:1;}
.stat .l{font-size:10px;color:var(--muted);margin-top:5px;}

/* ---------- Toast ---------- */
#toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(16px);opacity:0;
  background:var(--lime);color:var(--black);padding:12px 22px;border-radius:30px;font-family:'Syne',sans-serif;
  font-weight:700;font-size:13px;z-index:400;box-shadow:0 10px 34px rgba(200,241,53,.28);pointer-events:none;
  transition:all .25s;max-width:80%;text-align:center;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.warn{background:var(--orange);color:#fff;box-shadow:0 10px 34px rgba(255,107,53,.3);}

/* ---------- Sheet / modal ---------- */
#sheet{position:absolute;inset:0;z-index:300;display:none;}
#sheet.open{display:block;}
#sheet .bg{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);animation:fade .2s;}
#sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--dark);border-top:1px solid var(--border);
  border-radius:28px 28px 0 0;padding:10px 18px calc(24px + var(--safe-b));max-height:88%;overflow-y:auto;animation:slideup .28s cubic-bezier(.2,.9,.3,1);}
#sheet .panel::-webkit-scrollbar{width:0;}
.grabber{width:38px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 16px;}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Chat ---------- */
.msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.msgs::-webkit-scrollbar{width:0;}
.bub{max-width:80%;padding:12px 15px;border-radius:18px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word;}
.bub.ai{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:6px;}
.bub.me{align-self:flex-end;background:var(--lime);color:var(--black);border-bottom-right-radius:6px;font-weight:500;}
.bub .time{display:block;font-size:9.5px;opacity:.55;margin-top:5px;}
.richcard{align-self:flex-start;max-width:88%;background:var(--card);border:1px solid rgba(200,241,53,.4);border-radius:16px;padding:15px;}
.typing{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-radius:18px;border-bottom-left-radius:6px;padding:14px 16px;display:flex;gap:5px;}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:bounce 1.2s infinite;}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.composer{flex-shrink:0;padding:10px 14px calc(12px + var(--safe-b));border-top:1px solid var(--border);
  background:rgba(13,13,13,.97);display:flex;gap:9px;align-items:flex-end;}
.composer textarea{flex:1;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:12px 16px;
  resize:none;max-height:96px;outline:none;font-size:14px;line-height:1.35;}
.composer textarea:focus{border-color:var(--lime);}
.send{width:42px;height:42px;border-radius:50%;background:var(--lime);color:var(--black);font-size:19px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.quick{display:flex;gap:7px;overflow-x:auto;padding:8px 14px 2px;flex-shrink:0;}
.quick::-webkit-scrollbar{height:0;}
.quick button{white-space:nowrap;padding:8px 13px;border-radius:18px;background:var(--card);border:1px solid var(--border);
  font-size:12px;color:var(--muted);}

/* ---------- Lists ---------- */
.item{display:flex;align-items:center;gap:13px;padding:14px 16px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);margin:0 16px 9px;text-align:left;width:calc(100% - 32px);}
.item:active{transform:scale(.99);}
.item .t{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;}
.item .d{font-size:12px;color:var(--muted);margin-top:2px;}
.item .chev{color:var(--faint);font-size:16px;margin-left:auto;}
.thumb{width:46px;height:46px;border-radius:14px;background:var(--card2);display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;overflow:hidden;font-family:'Syne',sans-serif;font-weight:800;color:var(--black);}

/* ---------- Exercise / workout ---------- */
.exo{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);margin-bottom:8px;}
.exo.done{opacity:.5;}
.exo .n{width:28px;height:28px;border-radius:9px;background:var(--card2);display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:12px;font-weight:800;color:var(--muted);flex-shrink:0;}
.exo.done .n{background:var(--lime);color:var(--black);}
.setpill{padding:5px 9px;border-radius:8px;background:var(--card2);font-size:11px;font-weight:600;color:var(--muted);}
.setpill.on{background:var(--lime);color:var(--black);}
.timer-ring{position:relative;width:190px;height:190px;margin:0 auto;}
.timer-ring svg{transform:rotate(-90deg);}
.timer-ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.timer-ring .num{font-family:'Syne',sans-serif;font-size:46px;font-weight:800;line-height:1;}

/* ---------- Carte musculaire (visuel standard fitness) ---------- */
.figbox{width:56px;height:56px;flex-shrink:0;border-radius:14px;overflow:hidden;
  background:#141814;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.figbox svg{height:100%;width:auto;padding:4px;}
.exthumb{width:100%;height:100%;object-fit:cover;display:block;}

/* Photos d'exercice : les phases du mouvement s'enchaînent, chacune légendée */
.exstage{position:relative;border-radius:20px;overflow:hidden;background:#0f120e;
  border:1px solid var(--border);aspect-ratio:3/2;}
.exstage.big{aspect-ratio:3/2;}
@supports not (aspect-ratio:3/2){.exstage{height:230px}.exstage.big{height:280px}}
.exstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.exstage .phframe{position:absolute;inset:0;opacity:0;transition:opacity .22s linear;}
.exstage .phbg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;
  filter:blur(20px) brightness(.42) saturate(.7);}
.exstage .phfg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.exstage .phtag{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;
  background:linear-gradient(transparent,rgba(6,8,5,.86));font-size:11px;color:#DDE3D6;
  display:flex;align-items:center;gap:7px;letter-spacing:.3px;}
.exstage .phtag .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);
  animation:pulse 1.7s infinite;}
@media(prefers-reduced-motion:reduce){.exstage .phframe{transition:none}}
.exstage .phcap{flex:1;}
.exstage .phstep{font-variant-numeric:tabular-nums;opacity:.75;font-size:12px;
  background:rgba(0,0,0,.4);border-radius:999px;padding:2px 8px;}
.musclecard{background:radial-gradient(120% 80% at 50% 10%,#1a2210 0%,#0e1208 72%);
  border:1px solid rgba(200,241,53,.18);border-radius:18px;padding:14px 12px 12px;margin-top:8px;}
.board{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bodyview{height:188px;display:flex;align-items:center;justify-content:center;}
.figstage.big .bodyview{height:224px;}
.bodyview svg{height:100%;width:auto;}
.steps-list{margin:10px 0 0;padding:0;list-style:none;counter-reset:st;text-align:left;}
.steps-list li{counter-increment:st;position:relative;padding:0 0 10px 30px;font-size:13px;
  color:var(--muted);line-height:1.45;}
.steps-list li::before{content:counter(st);position:absolute;left:0;top:-1px;width:20px;height:20px;
  border-radius:7px;background:var(--lime-soft);color:var(--lime);font-family:'Syne',sans-serif;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* ---------- Map ---------- */
.mapwrap{position:relative;flex:1;overflow:hidden;background:#080B0A;}
#map{width:100%;height:100%;display:block;touch-action:none;}
.mapover{position:absolute;left:0;right:0;bottom:0;padding:12px 0 10px;background:linear-gradient(transparent,rgba(5,5,5,.92) 32%);}
.maptop{position:absolute;top:10px;left:0;right:0;display:flex;gap:8px;padding:0 14px;overflow-x:auto;}
.maptop::-webkit-scrollbar{height:0;}
.pcard{flex-shrink:0;width:206px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;}
.pcards{display:flex;gap:10px;overflow-x:auto;padding:4px 14px 6px;}
.pcards::-webkit-scrollbar{height:0;}

/* ---------- Before/after ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.ba .box{background:var(--card2);border-radius:16px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;
  border:1px solid transparent;position:relative;overflow:hidden;}
.ba .box.after{background:linear-gradient(160deg,#1a2a0a,#0f1a05);border-color:rgba(200,241,53,.3);}
.ba .box .cap{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);}
.ba .box.after .cap{color:var(--lime);}
.ba .box .kg{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;}
.ba .box img{width:100%;height:150px;object-fit:cover;border-radius:11px;}
.photoslot{aspect-ratio:3/4;background:var(--card);border:1px dashed var(--border);border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}
.photoslot.filled{border-style:solid;border-color:rgba(200,241,53,.45);}
.photoslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photoslot .tag{position:absolute;bottom:0;left:0;right:0;padding:7px;background:linear-gradient(transparent,rgba(0,0,0,.85));
  font-size:11px;font-family:'Syne',sans-serif;font-weight:700;text-align:center;}
.photoslot .ok{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--lime);color:#000;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}

/* ---------- Misc animations ---------- */
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.18);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:26px;height:26px;border:3px solid var(--card2);border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite;}
.fadein{animation:fade .3s ease both;}
.skel{background:linear-gradient(90deg,var(--card),#242424,var(--card));background-size:200% 100%;animation:sh 1.2s infinite;}
@keyframes sh{to{background-position:-200% 0}}