/* Allure — système « une séance à la fois » : fond clair, cartes blanches, gros chiffres condensés.
   Chargé après app.css : il redéfinit les jetons et la structure, et ajoute les nouveaux composants. */
:root {
  --paper: #F2F1EE;
  --surface: #FFFFFF;
  --surface-2: #F6F5F3;
  --ink: #111418;
  --ink-2: #3A4048;
  --muted: #5A616B;
  --faint: #646B75;
  --line: #E7E5E1;
  --line-strong: #D3D0CA;
  --strong: #111418;
  --on-strong: #FFFFFF;
  --shell: #FFFFFF;
  --night: #15181D;
  --night-text: #B8C0CC;
  --night-line: rgba(255,255,255,.12);
  --shadow-card: 0 1px 2px rgba(17,20,24,.04), 0 6px 20px rgba(17,20,24,.05);
  --r-card: 24px;
  --grid: #ECEAE6;
}
/* thème sombre */
  :root:where([data-theme="dark"]) {
    --paper: #0D0F13;
    --surface: #171A20;
    --surface-2: #1E222A;
    --ink: #EEF1F5;
    --ink-2: #C5CBD4;
    --muted: #9CA3AE;
    --faint: #8E96A2;
    --line: #262B34;
    --line-strong: #353B46;
    --strong: #EEF1F5;
    --on-strong: #0D0F13;
    --shell: #12151A;
    --night: #1E232C;
    --night-text: #B8C0CC;
    --night-line: rgba(255,255,255,.1);
    --shadow-card: none;
    --grid: #232831;
  }
  :where(:root[data-theme="dark"]) .card, :where(:root[data-theme="dark"]) .panel, :where(:root[data-theme="dark"]) .tile, :where(:root[data-theme="dark"]) .note-card, :where(:root[data-theme="dark"]) .proposal, :where(:root[data-theme="dark"]) .kpi { border: 1px solid var(--line) !important; }


body { background: var(--paper); font-size: 15.5px; }
h1, h2, h3 { color: var(--ink); }

/* ---------- Structure ---------- */
.sidebar { background: var(--shell); color: var(--ink); border-right: 1px solid var(--line); gap: 30px; padding: 26px 16px; }
.brand { color: var(--ink); }
.nav { gap: 2px; }
.nav button { color: var(--ink-2); font-weight: 600; border-radius: 14px; }
.nav button:hover { background: var(--surface-2); color: var(--ink); }
.nav button.active { background: var(--strong); color: var(--on-strong); box-shadow: none; }
.side-status { background: var(--surface-2); color: var(--ink-2); }
.topbar { background: color-mix(in srgb, var(--paper) 88%, transparent); padding: 18px 32px 10px; }
.page-title { font-size: 30px; letter-spacing: -.01em; }
.content { max-width: 760px; margin: 0 auto; padding: 6px 28px 96px; }
body[data-page="stats"] .content, body[data-page="profile"] .content { max-width: 1120px; }
body[data-page="home"] .page-title { visibility: hidden; }
.page-intro { margin: 2px 0 18px; }
.page-intro p { color: var(--muted); }
.page-foot { color: var(--muted); }

/* ---------- Cartes et boutons ---------- */
.card, .panel, .tile { background: var(--surface); border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 20px; margin: 0 0 14px; }
.panel-head, .card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-title, .panel-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.005em; display: flex; align-items: center; gap: 8px; }
.card-title svg { width: 20px; height: 20px; fill: none; stroke: var(--good); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); font-size: 14px; }
.btn { min-height: 52px; padding: 12px 20px; border-radius: 16px; background: var(--strong); border-color: var(--strong); color: var(--on-strong); font-size: 16px; font-weight: 600; }
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--ink-2); }
.btn.small { min-height: 40px; padding: 8px 14px; border-radius: 12px; font-size: 14px; }
.btn.ghost { color: var(--ink); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.block { width: 100%; }
.btn.on-dark { background: #FFFFFF; border-color: #FFFFFF; color: #111418; }
.btn.on-dark:hover { background: #E9ECF0; border-color: #E9ECF0; }
.row-actions { display: grid; gap: 10px; margin-top: 16px; }
.link-button { color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.icon-btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tag.cobalt { background: var(--cobalt-soft); color: var(--cobalt-ink); }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.inline-note { margin: 14px 0 0; padding: 11px 14px; border-radius: 14px; font-size: 14px; }
.inline-note.warn { background: var(--warn-soft); color: var(--warn); }
.inline-note.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- Chiffres d'une séance ---------- */
.figs { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 4px 0 18px; }
.fig { display: grid; gap: 4px; padding: 0 14px; border-left: 1px solid var(--line); min-width: 0; }
.fig:first-child { padding-left: 0; border-left: 0; }
.fig > span { color: var(--muted); font-size: 14px; }
.fig-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.fig-value b { font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.fig-value small { color: var(--muted); font-size: 14px; font-weight: 600; }
.effort { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; padding-bottom: 3px; }
.effort i { width: 7px; border-radius: 3px; background: var(--line-strong); }
.effort i:nth-child(1) { height: 9px; } .effort i:nth-child(2) { height: 13px; } .effort i:nth-child(3) { height: 17px; } .effort i:nth-child(4) { height: 21px; } .effort i:nth-child(5) { height: 25px; }
.effort i.on { background: var(--ink); }
.effort-label { flex-basis: 100%; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.figs.compact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; }
.figs.compact .fig { display: block; padding: 0; border: 0; }
.figs.compact .fig > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.figs.compact .fig-value b { font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.figs.compact .fig-value small { font-size: 13px; }
.figs.compact .effort { height: 16px; padding: 0; gap: 2px; }
.figs.compact .effort i { width: 4px; }
.figs.compact .effort i:nth-child(1) { height: 6px; } .figs.compact .effort i:nth-child(2) { height: 8px; } .figs.compact .effort i:nth-child(3) { height: 10px; } .figs.compact .effort i:nth-child(4) { height: 13px; } .figs.compact .effort i:nth-child(5) { height: 16px; }

/* ---------- Accueil ---------- */
.hello { margin: -6px 0 16px; }
.hello-name { margin: 0; font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.hello-sub { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 52ch; }
.week-hero { text-align: center; padding: 18px 16px 22px; }
.week-hero-dates { margin: 0 0 6px; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.week-hero-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; }
.stat-side { display: grid; justify-items: center; gap: 4px; }
.stat-side strong { font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-side strong small { color: var(--muted); font-size: 20px; font-weight: 500; }
.stat-side span { color: var(--muted); font-size: 14px; font-weight: 600; }
.ring { position: relative; width: 164px; height: 164px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: var(--surface-2); }
.ring-fill { stroke: var(--cobalt); stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.16, 1, .3, 1); }
.ring-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-text strong { font-family: var(--display); font-size: 48px; font-weight: 700; line-height: .95; font-variant-numeric: tabular-nums; }
.ring-text span { color: var(--muted); font-size: 14px; font-weight: 600; }
.rest-line { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14.5px; font-weight: 600; }
.rest-line.done { color: var(--good); }
.rest-line svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.next-head { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 18px; padding: 0; border: 0; background: none; text-align: left; color: inherit; }
.date-tile { display: grid; place-items: center; align-content: center; width: 62px; height: 62px; flex: none; border-radius: 16px; background: var(--surface-2); }
.date-tile span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.date-tile strong { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; }
.next-when { display: block; color: var(--muted); font-size: 14px; font-weight: 600; }
.next-title { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.next-title .zone-dot, .sess-title .zone-dot { width: 10px; height: 10px; }
.next-empty p { margin: 6px 0 0; color: var(--muted); }

.prog-bar { display: flex; gap: 3px; height: 10px; margin: 2px 0 18px; }
.prog-bar i { flex: 1; border-radius: 5px; background: var(--surface-2); }
.prog-bar i.past { background: var(--cobalt); }
.prog-bar i.now { background: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }
.prog-bar i.deload:not(.past):not(.now) { background: var(--line); }
.prog-week { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.prog-week strong { font-size: 18px; }
.prog-list { margin: 0 0 16px; padding: 0; list-style: none; }
.prog-list button { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; }
.prog-list li:first-child button { border-top: 0; }
.prog-day { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.prog-name { font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog-km { color: var(--muted); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); }
.mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mark.done { border-color: var(--good); background: var(--good); color: var(--surface); }
.mark.missed { border-color: var(--line-strong); background: var(--surface-2); color: var(--muted); }
.mark.today { border-color: var(--cobalt); background: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft); }

.goal-card { display: grid; gap: 18px; margin: 0 0 14px; padding: 22px; border-radius: var(--r-card); background: var(--night); color: #FFFFFF; }
.goal-card[hidden] { display: none; }
.goal-top { display: flex; align-items: center; gap: 16px; }
.date-box { display: grid; place-items: center; align-content: center; width: 70px; height: 70px; flex: none; border-radius: 18px; background: #FFFFFF; color: #111418; }
.date-box strong { font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1; }
.date-box span { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.goal-name { margin: 0; color: #FFFFFF; font-family: var(--display); font-size: 32px; font-weight: 700; line-height: .95; text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.goal-sub { margin: 6px 0 0; color: var(--night-text); font-size: 14.5px; font-weight: 600; }
.goal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; padding-top: 16px; border-top: 1px solid var(--night-line); }
.goal-stats span { display: block; color: var(--night-text); font-size: 13.5px; }
.goal-stats strong { font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.goal-verdict .chip { margin: 0; }
.goal-card.big .goal-name { font-size: 40px; }

/* ---------- Séances ---------- */
.week-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 0 16px; }
.week-nav-title { display: grid; justify-items: center; text-align: center; }
.week-nav-title strong { font-size: 21px; font-weight: 700; }
.week-nav-title span { color: var(--muted); font-size: 14px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.summary-grid > div { display: grid; gap: 2px; padding: 0 14px; border-left: 1px solid var(--line); }
.summary-grid > div:first-child { padding-left: 0; border-left: 0; }
.summary-grid span { color: var(--muted); font-size: 14px; }
.summary-grid strong { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.summary-grid strong small { color: var(--muted); font-size: 17px; font-weight: 500; }
.summary-grid > div > small { color: var(--muted); font-size: 13px; }
.week-focus-line { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; }
.week-focus-line + .week-focus-line { margin-top: 6px; padding-top: 0; border-top: 0; }
.sess-list { display: grid; gap: 12px; margin-bottom: 14px; }
.sess-list .card { margin: 0; }
.sess-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 14px; align-items: center; width: 100%; border: 0; text-align: left; color: var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.sess-card:hover { box-shadow: 0 2px 4px rgba(17,20,24,.05), 0 12px 28px rgba(17,20,24,.08); }
.sess-card:active { transform: scale(.99); }
.sess-card.is-today { box-shadow: 0 0 0 2px var(--cobalt), var(--shadow-card); }
.sess-date { display: grid; justify-items: center; align-content: center; height: 62px; border-radius: 16px; background: var(--surface-2); }
.sess-date span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sess-date strong { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; }
.sess-card.is-done .sess-date { background: var(--good-soft); }
.sess-main { display: grid; min-width: 0; }
.sess-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.sess-count { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.sess-title { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 17px; font-weight: 700; line-height: 1.25; }
.sess-chev svg, .quick-link .chev { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info-card strong { display: block; font-size: 16px; }
.info-card p { margin: 4px 0 0; color: var(--ink-2); }
.sess-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
#weeklyReview .panel { margin-bottom: 14px; }

/* ---------- Page séance ---------- */
html.sv-open, html.sv-open body { overflow: hidden; }
.session-view { position: fixed; inset: 0; z-index: 100; }
.session-view[hidden] { display: none; }
.sv-scrim { position: absolute; inset: 0; background: rgba(8,10,13,.5); opacity: 0; transition: opacity .25s; }
.sv-panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); transform: translateY(24px); opacity: 0; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s; }
.session-view.open .sv-scrim { opacity: 1; }
.session-view.open .sv-panel { transform: none; opacity: 1; }
.sv-hero { position: relative; padding: calc(84px + env(safe-area-inset-top)) 22px 46px; background: var(--night); color: #FFFFFF; }
.sv-hero::after { content: ''; position: absolute; left: 22px; bottom: 28px; width: 44px; height: 5px; border-radius: 3px; background: var(--zone, var(--z-easy)); }
.sv-close { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 16px; }
.sv-title { margin: 0; color: #FFFFFF; font-family: var(--display); font-size: clamp(40px, 11vw, 64px); font-weight: 700; line-height: .92; text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; outline: none; }
.sv-when { margin: 12px 0 0; color: var(--night-text); font-size: 15px; font-weight: 600; }
.sv-body { position: relative; flex: 1; margin-top: -16px; padding: 16px 16px 24px; border-radius: 24px 24px 0 0; background: var(--paper); }
.sv-detail { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.figs + .sv-detail, .tags + .sv-detail { margin-top: 2px; }
.sv-body .figs { margin-bottom: 16px; }
.done-card p { margin: 0 0 8px; }
.pace-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.pace-pill { padding: 10px 14px; border-radius: 16px; background: var(--surface-2); }
.pace-pill span { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.pace-pill strong { font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pace-pill small { margin-left: 2px; color: var(--muted); font-family: var(--font); font-size: 13px; }
.steps { margin-top: 6px; }
.step { padding: 14px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step strong { display: block; font-size: 15.5px; }
.step p { margin: 3px 0 0; color: var(--ink-2); font-size: 15px; }
.sv-body .structure { margin-top: 2px; }
.sv-body .structure-legend { margin-top: 8px; }
.sv-actions { position: sticky; bottom: 0; display: grid; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.sv-sync { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; color: var(--good); font-weight: 600; }
.sv-sync svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Objectif ---------- */
.tiles-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.tiles-row .tile { margin: 0; }
.tiles-row[hidden], .all-weeks[hidden] { display: none; }
#page-plan .plan-columns { grid-template-columns: 1fr; gap: 0; }
#page-plan .notes { gap: 10px; margin-bottom: 14px; }
.note-card, .proposal { border: 0; border-radius: 20px; box-shadow: var(--shadow-card); }
.all-weeks > summary, .approach > summary { cursor: pointer; font-weight: 700; font-size: 16px; color: var(--ink); list-style-position: inside; }
.all-weeks[open] > summary { margin-bottom: 14px; }
.all-weeks .week { border-color: var(--line); box-shadow: none; }
.chart .panel-head { margin-bottom: 10px; }

/* ---------- Profil ---------- */
.quick-links { display: grid; gap: 10px; margin: 0 0 16px; }
.quick-link { display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 14px; align-items: center; width: 100%; padding: 16px 18px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); text-align: left; }
.quick-link[hidden] { display: none; }
.quick-link > svg:first-child { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-link span { font-weight: 700; font-size: 16px; }
.quick-link small { display: block; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.step-no { background: var(--strong); color: var(--on-strong); }
.field input, .field select, .field textarea, .time-part select, .record-row input[type="month"] { border-radius: 14px; border-color: var(--line-strong); background: var(--surface); }
.day-choice span { border-radius: 14px; }

/* ---------- Téléphone ---------- */
@media (max-width: 820px) {
  .sidebar { background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(14px); border-right: 0; border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .nav button { gap: 4px; padding: 8px 2px; border-radius: 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
  .nav button svg { width: 24px; height: 24px; }
  .nav button.active { background: transparent; color: var(--ink); }
  .nav button:hover:not(.active) { background: transparent; color: var(--muted); }
  .nav button.active svg { stroke-width: 2.2; }
  .nav button.active { font-weight: 700; }
  .nav button.in-more { display: none; }
  .topbar { padding: 12px 16px 8px; }
  .content { padding: 4px 16px 116px; }
  .card, .panel, .tile { padding: 18px; border-radius: 22px; }
  .hello-name { font-size: 36px; }
  .ring { width: 150px; height: 150px; }
  .stat-side strong { font-size: 34px; }
  .fig { padding: 0 10px; }
  .fig-value b { font-size: 28px; }
  .tiles-row { grid-template-columns: 1fr; }
  .goal-name { font-size: 28px; }
  .goal-card.big .goal-name { font-size: 34px; }
  .summary-grid > div { padding: 0 10px; }
  .summary-grid strong { font-size: 26px; }
  .sess-card { grid-template-columns: 52px minmax(0, 1fr) 16px; gap: 12px; padding: 14px; }
  .profile-jump { top: var(--topbar-h, 56px); }
}
@media (min-width: 821px) {
  .shell { grid-template-columns: 232px minmax(0, 1fr); }
  .sv-scrim { cursor: pointer; }
  .sv-panel { inset: 4vh auto 4vh 50%; width: min(600px, 92vw); margin-left: max(-300px, -46vw); border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
  .sv-hero { padding-top: 84px; border-radius: 28px 28px 0 0; }
  .sv-actions { border-radius: 0 0 28px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-panel, .sv-scrim, .ring-fill, .sess-card { transition: none; }
}

/* ---------- Nouvel objectif, une question à la fois ---------- */
.goal-flow { position: fixed; inset: 0; z-index: 110; background: var(--paper); }
.goal-flow[hidden] { display: none; }
.gf-panel { display: flex; flex-direction: column; height: 100%; max-width: 640px; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; }
.gf-top { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 16px 10px; background: var(--paper); }
.gf-top .icon-btn.is-invisible { visibility: hidden; }
.gf-title { text-align: center; font-size: 17px; font-weight: 700; }
.gf-progress { height: 4px; margin: 0 16px; border-radius: 2px; background: var(--line); overflow: hidden; }
.gf-progress i { display: block; height: 100%; border-radius: 2px; background: var(--strong); transition: width .35s cubic-bezier(.16, 1, .3, 1); }
.gf-body { flex: 1; padding: 22px 16px 24px; }
.gf-question { margin: 0 0 8px; font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; outline: none; text-wrap: balance; }
.gf-sub { margin: 0 0 20px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.gf-question + .choices, .gf-question + .gf-fields { margin-top: 18px; }
.choices { display: grid; gap: 12px; }
.choices.row { grid-template-columns: 1fr 1fr; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr) 26px; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 16px 18px; border: 1.5px solid transparent; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); text-align: left; transition: border-color .15s, transform .15s; }
.choices.row .choice { min-height: 64px; padding: 12px 16px; }
.choice:active { transform: scale(.99); }
.choice.on { border-color: var(--strong); }
.choice-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--surface-2); }
.choice-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.choice:not(:has(.choice-icon)) { grid-template-columns: minmax(0, 1fr) 26px; }
.choice-text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.choice-text small { display: block; margin-top: 3px; color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.choice-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); }
.choice.on .choice-radio { border: 7px solid var(--strong); }
.gf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.gf-field { display: grid; gap: 8px; }
.gf-field.wide { grid-column: 1 / -1; }
.gf-field > span:first-child { font-size: 15px; font-weight: 700; }
.gf-field i { color: var(--muted); font-style: normal; font-weight: 500; font-size: 13.5px; }
.gf-input { display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 0 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); border: 1.5px solid transparent; }
.gf-input:focus-within { border-color: var(--strong); }
.gf-input input { flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; font-size: 18px; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none; }
.gf-input em { color: var(--muted); font-style: normal; font-weight: 600; }
.gf-label { margin: 22px 0 10px; font-size: 15px; font-weight: 700; }
.gf-info { display: grid; gap: 3px; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--good-soft); color: var(--good); }
.gf-info.warn { background: var(--warn-soft); color: var(--warn); }
.gf-info span { font-size: 14.5px; }
.quick-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.quick-time { display: grid; gap: 2px; padding: 14px 10px; border: 1.5px solid transparent; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); text-align: center; }
.quick-time strong { font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.quick-time span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.gf-time { display: flex; align-items: center; gap: 8px; }
.gf-time select { flex: 1; min-height: 58px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gf-time b { color: var(--muted); font-size: 22px; }
.gf-skip { margin-top: 18px; }
.day-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.day-pill { min-width: 62px; min-height: 52px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); font-size: 15.5px; font-weight: 700; }
.day-pill.on { background: var(--strong); color: var(--on-strong); }
.gf-hint { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; }
.gf-recap { display: grid; gap: 0; padding: 6px 20px; }
.gf-recap > div { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.gf-recap > div:first-child { border-top: 0; }
.gf-recap span { color: var(--muted); font-size: 13.5px; }
.gf-recap strong { font-size: 16.5px; }
.gf-actions { position: sticky; bottom: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--paper); }
.gf-actions .btn:disabled { background: var(--line-strong); border-color: var(--line-strong); color: var(--surface); opacity: 1; }
.gf-launch { margin: 0 0 16px; }
/* thème sombre */
  :where(:root[data-theme="dark"]) .choice, :where(:root[data-theme="dark"]) .gf-input, :where(:root[data-theme="dark"]) .quick-time, :where(:root[data-theme="dark"]) .gf-time select, :where(:root[data-theme="dark"]) .day-pill { border-color: var(--line); }
  :where(:root[data-theme="dark"]) .choice.on, :where(:root[data-theme="dark"]) .gf-input:focus-within, :where(:root[data-theme="dark"]) .day-pill.on { border-color: var(--strong); }


/* ---------- Logo (piste D : le sommet) ---------- */
.brand-mark, .loader-orbit { background: #111418; color: #FFFFFF; }
.brand-mark svg { width: 26px; height: 26px; }
.mark-tick { stroke: #5B78FF; }
.landing-mark .mark-tick { stroke: currentColor; }
/* thème sombre */ :where(:root[data-theme="dark"]) .brand-mark, :where(:root[data-theme="dark"]) .loader-orbit { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } 

/* ---------- Premium ---------- */
.premium-view .gf-panel { padding-bottom: 0; }
.premium-hero { position: relative; padding: calc(80px + env(safe-area-inset-top)) 22px 30px; background: var(--night); color: #FFFFFF; }
.premium-hero .icon-btn { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.premium-title { margin: 0; color: #FFFFFF; font-family: var(--display); font-size: clamp(44px, 12vw, 64px); font-weight: 700; line-height: .92; text-transform: uppercase; outline: none; }
.premium-lead { margin: 12px 0 0; color: var(--night-text); font-size: 17px; line-height: 1.45; max-width: 34ch; }
.premium-trial { display: inline-flex; margin: 16px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.premium-compare { padding: 8px 18px; }
.compare-head, .compare-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 72px; align-items: center; gap: 8px; }
.compare-head { padding: 10px 0 6px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.compare-head span:first-child { text-align: left; }
.compare-row { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.compare-row span:not(:first-child) { display: grid; place-items: center; color: var(--muted); }
.compare-row svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.compare-row .yes { color: var(--good); }
.compare-row span:last-child { color: var(--cobalt); }
.premium-note { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.trial-card, .locked-card { display: flex; align-items: center; gap: 14px; }
.trial-card > div, .locked-card > div { flex: 1; min-width: 0; }
.trial-card strong, .locked-card strong { display: block; font-size: 16.5px; }
.trial-card p, .locked-card p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.trial-card.urgent { box-shadow: 0 0 0 2px var(--cobalt), var(--shadow-card); }
.locked-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--surface-2); }
.locked-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) { .trial-card, .locked-card { flex-wrap: wrap; } .trial-card .btn, .locked-card .btn { width: 100%; } }

/* Programme course-marche : blocs de course pleins, marche en gris */
.structure i[data-zone="run"] { --zone: var(--z-easy); opacity: 1; }

/* Espace coach ------------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.coach-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.coach-section { margin: 26px 0 10px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.coach-section:first-child { margin-top: 6px; }
.coach-list { display: grid; gap: 12px; }
.coach-list .card { margin: 0; }
.coach-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 14px; align-items: center; width: 100%; border: 0; text-align: left; color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.coach-card:hover { box-shadow: 0 2px 4px rgba(17,20,24,.05), 0 12px 28px rgba(17,20,24,.08); }
.coach-card:active { transform: scale(.99); }
.coach-card.is-loading { display: block; height: 116px; cursor: default; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: coach-shimmer 1.4s linear infinite; }
@keyframes coach-shimmer { to { background-position: -150% 0; } }
.coach-avatar { display: grid; place-items: center; align-self: start; width: 48px; height: 48px; border-radius: 50%; background: var(--cobalt-soft); color: var(--cobalt-ink); font-family: var(--display); font-size: 19px; font-weight: 700; }
.coach-main { display: grid; gap: 3px; min-width: 0; }
.coach-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 700; }
.coach-goal { color: var(--muted); font-size: 14px; }
.coach-week { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; color: var(--ink-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.coach-dots { display: flex; gap: 4px; }
.coach-dots i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; color: var(--faint); background: var(--surface-2); }
.coach-dots i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.coach-dots .d-planned { color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.coach-dots .d-today { color: var(--cobalt-ink); background: var(--cobalt-soft); box-shadow: inset 0 0 0 2px var(--cobalt); }
.coach-dots .d-done { color: var(--surface); background: var(--good); }
.coach-dots .d-extra { color: var(--good); background: var(--good-soft); }
.coach-dots .d-missed { color: var(--bad); background: var(--bad-soft); }
.coach-reason { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; color: var(--warn); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.coach-reason.k-idle { color: var(--bad); }
.coach-reason svg, .coach-alerts .card-title svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coach-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.coach-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.coach-pill.is-ok { background: var(--good-soft); color: var(--good); } .coach-pill.is-ok i { background: var(--z-easy); }
.coach-pill.is-watch { background: var(--warn-soft); color: var(--warn); } .coach-pill.is-watch i { background: var(--z-threshold); }
.coach-pill.is-idle { background: var(--bad-soft); color: var(--bad); } .coach-pill.is-idle i { background: var(--bad); }
.coach-add { margin-bottom: 18px; }
.coach-add .muted { margin: 0 0 14px; }
.coach-steps { display: grid; gap: 14px; margin: 4px 0 18px; padding: 0; list-style: none; counter-reset: coach; }
.coach-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; counter-increment: coach; }
.coach-steps li::before { content: counter(coach); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--strong); color: var(--on-strong); font-weight: 700; font-size: 14px; }
.coach-steps strong { font-size: 15.5px; }
.coach-steps span { color: var(--muted); font-size: 14px; }
.coach-add-row { display: flex; gap: 8px; }
.coach-add-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.coach-add-row input::placeholder { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--faint); }
.coach-add-row input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }
/* Fiche coureur */
.coach-hero-top { margin-bottom: 14px; }
.sv-hero .coach-pill { background: rgba(255,255,255,.1); color: #FFFFFF; }
.athlete-view .sv-title { font-size: clamp(38px, 10vw, 58px); }
.coach-alerts { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.coach-alerts .card-title { color: var(--warn); }
.coach-alerts ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-weight: 600; }
.coach-figs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; margin-bottom: 14px; }
.coach-figs .fig:nth-child(odd) { padding-left: 0; border-left: 0; }
@media (min-width: 560px) { .coach-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .coach-figs .fig:nth-child(odd):not(:first-child) { padding-left: 14px; border-left: 1px solid var(--line); } }
.coach-last { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; }
.coach-week-block { margin: 22px 0; }
.coach-focus { margin: -6px 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.5; text-align: center; }
.coach-sess { padding: 14px 16px; }
.coach-sess > summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 14px; align-items: center; list-style: none; cursor: pointer; }
.coach-sess > summary::-webkit-details-marker { display: none; }
.coach-sess .sess-chev svg { transition: transform .2s; }
.coach-sess[open] .sess-chev svg { transform: rotate(90deg); }
.coach-sess .sess-date { height: 58px; }
.coach-sess.is-done .sess-date { background: var(--good-soft); }
.coach-sess.is-today { box-shadow: 0 0 0 2px var(--cobalt), var(--shadow-card); }
.coach-sess .sess-title { font-size: 16px; }
.coach-sess-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; color: var(--muted); font-size: 14px; }
.coach-sess-meta .tag { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.coach-sess-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.coach-sess-body .steps { margin-top: 12px; }
.coach-bars { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; height: 176px; margin-top: 6px; }
.coach-bar { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 6px; min-width: 0; }
.coach-bar b { color: var(--ink-2); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.coach-bar small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.coach-bar.is-now b, .coach-bar.is-now small { color: var(--cobalt-ink); font-weight: 700; }
.coach-bar.is-future b { color: var(--muted); font-weight: 600; }
.coach-bar-track { position: relative; width: 100%; max-width: 34px; height: 100%; }
.coach-bar-track i { position: absolute; bottom: 0; }
.coach-bar-track .bar-plan { left: 0; right: 0; border: 1.5px dashed var(--line-strong); border-radius: 7px; }
.coach-bar-track .bar-done { left: 3px; right: 3px; border-radius: 6px 6px 3px 3px; background: var(--cobalt); }
.coach-bar.is-now .bar-done { background: var(--cobalt-ink); }
.coach-legend { display: flex; gap: 18px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.coach-legend span { display: inline-flex; align-items: center; gap: 6px; }
.coach-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.coach-legend .lg-done { background: var(--cobalt); }
.coach-legend .lg-plan { border: 1.5px dashed var(--line-strong); }
.coach-runs { margin: 0; padding: 0; list-style: none; }
.coach-runs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.coach-runs li:first-child { border-top: 0; padding-top: 4px; }
.coach-run-date { color: var(--muted); font-size: 13px; }
.coach-run-name { grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.coach-run-figs { grid-row: span 2; grid-column: 2; display: grid; justify-items: end; align-content: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.coach-run-figs b { color: var(--ink); font-family: var(--display); font-size: 19px; font-weight: 600; }
.coach-facts { padding: 0; }
.coach-actions { display: flex; justify-content: center; }
.coach-actions .btn.danger { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .coach-card, .coach-sess .sess-chev svg { transition: none; } .coach-card.is-loading { animation: none; } }
.coach-legend { flex-wrap: wrap; }
.coach-legend .lg-now { color: var(--cobalt-ink); }

/* Adapter ma semaine ------------------------------------------------------ */
.wt-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.wt-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2); grid-row: span 2; align-self: start; }
.wt-card.is-set .wt-card-icon { background: var(--cobalt-soft); color: var(--cobalt-ink); }
.wt-card-icon svg, .wt-stepper svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wt-card strong { font-size: 16px; }
.wt-card p { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.wt-card-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.wt-stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; margin-top: 6px; padding: 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.wt-stepper .icon-btn { width: 56px; height: 56px; border-radius: 18px; background: var(--surface-2); }
.wt-value { text-align: center; font-family: var(--display); font-size: clamp(40px, 12vw, 56px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.wt-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wt-preset { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.wt-preset.on { border-color: var(--strong); background: var(--strong); color: var(--on-strong); }
.day-pill[data-wt-day] { min-width: 0; padding: 0 12px; font-size: 14.5px; }
.wt-preview { padding: 6px 18px; }
.wt-rows { margin: 0; padding: 0; list-style: none; }
.wt-rows li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.wt-rows li:first-child { border-top: 0; }
.wt-day { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.wt-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-weight: 600; font-size: 15px; }
.wt-name .zone-dot { flex: none; }
.wt-tag { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-style: normal; font-weight: 700; }
.wt-tag.add { background: var(--cobalt-soft); color: var(--cobalt-ink); }
.wt-min { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.wt-min s { color: var(--faint); font-size: 12.5px; }
.wt-min b { font-size: 15px; }
.wt-rows li.is-removed .wt-name { color: var(--faint); text-decoration: line-through; }
.wt-rows li.is-removed .wt-min b { color: var(--bad); font-size: 13px; }
.wt-total { display: flex; justify-content: space-between; margin: 0; padding: 12px 0; border-top: 1px solid var(--line-strong); font-weight: 700; }
.wt-reset { display: block; margin: 10px auto 0; }
/* Temps pour une séance */
.st-title { display: flex; align-items: center; gap: 8px; }
.st-title svg { width: 20px; height: 20px; fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px; margin-top: 4px; }
.st-row .icon-btn { width: 48px; height: 48px; border-radius: 16px; background: var(--surface-2); }
.st-row .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.st-value { text-align: center; font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.st-preview { display: grid; gap: 2px; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.st-preview strong { color: var(--ink); font-size: 15px; }
.st-balance { display: grid; gap: 2px; margin: 8px 0 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.st-balance strong { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.st-balance span::first-letter { text-transform: uppercase; }
.st-why { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }

/* Sortie notée à la main */
.page-intro-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#manualRun .gf-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#manualRun .gf-field, #manualRun .gf-input { min-width: 0; }
.mr-pace { margin: 4px 0 6px; color: var(--muted); font-size: 14.5px; }
.mr-pace b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mr-pace.is-error { color: var(--bad); }
.mr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mr-seg.three { grid-template-columns: repeat(3, 1fr); }
.mr-opt { display: grid; gap: 2px; min-height: 52px; padding: 10px 14px; border: 1.5px solid transparent; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); text-align: left; transition: border-color .15s; }
.mr-seg.three .mr-opt { text-align: center; }
.mr-opt strong { font-size: 15.5px; font-weight: 700; }
.mr-opt small { color: var(--muted); font-size: 13px; }
.mr-opt.on { border-color: var(--strong); }
.mr-optional { color: var(--muted); font-style: normal; font-weight: 500; font-size: 13.5px; }
.mr-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; }
.mr-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--strong); flex: none; }
.mr-check span { display: grid; gap: 2px; }
.mr-check strong { font-size: 15px; }
.mr-check em { color: var(--muted); font-style: normal; font-size: 13.5px; }
.mr-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.mr-card p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.mr-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.mr-row-actions .link-button { font-size: 13px; }
.mr-row-actions .link-button.danger { color: var(--bad); }
/* thème sombre */
  :where(:root[data-theme="dark"]) .mr-opt, :where(:root[data-theme="dark"]) .mr-check { border-color: var(--line); }
  :where(:root[data-theme="dark"]) .mr-opt.on { border-color: var(--strong); }


/* Aide et contact */
.tag.muted { background: var(--surface-2); color: var(--muted); }
.sp-panel { margin-top: 16px; }
.sp-panel .panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sp-list { display: grid; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.sp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 2px; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; }
.sp-item-main { display: grid; gap: 2px; min-width: 0; }
.sp-item-main strong { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.sp-item-main small { color: var(--muted); font-size: 13px; }
.sp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt, var(--strong)); }
.sp-cats { margin-bottom: 18px; }
.sp-cats .mr-opt:last-child { grid-column: 1 / -1; }
.sp-textarea { width: 100%; min-height: 120px; padding: 14px 16px; border: 1.5px solid transparent; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.sp-textarea:focus { outline: none; border-color: var(--strong); }
.sp-thread { display: grid; gap: 10px; margin: 6px 0 20px; padding: 0; list-style: none; }
.sp-msg { padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }
.sp-msg.is-team { background: var(--cobalt-soft); box-shadow: none; }
.sp-msg p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.sp-who { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.sp-actions { display: grid; gap: 8px; justify-items: center; }
.sp-admin { margin-bottom: 14px; }
/* thème sombre */
  :where(:root[data-theme="dark"]) .sp-textarea, :where(:root[data-theme="dark"]) .sp-msg { border: 1px solid var(--line); }
  :where(:root[data-theme="dark"]) .sp-msg.is-team { border-color: transparent; }

.gf-question + .mr-seg { margin-top: 18px; }

/* Guide « Relier ta montre » mis en évidence quand on y arrive depuis une séance */
#watchGuide { scroll-margin-top: 80px; border-radius: 16px; }
#watchGuide.is-highlighted { animation: watch-guide-flash 1.6s ease-out 1; }
@keyframes watch-guide-flash { 0% { box-shadow: 0 0 0 3px var(--cobalt, var(--strong)); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { #watchGuide.is-highlighted { animation: none; outline: 2px solid var(--strong); } }

/* Ressenti après la séance */
.feel-sub { margin: 4px 0 12px; color: var(--muted); font-size: 14.5px; }
.feel-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feel-option { display: grid; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; }
.feel-option strong { font-size: 15.5px; }
.feel-option small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.feel-option.on { border-color: var(--strong); }

/* Installer l'appli */
.install-card p { margin: 6px 0 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.install-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.recap-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0 4px; cursor: pointer; }
.recap-toggle input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--strong); flex: none; }
.recap-toggle span { display: grid; gap: 2px; }
.recap-toggle em { color: var(--muted); font-style: normal; font-size: 13.5px; }

/* Mots du coach : fil de messages par séance (page séance et espace coach). */
.coach-msg-card .card-title { margin-bottom: 12px; }
.note-thread { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.note { max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.note.is-mine { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--cobalt-soft); }
.note-who { display: block; margin-bottom: 3px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.note p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-form { display: flex; gap: 10px; align-items: flex-end; }
.note-form textarea { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; resize: vertical; }
.note-form textarea:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.coach-note-box { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Bouton de thème, en bas à gauche (clair par défaut) */
.theme-toggle { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 35; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(17, 20, 24, .12); cursor: pointer; }
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-toggle .tt-sun, :root[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
/* Sur ordinateur, la barre latérale laisse la place au bouton. */
@media (min-width: 821px) { .sidebar { padding-bottom: 80px; } }
/* Sur téléphone : une pastille ronde au-dessus de la barre d'onglets. */
@media (max-width: 820px) {
  .theme-toggle { width: 44px; padding: 0; justify-content: center; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .theme-toggle .tt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:has(#allureCloudGate:not([hidden])) .theme-toggle { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
/* Sur la page d'accueil du site (non connecté), le bouton passe au-dessus. */
body:has(#allureCloudGate:not([hidden])) .theme-toggle { z-index: 95; }
/* La page séance passe au-dessus. */
body:has(.session-view:not([hidden])) .theme-toggle { display: none; }

/* Courses de préparation (page Objectif) */
.tuneup-card { margin-bottom: 14px; }
.tuneup-card[hidden] { display: none; }
.tuneup-lead { margin: 6px 0 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.tuneup-list { display: grid; gap: 0; margin: 0 0 14px; padding: 0; list-style: none; }
.tuneup-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.tuneup-date { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.tuneup-main { display: grid; gap: 2px; min-width: 0; }
.tuneup-main strong { color: var(--ink); font-size: 15.5px; overflow-wrap: anywhere; }
.tuneup-main small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.tuneup-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.tuneup-form .field { margin: 0; }
.tuneup-error { grid-column: 1 / -1; margin: 0; color: var(--bad); font-size: 14px; }
.tuneup-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 640px) {
  .tuneup-form { grid-template-columns: 1fr; }
  .tuneup-item { grid-template-columns: minmax(0, 1fr) auto; }
  .tuneup-date { grid-column: 1 / -1; }
}