/* Polices hébergées dans l'application (variables, jeu de caractères latin) : aucune requête vers un service externe. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/instrument-sans-latin-wght.woff2") format("woff2"); }
/* All in one Athlete — interface locale (refonte v1 : palette crème / encre / vermillon, navigation en 5 espaces). Structure inspirée de Garmin Connect (rail de navigation,
   tableau de bord en tuiles, pages de détail), sans reprendre ses logos ni sa marque. */

:root {
  color-scheme: light;
  --plane: #f6f4ef;
  --surface: #ffffff;
  --ink: #14171a;
  --ink-2: #3b3f45;
  --muted: #5b5f66;
  --line: #dcd7ca;
  --fill: #e7e3d9;
  --grid: #ece8dc;
  --axis: #cfc9b8;
  --accent: #c8390f;
  --accent-ink: #ffffff;
  --accent-weak: #fbe6df;
  --hero: #14171a;
  --hero-ink: #f6f4ef;
  --hero-muted: #cfccc5;
  --hero-accent: #f0b9a6;
  --ok: #1f6b3a;
  --warn: #8a5200;
  --err: #b42318;
  /* identité des métriques : ordre catégoriel validé (bleu, orange, aqua, jaune, magenta, vert, violet, rouge) */
  --c-blue: #2a78d6;
  --c-orange: #eb6834;
  --c-aqua: #1baf7a;
  --c-yellow: #eda100;
  --c-magenta: #e87ba4;
  --c-green: #008300;
  --c-violet: #6250d6;
  --c-red: #e34948;
  /* zones de fréquence cardiaque : rampe séquentielle bleue (plus intense = plus foncé) */
  --z1: #9a9588;
  --z2: #6f7580;
  --z3: #3b3f45;
  --z4: #c8390f;
  --z5: #8f2608;
  --radius: 18px;
  --shadow: none;
  --font: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane: #14171a;
    --surface: #1f2327;
    --ink: #f6f4ef;
    --ink-2: #cfccc5;
    --muted: #a8a49b;
    --line: #33383d;
    --fill: #2c3136;
    --grid: #2a2f34;
    --axis: #4a4f55;
    --accent: #ff7a4d;
    --accent-ink: #14171a;
    --accent-weak: #3a2018;
    --hero: #2a2f34;
    --hero-ink: #f6f4ef;
    --hero-muted: #cfccc5;
    --hero-accent: #f0b9a6;
    --ok: #6bd08f;
    --warn: #f0b24a;
    --err: #ff8a80;
    --c-blue: #3987e5;
    --c-orange: #d95926;
    --c-aqua: #199e70;
    --c-yellow: #c98500;
    --c-magenta: #d55181;
    --c-green: #008300;
    --c-violet: #9085e9;
    --c-red: #e66767;
    --z1: #4a4f55;
    --z2: #6f7580;
    --z3: #a8a49b;
    --z4: #ff7a4d;
    --z5: #ffb199;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #14171a;
  --surface: #1f2327;
  --ink: #f6f4ef;
  --ink-2: #cfccc5;
  --muted: #a8a49b;
  --line: #33383d;
  --fill: #2c3136;
  --grid: #2a2f34;
  --axis: #4a4f55;
  --accent: #ff7a4d;
  --accent-ink: #14171a;
  --accent-weak: #3a2018;
  --hero: #2a2f34;
  --hero-ink: #f6f4ef;
  --hero-muted: #cfccc5;
  --hero-accent: #f0b9a6;
  --ok: #6bd08f;
  --warn: #f0b24a;
  --err: #ff8a80;
  --c-blue: #3987e5;
  --c-orange: #d95926;
  --c-aqua: #199e70;
  --c-yellow: #c98500;
  --c-magenta: #d55181;
  --c-green: #008300;
  --c-violet: #9085e9;
  --c-red: #e66767;
  --z1: #4a4f55;
  --z2: #6f7580;
  --z3: #a8a49b;
  --z4: #ff7a4d;
  --z5: #ffb199;
  --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 14px/1.45 var(--font);
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
svg { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ coque */
.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--line);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 4px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; font-weight: 700; font-size: 15px; }
.brand svg { color: var(--accent); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius);
  color: var(--ink-2); font-weight: 600; text-decoration: none;
}
.nav a:hover { background: var(--plane); }
.nav a[aria-current="page"] { background: var(--accent-weak); color: var(--accent); }
.nav a[hidden], .more-sheet a[hidden], .nav-sep[hidden] { display: none !important; }   /* le display des liens l'emportait sur l'attribut hidden */
.nav-sep { margin: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.more-btn { display: none; }
.more-sheet { display: none; }
.main-col { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10; height: 56px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 0 24px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 18px; font-weight: 700; }
.sync { display: flex; align-items: center; gap: 12px; min-width: 0; }
#syncStatus { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#syncStatus .dev { font-size: 11.5px; opacity: .85; }
#syncStatus.err { color: var(--err); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-ink); border-radius: 18px; padding: 7px 16px; font-weight: 600; cursor: pointer;
}
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: 4px 12px; font-size: 13px; }
.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin svg { animation: none; } }
main { padding: 20px 24px 48px; max-width: 1320px; margin: 0 auto; outline: none; }

/* ------------------------------------------------------------------ cartes & tuiles */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; min-width: 0; }
.card > h2, .tile-head h2 { font-size: 15px; font-weight: 700; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head p { color: var(--muted); font-size: 13px; }
.stack { display: grid; gap: 16px; }
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 10px; min-height: 176px; }
.tile.hero { grid-column: span 2; }
.tile-head { display: flex; align-items: center; gap: 10px; }
.metric-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--m); background: color-mix(in srgb, var(--m) 14%, transparent); }
.tile-head a, .tile-head .link { margin-left: auto; font-size: 13px; }
.value { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.value small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.hero-value { font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.sub { color: var(--muted); font-size: 13px; }
.sub b { color: var(--ink-2); font-weight: 600; }
.tile-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.meter { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--m) 18%, transparent); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--m); border-radius: 4px; }
.range-bar { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--m) 18%, transparent); }
.range-bar > i { position: absolute; top: 0; bottom: 0; background: var(--m); border-radius: 4px; }
.stagebar { display: flex; gap: 2px; height: 12px; }
.stagebar > i { display: block; height: 100%; border-radius: 3px; min-width: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--accent-weak); color: var(--accent); }
.day-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.day-nav h2 { font-size: 18px; font-weight: 700; min-width: 220px; text-align: center; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover:not(:disabled) { background: var(--plane); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
a.icon-btn { text-decoration: none; }
.two-col { display: grid; gap: 16px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.two-col.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col { display: grid; gap: 16px; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); align-items: start; }

/* ------------------------------------------------------------------ listes & tableaux */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1 1 200px; }
.field { border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 7px 14px; min-width: 0; }
input.field::placeholder { color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 7px 14px; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); }
.list { display: grid; }
.row {
  display: grid; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--line);
  grid-template-columns: 40px minmax(0, 2.2fr) repeat(4, minmax(70px, 1fr));
  color: inherit; text-decoration: none;
}
a.row:hover { background: var(--plane); text-decoration: none; }
.row:last-child { border-bottom: 0; }
.row.head { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 4px; padding-bottom: 8px; }
.row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { color: var(--muted); font-size: 12px; }
.row .cell b { display: block; font-weight: 600; font-size: 14px; }
.row .cell span { color: var(--muted); font-size: 12px; }
.badge { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--m, var(--muted)); background: color-mix(in srgb, var(--m, var(--muted)) 14%, transparent); }
.badge.sm { width: 24px; height: 24px; }
.stats { display: grid; gap: 18px 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.stat b { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; }
.stat span { color: var(--muted); font-size: 13px; }
.stat small { color: var(--muted); font-size: 13px; font-weight: 500; margin-left: 2px; }
.scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { color: var(--muted); font-weight: 600; font-size: 12px; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
details.tv { margin-top: 10px; }
details.tv > summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; width: fit-content; }
details.tv .scroll { max-height: 280px; overflow: auto; margin-top: 8px; }
pre.json { margin: 0; padding: 12px; background: var(--plane); border-radius: var(--radius); font: 12px/1.5 ui-monospace, Consolas, monospace; overflow: auto; max-height: 460px; color: var(--ink-2); }
.empty { color: var(--muted); padding: 28px 12px; text-align: center; }
.empty strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.notice { padding: 10px 14px; border-radius: var(--radius); background: var(--accent-weak); color: var(--ink-2); font-size: 13px; }
.notice.err { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--ink); }
.back { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; margin-bottom: 12px; }

/* ------------------------------------------------------------------ graphiques */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart text { font: 11px var(--font); fill: var(--muted); }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--axis); stroke-width: 1; }
.chart .goal { stroke: var(--ink-2); stroke-width: 1; }
.chart .cursor { stroke: var(--ink-2); stroke-width: 1; opacity: 0.55; }
.chart-empty { color: var(--muted); padding: 24px 0; text-align: center; }
.tt {
  position: absolute; z-index: 20; pointer-events: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); padding: 8px 10px; font-size: 12px;
  line-height: 1.4; min-width: 120px; max-width: 240px; color: var(--ink);
}
.tt b { display: block; font-weight: 600; margin-bottom: 2px; }
.tt div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.tt i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.chart-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0 2px; flex-wrap: wrap; }
.chart-title:first-child { margin-top: 0; }
.chart-title b { font-size: 13px; font-weight: 700; }
.chart-title span { color: var(--muted); font-size: 12px; }
.zones { display: grid; gap: 10px; }
.zone { display: grid; grid-template-columns: 78px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font-size: 13px; }
.zone .bar { height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.zone .bar i { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.zone .t { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.route { width: 100%; height: auto; display: block; border-radius: var(--radius); background: var(--plane); }
.route path.track { stroke: var(--accent); }

/* carte (tuiles OpenStreetMap + tracé) */
.map { position: relative; overflow: hidden; background: var(--plane); border-radius: var(--radius); cursor: grab; touch-action: pan-y; user-select: none; }
.map.grabbing { cursor: grabbing; }
.map .tiles-layer { position: absolute; inset: 0; }
.map .tiles-layer img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.map-overlay { position: absolute; inset: 0; pointer-events: none; }
.map-overlay .track { stroke: var(--accent); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .map .tiles-layer { filter: invert(0.92) hue-rotate(180deg) brightness(0.92) contrast(0.9); } }
:root[data-theme="dark"] .map .tiles-layer { filter: invert(0.92) hue-rotate(180deg) brightness(0.92) contrast(0.9); }
.map-zoom { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); border-radius: 6px; overflow: hidden; }
.map-zoom button { width: 32px; height: 32px; border: 0; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.map-zoom button:hover:not(:disabled) { background: var(--plane); }
.map-zoom button:disabled { color: var(--muted); cursor: default; }
.map-attr { position: absolute; right: 0; bottom: 0; padding: 2px 6px; font-size: 11px; background: rgba(255, 255, 255, 0.8); color: #333; border-top-left-radius: 4px; }
.map-attr a { color: #0b5f93; }
.map-note { position: absolute; left: 8px; bottom: 24px; max-width: calc(100% - 16px); pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--ink-2); }

.readout { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px 12px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--plane); }
.readout b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.readout.on b { color: var(--ink); }
.readout span { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ calendrier */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 210px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.cal .dow { padding: 8px; color: var(--muted); font-size: 12px; font-weight: 600; background: var(--plane); }
.cal .day { min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal .day.out { background: var(--plane); }
.cal .day.out .dn { color: var(--muted); opacity: 0.6; }
.cal .dn { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.cal .day.today .dn { background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 0 7px; width: fit-content; }
.cal .week { padding: 8px; font-size: 12px; color: var(--ink-2); background: var(--plane); }
.cal .week b { display: block; color: var(--ink); font-size: 13px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; font-size: 12px; color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--m, var(--muted)) 13%, transparent); overflow: hidden; }
a.chip:hover, button.chip:hover { text-decoration: none; background: color-mix(in srgb, var(--m, var(--muted)) 24%, transparent); }
button.chip { font: inherit; font-size: 12px; text-align: left; cursor: pointer; width: 100%; border: 0; }
button.chip.planned { border: 1px dashed var(--axis); }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.planned { background: transparent; border: 1px dashed var(--axis); color: var(--ink-2); }

.wk-km { display: block; color: var(--ink-2); }
.wk-km b { display: inline; color: var(--ink); font-size: 12px; }

/* ------------------------------------------------------------------ données */
.cov { display: grid; grid-template-columns: 170px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; }
.cov .bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cov .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.cov.low .bar i { background: var(--warn); }
.cov code, .keys code { font: 12px ui-monospace, Consolas, monospace; color: var(--ink-2); }
.keys { display: flex; flex-wrap: wrap; gap: 4px 12px; max-height: 220px; overflow: auto; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 68px minmax(0, 1fr); }
  .brand span, .nav a span, .nav-sep { display: none; }
  .nav a { justify-content: center; padding: 12px 0; }
  .brand { justify-content: center; padding: 6px 0 16px; }
  .tile.hero { grid-column: auto; }
  .two-col, .three-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px), ((pointer: coarse) and (max-width: 1100px)) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; z-index: 30; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row;
    border-right: 0; border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .brand { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav a, .more-btn { flex-direction: column; gap: 2px; padding: 6px 10px; font-size: 11px; }
  .nav a span, .more-btn span { display: block; }
  .nav a.sec, .nav-sep { display: none; }
  .more-btn { display: flex; align-items: center; background: none; border: 0; border-radius: var(--radius); color: var(--ink-2); font-weight: 600; cursor: pointer; }
  .more-btn.on { background: var(--accent-weak); color: var(--accent); }
  .more-sheet:not([hidden]) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; position: fixed; z-index: 40; left: 8px; right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom)); padding: 12px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
  }
  .more-sheet a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: var(--radius); color: var(--ink-2); font-size: 12px; font-weight: 600; text-decoration: none; text-align: center; }
  .more-sheet a[aria-current="page"] { background: var(--accent-weak); color: var(--accent); }
  .topbar { padding: 0 14px; }
  .topbar h1 { font-size: 16px; }
  #syncStatus { display: none; }
  main { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  .row { grid-template-columns: 40px minmax(0, 1fr) minmax(64px, auto) minmax(64px, auto); }
  .row .opt { display: none; }
  .cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal .week-h { display: none; }
  .cal .week { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 5px 8px; }
  .cal .week b { display: inline; }
  .cal .week .wk-sport { display: none; }
  .cal .day { min-height: 64px; padding: 3px; }
  .chip span { display: none; }
  .chip { justify-content: center; padding: 3px; }
  .day-nav h2 { min-width: 0; flex: 1; font-size: 16px; }
  .hero-value { font-size: 44px; }
  .cov { grid-template-columns: 120px minmax(0, 1fr) 40px; }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { min-height: 0; gap: 8px; }
  .tile.hero, .tile:first-child, .tile:nth-child(2) { grid-column: 1 / -1; }
  .tiles .card { padding: 12px; }
  .tiles .tile:not(.hero):not(:first-child):not(:nth-child(2)) .tile-head a { display: none; }
  .tiles .tile h2 { font-size: 14px; line-height: 1.2; }
  .tiles .value { font-size: 24px; }
  .tiles .tile-foot svg { max-width: 64px; }
  .tiles .pill { display: block; width: fit-content; margin: 4px 0 0 !important; }
  .btn span { display: none; }
  .btn { padding: 8px 10px; }
}

/* ------------------------------------------------------------------ nutrition */
.hero-value.sm { font-size: 30px; }
.nut-top { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.bal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bal-grid div { display: flex; flex-direction: column; min-width: 0; }
.bal-grid b { font-size: 16px; font-weight: 700; }
.bal-grid span { color: var(--muted); font-size: 12px; }
.macro { display: flex; flex-direction: column; gap: 4px; }
.macro-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); }
.macro-head b { color: var(--ink); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.sess-list { display: flex; flex-direction: column; gap: 6px; }
.sess { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.sess b { margin-left: auto; font-weight: 600; }
.sess-plan { display: flex; flex-wrap: wrap; gap: 6px; }
.sess-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.guide { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.guide b { color: var(--ink); }
.meal { border-top: 1px solid var(--line); padding: 10px 0; }
.meal:first-of-type { border-top: 0; }
.meal-head { display: flex; align-items: center; gap: 10px; }
.meal-head h3 { font-size: 14px; font-weight: 700; }
.meal-head .btn { margin-left: auto; }
.entries { display: flex; flex-direction: column; margin-top: 6px; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 10px; padding: 6px 0; }
.e-name { display: flex; flex-direction: column; min-width: 0; }
.e-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-qty { display: flex; align-items: center; gap: 4px; }
.e-kcal { display: flex; align-items: baseline; gap: 4px; min-width: 70px; justify-content: flex-end; }
.e-mac { white-space: nowrap; }
.field.qty { width: 74px; padding: 4px 8px; border-radius: 12px; text-align: right; }
.icon-btn.small { width: 28px; height: 28px; font-size: 16px; }
.add-panel { margin: 8px 0 4px; padding: 12px; border-radius: var(--radius); background: var(--plane); }
.results { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; }
.res-title { margin: 8px 0 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.food { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.f-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.f-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.custom[hidden] { display: none; }
.custom label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.custom .wide, .custom label.wide { grid-column: 1 / -1; }
.custom .field { width: 100%; }
@media (max-width: 640px) {
  .entry { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; }
  .e-mac { grid-column: 1 / -1; grid-row: 2; margin-top: -4px; }
  .bal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food { flex-wrap: wrap; }
  .day-nav h2 { min-width: 0; flex: 1; }
}
.wt-tile { min-height: 0; }
@media (min-width: 900px) { .tiles:has(.wt-tile) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lib { display: flex; flex-direction: column; }
.lib-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lib-mac { white-space: nowrap; }
.lib-edit { padding: 10px 0; border-bottom: 1px solid var(--line); grid-template-columns: repeat(3, minmax(0, 1fr)); }
textarea.field { width: 100%; border-radius: 12px; font: inherit; resize: vertical; }
.imp-list { display: flex; flex-direction: column; gap: 8px; }
.imp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: center; }
.imp-q { display: flex; flex-direction: column; min-width: 0; }
.imp-q b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.imp-row select { width: 100%; }
.fav-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
@media (max-width: 640px) {
  .lib-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .lib-mac { grid-column: 2 / -1; grid-row: 2; white-space: normal; }
  .lib-edit, .imp-row { grid-template-columns: 1fr; }
}
.seg.wrap { display: flex; flex-wrap: wrap; border-radius: 18px; margin-bottom: 8px; }
.lib-row.basic { grid-template-columns: 0 minmax(0, 1fr) auto auto 0; }
@media (max-width: 640px) { .lib-row.basic { grid-template-columns: minmax(0, 1fr) auto; } .lib-row.basic > span { display: none; } .lib-row.basic .lib-mac { grid-column: 1 / -1; grid-row: 2; } }
.recap { padding: 12px 14px; border-radius: var(--radius); background: var(--plane); margin-bottom: 12px; }
.recap-grid { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.recap-n { display: flex; flex-direction: column; }
.recap-n b { font-size: 24px; font-weight: 700; line-height: 1.1; }
.recap-n span { color: var(--muted); font-size: 12px; }
.recap-n.ok b { color: var(--c-green); }
.recap-n.warn b { color: var(--c-orange); }
.recap-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
details.more { margin-top: 4px; }
details.more > summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; width: fit-content; }
details.more > .wt-form { margin-top: 10px; }

.chip.mine { font: inherit; font-size: 12px; text-align: left; cursor: pointer; width: 100%; border-color: color-mix(in srgb, var(--m) 55%, var(--axis)); color: var(--ink); }
.chip.mine:hover { background: color-mix(in srgb, var(--m) 16%, transparent); }
.cal .day { position: relative; }
.day-add { position: absolute; top: 2px; right: 3px; opacity: 0; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.day:hover .day-add, .day-add:focus-visible { opacity: 1; }
@media (hover: none) { .day-add { opacity: 0.55; } }
textarea.field { resize: vertical; font: inherit; }
.chip.planned.mine { background: color-mix(in srgb, var(--m) 10%, transparent); }

/* ---- séance détaillée ---- */
.chip.mine.detailed { border-left: 3px solid var(--m); }
.wk-summary { margin-top: 12px; font-weight: 600; font-size: 14px; }
.wk-profile svg { width: 100%; height: 110px; display: block; }
.wk-profile .legend { margin-top: 8px; }
.wk-list { display: grid; gap: 10px; }
.wk-step { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--m, var(--muted)); border-radius: var(--radius); background: var(--surface); position: relative; }
.wk-body { display: grid; gap: 8px; }
.wk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-label { width: 74px; flex: none; color: var(--muted); font-size: 12px; }
.wk-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wk-tools { display: flex; gap: 4px; justify-content: flex-end; }
.wk-num { width: 84px; padding: 4px 10px; border-radius: 12px; }
.wk-clock { width: 78px; padding: 4px 10px; border-radius: 12px; text-align: center; }
.wk-clock[aria-invalid="true"] { border-color: var(--err); }
.wk-unit { padding: 4px 10px; border-radius: 12px; }
.wk-type { font-weight: 600; }
.wk-link { width: fit-content; }
.wk-repeat { border: 1px dashed var(--axis); border-radius: var(--radius); padding: 10px; display: grid; gap: 10px; background: color-mix(in srgb, var(--plane) 60%, transparent); }
.wk-repeat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-spacer { flex: 1; }
.wk-inner { display: grid; gap: 8px; padding-left: 10px; border-left: 2px solid var(--line); }
.wk-add { display: flex; gap: 6px; flex-wrap: wrap; }
.wk-empty { display: grid; gap: 8px; }
.wk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 640px) { .wk-actions .btn span { display: inline; } .wk-label { width: 100%; } }

/* ---- calendrier : couleurs par sport, EF / intense, réalisé / prévu ---- */
.chip { border-left: 3px solid var(--m, var(--muted)); background: color-mix(in srgb, var(--m, var(--muted)) 16%, transparent); }
.chip.done { background: color-mix(in srgb, var(--m) 26%, transparent); }
.chip.hard { background: color-mix(in srgb, var(--m) 46%, transparent); font-weight: 650; }
.chip.hard::after { content: "▲"; margin-left: auto; font-size: 9px; color: var(--m); }
.chip.planned, button.chip.planned { background: color-mix(in srgb, var(--m, var(--muted)) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--m, var(--muted)) 70%, var(--axis)); border-left: 3px solid var(--m, var(--muted)); }
.chip.planned.hard, button.chip.planned.hard { background: color-mix(in srgb, var(--m) 24%, transparent); }
.chip svg { color: var(--m); flex: none; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; font-size: 12px; color: var(--ink-2); }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--m); display: inline-block; }
.cal-legend .lg-sep { width: 1px; height: 14px; background: var(--line); }
.lg-chip { padding: 1px 8px; border-radius: 4px; border-left: 3px solid var(--c-blue); background: color-mix(in srgb, var(--c-blue) 16%, transparent); }
.lg-chip.hard { background: color-mix(in srgb, var(--c-blue) 46%, transparent); font-weight: 650; }
.lg-chip.done { background: color-mix(in srgb, var(--c-blue) 26%, transparent); }
.lg-chip.planned { background: color-mix(in srgb, var(--c-blue) 8%, transparent); border: 1px dashed var(--c-blue); border-left: 3px solid var(--c-blue); }
.cal .week { display: flex; flex-direction: column; gap: 6px; }
.cal .week > b { font-size: 16px; }
.cal .week .sub { font-size: 11px; color: var(--muted); }
.cal .week .miss { font-size: 11px; color: var(--c-orange); font-weight: 600; }
.wk-sport { display: grid; gap: 2px; }
.wk-sport .wk-line { display: flex; justify-content: space-between; font-size: 12px; }
.wk-sport .wk-line b { color: var(--m); font-weight: 650; }
.wk-sport small { color: var(--muted); font-size: 10.5px; }
.wk-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--line) 70%, transparent); }
.wk-bar .dh { background: var(--m); }
.wk-bar .de { background: color-mix(in srgb, var(--m) 55%, transparent); }
.wk-bar .ph { background: repeating-linear-gradient(45deg, var(--m) 0 3px, transparent 3px 6px); }
.wk-bar .pe { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--m) 55%, transparent) 0 3px, transparent 3px 6px); }
.nav a[data-route=""] svg, .more-sheet a[data-route="calendar"] svg { color: var(--c-blue); }
.nav a[data-route="activities"] svg { color: var(--c-orange); }
.nav a[data-route="nutrition"] svg { color: var(--c-green); }
.nav a[data-route="health"] svg { color: var(--c-magenta); }
.nav a[data-route="calendar"] svg, .nav a[data-route="goals"] svg, .nav a[data-route="program"] svg, .nav a[data-route="hyrox"] svg, .nav a[data-route="load"] svg { color: var(--c-violet); }
.nav a[data-route="data"] svg, .nav a.acct svg { color: var(--muted); }
.more-sheet a[data-route] svg { color: var(--c-violet); }
.more-sheet a[data-route="data"] svg, .more-sheet a[data-route="account"] svg { color: var(--muted); }
.nav a[aria-current="page"] svg { color: inherit; }
.stats .stat:nth-child(1) b { color: var(--c-blue); }
.stats .stat:nth-child(2) b { color: var(--c-magenta); }
.stats .stat:nth-child(3) b { color: var(--c-aqua); }
.stats .stat:nth-child(4) b { color: var(--c-orange); }
.card-head h2 { border-left: 4px solid var(--accent); padding-left: 10px; }

/* ------------------------------------------------------------------ page HYROX */
.hx-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hx-stat { border: 1px solid var(--line); border-left: 4px solid var(--m); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 2px; background: color-mix(in srgb, var(--m) 6%, var(--surface)); }
.hx-stat span { font-size: 12px; color: var(--muted); font-weight: 600; }
.hx-stat b { font-size: 24px; font-variant-numeric: tabular-nums; }
.hx-stat small { color: var(--muted); font-size: 12px; }
.hx-run td:first-child { border-left: 4px solid var(--c-red); }
.hx-st td:first-child { border-left: 4px solid var(--c-violet); font-weight: 600; }
.hx-st { background: color-mix(in srgb, var(--c-violet) 6%, transparent); }
.hx-focus { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.hx-focus p { margin: 4px 0 0; color: var(--ink-2); }
.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------------ page Programme */
.pg-scroll { overflow-x: auto; padding-bottom: 6px; }
.pg-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 12px; }
.pg-step { flex: 1 1 150px; min-width: 150px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 4px; align-content: start; background: color-mix(in srgb, var(--c-blue) 5%, var(--surface)); }
.pg-step p { margin: 0; font-size: 13px; color: var(--ink-2); }
.pg-step small { color: var(--muted); font-size: 12px; }
.pg-n { width: 22px; height: 22px; border-radius: 50%; background: var(--c-blue); color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
.pg-arrow { align-self: center; color: var(--muted); font-size: 20px; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; font-size: 12px; color: var(--ink-2); }
.pg-leg { display: inline-flex; align-items: center; gap: 6px; }
.pg-leg i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.pg-leg i.rec { border: 1.5px dashed var(--ink-2); background: transparent; }
.pg-leg i.line { height: 2px; background: var(--ink); }
.pg-seg h3 { font-size: 14px; margin: 8px 0; }
.pg-metas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pg-meso { border: 1px solid var(--line); border-left: 4px solid var(--m); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 2px; font-size: 13px; }
.pg-meso span { color: var(--ink-2); }
.pg-week { display: grid; gap: 8px; grid-template-columns: repeat(7, minmax(110px, 1fr)); overflow-x: auto; }
.pg-day { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 110px; }
.pg-day.dbl { border-color: var(--c-violet); }
.pg-dh { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.pg-dh b { color: var(--ink); }
.pg-ses { border-left: 4px solid var(--c-aqua); background: color-mix(in srgb, var(--c-aqua) 8%, transparent); border-radius: 4px; padding: 5px 7px; display: grid; gap: 1px; font-size: 12px; }
.pg-ses.hard { border-left-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 10%, transparent); }
.pg-ses span { color: var(--ink-2); }
.pg-race { border-left: 4px solid var(--m); padding: 5px 7px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--m) 10%, transparent); border-radius: 4px; }
.pg-rest { color: var(--muted); font-size: 12px; }
.pg-tpl { display: flex; gap: 6px; overflow-x: auto; }
.pg-slot { min-width: 90px; border-left: 4px solid var(--c-aqua); background: color-mix(in srgb, var(--c-aqua) 8%, transparent); border-radius: 4px; padding: 6px 8px; display: grid; gap: 2px; font-size: 12px; }
.pg-slot.hard { border-left-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 10%, transparent); }

/* ------------------------------------------------------------------ page Besoins */
.fu-bar { display: grid; grid-template-columns: minmax(130px, 220px) 1fr 90px; gap: 10px; align-items: center; font-size: 13px; margin: 6px 0; }
.fu-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.fu-track { background: var(--line); border-radius: 6px; height: 12px; overflow: hidden; }
.fu-track i { display: block; height: 100%; border-radius: 6px; }
.fu-key td:first-child { border-left: 4px solid var(--c-orange); }
tfoot td { font-weight: 700; border-top: 2px solid var(--line); }

/* ---- Frigo ---- */
.fr-loc { font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.fr-list { display: grid; gap: 8px; }
.fr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; }
.fr-item.lv-soon, .fr-item.lv-today { border-left-color: var(--warn); }
.fr-item.lv-expired { border-left-color: var(--err); }
.fr-item.lv-ok { border-left-color: var(--ok); }
.fr-main > div:first-child { overflow-wrap: anywhere; }
.fr-when { display: flex; flex-direction: column; font-size: 13px; text-align: right; }
.fr-when.lv-expired b { color: var(--err); }
.fr-when.lv-soon b, .fr-when.lv-today b { color: var(--warn); }
.fr-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fr-panel { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 8px; }
.fr-form { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; }
.fr-form .field[type="number"] { width: 92px; }
.fr-form.add { margin-top: 10px; }
.fr-results { display: grid; gap: 4px; margin-top: 8px; }
.fr-cand { text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; color: var(--ink); cursor: pointer; font: inherit; }
.fr-cand:hover, .fr-cand:focus-visible { border-color: var(--accent); }
.fr-imp { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fr-imp > b { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.fr-imp .field[type="number"] { width: 78px; }
.fr-hist { display: grid; gap: 2px; margin-top: 8px; }
@media (max-width: 640px) { .fr-item { grid-template-columns: 1fr; } .fr-when { text-align: left; } .fr-act { justify-content: flex-start; } }

/* ---- Recettes ---- */
.rc-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 10px; }
.rc-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.rc-qty { display: flex; align-items: center; gap: 6px; }
.rc-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.rc-b { font-size: 12px; padding: 2px 10px; border-radius: 12px; background: var(--accent-weak); color: var(--ink-2); }
.rc-b.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ink); }
.rc-b.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--ink); }
.rc-steps { margin: 8px 0 8px 20px; font-size: 13px; }
.rc-why { margin-top: 6px; }
.fr-how { margin: 6px 0 6px 20px; }
.fr-imp-list .fr-imp > b { flex: 1 1 200px; }
.fr-imp .field { max-width: 100%; }

/* ---- Connexion / comptes ---- */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--plane); }
.login-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.login-card h1 { font-size: 20px; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.login-form .field { width: 100%; }
.login-alt { display: flex; justify-content: center; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.acc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-table th, .acc-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.code-box { font-family: ui-monospace, monospace; font-size: 18px; letter-spacing: 1px; padding: 10px 14px; border: 1px dashed var(--accent); border-radius: var(--radius); user-select: all; }

/* ------------------------------------------------------------------ démarrage */
.ob-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ob-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.ob-step p { margin: 2px 0 0; }
.ob-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent-weak); color: var(--accent); }
@media (max-width: 640px) { .ob-step { grid-template-columns: 32px minmax(0, 1fr); } .ob-step .btn { grid-column: 2; justify-self: start; } }

/* ------------------------------------------------------------------ profil */
.prof-src { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.prof-src:first-of-type { border-top: 0; }
.prof-src p { margin: 2px 0 0; }
.prof-src .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.prof-src .dot.on { background: var(--c-green); }
.prof-src .dot.mid { background: var(--warn); }
.prof-mods { display: grid; gap: 10px; }
.prof-mod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.prof-mod.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.prof-mod.sub-mod { margin-left: 24px; }
.prof-mod p { margin: 2px 0 0; }
.prof-mod .hint { font-size: 12px; color: var(--muted); }
.prof-mod .hint.warn { color: var(--warn); }
.prof-mod .hint.ok { color: var(--c-green); }
.sw { position: relative; width: 44px; height: 26px; flex: none; }
.sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 13px; background: var(--line); transition: background .15s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sw input:checked + i { background: var(--accent); }
.sw input:checked + i::after { transform: translateX(18px); }
.sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.prof-save { display: flex; align-items: center; gap: 10px; margin: 4px 0 24px; }
.notice.ok { background: color-mix(in srgb, var(--c-green) 14%, transparent); }
.notice.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.custom label[hidden] { display: none; }

/* ---- calendrier : glisser-déposer, vue semaine, analyse des séances ---- */
.day-nav .seg { margin-left: auto; }
.chip.dragging, .wk-b.dragging { opacity: 0.35; }
.chip.lift, .wk-b.lift { outline: 2px solid var(--accent); }
.drag-ghost { cursor: grabbing; }
.drag-ghost::after { content: attr(data-label); position: absolute; left: 6px; top: -22px; background: var(--ink); color: var(--surface); padding: 1px 7px; z-index: 1; border-radius: 9px; font-size: 11px; white-space: nowrap; }
.drag-ghost[data-label=""]::after, .drag-ghost:not([data-label])::after { display: none; }
button.chip.mine, .wk-b.planned { cursor: grab; user-select: none; -webkit-user-select: none; }
.cal .day.drop-ok, .wk-nt.drop-ok { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 2px dashed var(--accent); outline-offset: -2px; }
.wk-col.drop-ok { background-color: color-mix(in srgb, var(--accent) 7%, transparent); }

.wk-grid { display: grid; grid-template-columns: 46px repeat(7, minmax(92px, 1fr)); min-width: 720px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wk-grid > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.wk-corner, .wk-gl { background: var(--plane); }
.wk-gl { font-size: 10px; color: var(--muted); padding: 4px; display: flex; align-items: center; }
.wk-dh { padding: 6px 8px; font-size: 12px; color: var(--ink-2); background: var(--plane); position: relative; }
.wk-dh b { color: var(--ink); }
.wk-dh.today { background: color-mix(in srgb, var(--accent) 14%, var(--plane)); }
.wk-dh .day-add.show { opacity: 0.6; }
.wk-nt { min-height: 30px; padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.wk-gutter { position: relative; background: var(--plane); }
.wk-gutter span { position: absolute; right: 4px; transform: translateY(-50%); font-size: 10px; color: var(--muted); }
.wk-gutter span:first-child { transform: none; }
.wk-col { position: relative; background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 52px); }
.wk-col.today { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.wk-b { position: absolute; display: flex; flex-direction: column; gap: 0; align-items: flex-start; justify-content: flex-start; font: inherit; font-size: 11.5px; line-height: 1.25; text-align: left; padding: 2px 5px; border-radius: 5px; overflow: hidden; cursor: pointer; color: var(--ink);
  border: 0; border-left: 3px solid var(--m, var(--muted)); background: color-mix(in srgb, var(--m, var(--muted)) 26%, var(--surface, #fff)); }
.wk-b b { font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-b small { color: var(--ink-2); font-size: 10.5px; }
.wk-b b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.wk-b.short { justify-content: center; padding-top: 0; padding-bottom: 0; }
.wk-b.short b { white-space: nowrap; display: block; }
.wk-under { position: absolute; z-index: 1; font-size: 10px; line-height: 12px; color: var(--ink-2); padding-left: 5px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-b.planned { background: color-mix(in srgb, var(--m, var(--muted)) 10%, var(--surface, #fff)); border: 1px dashed color-mix(in srgb, var(--m) 60%, var(--axis)); border-left: 3px solid var(--m); touch-action: manipulation; }
.wk-b.hard::after { content: "▲"; position: absolute; right: 4px; top: 2px; font-size: 9px; color: var(--m); }
.wk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--err, #d33); pointer-events: none; z-index: 2; }
.wk-drop { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); pointer-events: none; z-index: 3; }
.wk-drop span { position: absolute; left: 2px; top: -16px; font-size: 10.5px; background: var(--accent); color: var(--accent-ink); padding: 0 5px; border-radius: 6px; }

.analysis { padding: 12px 16px; margin-bottom: 16px; }
.analysis > summary { cursor: pointer; list-style: none; }
.analysis > summary h2 { display: inline; font-size: 16px; }
.analysis > summary::-webkit-details-marker { display: none; }
.analysis > summary::before { content: "▾ "; color: var(--muted); }
.analysis:not([open]) > summary::before { content: "▸ "; }
.an-props { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 8px; padding: 10px 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.an-props h3 { font-size: 13.5px; }
.an-prop { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.an-prop .btn { flex: none; }
.an-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.an-row { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.an-head { display: flex; align-items: center; gap: 10px; }
.an-ic { color: var(--m); display: inline-flex; }
.an-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.an-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-score { font-weight: 700; font-size: 15px; min-width: 40px; text-align: center; padding: 3px 8px; border-radius: 12px; color: #fff; }
.an-score.great { background: #2e9e5b; } .an-score.good { background: #6aa84f; } .an-score.mid { background: #d9962b; } .an-score.low { background: #c0392b; }
.an-body { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.an-st { font-size: 12px; font-weight: 600; }
.an-st.ok { color: #2e9e5b; } .an-st.mv { color: #b9770e; } .an-st.none { color: var(--muted); }
.an-note { color: var(--ink-2); }
.an-co { display: flex; gap: 6px; color: var(--ink-2); }
.an-co i { font-style: normal; flex: none; width: 14px; }
.an-co.warn i { color: #d9962b; } .an-co.ok i { color: #2e9e5b; } .an-co.info i { color: var(--accent); }
.an-missed { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 640px) { .an-prop { flex-direction: column; align-items: stretch; } .wk-grid { grid-template-columns: 38px repeat(7, 84px); } }

.an-badge { margin-left: 10px; font-size: 11.5px; font-weight: 600; background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 1px 8px; vertical-align: 2px; }
.wk-sum { padding: 10px 16px; margin-top: 12px; }
.wk-sum .week { background: transparent; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.wk-sum .week b { display: block; color: var(--ink); font-size: 15px; }
.wk-sum .week .wk-sport { margin-top: 6px; }

.an-chip { margin-left: 10px; font-size: 12px; color: var(--muted); }
.an-row { padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.an-row > summary { list-style: none; cursor: pointer; padding: 6px 0; }
.an-row > summary::-webkit-details-marker { display: none; }
.an-row .an-body { padding: 0 0 8px 24px; }
.an-list { gap: 0; margin-top: 6px; }
.an-score { font-size: 13px; min-width: 34px; padding: 2px 7px; }
.an-foot { margin-top: 6px; font-size: 11.5px; }
.an-props { margin: 8px 0; padding: 8px 10px; }

.an-score.small { font-size: 11.5px; min-width: 0; padding: 1px 8px; margin-left: 10px; vertical-align: 2px; }
.an-prep { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.an-goal { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.an-goal-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.an-goal-h > b { flex: 1; }
.an-advice { font-size: 12.5px; margin-top: 4px; }
.an-advice.warn { color: #b9770e; } .an-advice.alert { color: #c0392b; font-weight: 600; }
.an-feel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.an-feel.small { margin: 6px 0 2px; }
.an-feel .btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.an-paces { border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.an-paces td { padding: 2px 10px 2px 0; }
.an-act { display: flex; gap: 8px; margin-top: 6px; }

.rd-list { display: grid; gap: 10px; margin-top: 12px; }
.rd-row { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: start; }
.rd-row p { margin: 2px 0 0; }
.rd-val { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; font-weight: 700; font-size: 15px; white-space: nowrap; padding: 0 6px; background: var(--accent-weak); color: var(--ink); }
.rd-val.ok { background: color-mix(in srgb, var(--c-green) 18%, transparent); }
.rd-val.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.rd-val.bad { background: color-mix(in srgb, var(--err) 18%, transparent); }
.rd-ul { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.rd-tbl th, .rd-tbl td { text-align: left; vertical-align: top; padding: 6px 8px; font-size: 12.5px; }
.rd-tbl tbody th { white-space: nowrap; font-weight: 650; }
.chip-note { font-size: 11px; padding: 1px 7px; border-radius: 999px; vertical-align: middle; background: color-mix(in srgb, var(--c-green) 18%, transparent); }
.chip-note.manual { background: color-mix(in srgb, var(--warn) 22%, transparent); }

.zn-table { display: grid; gap: 2px; }
.zn-head, .zn-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(100px, 0.8fr); gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.zn-head { font-size: 12px; color: var(--muted); font-weight: 650; }
.zn-row.mine { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.zn-name, .zn-app, .zn-used { display: grid; gap: 2px; justify-items: start; }
.zn-name .sub { margin: 0; font-size: 12px; }
.zn-mine { display: flex; gap: 6px; align-items: center; }
.zn-mine .field { max-width: 96px; }
.zn-conf { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--accent-weak); cursor: help; }
.zn-conf.ok { background: color-mix(in srgb, var(--c-green) 18%, transparent); }
.zn-conf.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.zn-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zn-chk { padding: 8px 10px; border-radius: 8px; font-size: 13px; border-left: 4px solid var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.zn-chk.alerte { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.zn-conf.bad { background: color-mix(in srgb, var(--err) 18%, transparent); }
.zn-wide { grid-column: 1 / -1; }
.zn-why summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.zn-why ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--ink-2); }
@media (max-width: 640px) { .zn-head { display: none; } .zn-row { grid-template-columns: 1fr 1fr; } .zn-name { grid-column: 1 / -1; } }
.seg.small button { padding: 3px 10px; font-size: 12px; }
.seg button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------------ propositions de repas */
.sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.sugg-fav { display: inline-flex; align-items: center; gap: 2px; }
.sugg-title { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.home-meal { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--axis); }
.home-meal:first-of-type { border-top: 0; }
.home-meal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-meal-head b { font-size: 14px; }

.rp { display: grid; gap: 8px; margin: 8px 0; }
.rp-card { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--axis); border-radius: 8px; }
.rp-head, .rp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-slot > summary { list-style: none; }
.rc-slot > summary::-webkit-details-marker { display: none; }
.rc-slot > summary h2::before { content: "▸ "; color: var(--muted); }
.rc-slot[open] > summary h2::before { content: "▾ "; }


/* ================================================================== REFONTE v1
   Palette, polices et navigation en 5 espaces (Aujourd'hui, Planning, Nutrition, Progrès, Moi) + bouton « + ».
   Les pages existantes ne changent pas : elles sont regroupées sous des onglets. */
body { font-size: 15px; }
h1, .card > h2, .tile-head h2, .value, .hero-value, .stat b, .day-nav h2, .brand { font-family: var(--font-display); }
.value, .hero-value, .stat b { font-weight: 800; }
.hero-value { font-size: 56px; letter-spacing: -0.02em; }
.stat b { font-size: 26px; line-height: 1.15; }
.stat span { font-weight: 500; }
.card { border-radius: 24px; box-shadow: none; padding: 18px; }
.card > h2, .tile-head h2 { font-size: 17px; font-weight: 700; }
.sub b { color: var(--ink); }
a { color: var(--accent); }
.btn { min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; justify-content: center; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 600; }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 14px; }
.field { border-radius: 14px; padding: 10px 14px; min-height: 44px; font-weight: 600; }
.field.qty { min-height: 0; border-radius: 12px; }
select.field { padding-right: 28px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; border: 0; border-radius: 0; background: none; overflow: visible; }
.seg button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--plane); }
.pill { background: var(--fill); color: var(--ink); font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.notice { border-radius: var(--radius); background: var(--fill); color: var(--ink); }
.icon-btn { width: 40px; height: 40px; }
.icon-btn.small { width: 28px; height: 28px; }
.topbar { height: 64px; background: var(--plane); border-bottom: 0; }
.topbar h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.stat small, .value small { color: var(--ink-2); }

/* barre latérale / barre du bas */
.rail { padding: 28px 16px; }
.brand { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; padding: 0 14px 18px; }
.nav { flex: 1; gap: 4px; }
.nav a { height: 48px; padding: 0 14px; border-radius: 14px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav a svg { color: currentColor !important; }
.nav a[aria-current="page"] { background: var(--ink); color: var(--plane); font-weight: 700; }
.nav .add-btn {
  order: 98; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px; cursor: pointer;
}
.nav .add-btn[aria-expanded="true"] { filter: brightness(.92); }
.nav a.me { order: 99; margin-top: 8px; }

/* onglets d'un espace */
.subnav { max-width: 1320px; margin: 0 auto; padding: 12px 24px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.subnav[hidden] { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.subnav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--plane); }
.subnav a[hidden] { display: none; }
main { padding-top: 16px; }

/* menu « + » */
.more-sheet:not([hidden]) {
  display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 40; left: 16px; right: auto; bottom: 84px; width: 248px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 8px 30px rgba(20, 23, 26, .18);
}
.more-sheet a, .more-sheet button {
  display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px;
  background: none; color: var(--ink); font: 600 15px var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.more-sheet a:hover, .more-sheet button:hover { background: var(--plane); }
.more-sheet svg { color: var(--accent) !important; }

.me-top { display: none; }
@media (max-width: 1100px) {
  .nav .add-btn { width: 44px; height: 44px; align-self: center; }
  .nav .add-btn span { display: none; }
  .brand span { display: none; }
  .subnav { padding: 12px 24px 0; }
}
@media (max-width: 820px), ((pointer: coarse) and (max-width: 1100px)) {
  .rail { padding: 8px 12px calc(18px + env(safe-area-inset-bottom)); height: auto; background: var(--surface); border-top: 1px solid var(--line); }
  .nav { flex: none; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 0; }
  .nav a { flex: 1; height: auto; min-height: 48px; padding: 0; border-radius: 0; flex-direction: column; justify-content: center; gap: 3px; font-size: 12px; font-weight: 500; background: none !important; color: var(--ink-2); }
  .nav a[aria-current="page"] { color: var(--accent); font-weight: 700; background: none; }
  .nav a.me { display: none !important; }
  .nav .add-btn { order: 0; flex: none; width: 56px; height: 56px; margin: -22px 0 0; border: 4px solid var(--plane); background: var(--ink); color: var(--plane); box-shadow: 0 2px 6px rgba(20, 23, 26, .18); }
  .nav .add-btn span { display: none; }
  .more-sheet:not([hidden]) { left: 12px; right: 12px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .topbar { padding: 0 20px; }
  .topbar h1 { font-size: 24px; }
  .subnav { padding: 8px 20px 0; }
  main { padding: 12px 20px calc(96px + env(safe-area-inset-bottom)); }
  .me-top { display: inline-grid; }
  .hero-value { font-size: 44px; }
}

/* ================================================================== REFONTE v2 — pages */
/* Carte « À faire maintenant » en tête de la page Aujourd'hui */
.hero-now { background: #14171a; color: #f6f4ef; border-radius: 24px; padding: 20px; display: grid; gap: 8px; }
:root[data-theme="dark"] .hero-now { background: #2a2f34; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .hero-now { background: #2a2f34; } }
.hero-now .hero-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f0b9a6; }
.hero-now h2 { font-family: var(--font-display, inherit); font-weight: 800; font-size: 28px; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.hero-now p { margin: 0; color: #cfccc5; font-size: 15px; }
.hero-now .hero-btn { justify-self: start; margin-top: 8px; min-height: 48px; padding: 0 24px; background: #c8390f; color: #fff; border-color: transparent; font-weight: 700; }
/* Détails repliables */
.more-details { display: grid; gap: 16px; }
.more-details > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-weight: 700; }
.more-details > summary::-webkit-details-marker { display: none; }
.more-details > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); }
.more-details[open] > summary::after { content: "−"; }
.more-details[open] > summary { margin-bottom: 16px; }
.more-details > :not(summary) { margin-top: 0; }
/* Onglets internes de Nutrition : défilement horizontal plutôt que retour à la ligne */
.toolbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.toolbar .seg::-webkit-scrollbar { display: none; }
.toolbar .seg button { flex: none; white-space: nowrap; }
@media (max-width: 820px), ((pointer: coarse) and (max-width: 1100px)) {
  .card { padding: 16px; }
  .btn, .field, select.field { min-height: 44px; }
  .btn.small { min-height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
  .hero-now { padding: 18px; }
  .hero-now h2 { font-size: 26px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scroll, .tbl-wrap { -webkit-overflow-scrolling: touch; }
  .day-nav h2 { min-width: 0; flex: 1; font-size: 16px; }
}
.card-head h2 { border-left: 0; padding-left: 0; }

/* ================================================================== indicateur de chargement */
.topbar { position: relative; }
body.loading .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, var(--accent) 40%, var(--accent) 60%, transparent 100%) 0 0 / 40% 100% no-repeat;
  animation: loadbar 1.1s ease-in-out infinite;
}
@keyframes loadbar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
/* page encore vide : pastille tournante + texte */
#view:empty::before {
  content: ""; display: block; width: 28px; height: 28px; margin: 56px auto 12px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite;
}
#view:empty::after { content: "Chargement…"; display: block; text-align: center; color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { body.loading .topbar::after { animation: none; background-size: 100% 100%; opacity: .5; } #view:empty::before { animation: none; } }

/* ================================================================== calendrier : semaine en liste (téléphone) */
.ag-list { display: grid; gap: 12px; margin: 12px 0; }
.ag-day { padding: 14px 16px; }
.ag-day.today { border-color: var(--accent); }
.ag-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ag-head b { font-family: var(--font-display, inherit); font-weight: 800; font-size: 17px; }
.ag-head .icon-btn { margin-left: auto; }
.ag-today { font-size: 12px; font-weight: 700; color: var(--accent); }
.ag-rows { display: grid; gap: 8px; }
.ag-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px 8px 8px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: color-mix(in srgb, var(--m, var(--muted)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--m, var(--muted)) 30%, transparent); border-left: 4px solid var(--m, var(--muted)); border-radius: 14px; }
.ag-row.planned { border-style: dashed; border-left-style: solid; background: transparent; }
.ag-row.hard b::after { content: " ▲"; font-size: 10px; color: var(--m); }
.ag-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--m); background: color-mix(in srgb, var(--m) 16%, transparent); }
.ag-main { display: grid; min-width: 0; }
.ag-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-state { font-size: 12px; font-weight: 700; color: var(--muted); }
.ag-state.ok { color: var(--ok, #2e9e5b); }
.ag-empty { padding: 4px 0 2px; }
@media (max-width: 820px), ((pointer: coarse) and (max-width: 1100px)) {
  .day-nav { gap: 8px; }
  .day-nav h2 { font-size: 15px; white-space: nowrap; text-align: center; }
  .day-nav .seg { order: 5; width: 100%; }
  .day-nav .seg button { flex: 1; }
}

/* ---------------------------------------------------------------- REFONTE v3 : Plan, Objectifs, Journal, Frigo (téléphone d'abord) */
/* Aides repliées */
details.tv > p, details.tv > .notice { margin-top: 6px; }
.ag-past { margin: 12px 0 0; }
.ag-past > summary { cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border: 1px dashed var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ag-past > summary::-webkit-details-marker { display: none; }
.ag-past > summary::after { content: "+"; font-size: 18px; color: var(--muted); }
.ag-past[open] > summary::after { content: "−"; }
.ag-past > .ag-list { margin-top: 10px; opacity: 0.85; }
.wk-sum { margin-top: 0; margin-bottom: 12px; }

/* Plan : fold + saison en liste */
.pg-fold > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-weight: 700; }
.pg-fold > summary::-webkit-details-marker { display: none; }
.pg-fold > summary::after { content: "+"; font-size: 22px; color: var(--muted); }
.pg-fold[open] > summary::after { content: "−"; }
.pg-fold[open] > summary { margin-bottom: 12px; }
.pg-season { display: grid; gap: 4px; }
.pg-sw { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "d bar c" "d t c"; column-gap: 10px; row-gap: 2px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.pg-sw.sel { border-color: var(--ink); background: var(--fill); }
.pg-sw-d { grid-area: d; font-size: 13px; font-weight: 700; }
.pg-sw-bar { grid-area: bar; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.pg-sw-bar i { display: block; height: 100%; border-radius: 4px; }
.pg-sw-t { grid-area: t; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-sw-c { grid-area: c; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-dc { display: grid; gap: 6px; }
.pg-nav { justify-content: space-between; }
.pg-stats .stat b { font-size: 20px; }

@media (max-width: 820px), ((pointer: coarse) and (max-width: 1100px)) {
  .pg-week { grid-template-columns: 1fr; overflow: visible; gap: 6px; }
  .pg-day { grid-template-columns: 58px minmax(0, 1fr); min-height: 0; padding: 8px 10px; gap: 8px; align-items: start; }
  .pg-dh { flex-direction: column; gap: 0; }
  .pg-day.rest { opacity: 0.65; padding-top: 6px; padding-bottom: 6px; }
  .pg-tpl { flex-direction: column; overflow: visible; gap: 4px; }
  .pg-slot { flex: none !important; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--c-aqua) 22%, transparent) var(--w, 0%), transparent var(--w, 0%)); }
  .pg-slot.hard { background: linear-gradient(90deg, color-mix(in srgb, var(--c-orange) 26%, transparent) var(--w, 0%), transparent var(--w, 0%)); }
  .pg-metas { grid-template-columns: 1fr; }
  .pg-scroll { overflow: visible; }
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
}

/* Objectifs : cartes compactes */
.gl-list { display: grid; gap: 8px; }
.gl { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.gl.open { border-color: var(--ink-2); }
.gl-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font: inherit; color: var(--ink); background: transparent; border: 0; text-align: left; cursor: pointer; min-height: 56px; }
.gl-prio { flex: none; width: 28px; height: 28px; border-radius: 8px; color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.gl-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gl-main b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-main .sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-days { flex: none; font-size: 13px; font-weight: 800; color: var(--ink); background: var(--fill); border-radius: 999px; padding: 3px 10px; }
.gl-chev { flex: none; color: var(--muted); font-size: 12px; }
.gl-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 10px; }
.gl-acts .btn { min-height: 34px; padding: 0 14px; font-size: 13px; font-weight: 600; }
.gl-acts .danger { color: var(--c-red); border-color: var(--c-red); }
.gl-detail, .gl > p, .gl > .toolbar, .gl > section, .gl > div:not(.gl-acts):not(.toolbar) { padding-left: 12px; padding-right: 12px; }
.gl-detail { padding-bottom: 12px; }
.gl-detail > .card, .gl .card { border: 0; padding: 12px 0 0; background: transparent; box-shadow: none; }
.gl-detail .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gl-detail .stat b { font-size: 18px; }
.stp-label { min-width: 0; flex: 1 1 140px; }

/* Journal : compact, façon MyFitnessPal */
.qa-bar { display: flex; gap: 8px; margin: 12px 0; }
.qa-search { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.qa-scan { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--ink); color: var(--plane); cursor: pointer; }
.nut-top { gap: 10px; margin-bottom: 12px; }
.nut-sum { padding: 14px 16px; }
.nut-sum .tile-head { margin-bottom: 4px; }
.nut-sum .tile-head h2 { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nut-sum .hero-value { font-size: 36px; }
.nut-sum .bal-grid b { font-size: 15px; font-weight: 700; }
.nut-sum .macro { gap: 2px; }
.nut-sum .macro-head { font-size: 13px; }
.meals { padding: 4px 16px; }
.meals .meal { padding: 10px 0 8px; }
.meal-head h3 { font-size: 15px; font-weight: 600; flex: 1; }
.meal-kcal { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meal-add { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0; }
.meal-add.on { background: var(--fill); color: var(--ink); border-color: var(--line); }
.meals .entry { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; padding: 5px 0; }
.meals .e-name b { font-weight: 500; font-size: 14px; }
.meals .e-name .sub { font-size: 11.5px; }
.meals .e-kcal b { font-weight: 600; font-size: 14px; }
.meals .e-qty .sub { font-size: 12px; }
.meals .field.qty { width: 58px; min-height: 0; padding: 3px 6px; font-size: 13px; font-weight: 500; }
.sugg-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sugg-line .btn, .sugg .btn { min-height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 600; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.sugg-fav { display: inline-flex; align-items: center; gap: 2px; }
.add-panel .toolbar { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.add-panel .toolbar .field { min-width: 0; flex: 1 1 100%; }
.add-panel .toolbar .btn { flex: 1 1 auto; min-height: 40px; padding: 0 12px; font-size: 13px; }
.add-panel .food { gap: 6px; }
.add-panel .f-name b { font-weight: 600; font-size: 14px; }
.add-panel .f-add .btn { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* Frigo : l'ajout d'un achat en tête */
.fr-add-top { margin-top: 0; margin-bottom: 14px; }
.pg-week { margin-top: 10px; }
.pg-nav { margin-bottom: 4px; }

/* ---------------------------------------------------------------- Ajout rapide : panneau à part */
body.qa-open { overflow: hidden; }
.qa-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(20, 23, 26, .45); display: flex; align-items: flex-end; justify-content: center; }
.qa-sheet { width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: var(--plane); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(20, 23, 26, .25); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 821px) and (pointer: fine) { .qa-overlay { align-items: center; } .qa-sheet { border-radius: 24px; max-height: 80vh; } }
.qa-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.qa-head h2 { flex: 1; font-size: 18px; font-weight: 800; font-family: var(--font-display, inherit); }
.qa-head .qa-back[hidden] { display: none; }
.qa-body { overflow-y: auto; padding: 4px 16px 18px; -webkit-overflow-scrolling: touch; }
.qa-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 104px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.qa-ti { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--accent); }
.qa-tt { display: grid; gap: 2px; }
.qa-tt b { font-size: 15px; font-weight: 700; }
.qa-tt small { font-size: 12px; color: var(--muted); }
.qa-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.qa-chip { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 13px var(--font); cursor: pointer; }
.qa-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--plane); }
.qa-sbar { display: flex; gap: 8px; align-items: center; }
.qa-sbar .field { flex: 1; min-width: 0; }
.qa-scanbtn { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: var(--plane); display: grid; place-items: center; cursor: pointer; }
.qa-scan { margin-top: 10px; }
.qa-scan:empty, .qa-scan[hidden] { display: none; }
.qa-scan video { max-height: 30vh !important; width: 100%; object-fit: cover; border-radius: 12px; }
.qa-added:empty { display: none; }
.qa-added { margin-top: 8px; }
.qa-food .results { margin-top: 8px; }
.qa-loc { display: grid; gap: 4px; margin-bottom: 10px; }
.qa-form { display: grid; gap: 12px; }
.qa-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.qa-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.notice.ok { background: color-mix(in srgb, var(--ok, #2e9e5b) 14%, var(--plane)); }

/* Journal : repas repliés */
.meal-head .meal-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.meal-head .meal-toggle:disabled { cursor: default; }
.meal-head .meal-toggle h3 { flex: none; }
.meal-head .meal-toggle .meal-kcal { margin-left: auto; }
.meal-chev { flex: none; color: var(--muted); font-size: 12px; }
.meal-kcal { white-space: nowrap; }

/* ---------------------------------------------------------------- REFONTE v4 : Progrès (graphiques, Corps, Zones) */
@media (max-width: 820px), ((pointer: coarse) and (max-width: 1100px)) {
  .two-col, .two-col.even, .three-col { grid-template-columns: minmax(0, 1fr) !important; }   /* graphiques de tendance : pleine largeur */
  .tiles:has(.wt-tile) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles:has(.wt-tile) .tile { grid-column: auto !important; }
  .tiles:has(.wt-tile) .tile:nth-child(3):last-child { grid-column: 1 / -1 !important; }
  .tiles:has(.wt-tile) .hero-value.sm { font-size: 24px; }
  .tiles:has(.wt-tile) .tile-head h2 { font-size: 13px; }
}
.card svg { max-width: 100%; }
.sec-title { margin: 22px 0 8px; font-size: 17px; font-weight: 800; font-family: var(--font-display, inherit); }
.hist { display: grid; gap: 6px; }
.hist-row { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hist-row > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; }
.hist-row > summary::-webkit-details-marker { display: none; }
.hist-d { flex: 1; font-weight: 700; font-size: 14px; }
.hist-d small { font-weight: 500; color: var(--muted); }
.hist-w { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.hist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 4px 12px 10px; }
.hist-grid span { display: block; font-size: 12px; color: var(--muted); }
.hist-grid b { font-size: 14px; font-weight: 700; }
.hist-del { margin: 0 12px 12px; min-height: 34px; color: var(--c-red); border-color: var(--c-red); }
/* Zones : sections repliées */
.zn-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-size: 16px; font-weight: 700; }
.zn-fold > summary::-webkit-details-marker { display: none; }
.zn-fold > summary::after { content: "+"; font-size: 22px; color: var(--muted); margin-left: auto; }
.zn-fold[open] > summary::after { content: "−"; }
.zn-fold[open] > summary { margin-bottom: 10px; }
.zn-badge { margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--fill); }
.zn-badge.bad { background: var(--c-red); color: #fff; }
.zn-badge.warn { background: var(--c-yellow); color: #1b1b1b; }
.toolbar .btn span, .qa-bar .btn span { display: inline; }

/* « À traiter » : lignes dépliables avec les éléments concernés et leurs actions */
.td-item { border-bottom: 1px solid var(--line); }
.td-item:last-child { border-bottom: 0; }
.td-head { width: 100%; align-items: center; }
.td-chev { color: var(--muted); font-size: 14px; padding-left: 8px; }
.td-panel { display: grid; gap: 8px; padding: 4px 0 12px; }
.td-line { display: grid; gap: 8px; padding: 10px 12px; background: var(--plane); border-radius: 14px; }
.td-act { display: flex; flex-wrap: wrap; gap: 6px; }

/* Avis sur les recettes (note sur 5, commune à tous les athlètes) */
.rt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 6px 0; }
.rt-row { display: inline-flex; }
.rt-s { border: 0; background: none; padding: 2px 3px; font-size: 22px; line-height: 1; color: var(--line); cursor: pointer; }
.rt-s.on { color: #e0a62a; }
.rt-s:hover, .rt-s:focus-visible { color: #e0a62a; }

/* Ajout rapide : le panneau suit la zone visible quand le clavier est ouvert */
.qa-overlay { overscroll-behavior: contain; }
.qa-overlay.qa-kb .qa-sheet { border-radius: 18px 18px 0 0; }
.qa-overlay.qa-kb .qa-tiles { grid-template-columns: 1fr 1fr; }

/* Scanner de code-barres : caméra plein écran */
body.scan-open { overflow: hidden; }
.scanner-full { position: fixed; inset: 0; z-index: 300; background: #000; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }
.scanner-full video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; background: #000; }
.scanner-full .scan-frame { position: relative; width: min(78vw, 420px); aspect-ratio: 16 / 9; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .38); pointer-events: none; }
.scanner-full .sub { position: absolute; left: 16px; right: 16px; bottom: calc(28px + env(safe-area-inset-bottom)); margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .6); color: #fff; text-align: center; }
.scanner-full .scan-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }

/* Onglets d'une page (ex. Nutrition) sur téléphone : tous visibles d'un coup, sans défilement caché */
@media (max-width: 820px), ((pointer: coarse) and (max-width: 1100px)) {
  .toolbar .seg { width: 100%; overflow: visible; flex-wrap: nowrap; gap: 4px; }
  .toolbar .seg button { flex: 1 1 0; min-width: 0; padding: 0 2px; font-size: 13px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
}

/* Produit scanné : carte de confirmation bien visible */
.food.scanned { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border: 2px solid var(--accent); border-radius: 16px; background: var(--surface); }
.food.scanned .f-add { justify-content: flex-start; }
.food.scanned .f-add .btn { flex: 1 1 100%; min-height: 48px; font-size: 15px; }

/* Création d'un produit introuvable (ajout rapide) */
.qa-create { margin-top: 12px; }
.qa-create .btn, .qa-new .btn { width: 100%; min-height: 46px; }
.qa-new { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

/* Ajout au frigo : produit entier par défaut, « Entamé » pour saisir le restant */
.qa-opened { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.qa-opened input { width: 22px; height: 22px; }
.qa-rest { justify-content: flex-start; margin-bottom: 4px; }
.qa-rest[hidden] { display: none; }
.food .f-add .qty { width: 96px; }

/* Frigo : panneau d'action propre (la rangée de boutons disparaît quand un panneau s'ouvre) */
.fr-act[hidden], .fr-panel[hidden] { display: none; }
.fr-panel .fr-form { flex-direction: column; align-items: stretch; gap: 8px; }
.fr-panel .fr-form > * { max-width: 100%; min-width: 0; }
.fr-panel .fr-form select, .fr-panel .fr-form .field { max-width: 100%; }
.fr-panel .fr-form label.sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-title { font-weight: 700; }
.fr-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.qa-link { background: none; border: 0; padding: 0 4px; color: var(--accent, #2b6cb0); text-decoration: underline; font: inherit; font-size: 13px; cursor: pointer; }

/* Frigo compact : titre + chiffres sur une ligne, ajout sur une ligne, liste repliée par catégorie */
.fr-top { padding-top: 12px; padding-bottom: 12px; }
.fr-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fr-line h2 { margin: 0; font-size: 18px; }
.fr-addrow { display: flex; gap: 8px; margin-top: 10px; }
.fr-addrow .btn:first-child { flex: 1; }
.fr-scan { padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; }
.fr-ico { display: inline-flex; }
.fr-stock { margin-top: 12px; padding-top: 12px; padding-bottom: 12px; }
.fr-h2 { margin: 0 0 6px; font-size: 18px; }
.fr-grp { border-top: 1px solid var(--line); }
.fr-grp:first-of-type { border-top: 0; }
.fr-grp > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; cursor: pointer; font-weight: 700; }
.fr-grp > summary::-webkit-details-marker { display: none; }
.fr-grp > summary::after { content: "›"; margin-left: 8px; transition: transform .15s; color: var(--muted); }
.fr-grp[open] > summary::after { transform: rotate(90deg); }
.fr-grp > summary > span:first-child { flex: 1; }
.fr-grp .fr-list { gap: 4px; padding-bottom: 8px; }
.fr-item { display: block; padding: 0; border-radius: 8px; }
.fr-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fr-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-q { color: var(--muted); font-size: 13px; white-space: nowrap; }
.fr-chev { color: var(--muted); transition: transform .15s; }
.fr-head[aria-expanded="true"] .fr-chev { transform: rotate(90deg); }
.fr-body { padding: 0 10px 10px; display: grid; gap: 8px; }
.fr-body[hidden] { display: none; }
.fr-body .fr-panel { border-top: 0; padding-top: 0; }

/* Frigo : pas de débordement, nom sur 2 lignes si besoin, bouton scan visible */
.fr-grp .fr-list { grid-template-columns: minmax(0, 1fr); }
.fr-item { min-width: 0; overflow: hidden; }
.fr-nm { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fr-q { flex-shrink: 0; }
.fr-scan { flex: 0 0 56px; color: var(--ink, #fff); }
.fr-scan svg { display: block; width: 24px; height: 24px; }

/* Ajout : titres en entier, lignes repliées, générique bien distinct, « entamé » discret */
.food { flex-wrap: wrap; }
.f-name { overflow-wrap: anywhere; }
.f-name b, .f-title { white-space: normal; overflow: visible; text-overflow: clip; font-weight: 700; display: block; }
.food.fp { display: block; padding: 0; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: var(--surface); }
.food.fp.generic { border-left: 4px solid var(--ok, #3fb950); }
.food.fp.scanned { border: 2px solid var(--accent); padding: 0; }
.f-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.f-head .f-name { flex: 1; min-width: 0; }
.food.fp .fr-chev { color: var(--muted); transition: transform .15s; }
.food.fp.open .fr-chev { transform: rotate(90deg); }
.tag-generic { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; border: 1px solid var(--ok, #3fb950); color: var(--ok, #3fb950); border-radius: 10px; padding: 0 6px; vertical-align: middle; }
.qa-open-body { display: grid; gap: 8px; padding: 2px 12px 12px; }
.qa-open-body[hidden] { display: none; }
.qa-open-body .f-add { justify-content: flex-start; }
.qa-open-body .f-add .btn { flex: 1 1 100%; min-height: 46px; font-size: 15px; }
.qa-mode { display: flex; align-items: center; gap: 8px; }
.qa-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qa-seg button { min-height: 32px; padding: 0 12px; background: transparent; border: 0; border-right: 1px solid var(--line); color: var(--ink); font: 600 13px var(--font); cursor: pointer; }
.qa-seg button:last-child { border-right: 0; }
.qa-seg button[aria-pressed="true"] { background: var(--ink); color: var(--plane); }
.qa-opened { min-height: 32px; gap: 8px; font-size: 13px; font-weight: 400; color: var(--muted); }
.qa-opened input { width: 18px; height: 18px; }
.fr-warn { color: var(--warn, #d29922); margin: 0; }
.tag-warn { color: var(--warn, #d29922); }

/* ---- Quoi manger ---- */
.qm-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.qm-step { display: inline-flex; align-items: center; gap: 10px; }
.qm-ck { display: block; margin-top: 10px; font-size: 14px; }
.qm-card { display: block; width: 100%; margin-top: 12px; text-align: left; cursor: pointer; }
.qm-card:hover { border-color: var(--accent); }
.qm-card p { margin: 4px 0 0; }
.qm-more { display: inline-block; margin-top: 6px; color: var(--accent); font-weight: 600; font-size: 13px; }
.qm-h { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
.qm-ings { list-style: none; margin: 0; padding: 0; }
.qm-ing { border-top: 1px solid var(--line); padding: 8px 0; min-width: 0; }
.qm-ing-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qm-ing-head > div { min-width: 0; overflow-wrap: anywhere; }
.qm-alts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.qm-alt { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 8px 12px; cursor: pointer; color: var(--ink-2); overflow-wrap: anywhere; }
.qm-alt:hover { border-color: var(--accent); }
.qm-drain, .qa-drain { margin: 6px 0 0; }

/* ---- Journal : lignes d'ajout lisibles (nom sur toute la largeur, quantité dessous), boissons, aliment ponctuel ---- */
.food:not(.fp) { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
.food:not(.fp) .f-name { flex: none; width: 100%; }
.food:not(.fp) .f-title { font-size: 16px; line-height: 1.3; }
.food:not(.fp) .f-add { justify-content: flex-start; }
.qa-vol { display: flex; gap: 6px; flex-wrap: wrap; }
.qa-temp-row { margin: 8px 0 4px; }
.qa-new textarea.field { border-radius: 14px; width: 100%; resize: vertical; }
.qm-swap-btn { flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.qm-swap-btn[aria-expanded="true"] { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }
.qm-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.qm-card-foot .btn:last-child { margin-left: auto; }
.qm-hidden { margin-top: 14px; }
.qm-hidden summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.qm-hidden ul { list-style: none; margin: 8px 0 0; padding: 0; }
.qm-hidden li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }

/* Espace admin des recettes */
.ra h2 { margin: 6px 0 10px; }
.ra h3 { margin: 18px 0 6px; font-size: 15px; }
.ra-import { margin-bottom: 12px; }
.ra-search input, .ra-form input[type=text], .ra-form input[type=number], .ra-actions input { width: 100%; box-sizing: border-box; min-height: 40px; }
.ra-search { margin: 10px 0; }
.ra-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
.ra-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 2px 10px; text-align: left; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ra-qs { display: flex; flex-direction: column; gap: 6px; }
.ra-qb { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card, transparent); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.ra-qb.yes { color: #1f9d63; border-color: #1f9d63; } .ra-qb.no { color: #d6452f; border-color: #d6452f; } .ra-qb:disabled { opacity: .35; cursor: not-allowed; }
.ra-thumb { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--line); }
.ra-photo { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin: 8px 0; }
.ra-row .ra-name { grid-column: 2; font-weight: 600; }
.ra-row .ra-name small { display: block; font-weight: 400; color: var(--ink-2); font-size: 12px; }
.ra-row .ra-kcal { grid-column: 2; color: var(--ink-2); font-size: 13px; }
.ra-row .ra-badge { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.ra-badge { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--line); white-space: nowrap; }
.ra-badge.ok { background: #1f7a4d33; } .ra-badge.warn, .ra-badge.err { background: #c0392b33; } .ra-badge.ign { opacity: .7; }
.ra-banner { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); margin: 10px 0; }
.ra-banner.warn { border-color: #d98e04; }
.ra-banner ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.ra-w.error { color: #c0392b; } .ra-w.warn { color: #b9770e; }
.ra-form { display: grid; gap: 8px; }
.ra-form label { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.ra-meals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ra-meals label { display: inline-flex; gap: 4px; align-items: center; }
.ra-line { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.ra-l1, .ra-l2 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ra-l3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ra-l3 input { width: 90px; min-height: 34px; }
.ra-fix summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.ra-qb { width: 100%; box-sizing: border-box; min-height: 38px; margin-top: 6px; }
.ra-pick { display: block; width: 100%; text-align: left; padding: 8px 6px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; cursor: pointer; }
.ra-steps { width: 100%; box-sizing: border-box; font: inherit; }
.ra-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ra-actions input { flex: 1 1 160px; }

/* Dictée d'un repas (journal) */
.qa-mic { margin-left: 0; }
.vm .fr-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vm-list { display: grid; gap: 8px; margin: 10px 0; }
.vm-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.vm-row select, .vm-row .f-add { grid-column: 1 / -1; }
.vm-row .f-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }