@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --bg: #14171c; --surface: #1e222a; --surface-hi: #262b34; --border: #30353f;
  --text: #eceef2; --text-muted: #9098a8; --accent: #e69a3a; --accent-soft: #3a2f1c;
  --good: #45b8a4; --good-soft: #1c332f; --bad: #c9705f;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
body { min-height:100vh; }
a { color: inherit; }
button { font-family: var(--font-body); cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
p { line-height: 1.5; }

.app-shell { max-width: 640px; margin: 0 auto; padding: 20px 16px 100px; }
.hidden { display: none !important; }

.login-screen { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:34px 28px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,0.25); }
.login-card .stamp { width:56px; height:56px; border:2px solid var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:var(--font-display); font-weight:700; color:var(--accent); }
.login-card h1 { font-family:var(--font-display); font-size:1.35rem; margin:0 0 4px; }
.login-card p { color:var(--text-muted); font-size:0.9rem; margin:0 0 24px; }
.login-card input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:1rem; margin-bottom:12px; }
.login-card button { width:100%; padding:13px; border-radius:12px; border:none; background:var(--accent); color:#211705; font-weight:700; font-size:0.95rem; }
.login-error { color:var(--bad); font-size:0.85rem; margin-top:10px; min-height:1em; }

.top-bar { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.top-bar .eyebrow { font-size:0.78rem; color:var(--accent); font-weight:600; }
.top-bar h1 { font-family:var(--font-display); font-size:1.5rem; margin:2px 0 0; }
.logout-link { font-size:0.78rem; color:var(--text-muted); text-decoration:none; border:1px solid var(--border); padding:7px 12px; border-radius:20px; background:none; }

.tabs { position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); display:flex; z-index:20; padding:6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); max-width:640px; margin:0 auto; }
.tab-btn { flex:1; background:none; border:none; color:var(--text-muted); font-size:0.72rem; padding:8px 4px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; border-radius:12px; }
.tab-btn .ico { font-size:1.2rem; }
.tab-btn.active { color:var(--accent); background:var(--accent-soft); }

.card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:20px; margin-bottom:16px; box-shadow:0 2px 10px rgba(0,0,0,0.15); }
.card h2 { font-family:var(--font-display); font-size:1.08rem; margin:0 0 6px; display:flex; align-items:center; gap:8px; font-weight:600; }
.card h2 .badge { font-size:0.7rem; padding:3px 10px; border-radius:20px; background:var(--good-soft); color:var(--good); font-weight:600; }
.muted-sub { color:var(--text-muted); font-size:0.85rem; margin:0 0 16px; }

.field { margin-bottom:14px; }
.field label { display:block; font-size:0.83rem; color:var(--text-muted); margin-bottom:6px; }
.field input[type="number"], .field input[type="text"], .field select, .field textarea {
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:1rem;
}
.field input[type="number"] { font-family: var(--font-mono); }
.field textarea { resize:vertical; min-height:60px; }

.stamp-toggle { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--border); border-radius:12px; cursor:pointer; margin-bottom:10px; transition:border-color .15s ease, background .15s ease; }
.stamp-toggle .circle { width:32px; height:32px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1rem; color:transparent; }
.stamp-toggle span.label { font-size:0.92rem; }
.stamp-toggle.on { border-color:var(--good); background:var(--good-soft); }
.stamp-toggle.on .circle { border-color:var(--good); background:var(--good); color:#06211d; }

.save-btn { width:100%; padding:13px; border-radius:12px; border:none; background:var(--accent); color:#211705; font-weight:700; font-size:0.92rem; margin-top:4px; }
.save-btn.secondary { background:var(--good); color:#06211d; }
.save-feedback { text-align:center; font-size:0.8rem; color:var(--good); margin-top:8px; min-height:1em; }

.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.stat-box { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 10px; text-align:center; }
.stat-box .value { font-family:var(--font-mono); font-size:1.25rem; font-weight:700; color:var(--accent); display:block; }
.stat-box.positive .value { color:var(--good); }
.stat-box.negative .value { color:var(--bad); }
.stat-box .label { font-size:0.68rem; color:var(--text-muted); margin-top:2px; }

.day-block { border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:10px; background:var(--surface); }
.day-block.is-today { border-color:var(--accent); background:var(--accent-soft); }
.day-block .day-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.day-block .day-name { font-size:0.78rem; color:var(--text-muted); font-weight:600; }
.day-block.is-today .day-name { color:var(--accent); }
.day-block .duree-pill { font-size:0.72rem; color:var(--text-muted); background:var(--surface-hi); padding:3px 9px; border-radius:20px; }
.day-block h3 { font-family:var(--font-display); font-size:1rem; margin:0 0 8px; font-weight:600; }
.day-block ul { margin:6px 0; padding-left:18px; font-size:0.88rem; color:var(--text); }
.day-block ul li { margin-bottom:4px; }
.day-block .note { font-size:0.8rem; color:var(--text-muted); margin-top:8px; }

.recipe-card { margin-bottom:14px; }
.recipe-card .meta { display:flex; gap:12px; font-size:0.78rem; color:var(--text-muted); margin-bottom:10px; }
.recipe-card .meta .kcal { color:var(--accent); font-weight:600; }
.recipe-card h3 { font-family:var(--font-display); margin:0 0 8px; font-size:1rem; }
.recipe-card ul, .recipe-card ol { font-size:0.88rem; padding-left:18px; margin:6px 0 10px; }
.recipe-card ul li, .recipe-card ol li { margin-bottom:3px; }
.recipe-card .section-label { font-size:0.75rem; font-weight:600; color:var(--good); margin-top:10px; display:block; }

.shopping-cat { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); }
.shopping-cat:last-child { border-bottom:none; }
.shopping-cat .name { font-size:0.9rem; }
.shopping-cat .budget { font-family:var(--font-mono); color:var(--accent); font-size:0.85rem; }
.shopping-items { font-size:0.82rem; color:var(--text-muted); margin:0 0 10px; padding-left:16px; }

.chart-wrap { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:16px; box-shadow:0 2px 10px rgba(0,0,0,0.15); }
#weight-chart { width:100%; height:180px; display:block; }
.empty-state { text-align:center; color:var(--text-muted); font-size:0.88rem; padding:30px 10px; }
.history-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.history-table th, .history-table td { padding:9px 6px; text-align:left; border-bottom:1px solid var(--border); }
.history-table th { color:var(--text-muted); font-weight:600; font-size:0.72rem; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.dot.on { background:var(--good); }
.dot.off { background:var(--border); }

.exercise-item { border:1px solid var(--border); border-radius:14px; margin-bottom:10px; overflow:hidden; }
.exercise-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; background:var(--surface); }
.exercise-header .name { font-family:var(--font-display); font-size:0.95rem; font-weight:600; }
.exercise-header .chevron { color:var(--accent); font-size:1rem; transition:transform .15s ease; }
.exercise-item.open .chevron { transform:rotate(180deg); }
.exercise-body { padding:0 16px; max-height:0; overflow:hidden; transition:max-height .2s ease, padding .2s ease; background:var(--surface); }
.exercise-item.open .exercise-body { padding:2px 16px 18px; max-height:700px; }
.ex-materiel { font-size:0.8rem; color:var(--text-muted); margin-bottom:12px; }
.ex-steps-label { font-size:0.85rem; font-weight:600; margin-bottom:6px; }
.ex-steps { margin:0 0 12px; padding-left:20px; font-size:0.9rem; }
.ex-steps li { margin-bottom:5px; }
.ex-tip { background:var(--accent-soft); border-radius:10px; padding:11px 13px; font-size:0.85rem; margin-bottom:14px; }
.ex-log-label { font-size:0.85rem; font-weight:600; margin-bottom:8px; display:block; }

.today-meal-box { display:flex; justify-content:space-between; align-items:center; padding:13px; background:var(--surface-hi); border-radius:12px; }
.today-meal-box .meal-name { font-family:var(--font-display); font-size:1rem; font-weight:600; }
.today-meal-box .meal-kcal { font-family:var(--font-mono); color:var(--accent); font-size:0.85rem; }

.mealplan-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.mealplan-row:last-child { border-bottom:none; }
.mealplan-row .day { font-size:0.78rem; color:var(--text-muted); width:90px; flex-shrink:0; }
.mealplan-row.is-today .day { color:var(--accent); font-weight:600; }
.mealplan-row.is-today .recipe { color:var(--accent); font-weight:600; }

.calc-target-row { display:flex; justify-content:space-between; align-items:center; padding:13px; border:1px solid var(--border); border-radius:12px; margin-bottom:8px; }
.calc-target-row .name { font-size:0.85rem; }
.calc-target-row .name small { display:block; color:var(--text-muted); font-size:0.72rem; margin-top:2px; }
.calc-target-row .kcal { font-family:var(--font-mono); font-weight:700; color:var(--good); font-size:1.05rem; }

.ex-log-form { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:8px; }
.ex-log-form input { padding:9px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-family:var(--font-mono); font-size:0.85rem; width:100%; }
.ex-log-form label { font-size:0.68rem; color:var(--text-muted); display:block; margin-bottom:3px; }
.ex-log-save { width:100%; padding:10px; border-radius:10px; border:none; background:var(--good); color:#06211d; font-weight:700; font-size:0.85rem; margin-bottom:10px; }
.ex-log-history { font-size:0.8rem; color:var(--text-muted); }
.ex-log-history .log-line { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border); }
.ex-log-history .log-line:last-child { border-bottom:none; }

.live-result { text-align:center; font-family:var(--font-mono); font-size:1.6rem; font-weight:700; color:var(--accent); padding:14px 0; }
.plate-list { margin: 6px 0 12px; }
.plate-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.plate-row .pname { flex:1; }
.plate-row .pkcal { font-family:var(--font-mono); color:var(--accent); margin-right:10px; }
.plate-row .premove { background:none; border:none; color:var(--bad); font-size:1.1rem; padding:0 4px; }
.plate-total { display:flex; justify-content:space-between; align-items:center; padding:14px 0 6px; font-family:var(--font-display); font-size:1.1rem; font-weight:600; border-top:1px solid var(--border); margin-top:4px; }
.plate-total .value { font-family:var(--font-mono); color:var(--good); }
details.custom-food { margin: 6px 0 16px; }
details.custom-food summary { color:var(--text-muted); font-size:0.85rem; cursor:pointer; padding:6px 0; }
details.custom-food .field { margin-top:12px; }

/* ---------- Dashboard jour ---------- */
.dashboard-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.ring-wrap { position:relative; width:96px; height:96px; flex-shrink:0; }
.ring-wrap svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-track { fill:none; stroke:var(--border); stroke-width:9; }
.ring-progress { fill:none; stroke:var(--accent); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .3s ease; }
.ring-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-label .count { font-family:var(--font-display); font-size:1.5rem; font-weight:700; line-height:1; }
.ring-label small { color:var(--text-muted); font-size:0.66rem; margin-top:2px; }

.weight-mini { flex:1; text-align:right; }
.weight-mini .w-value { font-family:var(--font-mono); font-size:1.65rem; font-weight:700; color:var(--text); display:block; }
.weight-mini .w-trend { font-size:0.78rem; font-weight:600; }
.weight-mini .w-trend.down { color:var(--good); }
.weight-mini .w-trend.up { color:var(--bad); }
.weight-mini canvas { margin-top:8px; display:block; margin-left:auto; }

.goal-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.goal-tile { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; border-radius:14px; border:1px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:0.78rem; font-weight:600; }
.goal-tile .gi { font-size:1.5rem; }
.goal-tile.done { border-color:var(--good); background:var(--good-soft); color:var(--good); }

.exercise-header-left { display:flex; align-items:center; gap:12px; }
.exercise-diagram { width:48px; height:48px; flex-shrink:0; }
.exercise-diagram svg { width:100%; height:100%; stroke:var(--accent); stroke-width:5; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Planning visuel (semaine + jour selectionne) ---------- */
.week-strip { display:flex; gap:6px; margin-bottom:14px; }
.day-chip { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 2px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:0.66rem; font-weight:600; }
.day-chip .chip-icon { font-size:1.2rem; }
.day-chip.today { border-color:var(--accent); }
.day-chip.selected { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

.day-detail { border:1px solid var(--border); border-radius:14px; padding:16px; background:var(--surface); }
.day-detail-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.day-detail-head .dd-icon { font-size:1.9rem; flex-shrink:0; }
.day-detail-head h3 { font-family:var(--font-display); font-size:1.05rem; margin:0 0 5px; font-weight:600; }

.progression-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.progression-chip { background:var(--surface-hi); border-radius:10px; padding:8px 11px; font-size:0.8rem; }
.progression-chip .phase { color:var(--accent); font-weight:700; display:block; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:2px; }

.setsreps-line { font-size:0.85rem; color:var(--text-muted); margin-bottom:14px; }

.day-exercises { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; margin-bottom:14px; -webkit-overflow-scrolling:touch; }
.day-ex-chip { flex-shrink:0; width:62px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.day-ex-chip .day-ex-diagram { width:46px; height:46px; }
.day-ex-chip .day-ex-diagram svg { width:100%; height:100%; stroke:var(--accent); stroke-width:5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.day-ex-chip span { font-size:0.64rem; text-align:center; color:var(--text-muted); line-height:1.2; }

/* ---------- Sous-onglets de progression hebdomadaire ---------- */
.phase-tabs-wrap { margin-bottom:14px; }
.phase-tabs-label { font-size:0.72rem; color:var(--text-muted); margin-bottom:6px; display:block; }
.phase-tabs { display:flex; gap:6px; }
.phase-tab { flex:1; padding:8px 4px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:0.74rem; font-weight:600; text-align:center; }
.phase-tab.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

.phase-current { background:var(--surface-hi); border-radius:12px; padding:14px; margin-bottom:14px; text-align:center; }
.phase-current .phase-tag { display:block; font-size:0.7rem; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:5px; }
.phase-current .phase-value { font-family:var(--font-mono); font-size:1.15rem; font-weight:700; }

.fixed-detail { font-family:var(--font-mono); font-size:0.9rem; color:var(--text); background:var(--surface-hi); border-radius:10px; padding:10px 13px; margin-bottom:14px; display:inline-block; }