:root {
  color-scheme: dark;
  --bg: #0d0d0e;
  --panel: #202125;
  --light: #f6f5f2;
  --muted: #b6b8bc;
  --line: #62656c;
  --dialog: #18191c;
}
* {
  box-sizing: border-box;
}
/* The page never slides sideways: nothing is wider than the screen, and the finger only scrolls up
   and down (Safari on the iPhone slid the journal from right to left, first real session of the
   08/11/2026). overflow-x: clip, not hidden: the sticky bars keep working. */
html {
  overflow-x: clip;
  overscroll-behavior-x: none;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--light);
  font:
    15px/1.6 Arial,
    Helvetica,
    sans-serif;
}
a {
  color: inherit;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a.button {
  cursor: pointer;
  background: var(--light);
  color: #0d0d0e;
  border: 1px solid var(--light);
  min-height: 44px;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button:hover,
a.button:hover {
  background: #d1d2d4;
}
button.secondary {
  background: transparent;
  color: var(--light);
  border-color: var(--muted); /* seen on a phone in the gym (SOLIDITE-10) */
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  background: #101013;
  color: var(--light);
  border: 1px solid #83858c;
  border-radius: 0;
  padding: 12px;
  min-height: 47px;
  max-width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: 19px;
  min-height: 19px;
  height: 19px;
  vertical-align: middle;
  margin-right: 8px;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
label {
  display: block;
  font-size: 12px;
  color: #d9dade;
  margin: 13px 0 7px;
}
fieldset {
  border: 1px solid var(--line);
  padding: 18px;
  margin: 22px 0;
  min-width: 0;
}
legend {
  padding: 0 8px;
  font-weight: 700;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(34px, 4vw, 53px);
  margin: 12px 0 25px;
}
h2 {
  font-size: 28px;
  margin: 25px 0 20px;
}
h3 {
  font-size: 20px;
  margin: 18px 0 12px;
}
p {
  color: var(--muted);
  margin-bottom: 16px;
}
small,
.small {
  font-size: 12px; /* nothing under 12 px (SOLIDITE-10) */
  color: var(--muted);
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.brand img {
  object-fit: contain;
}
.brand small {
  display: block;
  font-size: 8px;
  letter-spacing: 0.14em;
  margin-top: 5px;
}
.environment {
  padding: 8px 30px;
  background: #27282b;
  color: #d2d4d8;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  max-width: 1500px;
  margin: auto;
}
#nav {
  padding: 32px 20px;
  border-right: 1px solid #41434a;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: stretch;
}
#nav button {
  background: transparent;
  color: #c3c6cb;
  border-color: transparent;
  justify-content: flex-start;
  text-align: left;
}
#nav button[aria-current="page"] {
  background: #f6f5f2;
  color: #0d0d0e;
}
/* Only on a phone (T383). */
#nav .nav-toggle {
  display: none;
}
main {
  padding: 40px;
  min-width: 0;
}
.card {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 24px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 25px 0;
}
.stat {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.stat strong {
  display: block;
  font-size: 30px;
  line-height: 1.3;
}
.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 18px 0;
}
.toolbar > * {
  max-width: 100%;
}
.toolbar > select {
  width: auto;
  min-width: 170px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.badge {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid #8a8d94;
  font-size: 12px;
  margin: 4px;
}
.subtle {
  border-left: 3px solid #b7bac1;
  padding: 12px 15px;
  background: #292b30;
  font-size: 12px;
  margin: 18px 0;
}
#notice:not(:empty) {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 30px;
  background: #f6f5f2;
  color: #171719;
  border-bottom: 2px solid #6d7077;
}
.form-message {
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 4px solid #ff8a73;
  background: #3b1d19;
  color: #ffe3dc;
  font-size: 13px;
}
[aria-invalid="true"] {
  border-color: #ff8a73;
  outline: 2px solid #ff8a73;
  outline-offset: 1px;
}
.notice-changed {
  padding: 10px 14px;
  border-left: 4px solid #f6f5f2;
  background: #33353a;
  color: var(--light);
}
.notice-text {
  max-height: 360px;
  overflow: auto;
  padding: 4px 14px;
  margin: 12px 0;
  border: 1px solid var(--line);
  background: #18191c;
}
.notice-text h4 {
  margin: 14px 0 6px;
}
.field {
  min-width: 0;
}
.set-row {
  display: grid;
  grid-template-columns: 72px repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 3px 0;
}
/* « Série n » is the ✓ of the set (SALLE-4): one column, the whole label is the target (44 px). */
.set-title {
  margin: 0;
  min-height: 47px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 14px; /* read standing, on a phone (SALLE-11) */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--light);
  cursor: pointer;
}
.set-title input {
  display: block;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.set-row input {
  font-size: 16px; /* 16 px or more: iOS Safari does not zoom on focus */
}
.set-count {
  font-weight: 400;
}
.set-details > button {
  margin-top: 8px;
}
/* Column headings on the first set only: the other labels stay for screen readers. */
.set-row:not(:first-child) .field label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.today {
  border-color: var(--light);
}
/* Where the client stands (lot 7): one line for the week, one for the record, then what is to do. */
.home p {
  margin: 8px 0 0;
}
.home .eyebrow {
  margin: 0;
}
.home .home-todo-title {
  margin-top: 16px;
}
.home-todo {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.home-todo li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
/* The records of the session just saved (lot 7), with the correction next to them. */
.recap-records {
  margin-top: 8px;
}
.recap-records p {
  margin: 0 0 8px;
}
/* « Ta semaine en chiffres » above the check-in (lot 7): lines only, read before writing. */
.checkin-figures p {
  margin: 8px 0 0;
}
.checkin-figures .eyebrow {
  margin: 0;
}
.checkin-before {
  margin: 6px 0 0;
}
/* A session under way on this device (SALLE-1): one line and the button that resumes it. */
.resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--light);
}
.resume p {
  margin: 0;
  font-weight: 600;
}
.question {
  color: var(--light);
}
.secret {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--light);
  font:
    20px/1.4 "Courier New",
    monospace;
  letter-spacing: 0.06em;
  user-select: all;
}
.welcome {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--light);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
td,
th {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #62656c;
  vertical-align: top;
}
th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.table-scroll {
  overflow: auto;
}
/* Planned and done in the coach's journal (lot 6): the phrase under the name of the exercise;
   the « Prévu : » and « Fait : » labels only when the cells stack on a phone. */
.plan-head {
  margin: 0 0 8px;
  font-weight: 500;
}
.plan-table th[scope="row"] {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.plan-word {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.plan-label {
  display: none;
}
/* « Cette semaine / Tout » in the coach's journal (lot 6), drawn as the modes of the week. */
.journal-filter {
  display: inline-flex;
  margin: 0 0 16px;
}
.journal-filter button {
  min-height: 44px;
  padding: 0 16px;
  font-weight: 500;
  border-color: var(--hairline);
  color: var(--muted);
}
.journal-filter button + button {
  margin-left: -1px;
}
.journal-filter button[aria-pressed="true"],
.journal-filter button[aria-pressed="true"]:hover {
  background: var(--light);
  border-color: var(--light);
  color: var(--bg);
}
/* A title that gets the focus after a change of view (T071): not a control, no frame. */
h1[tabindex="-1"]:focus {
  outline: none;
}
/* Logged out: no navigation, no empty column. */
#nav:empty {
  display: none;
}
.shell:has(> #nav:empty) {
  grid-template-columns: minmax(0, 1fr);
}
table input,
table select {
  min-width: 65px;
  padding: 9px;
  font-size: 12px;
}
table textarea {
  min-width: 130px;
}
.exercise-row {
  border-top: 1px solid #6b6e75;
  padding: 18px 0;
}
.row-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(60px, 1fr));
  gap: 12px;
}
.row-fields.wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.session {
  border: 1px solid #6b6e75;
  padding: 20px;
  margin: 20px 0;
  background: var(--dialog);
}
/* The program (T382): a session is a line until opened. */
.session:has(> .session-fold:not([open])) {
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 10px 0;
}
.session-fold {
  border-top: 0;
  padding: 0;
}
.session-fold > summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 6px 0;
}
.session-fold > summary::-webkit-details-marker {
  display: none;
}
.session-fold > summary::before {
  content: "▸";
}
.session-fold[open] > summary::before {
  content: "▾";
}
.session-fold > summary h3 {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}
.session-fold > summary .small {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
}
.session-fold > summary .badge {
  margin: 0;
  padding: 1px 6px;
  font-size: 12px;
}
.session-fold[open] > summary {
  margin-bottom: 12px;
}
/* The builder (T379): one week and one session open, the others are a line. */
.week-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0;
  padding: 8px 0;
  background: var(--panel);
}
.row-fields.exercise-main {
  grid-template-columns: minmax(0, 3fr) repeat(4, minmax(60px, 1fr));
}
.copy-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.copy-choices fieldset {
  margin: 12px 0;
}
.exercise-more {
  border-top: 0;
  padding: 0;
  margin-top: 6px;
}
.exercise-more > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  white-space: nowrap;
}
.exercise-more > summary::before {
  content: "▸";
}
.exercise-more[open] > summary::before {
  content: "▾";
}
.exercise-more > summary span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}
.exercise-more[open] > summary span {
  display: none;
}
/* Choice of an exercise (lot 3): a search and a list of buttons, in place of a list of 140 options. */
.exercise-pick .pick-current {
  width: 100%;
  justify-content: start;
  text-align: left;
  font-weight: 400;
  font-size: 15px;
  padding: 11px 12px;
}
.exercise-pick .pick-current::after {
  content: "▾" / "";
  margin-left: auto;
}
.exercise-pick [type="search"] {
  margin-top: 8px;
}
/* The part of the body, the goal and the equipment of the exercise picker (T401): lists side by side,
   one under the other on a phone. */
.pick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 10px 0 4px;
}
.pick-filter {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--muted);
}
.pick-filter select {
  font-size: 16px; /* 16 px or more: iOS Safari does not zoom on focus */
}
.pick-count {
  margin: 0 0 6px;
  font-size: 12px;
}
.pick-list {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  padding: 6px;
}
.pick-row {
  width: 100%;
  justify-content: start;
  flex-wrap: wrap;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  background: transparent;
  color: var(--light);
  border-color: transparent;
}
.pick-row:hover {
  background: #2c2d32;
}
.pick-row[aria-current="true"] {
  border-color: var(--light);
}
.pick-row[hidden] {
  display: none;
}
.pick-row small {
  color: var(--muted);
  font-size: 12px;
}
.picks {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
/* The word of the coach for the block (lot 3), open at the top of the card of the program. */
.coach-word > summary {
  font-weight: 700;
}
.session.closed {
  padding: 8px 20px;
  margin: 10px 0;
}
button.session-head {
  display: block;
  width: 100%;
  padding: 6px 0;
  background: none;
  border: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}
.session-head strong {
  display: block;
}
.session-head strong::before {
  content: "▸ ";
}
.session-head[aria-expanded="true"] strong::before {
  content: "▾ ";
}
.session-head span,
.check small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}
/* Blocks of a session (T374): warm-up, exercises one after the other, superset, circuit. */
.block {
  border-left: 3px solid #8a8d94;
  padding: 2px 0 2px 14px;
  margin: 16px 0;
}
fieldset.block {
  border: 1px solid var(--line);
  border-left: 3px solid #8a8d94;
  padding: 14px;
}
.block h4,
.block-title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.2;
}
.block-title {
  margin-top: 24px;
}
.block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.block li {
  margin: 8px 0;
}
.label {
  display: inline-block;
  min-width: 2.2em;
}
.pre {
  white-space: pre-line;
}
/* What the client reads about an exercise. In the journal only, read standing: 16 px (SALLE-11);
   in the program card, the note of the coach keeps 14 px. */
.exercise-plan,
.exercise-note {
  display: block;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--light);
}
.log-exercise .exercise-plan,
.log-exercise .exercise-note {
  font-size: 16px;
}
.exercise-plan {
  font-weight: 600;
}
.exercise-note {
  margin-bottom: 10px;
}
/* The sheet of an exercise (T381): folded under its name, readable in the gym. */
.exercise-sheet {
  margin: 6px 0 10px;
  font-size: 14px;
  line-height: 1.45;
}
.exercise-sheet summary {
  cursor: pointer;
  color: var(--muted);
}
.exercise-sheet dl {
  margin: 8px 0 0;
}
.exercise-sheet dt {
  font-size: 12px;
  color: var(--muted);
}
.exercise-sheet dd {
  margin: 0 0 8px;
  white-space: pre-line;
}
.exercise-sheet p {
  margin: 0;
}
/* The correction of a video (lot 4): the last one published, folded above the sheet of the exercise. */
.video-correction {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.45;
}
.video-correction summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--light);
}
.video-correction p {
  margin: 6px 0 0;
}
/* The title of a video card wraps a long file name instead of widening the page. */
.video-title {
  overflow-wrap: anywhere;
}
/* The notes under a correction, read by the client: 12 px at least. */
.video-note {
  font-size: 12px;
  color: var(--muted);
}
/* The form of the coach under a video: every marker, one row each. */
.video-feedback {
  margin-top: 14px;
}
.marker-count {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.marker-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.marker-row .toolbar {
  grid-column: 1 / -1;
  margin: 0;
}
/* The answer of the coach under a check-in (T381). */
.coach-reply {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--light);
}
.checkin-reply {
  margin-top: 12px;
}
.old-versions > summary {
  color: var(--muted);
}
/* The journal: ✓ first, the sets on demand. « La dernière fois » is read standing: 16 px (SALLE-11). */
.last-time,
.go-up {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--light);
}
.go-up {
  font-weight: 700;
}
/* « Record à battre » and the « Record ! » badge (lot 7, SALLE-6): the orange of the record points of
   the curves, read standing; the badge stays hidden until a typed set beats every earlier one. */
.record-target {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--muted);
}
.record-badge {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--level-3);
  color: var(--bg);
  font-size: 16px;
  font-weight: 700;
}
.record-badge[hidden] {
  display: none;
}
.row-fields.quick-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.quick-row input {
  font-size: 16px; /* no zoom of iOS on the field */
  min-height: 44px;
}
/* ± around the load and the repetitions (SALLE-10): 44 px each side of the field. */
.stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 6px;
  align-items: end;
}
#training-form button.step {
  min-width: 44px;
  padding: 0 2px;
  font-size: 14px;
}
/* The pills of RPE: neutral, none chosen by default; the radio stays for the keyboard and the readers. */
.rpe-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.rpe-label {
  font-size: 14px;
  font-weight: 700;
  margin-right: 4px;
}
.pill {
  position: relative;
}
.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
}
.pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.pill input:checked + span {
  background: var(--light);
  color: var(--bg);
  border-color: var(--light);
}
.pill input:focus-visible + span {
  outline: 2px solid var(--light);
  outline-offset: 2px;
}
/* « Mouvement réalisé » stays a list (SALLE-9): 44 px, 16 px so that iOS does not zoom. */
.log-exercise select {
  min-height: 44px;
  font-size: 16px;
}
.done-check {
  margin: 12px 0 4px;
  min-height: 44px;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
}
.set-details {
  border-top: 0;
  padding: 4px 0 0;
}
.set-details > summary {
  font-size: 13px;
  color: var(--muted);
}
/* The journal by blocks (SALLE-11): the first block open, the others on one line « Bloc 2 ·
   Squat + Tirage · 0/6 »; 1a and 1b stay together under one fold. */
.block-fold {
  border-top: 1px solid var(--line);
  padding: 8px 0 0;
  margin-top: 16px;
}
.block-fold > summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 6px 0;
}
.block-fold > summary::-webkit-details-marker {
  display: none;
}
/* The marker is drawn, not read: <details> already says « réduit / développé ». */
.block-fold > summary::before {
  content: "▸" / "";
}
.block-fold[open] > summary::before {
  content: "▾" / "";
}
.block-fold > summary .block-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.block-line {
  display: block;
  flex-basis: 100%;
  margin: 0;
  font-size: 14px;
  color: var(--light);
}
/* Open, the names are the legends below: the count alone stays, beside the title. */
.block-fold[open] .block-names {
  display: none;
}
.block-fold[open] > summary .block-line {
  flex-basis: auto;
  margin-left: auto;
}
.block-fold > button {
  margin-top: 8px;
}
/* « Monter à 62,5 kg » next to the signal: a target of 44 px, on its own line on a phone. */
.go-up button.raise {
  margin: 6px 0 0 6px;
  vertical-align: middle;
}
.check {
  display: flex;
  align-items: start;
  gap: 8px;
}
.check input {
  flex: none;
  margin-top: 4px;
}
.check span {
  line-height: 1.6;
}
.login {
  max-width: 520px;
  margin: 30px auto;
}
.login .card {
  margin-top: 25px;
}
.empty {
  padding: 20px;
  border: 1px dashed #767982;
  color: #c8cbd0;
}
.list-row {
  border-top: 1px solid #62656c;
  padding: 18px 0;
}
.list-row[hidden] {
  display: none;
}
.list-row strong {
  display: block;
}
.list-row button {
  margin-top: 12px;
}
.list-row .toolbar {
  margin: 0;
}
.list-row .pulse {
  margin: 10px 0 0;
  font-size: 12px;
}
.badge.follow-up {
  border-color: var(--light);
  font-weight: 700;
}
.list-row .todo {
  margin: 0 0 10px;
  color: var(--light);
}
.todo-more {
  font-size: 12px;
}
/* « en retard »: the word, underlined and bold, never a colour alone. */
.late {
  font-weight: 700;
  text-decoration: underline;
}
.split {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  flex-wrap: wrap;
}
.history {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    13px/1.7 Arial,
    sans-serif;
}
video {
  width: 100%;
  max-height: 420px;
  background: #080809;
  display: block;
}
dialog {
  background: var(--dialog);
  color: #f6f5f2;
  border: 1px solid #a5a7ae;
  max-width: 950px;
  width: calc(100% - 35px);
  max-height: 90vh;
  padding: 25px;
  /* The journal scrolls up and down only: no sideways slide on the iPhone (first real session,
     08/11/2026). pan-y keeps the vertical scroll, pinch-zoom keeps the zoom. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}
dialog::backdrop {
  background: #000a;
}
/* Top left, on its own line: not under the right thumb on a phone (SALLE-7). */
#close-modal {
  margin-bottom: 12px;
}
/* The sticky bar of the journal (SALLE-7): the count and the button that saves stay in view. The
   dialog scrolls with a padding of 25 px (14 px on a phone) that the browser keeps out of the sticky
   zone: the bar goes down and spans it, with a background, so nothing shows under it. */
.journal-bar {
  position: sticky;
  bottom: -25px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 18px -25px -25px;
  padding: 12px 25px;
  background: var(--dialog);
  border-top: 1px solid var(--line);
}
.journal-bar p {
  margin: 0;
  flex: 1 1 200px;
  font-size: 14px; /* the count is read standing too (SALLE-11) */
  color: var(--light);
}
.journal-bar button {
  flex: 1 1 auto;
}
/* The buttons of the journal (SALLE-11): 14 px, read standing. */
#training-form button {
  font-size: 14px;
}
/* The two helps of the journal (« Coche ✓… », « Rien n’est envoyé tout seul… »): never under 12 px. */
#modal-body .small {
  font-size: 12px;
}
/* The screen kept on during the session (SALLE-3), under the title of the journal. */
.screen-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}
.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  background: #f6f5f2;
  color: #111;
  padding: 12px;
  z-index: 100;
}
.skip:focus {
  top: 10px;
}
:focus-visible {
  outline: 3px solid #d5d8de;
  outline-offset: 4px;
}
button:focus-visible {
  outline-color: #fff;
}
.danger-note {
  border: 1px solid #a3a6ad;
  padding: 15px;
  font-size: 12px;
}
.busy {
  opacity: 0.65;
}
details {
  border-top: 1px solid #62656c;
  padding: 15px 0;
}
summary {
  cursor: pointer;
  min-height: 44px;
}
code {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.client-select {
  max-width: 340px;
  margin-bottom: 25px;
}
#identity {
  font-size: 12px;
  display: flex;
  gap: 15px;
  align-items: center;
}
output {
  font-variant-numeric: tabular-nums;
  font-size: 20px;
}
.saved {
  color: #f0f0f0;
  font-size: 12px;
}
.inline-checkbox {
  margin: 12px 0;
}
.inline-checkbox input {
  margin: 0 8px 0 0;
}
/* Targets of a block (T372, choice 3): one line per muscle, by region. */
.targets {
  margin: 18px 0;
}
.targets h4 {
  margin: 16px 0 4px;
  font-size: 13px;
}
.target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}
.field.target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px auto 68px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
}
.target-row input {
  min-height: 38px;
  padding: 6px 8px;
}
.target-row .form-message {
  grid-column: 1 / -1;
}
/* Muscles of a library exercise (T373, step 2): one choice per muscle, by region. */
fieldset.muscles h4 {
  margin: 16px 0 4px;
  font-size: 13px;
}
.muscle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
/* Calendar of the month (T373): the state is also said in words (aria-label, legend, day panel). */
.month {
  margin: 28px 0 0;
}
.month::first-letter,
.day-panel h2::first-letter {
  text-transform: uppercase;
}
.calendar-summary {
  color: var(--light);
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 18px 0;
}
.weekday {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: 4px;
}
.calendar .day {
  min-height: 72px;
  padding: 6px 7px;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  background: var(--panel);
  color: var(--light);
  border: 1px solid #41434a;
  font-weight: 400;
}
.calendar .day:hover {
  background: #2c2d32;
}
.calendar .day.outside {
  opacity: 0.45;
}
.calendar .day.is-today {
  border-color: var(--light);
}
.calendar .day[aria-pressed="true"] {
  outline: 2px solid var(--light);
  outline-offset: -5px;
}
.day-number {
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 12px;
}
.mark {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--light);
  border-radius: 50%;
}
.mark.faite {
  background: var(--light);
}
.mark.commencee {
  background: linear-gradient(90deg, var(--light) 50%, transparent 50%);
}
.mark.non_saisie {
  border-style: dashed;
  border-color: var(--muted);
}
.mark.deplacee {
  border-color: var(--muted);
  border-radius: 2px;
  background: var(--muted);
}
.mark.sautee {
  border-color: var(--muted);
  background: linear-gradient(135deg, transparent 42%, var(--muted) 42%, var(--muted) 58%, transparent 58%);
}
.more {
  font-size: 12px;
  color: var(--muted);
}
.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  margin: 0 0 24px;
  font-size: 12px;
  color: var(--muted);
}
.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.best {
  margin: 0 0 16px;
  padding-left: 18px;
  color: var(--muted);
}
.best li {
  margin: 3px 0;
}
/* The week (T373, step 3). Color only says « worked » (from dark red to orange, like metal heating
   up, levels of muscle_level in app/core.py): the text and the rest of the page stay black and white. */
:root {
  --level-0: #25262a;
  --level-1: #723127;
  --level-2: #b74425;
  --level-3: #fb8225;
  --level-4: #ffd79a;
  --body: #17181a;
  --body-neutral: #1e1f22;
  --hairline: #2a2b2e;
  --quiet: #8a8c91; /* 4,8 : 1 on --panel (SOLIDITE-10) */
}
.week-page {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.week-page .eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.week-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
.week-top h1 {
  margin: 10px 0 8px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.week-top p {
  margin: 0;
}
.week-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.week-nav > button {
  width: 44px;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  border-color: var(--hairline);
}
.week-nav > button:hover,
.week-mode button:hover {
  background: transparent;
  border-color: var(--muted);
}
.week-nav > button[data-action="week-today"] {
  width: auto;
  padding: 0 14px;
  font-size: 12px;
}
.week-nav p {
  margin: 0;
  text-align: center;
  line-height: 1.35;
  color: var(--light);
}
.week-nav strong {
  display: block;
  font-weight: 500;
}
.week-nav span {
  color: var(--muted);
  font-size: 13px;
}
.week-mode {
  display: inline-flex;
  margin-bottom: 20px;
}
.week-mode button {
  min-height: 38px;
  padding: 0 16px;
  font-weight: 500;
  border-color: var(--hairline);
  color: var(--muted);
}
.week-mode button + button {
  margin-left: -1px;
}
.week-mode button[aria-pressed="true"],
.week-mode button[aria-pressed="true"]:hover {
  background: var(--light);
  border-color: var(--light);
  color: #0d0d0e;
}
.week-figures {
  display: grid;
  grid-template-columns: 1.4fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
}
.week-figure {
  padding: 18px 0 18px 22px;
  border-left: 1px solid var(--hairline);
}
.week-figure:first-child {
  padding-left: 0;
  border-left: 0;
}
.week-figure b {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.week-figure:first-child b {
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.week-figure small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}
.week-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
  gap: 48px;
  margin-top: 28px;
  align-items: start;
}
/* The left column always fits in the screen: the detail scrolls under the body. */
.week-left {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  min-width: 0;
}
.week-scene {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.week-scene figure {
  margin: 0;
}
.week-scene figcaption {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quiet);
}
.body-figure {
  display: block;
  width: 100%;
  height: clamp(360px, calc(100vh - 400px), 620px);
}
.body-figure * {
  stroke-linejoin: round;
}
.body-under use {
  fill: var(--body);
  stroke: var(--body);
  stroke-width: 11;
}
.body-under use.body-finger {
  stroke-width: 6;
}
.body-neutral use {
  fill: var(--body-neutral);
  stroke: var(--body-neutral);
  stroke-width: 1;
}
.body-zone {
  stroke: rgba(246, 245, 242, 0.16);
  stroke-width: 1.1;
  cursor: pointer;
  transition:
    fill 0.22s ease,
    opacity 0.16s ease,
    stroke 0.16s ease;
}
.body-cuts path {
  fill: none;
  stroke: var(--body);
  stroke-width: 2.6;
  pointer-events: none;
}
.body-zone.level-0,
.week-gauge .level-0 {
  fill: var(--level-0);
}
.body-zone.level-1,
.week-gauge .level-1 {
  fill: var(--level-1);
}
.body-zone.level-2,
.week-gauge .level-2 {
  fill: var(--level-2);
}
.body-zone.level-3,
.week-gauge .level-3 {
  fill: var(--level-3);
}
.body-zone.level-4,
.week-gauge .level-4 {
  fill: var(--level-4);
}
.swatch.level-0 {
  background: var(--level-0);
}
.swatch.level-1 {
  background: var(--level-1);
}
.swatch.level-2 {
  background: var(--level-2);
}
.swatch.level-3 {
  background: var(--level-3);
}
.swatch.level-4 {
  background: var(--level-4);
}
.week-scene.has-choice .body-zone {
  opacity: 0.26;
}
.week-scene.has-choice .body-zone.on {
  opacity: 1;
  stroke: var(--light);
  stroke-width: 1.8;
}
@media (hover: hover) {
  .body-zone:hover {
    stroke: var(--light);
    stroke-width: 1.8;
  }
}
.week-legend {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.week-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.week-legend .lead {
  color: var(--quiet);
}
.swatch {
  display: block;
  width: 10px;
  height: 10px;
}
.week-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 18px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--hairline);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}
.week-card::-webkit-scrollbar {
  display: none;
}
.week-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.week-title h2 {
  margin: 6px 0 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.week-title .eyebrow {
  margin: 0;
}
.week-what {
  margin: 4px 0 0;
  font-size: 14px;
}
.week-word {
  display: none;
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--light);
}
.week-word::first-letter {
  text-transform: uppercase;
}
.week-value {
  text-align: right;
  flex: none;
}
.week-value b {
  display: block;
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.week-value small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.week-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 14px 18px;
  margin: 18px 0 0;
}
.week-facts dt {
  font-size: 12px;
  color: var(--muted);
}
.week-facts dd {
  margin: 2px 0 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.week-parts {
  margin: 16px 0 0;
  font-size: 13px;
}
.week-parts em {
  font-style: normal;
  color: var(--light);
}
.week-exercises,
.week-sessions {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 13px;
}
.week-exercises li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.week-sessions {
  margin-top: 10px;
  font-size: 14px;
}
.week-sessions li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.week-sessions small {
  display: block;
  font-size: 12px;
}
/* « Non saisie » (lot 7): the button that opens its journal, under the name. */
.week-sessions button {
  margin-top: 8px;
}
.week-when {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.week-sessions li > .week-when:first-child {
  text-align: left;
}
.week-close {
  min-height: 38px;
  margin-top: 12px;
  padding: 0 14px;
  border-color: var(--hairline);
}
.week-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 48px;
  gap: 8px;
}
.week-grid.with-planned {
  grid-template-columns: minmax(0, 1fr) 40px 48px 56px;
}
.week-head {
  padding-bottom: 8px;
}
.week-head span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
  text-align: right;
}
.week-head span:first-child {
  text-align: left;
}
.week-region {
  margin: 24px 0 2px;
  color: var(--light);
}
.week-head + .week-region {
  margin-top: 4px;
}
.week-row {
  width: 100%;
  min-height: 44px;
  padding: 11px 0 0;
  border: 0;
  background: transparent;
  color: var(--light);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  align-items: baseline;
  justify-items: stretch;
  transition: opacity 0.16s ease;
}
.week-row:hover {
  background: transparent;
  opacity: 1 !important;
}
.week-row .week-days {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.week-row .week-sets {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.week-row .week-sets.now {
  color: var(--light);
  font-weight: 500;
}
.week-row.idle .week-name,
.week-row.idle .week-sets.now {
  color: var(--quiet);
  font-weight: 400;
}
.week-gauge {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 8px;
}
.gauge-track {
  fill: var(--hairline);
}
.gauge-band {
  fill: #47484d;
}
.gauge-planned {
  fill: var(--light);
}
.week-list.has-choice .week-row {
  opacity: 0.38;
}
.week-list.has-choice .week-row.on {
  opacity: 1;
}
.week-more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 32px;
  margin-top: 40px;
}
.week-more:not(:empty) {
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.week-more p {
  margin: 0;
}
.week-more p + p {
  margin-top: 8px;
  font-size: 14px;
}
.week-how {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
}
.week-how summary {
  cursor: pointer;
  color: var(--muted);
}
.week-how p {
  max-width: 760px;
  margin: 10px 0 0;
}
.week-tip {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  background: var(--light);
  color: #0d0d0e;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.35;
  max-width: 260px;
}
.week-tip b {
  display: block;
  font-weight: 600;
}
@media (max-width: 600px) {
  /* One compact line per set: Série, répétitions, charge, RPE. */
  .set-row {
    grid-template-columns: 52px repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .set-row .field label {
    font-size: 13px;
    margin: 4px 0;
  }
  .set-row input {
    min-height: 44px;
    padding: 9px 8px;
  }
  .set-title {
    min-height: 44px;
  }
}
@media (max-width: 1050px) {
  .shell {
    grid-template-columns: 160px minmax(0, 1fr);
  }
  main {
    padding: 30px 24px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .row-fields {
    grid-template-columns: repeat(3, minmax(60px, 1fr));
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  /* Tablet (T071): the widest tables (offers, access log) fit without a side scroll at 768 px. */
  td,
  th {
    padding: 9px 7px;
  }
  th {
    letter-spacing: 0.02em;
  }
}
@media (max-width: 700px) {
  header {
    padding: 15px 18px;
    align-items: start;
  }
  .brand {
    font-size: 12px;
  }
  .brand img {
    width: 32px;
    height: 37px;
  }
  /* The name is on each page, above its title. */
  #identity span {
    display: none;
  }
  .environment {
    padding: 8px 18px;
  }
  .shell {
    display: block;
  }
  /* One line, the page shown and « Menu » (T383). Open: all the pages in view, on two or three rows,
     none hidden to the right. */
  #nav {
    padding: 8px 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    border-right: 0;
    border-bottom: 1px solid #41434a;
  }
  #nav:empty {
    display: none;
  }
  #nav[data-open="false"] button:not(.nav-toggle) {
    display: none;
  }
  #nav .nav-toggle {
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    min-height: 44px;
    padding: 6px 12px;
    border-color: #62656c;
    color: #f6f5f2;
    font-size: 13px;
    text-align: left;
  }
  #nav .nav-toggle span:last-child::after {
    content: " ▾";
  }
  #nav .nav-toggle[aria-expanded="true"] span:last-child::after {
    content: " ▴";
  }
  #nav button {
    min-width: 0;
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 4px;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  main {
    padding: 26px 18px;
  }
  .card {
    padding: 21px 17px;
  }
  .row-fields,
  .row-fields.wide {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* The head of a week (lot 3): one field per line, its labels are long. */
  .row-fields.week-head {
    grid-template-columns: 1fr;
  }
  /* The quick line of the journal (SALLE-10): load and repetitions with their ± on one row, the
     RPE on the next; the field keeps room for « 100,5 » between two buttons of 44 px. */
  .stepper {
    gap: 4px;
  }
  .quick-row input {
    padding: 9px 4px;
  }
  /* « Monter à 62,5 kg » and « Bloc suivant » on their own line, full width (DIFFERENCIATION-3, SALLE-11). */
  .go-up button.raise {
    display: flex;
    width: 100%;
    margin: 8px 0 0;
  }
  .block-fold > button {
    width: 100%;
  }
  .stats {
    gap: 13px;
  }
  .stat strong {
    font-size: 25px;
  }
  .session {
    padding: 15px 12px;
  }
  .copy-choices {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .row-fields.exercise-main {
    grid-template-columns: 1fr 1fr;
  }
  .exercise-main > :first-child {
    grid-column: 1 / -1;
  }
  /* On a phone, the numbers only: all the weeks in view, without taking the screen. */
  .tab-word {
    display: none;
  }
  .week-tabs > button {
    min-width: 44px;
    padding: 11px 0;
  }
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 26px;
  }
  #notice:not(:empty) {
    padding: 12px 18px;
  }
  .toolbar {
    gap: 9px;
  }
  .toolbar > button {
    flex: 1;
  }
  .toolbar > select {
    width: 100%;
  }
  fieldset {
    padding: 15px 12px;
  }
  .login {
    margin: 0 auto;
  }
  dialog {
    width: calc(100% - 16px);
    padding: 14px;
  }
  .journal-bar {
    bottom: -14px;
    margin: 14px -14px -14px;
    padding: 10px 14px;
  }
  table {
    font-size: 12px;
  }
  td,
  th {
    padding: 9px;
  }
  /* 390 px: the plan table stacks, the name and its phrase on a line, planned and done under it. */
  .plan-table,
  .plan-table tbody {
    display: block;
  }
  .plan-table thead {
    display: none;
  }
  .plan-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
  }
  .plan-table th[scope="row"] {
    grid-column: 1 / -1;
    padding-bottom: 4px;
    border-bottom: 0;
  }
  .plan-table td {
    border-bottom: 0;
  }
  .plan-label {
    display: inline;
    color: var(--muted);
  }
  .split > button {
    width: 100%;
  }
  .muscle-grid {
    grid-template-columns: 1fr;
  }
  /* 390 px: 7 columns of about 48 px, touch targets of 52 px. */
  .calendar {
    gap: 3px;
  }
  .weekday {
    letter-spacing: 0.02em;
  }
  .calendar .day {
    min-height: 52px;
    padding: 4px;
    gap: 3px;
  }
  .day-number {
    font-size: 12px;
  }
  .marks {
    gap: 3px;
  }
  .mark {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }
}
/* The progress (T373, step 4): one white line; orange says « record », a hollow point « lighter week ». */
.progress-page .week-value b {
  font-size: 30px;
  line-height: 1.1;
}
.progress-page .week-value small {
  white-space: normal;
  max-width: 190px;
  margin-left: auto;
}
.curve {
  margin-top: 18px;
}
.curve .eyebrow {
  margin: 0 0 6px;
}
.curve-chart {
  display: block;
  width: 100%;
  height: auto;
}
.curve-grid {
  stroke: var(--hairline);
  stroke-width: 1;
}
.curve-axis {
  fill: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.curve-line {
  fill: none;
  stroke: var(--light);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.curve-dot {
  fill: var(--light);
  stroke: var(--bg);
  stroke-width: 2;
}
.curve-dot.record {
  fill: var(--level-3);
}
.curve-dot.light {
  fill: var(--bg);
  stroke: var(--light);
  stroke-width: 1.5;
}
.curve-dot.record.light {
  stroke: var(--level-3);
  fill: var(--bg);
}
.curve-marker {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
}
.curve-hit {
  fill: transparent;
  cursor: pointer;
}
.curve-read {
  margin: 6px 0 0;
  min-height: 21px;
  font-size: 14px;
  color: var(--light);
}
.curve-read::first-letter {
  text-transform: uppercase;
}
.curve-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.curve-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.curve-key {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.curve-key.record {
  background: var(--level-3);
}
.curve-key.light {
  border: 1.5px solid var(--light);
}
.progress-heading {
  margin: 22px 0 0;
}
.progress-heading + .week-exercises {
  margin-top: 8px;
}
.progress-sessions li > span:first-child::first-letter {
  text-transform: uppercase;
}
.progress-sessions small,
.week-name small,
.progress-link small,
.block-card .week-exercises small {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.progress-sessions small.progress-record {
  color: var(--light);
}
/* The curve in words (lot 7): under the name of the exercise, and under the last set in the list. */
.progress-trend {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.week-name small.progress-trend {
  margin-top: 2px;
}
.progress-older {
  margin-top: 10px;
  font-size: 13px;
}
.progress-older summary {
  cursor: pointer;
  color: var(--muted);
}
.progress-records {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.progress-link {
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  justify-items: stretch;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: transparent;
  color: var(--light);
  font-size: 14px;
  font-weight: 400;
}
.progress-link:hover {
  background: transparent;
  border-color: var(--muted);
}
/* Every exercise with its best set, under the detail. */
.progress-all {
  margin: 10px 0 0;
  font-size: 13px;
}
.progress-bests {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 16px;
}
.progress-bests h2 {
  margin: 0 0 4px;
}
.progress-bests ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  margin-top: 12px;
}
.progress-bests li {
  border-top: 1px solid var(--hairline);
}
/* « Par bloc » (lot 6): each block over under the records, drawn as the list of the records. */
.progress-blocks {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 16px;
}
.progress-blocks h2 {
  margin: 0 0 4px;
}
.block-card {
  padding: 18px 0 6px;
  border-top: 1px solid var(--hairline);
}
.block-card h3 {
  margin: 0 0 4px;
}
.block-card .week-exercises {
  margin-top: 4px;
}
.progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.progress-row.on .week-name {
  font-weight: 600;
}
.progress-row.on {
  box-shadow: inset 2px 0 0 var(--light);
  padding-left: 10px;
}
.progress-spark {
  display: block;
  width: 84px;
  height: 24px;
}
.progress-spark polyline {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.progress-spark circle {
  fill: var(--light);
}
.progress-spark circle.record {
  fill: var(--level-3);
}
/* Regularity, above the calendar. */
.regular-weeks {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: 24px;
}
.regular-week {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: stretch;
  gap: 3px;
  min-height: 44px;
  padding: 6px 3px;
  border: 0;
  border-bottom: 2px solid var(--hairline);
  background: transparent;
}
.regular-week[aria-pressed="true"] {
  background: var(--body);
}
@media (hover: hover) {
  button.regular-week:hover {
    background: var(--body);
  }
}
.regular-week.kept {
  border-bottom-color: var(--light);
}
.regular-mark {
  display: block;
  flex: none;
  height: 8px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.regular-mark.done {
  background: var(--quiet);
  box-shadow: none;
}
.regular-mark.started {
  background: linear-gradient(90deg, var(--quiet) 50%, transparent 50%);
}
.regular-week.kept .regular-mark.done {
  background: var(--light);
}
.regular-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--quiet);
}
.regular-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
.regular-read {
  margin: 0;
  font-size: 14px;
}
/* The draft of a report: read at once, without scrolling inside a small box (T373, step 7). */
.report-edit textarea {
  min-height: min(640px, 70vh);
}

/* The rules in clear words (T373, step 6): the title of a rule on the left, its text on the right. */
.how-rules {
  border-bottom: 1px solid var(--hairline);
}
.how-rules section {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
}
.how-rules h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.how-rules p {
  max-width: 680px;
  margin: 0;
}
.how-rules p + p {
  margin-top: 10px;
}

/* The week on a tablet and on a phone. */
@media (max-width: 1000px) {
  .week-plan {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .week-left {
    position: static;
    display: block;
    max-height: none;
  }
  .body-figure {
    height: auto;
  }
  .week-card {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 4px;
  }
  /* Under its row, the detail repeats neither the region, nor the name, nor the number. */
  .week-row + .week-card {
    margin-top: 12px;
    padding: 0 0 10px;
    border-top: 0;
  }
  .week-row + .week-card .week-title .eyebrow,
  .week-row + .week-card h2,
  .week-row + .week-card .week-value {
    display: none;
  }
  .week-row + .week-card .week-what {
    margin: 0;
  }
  .week-row + .week-card .week-word {
    display: block;
  }
  /* Under its row, an exercise keeps its best value: the row gives the last one. */
  .progress-row + .week-card {
    padding-bottom: 14px;
  }
  .week-row.progress-row + .week-card .week-value {
    display: block;
    text-align: left;
  }
  .week-row.progress-row + .week-card .week-title > div:first-child {
    display: none;
  }
  .progress-row + .week-card .week-value small {
    max-width: none;
    margin-left: 0;
  }
}
@media (max-width: 700px) {
  .marker-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .week-nav {
    width: 100%;
    justify-content: space-between;
  }
  .week-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  .week-figure {
    padding: 14px 0 14px 12px;
  }
  .week-figure:first-child {
    grid-column: 1 / -1;
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .week-figure:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }
  .week-figure b {
    font-size: 24px;
  }
  .week-figure small {
    font-size: 12px;
    margin-top: 6px;
  }
  /* The regularity stays short: the calendar comes right after it. */
  .regular .week-figures {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .regular .week-figure:first-child {
    grid-column: auto;
    padding: 14px 0;
    border-bottom: 0;
  }
  .regular .week-figure:nth-child(2) {
    padding-left: 12px;
    border-left: 1px solid var(--hairline);
  }
  .regular .week-figure b,
  .regular .week-figure:first-child b {
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .how-rules section {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .export-bar > button {
    flex-basis: 100%;
  }
  .target-grid,
  .progress-bests ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Loading the account (lot 8): said in the page, while main is aria-busy. */
.loading {
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
}
/* Dated goals (lot 8): a bar with three marks, start · today · target, by classes only. */
.goals .goal + .goal {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.goal h3 {
  margin: 0 0 6px;
}
.goal-bar {
  display: block;
  width: 100%;
  height: 14px;
  margin: 4px 0 6px;
}
.goal-bar .goal-track {
  stroke: var(--line);
  stroke-width: 2;
}
.goal-bar .goal-fill {
  stroke: var(--light);
  stroke-width: 2;
}
.goal-bar circle {
  fill: var(--panel);
  stroke: var(--light);
  stroke-width: 1.5;
}
.goal-bar .goal-now {
  fill: var(--light);
}
.goal-bar .goal-target {
  stroke: var(--level-3);
}
.goal-bar .goal-target.reached {
  fill: var(--level-3);
}
.goal-state {
  margin: 0 0 4px;
}
.goals .small {
  font-size: 12px;
}
#goal-form {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
#goal-form h3 {
  margin-top: 0;
}

/* The welcome of a new client and the help to put the app on the home screen (10/11/2026). */
.welcome-steps {
  padding-left: 1.4em;
}
.welcome-steps > li {
  margin: 0 0 22px;
}
.welcome-steps h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.install-steps {
  padding-left: 1.3em;
}
.install-steps li {
  margin: 4px 0;
}
.install-card summary {
  cursor: pointer;
  font-weight: 700;
}