/* ─── RESET & ROOT ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#060606;--bg2:#0D0D0D;--card:#111111;--card2:#171717;
    --acc:#FF3D00;--acc2:#FF6B2B;--green:#00E676;--blue:#00B4FF;
    --text:#F0F0F0;--t2:#888888;--t3:#3D3D3D;
    --bdr:rgba(255,255,255,.06);--bdr2:rgba(255,255,255,.11);
    --fn:'Barlow Condensed',sans-serif;
    --mono:'DM Mono',monospace;
}
html,body{background:var(--bg);color:var(--text);font-family:var(--fn);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;min-height:100vh}
::-webkit-scrollbar{display:none}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,61,0,.45)}50%{box-shadow:0 0 0 9px rgba(255,61,0,0)}}
@keyframes fillBar{from{width:0}to{width:var(--target-w)}}

a{
    text-decoration: none;
}
/* ─── SCREENS ─── */
.screen{display:none;min-height:calc(100vh - 64px);overflow-y:auto}
.screen.active{display:block;animation:fadeUp .32s cubic-bezier(.16,1,.3,1) both}

/* ─── DETAIL PANEL ─── */
.detail-panel{
    display:none;
    position:fixed;inset:0;z-index:50;
    background:var(--bg);overflow-y:auto;padding-bottom:84px;
}
.detail-panel.open{display:block;animation:slideIn .28s cubic-bezier(.16,1,.3,1) both}

/* ─── APP SHELL ─── */
#app{width:100%;max-width:430px;margin:0 auto;background:var(--bg);position:relative;min-height:100vh; overflow-y: scroll; padding-bottom: 100px;}
.top-line{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;
    height:2px;background:linear-gradient(90deg,transparent,var(--acc),transparent);z-index:200;opacity:.7}

/* ─── TYPOGRAPHY UTILS ─── */
.label-sm{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;text-transform:uppercase}
.label-acc{font-family:var(--mono);font-size:9px;color:var(--acc);letter-spacing:.11em;text-transform:uppercase}
.title-xl{font-family:var(--fn);font-size:46px;font-weight:900;letter-spacing:-.02em;line-height:1}
.title-lg{font-family:var(--fn);font-size:38px;font-weight:900;letter-spacing:-.02em;line-height:1}
.title-md{font-family:var(--fn);font-size:26px;font-weight:900;letter-spacing:.01em;line-height:1}
.title-sm{font-family:var(--fn);font-size:20px;font-weight:800;letter-spacing:.03em}
.mono-data{font-family:var(--mono);font-size:11px;color:var(--t2)}
.muscle-label{font-family:var(--mono);font-size:8px;color:var(--t3);letter-spacing:.06em;text-transform:uppercase}

/* ─── CARDS ─── */
.card{background:var(--card);border:1px solid var(--bdr);border-radius:3px;padding:18px}
.pill{background:var(--card);border:1px solid var(--bdr);border-radius:2px;padding:12px}
.tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:2px;
    font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono)}

/* ─── SESSION CARD ─── */
.session-card{background:var(--card);border:1px solid var(--bdr);border-radius:3px;
    padding:18px;cursor:pointer;transition:border-color .18s,transform .18s}
.session-card:hover{border-color:var(--bdr2);transform:translateY(-2px)}
.session-card:active{transform:translateY(0)}
.session-card.hot{
    background:linear-gradient(135deg,rgba(255,61,0,.12) 0%,rgba(255,61,0,.04) 100%);
    border-color:rgba(255,61,0,.28)
}
.session-footer{display:flex;gap:16px;margin-top:14px;padding-top:11px;
    border-top:1px solid var(--bdr);font-family:var(--mono);font-size:10px;color:var(--t2)}

/* ─── EXERCISE ROW ─── */
.exo-row{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--bdr);
    gap:14px;cursor:pointer;transition:background .12s}
.exo-row:hover{background:rgba(255,255,255,.02)}
.exo-row:active{background:rgba(255,255,255,.04)}
.exo-row.hidden-item{display:none}

/* ─── CHIPS ─── */
.chip{border:1px solid var(--bdr2);background:transparent;color:var(--t2);
    padding:5px 13px;border-radius:2px;font-family:var(--fn);font-size:12px;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
    transition:all .15s;white-space:nowrap;outline:none}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.chip:hover:not(.on){border-color:var(--bdr2);color:var(--text);background:rgba(255,255,255,.03)}

/* ─── INPUTS ─── */
.inp{width:100%;background:var(--card);border:1px solid var(--bdr);color:var(--text);
    padding:11px 15px;font-family:var(--mono);font-size:12px;outline:none;
    border-radius:2px;transition:border-color .18s}
.inp:focus{border-color:var(--bdr2)}
.inp::placeholder{color:var(--t3)}

/* ─── CTA BUTTON ─── */
.cta{background:var(--acc);color:#fff;border:none;padding:15px 28px;
    font-family:var(--fn);font-size:15px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;border-radius:2px;cursor:pointer;transition:all .15s;
    width:100%;outline:none;display:block;text-align:center}
.cta:hover{background:var(--acc2);transform:translateY(-1px)}
.cta:active{transform:translateY(0)}

/* ─── BACK BUTTON ─── */
.btn-back{background:none;border:none;cursor:pointer;color:var(--t2);
    font-family:var(--mono);font-size:10px;letter-spacing:.07em;
    display:inline-flex;align-items:center;gap:6px;padding:0;outline:none}
.btn-back:hover{color:var(--text)}

/* ─── PROGRESS BAR ─── */
.pbar{height:2px;background:var(--bdr2);border-radius:1px;overflow:hidden;flex:1}
.pfill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));
    border-radius:1px;width:0;transition:width 1.4s cubic-bezier(.16,1,.3,1)}

/* ─── BOTTOM NAV ─── */
#bottom-nav{
    position:fixed;bottom:0;left:50%;transform:translateX(-50%);
    width:100%;max-width:430px;
    background:rgba(6,6,6,.96);backdrop-filter:blur(20px);
    border-top:1px solid var(--bdr);display:flex;z-index:100
}
.nav-btn{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;
    align-items:center;gap:3px;padding:8px 0;color:var(--t3);transition:color .18s;
    font-family:var(--fn);font-size:9px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;flex:1;outline:none}
.nav-btn.on{color:var(--acc)}
.nav-btn svg{transition:stroke .18s,fill .18s}

/* ─── WEEK GRID ─── */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:14px 10px}
.day-cell{display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:9px 2px;border-radius:2px;border:1px solid transparent}
.day-cell.today{background:rgba(0,230,118,.07);border-color:rgba(0,230,118,.25)}
.day-dot{width:6px;height:6px;border-radius:50%;background:var(--t3);opacity:.25}
.day-dot.done{background:var(--acc);opacity:1}
.day-dot.today{background:var(--green);opacity:1;box-shadow:0 0 10px rgba(0,230,118,.7);width:8px;height:8px}
.day-label{font-family:var(--mono);font-size:8px;color:var(--t3);letter-spacing:.04em}
.day-label.today{color:#00E676}
.day-session{font-family:var(--mono);font-size:7px;color:var(--t3);text-align:center;line-height:1.2;letter-spacing:.02em}
.day-check{color:var(--acc);font-size:9px;line-height:1}

/* ─── TODAY CARD ─── */
.today-card{background:var(--card);border:1px solid rgba(255,61,0,.22);border-radius:4px;
    overflow:hidden;box-shadow:0 0 48px rgba(255,61,0,.07)}
.today-inner{background:linear-gradient(135deg,rgba(255,61,0,.18) 0%,rgba(255,61,0,.04) 100%);
    padding:20px 20px 16px}
.today-icon{background:var(--acc);border-radius:50%;width:46px;height:46px;
    display:flex;align-items:center;justify-content:center;animation:pulse 2s infinite;flex-shrink:0}
.today-info{display:flex;gap:16px;font-family:var(--mono);font-size:11px;color:var(--t2)}

/* ─── STAT PILLS GRID ─── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-value{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--acc);line-height:1}
.stat-unit{font-family:var(--mono);font-size:13px;color:var(--t2)}

/* ─── PR LIST ─── */
.pr-row{display:flex;justify-content:space-between;align-items:center;
    padding:12px 0;border-bottom:1px solid var(--bdr)}
.pr-gain{font-family:var(--mono);font-size:14px;color:var(--green);font-weight:500}

/* ─── DIVIDER ─── */
.divider{height:1px;background:var(--bdr)}

/* ─── SECTION HEADER ─── */
.section-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.section-title{font-family:var(--fn);font-size:11px;font-weight:700;color:var(--t3);
    letter-spacing:.12em;text-transform:uppercase}
.section-link{background:none;border:none;cursor:pointer;font-family:var(--mono);
    font-size:9px;color:var(--acc);letter-spacing:.07em;outline:none;padding:0}

/* ─── DETAIL VIEW ─── */
.detail-grad{padding:22px 20px 16px}
.detail-grad.chest{background:linear-gradient(135deg,rgba(255,61,0,.16) 0%,transparent 55%)}
.exo-preview{background:var(--card);border:1px solid var(--bdr);border-radius:3px;
    padding:32px;text-align:center;margin-bottom:16px}

/* ─── LIFT BARS ─── */
.lift-row{margin-bottom:16px}
.lift-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.lift-sub{font-family:var(--mono);font-size:8px;color:var(--t3);margin-top:4px;letter-spacing:.06em}

/* ─── FIRE ICON INLINE ─── */
.fire-badge{display:flex;align-items:center;gap:4px;font-family:var(--mono);
    font-size:8px;color:var(--acc);letter-spacing:.11em;text-transform:uppercase;margin-bottom:7px}

/* ─── INFO GRID ─── */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}

/* ─── SESSION EXERCISE LIST ─── */
.session-exo-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--bdr);gap:14px}
.session-exo-num{font-family:var(--mono);font-size:11px;color:var(--acc);width:22px;flex-shrink:0}

.field{margin-bottom:14px}
.field-label{
    font-family:var(--mono);font-size:9px;color:var(--t3);
    letter-spacing:.1em;text-transform:uppercase;
    margin-bottom:7px;display:block;
}
.field-input{
    width:100%;background:#0A0A0A;
    border:1px solid var(--bdr2);
    color:var(--text);padding:13px 16px;
    font-family:var(--mono);font-size:13px;
    outline:none;border-radius:2px;
    transition:border-color .18s,box-shadow .18s;
    -webkit-appearance:none;
}
.field-input:focus{
    border-color:var(--acc);
    box-shadow:0 0 0 3px rgba(255,61,0,.09);
}
.field-input.is-error{border-color:var(--acc)!important}
.field-input::placeholder{color:var(--t3)}
.field-error{
    font-family:var(--mono);font-size:9px;color:var(--acc);
    letter-spacing:.06em;margin-top:5px;display:none;
}
.field-error.visible{display:block}

/* ─── MOT DE PASSE (toggle visibilité) ─── */
.field-pw-wrap{position:relative}
.field-pw-wrap .field-input{padding-right:46px}