/* ============================================================
   Workouts — feuille de style
   Deux axes de thème, indépendants :
   · le MODE — sombre par défaut, clair sous [data-theme="light"] ;
   · l'ACCENT — --accent et --accent-ink sont posés en ligne sur
     <html> par theme.js, tout le reste s'en déduit en color-mix.
   Aucune couleur n'est écrite en dur ailleurs que dans ces deux
   blocs : c'est ce qui rend les deux thèmes tenables.
   ============================================================ */

:root {
  /* Accent — valeurs de repli ; theme.js écrase les deux premières. */
  --accent:     #30D158;
  --accent-ink: var(--accent-ink);
  --accent-2:   color-mix(in srgb, var(--accent) 76%, #fff);  /* haut du dégradé */
  --accent-tx:  var(--accent);                                /* accent en texte */

  --bg:      #000000;
  --elev:    #0F1115;

  --glass:   rgba(255,255,255,.065);
  --glass-2: rgba(255,255,255,.11);
  --fill:    rgba(255,255,255,.065);   /* rails : segmenté, piste */
  --line:    rgba(255,255,255,.10);
  --line-hi: rgba(255,255,255,.22);
  --hair:    rgba(255,255,255,.07);    /* filets de chrome */
  --grid:    rgba(255,255,255,.07);    /* grille de graphique, cases vides */
  --dot:     rgba(255,255,255,.22);

  --tx:      #F2F3F5;
  --tx-2:    rgba(242,243,245,.56);
  --tx-3:    rgba(242,243,245,.30);

  /* Matériaux translucides */
  --bar:       var(--bar);
  --bar-solid: #0C0D10;
  --sheet:     rgba(24,26,31,.82);
  --sheet-line:rgba(255,255,255,.16);
  --pop:       rgba(32,34,40,.92);
  --toast:     rgba(38,40,46,.92);
  --hintbg:    rgba(28,30,36,.72);
  --scrim:     rgba(0,0,0,.55);

  /* Équivalents opaques, pour prefers-reduced-transparency */
  --sheet-solid: #1A1C21;
  --hint-solid:  #1C1E24;
  --toast-solid: #26282E;
  --pop-solid:   #202228;
  --pr-solid:    #3A2A0C;

  --sh-1:    0 14px 38px rgba(0,0,0,.6);
  --sh-2:    0 -20px 60px rgba(0,0,0,.7);
  --sh-push: -18px 0 44px rgba(0,0,0,.6);
  --sh-card: 0 8px 24px rgba(0,0,0,.4);

  --orange:  #FF9F0A;
  --blue:    #0A84FF;
  --red:     #FF453A;
  --orange-tx: #FFD79A;
  --blue-tx:   #9CCBFF;
  --red-tx:    #FF8A80;

  --r-xl: 30px; --r-lg: 22px; --r-md: 15px; --r-sm: 10px;
  --blur: 24px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Réservé sous la barre d'onglets. Pas la marge de sécurité
     complète : juste de quoi décoller les libellés du bord, sans
     rendre au système les 34 px qu'il demande. */
  --safe-tab: 5px;
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 43px;
}

/* ── Thème clair ──────────────────────────────────────────────
   Fond gris très léger, surfaces blanches : les cartes se
   détachent au lieu de s'éclaircir. L'accent en texte est
   assombri (color-mix vers le noir) — sinon un jaune ou un
   cyan devient illisible sur blanc. */
:root[data-theme="light"] {
  --accent-2:  color-mix(in srgb, var(--accent) 84%, #fff);
  /* 55 % : le minimum pour qu'un jaune ou un cyan tienne le
     contraste sur blanc (≥ 4:1), sans perdre la teinte. */
  --accent-tx: color-mix(in srgb, var(--accent) 55%, #0A0C10);

  --bg:      #F2F2F7;
  --elev:    #FFFFFF;

  --glass:   rgba(255,255,255,.78);
  --glass-2: #FFFFFF;
  --fill:    rgba(118,118,128,.13);
  --line:    rgba(0,0,0,.09);
  --line-hi: rgba(0,0,0,.20);
  --hair:    rgba(0,0,0,.08);
  --grid:    rgba(0,0,0,.08);
  --dot:     rgba(0,0,0,.20);

  --tx:      #14161A;
  --tx-2:    rgba(20,22,26,.58);
  --tx-3:    rgba(20,22,26,.34);

  --bar:       rgba(248,248,250,.72);
  --bar-solid: #F7F7F9;
  --sheet:     rgba(250,250,252,.86);
  --sheet-line:rgba(0,0,0,.07);
  --pop:       rgba(255,255,255,.94);
  --toast:     rgba(252,252,254,.94);
  --hintbg:    rgba(252,252,254,.85);
  --scrim:     rgba(0,0,0,.26);

  --sheet-solid: #FAFAFC;
  --hint-solid:  #FAFAFC;
  --toast-solid: #FCFCFE;
  --pop-solid:   #FFFFFF;
  --pr-solid:    #FFF1D6;

  --sh-1:    0 10px 30px rgba(0,0,0,.14);
  --sh-2:    0 -14px 44px rgba(0,0,0,.16);
  --sh-push: -18px 0 40px rgba(0,0,0,.14);
  --sh-card: 0 6px 18px rgba(0,0,0,.10);

  --orange-tx: #8A5200;
  --blue-tx:   #0A63C4;
  --red-tx:    #C9271C;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* iOS agrandit toute la page dès qu'on touche un champ dont le
   texte fait moins de 16 px, et ne redescend jamais tout seul.
   Aucun champ ne passe sous cette limite, quel que soit le
   réglage de taille de texte du système. */
:where(input:not([type="checkbox"]):not([type="file"]), textarea, select) {
  font-size: max(1rem, 16px);   /* :where() = zéro spécificité : un
                                   champ qui veut plus gros l'emporte */
}

/* Coupe le zoom du double-tap sans toucher au pincement, qui
   reste disponible pour qui en a besoin. */
.app { touch-action: manipulation; }

/* `hidden` doit l'emporter sur tout `display` déclaré plus bas —
   sinon un élément en display:flex reste affiché une fois caché. */
[hidden] { display: none !important; }
/* Le document lui-même ne défile jamais et ne rebondit pas.
   `overscroll-behavior` doit être posé sur <html> : c'est lui
   l'élément de défilement, et le mettre seulement sur <body>
   n'arrête rien sur iOS. Le corps est fixé au viewport, donc
   la barre d'onglets ne peut plus partir avec un rebond de page
   ni suivre l'apparition de la barre d'adresse. */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  height: 100%;
  overflow: hidden;
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 100%/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  overscroll-behavior: none;
}

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.app {
  position: relative;
  width: min(100%, 460px);
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

/* Halo d'ambiance, immobile et très bas contraste. */
.app::before {
  content: "";
  position: absolute;
  inset: -30% -30% auto -30%;
  height: 62%;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* ══ Pages d'onglet ═══════════════════════════════════════ */
.pages { position: absolute; inset: 0; z-index: 5; will-change: transform, opacity; }

.page { position: absolute; inset: 0; will-change: opacity, transform; }
.page[hidden] { display: none; }

.page-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-t) + 14px) 20px calc(var(--tabbar-h) + var(--safe-tab) + 24px);
}
.page-scroll::-webkit-scrollbar { width: 0; }

/* Barre compacte : elle se matérialise quand le grand titre part. */
.page-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 12;
  height: calc(var(--safe-t) + 48px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10px;
  background: var(--bar);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border-bottom: 1px solid var(--hair);
  opacity: 0;
  pointer-events: none;
}
.page-bar-title { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }

/* Grand texte : interlignage serré, tracking négatif. */
.big-title {
  margin: 8px 0 2px;
  font-size: clamp(2rem, 9vw, 2.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.033em;
}
.big-sub { margin: 0 0 20px; font-size: .875rem; color: var(--tx-2); }
/* Réglages n'a pas de sous-titre : sans ça, la première carte
   collerait au grand titre. */
.big-title + .card-surface { margin-top: 18px; }
.big-sub:empty { margin-bottom: 10px; }

.block-key {
  margin: 24px 0 10px;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3);
}
.muted { color: var(--tx-2); font-size: .875rem; margin: 0 0 14px; }
.muted.pad { padding: 16px 2px; }
.fineprint { font-size: .75rem; color: var(--tx-3); margin: 10px 0 0; line-height: 1.4; }
.fineprint.center { text-align: center; margin-top: 26px; }

/* ══ Boutons ══════════════════════════════════════════════ */
.primary {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  height: 54px;
  padding: 0;
  background: var(--glass-2);
  color: var(--tx);
  font: inherit; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em;
  cursor: pointer; overflow: hidden;
  display: grid; place-items: center;
  transition: transform 90ms ease-out;
}
.primary:active { transform: scale(.975); }
.primary.compact { height: 46px; font-size: .9375rem; }
.primary.big { margin-top: 22px; }
.primary-fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  transform-origin: 50% 100%; transform: scaleY(0); opacity: 0;
}
.primary-label { position: relative; z-index: 1; }
.primary.go .primary-label { color: var(--accent-ink); }
.primary.big, .primary.compact, .sheet-cta {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent;
}
.primary.big .primary-label, .primary.compact .primary-label, .sheet-cta .primary-label { color: var(--accent-ink); }
.primary.danger-solid { background: linear-gradient(180deg, #FF6257, var(--red)); border-color: transparent; }
.primary.danger-solid .primary-label { color: #fff; }

.tile-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 12px;
  padding: 15px;
  border: 1px dashed var(--line-hi);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--tx-2);
  font: inherit; font-size: .9375rem; font-weight: 550;
  cursor: pointer;
  transition: transform 90ms ease-out, color 90ms, border-color 90ms;
}
.tile-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tile-btn:active { transform: scale(.98); color: var(--tx); border-color: var(--line-hi); }

.ghost-btn {
  display: block; width: 100%;
  margin-top: 9px; padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  color: var(--tx);
  font: inherit; font-size: .9375rem; font-weight: 500;
  text-align: center; cursor: pointer;
  transition: transform 90ms ease-out, background-color 90ms;
}
.ghost-btn:active { transform: scale(.98); background: var(--glass-2); }
.ghost-btn.danger-btn { color: var(--red-tx); border-color: rgba(255,69,58,.3); background: rgba(255,69,58,.09); }

.link-btn {
  border: none; background: none;
  color: var(--tx-2); font: inherit; font-size: .8125rem;
  padding: 12px 2px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--tx-3);
}

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--fill);
  color: var(--tx-2);
  cursor: pointer; padding: 0;
  transition: transform 90ms ease-out, background-color 90ms, color 90ms;
}
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:active { transform: scale(.9); background: var(--glass-2); color: var(--tx); }
.ghost-slot { background: none; pointer-events: none; }

/* ══ Barre d'onglets ══════════════════════════════════════ */
.tabbar {
  position: absolute;
  z-index: 40;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-tab));
  padding-bottom: var(--safe-tab);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bar);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border-top: 1px solid var(--hair);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: none; background: none; cursor: pointer;
  color: var(--tx-3);
  font: inherit; font-size: .625rem; letter-spacing: .015em; font-weight: 550;
  padding: 0;
  transition: color 120ms ease-out;
}
.tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; will-change: transform; }
.tab.on { color: var(--accent-tx); }
body.in-session .tabbar { opacity: 0; pointer-events: none; }

/* ══ Programmes ═══════════════════════════════════════════ */
.prog-list { display: flex; flex-direction: column; gap: 10px; }

.prog-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 0 14px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  color: var(--tx);
  font: inherit; text-align: left; cursor: pointer;
  overflow: hidden;
  transition: transform 110ms ease-out, background-color 110ms;
  will-change: transform;
}
.prog-card.pressed { transform: scale(.978); background: var(--glass-2); }
.prog-stripe { flex: none; width: 6px; align-self: stretch; min-height: 74px; }

/* Le même filet, en plus fin, pour une ligne d'historique ou un
   exercice : c'est ce qui relie une entrée à son programme sans
   ajouter un mot de plus. */
.row-stripe { flex: none; width: 5px; align-self: stretch; }
.prog-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 16px 0; min-width: 0; }
.prog-name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.prog-meta { font-size: .8125rem; color: var(--tx-2); }
.chev { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--tx-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.empty { text-align: center; padding: 44px 18px; }
.empty-title { margin: 0 0 7px; font-size: 1.0625rem; font-weight: 600; }
.empty-body { margin: 0; font-size: .875rem; color: var(--tx-2); line-height: 1.5; }

/* ══ Vue poussée ══════════════════════════════════════════ */
.pushed {
  position: absolute; inset: 0;
  z-index: 45;
  background: var(--bg);
  display: flex; flex-direction: column;
  will-change: transform;
  box-shadow: var(--sh-push);
}
.pushed[hidden] { display: none; }
.pushed-bar {
  flex: none;
  display: grid; grid-template-columns: 36px 1fr 36px;
  align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 10px) 14px 12px;
  background: var(--bar);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border-bottom: 1px solid var(--hair);
}
.pushed-title { text-align: center; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.pushed-scroll { flex: 1; overflow-y: auto; padding: 18px 20px calc(var(--safe-b) + 30px); }
.pushed-scroll::-webkit-scrollbar { width: 0; }

.prog-hero {
  border-radius: var(--r-lg);
  padding: 26px 20px;
  margin-bottom: 22px;
}
.prog-hero h1 { margin: 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.06; color: #06140A; }
.prog-hero p { margin: 6px 0 0; font-size: .875rem; color: rgba(0,0,0,.58); font-weight: 550; }
/* Sur un dégradé foncé (bleu, violet, indigo, gris…) le texte passe
   en blanc — c'est heroInk() qui choisit, au contraste. */
.prog-hero.ink-light h1 { color: #fff; }
.prog-hero.ink-light p { color: rgba(255,255,255,.82); }

/* Le bouton principal d'une vue poussée reste sous le pouce : sur un
   programme de 11 exercices, il fallait descendre tout en bas. */
.pushed-foot {
  flex: none;
  padding: 12px 20px calc(var(--safe-b) + 16px);
  background: var(--bar);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border-top: 1px solid var(--hair);
}
.pushed-foot .primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; }
.pushed-foot .primary .primary-label { color: var(--accent-ink); }

.ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-row, .draft-row {
  display: flex; align-items: center; gap: 13px;
  padding: 0 14px 0 0;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid transparent;
  overflow: hidden;          /* le filet suit l'arrondi */
}
.ex-row > .ex-num, .draft-row > .ex-num { margin-left: 14px; }
.ex-row > .row-stripe + .ex-num, .draft-row > .row-stripe + .ex-num { margin-left: 0; }
.ex-row.ss { border-color: rgba(10,132,255,.28); background: rgba(10,132,255,.07); }

/* Dans l'éditeur la liste reste à plat — sinon le glissé qui
   réordonne ne verrait plus des rangées sœurs — alors c'est la
   teinte qui dit l'enchaînement. Fond OPAQUE et non du verre :
   l'action « supprimer » est posée dessous et transparaîtrait. */
.draft-row { background: var(--elev); }
.draft-row.ss {
  background: linear-gradient(rgba(10,132,255,.1), rgba(10,132,255,.1)), var(--elev);
  border-color: rgba(10,132,255,.3);
}

/* Un superset se lit comme UN bloc : l'encadré porte l'identité,
   les rangées à l'intérieur redeviennent neutres pour qu'on voie
   d'un coup d'œil ce qui s'enchaîne. */
.ss-group {
  list-style: none;
  border: 1px solid rgba(10,132,255,.3);
  background: rgba(10,132,255,.06);
  border-radius: var(--r-md);
  padding: 9px;
  display: flex; flex-direction: column; gap: 7px;
}
.ss-head {
  margin: 0; padding: 2px 4px 0;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ss-head b {
  font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue-tx);
}
.ss-head em { font-style: normal; font-size: .75rem; color: var(--tx-2); }
.ss-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-group .ex-row.ss { background: var(--glass-2); border-color: transparent; }
.ex-num {
  flex: none; width: 24px; text-align: center;
  font-size: .8125rem; font-weight: 600; color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
.ex-row.ss .ex-num b, .draft-row.ss .ex-num b { color: var(--blue-tx); }
.ex-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 0; }
.ex-title { font-size: .9375rem; font-weight: 550; }
.ex-sub { font-size: .75rem; color: var(--tx-2); }
.ex-best { font-size: .875rem; font-weight: 600; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.ex-best em { font-style: normal; font-size: .625rem; color: var(--tx-3); margin-left: 2px; }

.draft-list { display: flex; flex-direction: column; gap: 8px; }

/* ══ Glissé pour supprimer ════════════════════════════════ */
.swipe-row {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--elev);
  touch-action: pan-y;
}
.swipe-surface { position: relative; z-index: 1; background: var(--elev); will-change: transform; }
.swipe-action {
  position: absolute; top: 1px; right: 1px; bottom: 1px;
  width: 88px;
  background: var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  color: #fff; padding: 0;
}
.swipe-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ══ Historique ═══════════════════════════════════════════ */
.log-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.day { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.day-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 3px 3px; }
.day-name { font-size: .8125rem; font-weight: 650; letter-spacing: .01em; color: var(--tx-2); }
.day-vol { font-size: .75rem; color: var(--tx-3); }

.log-row { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 0; }
.log-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 0; }
.log-name { font-size: .9375rem; font-weight: 550; }
.log-detail { font-size: .8125rem; color: var(--tx-2); }
.log-tag {
  flex: none;
  font-size: .625rem; font-weight: 600; letter-spacing: .04em;
  color: var(--tx-2);
  background: var(--fill);
  border-radius: 100px;
  padding: 4px 9px;
  max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══ Segmenté, pilule ═════════════════════════════════════ */
.segmented {
  display: flex; gap: 3px;
  padding: 3px;
  background: var(--fill);
  border-radius: 13px;
  margin-bottom: 14px;
}
.segmented button {
  flex: 1;
  border: none; border-radius: 10px;
  background: transparent;
  color: var(--tx-2);
  font: inherit; font-size: .8125rem; font-weight: 550;
  padding: 9px 4px; cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.segmented button.on { background: var(--glass-2); color: var(--tx); }
:root[data-theme="light"] .segmented button.on { box-shadow: 0 1px 3px rgba(0,0,0,.13), 0 0 0 .5px rgba(0,0,0,.04); }
.icon-btn[disabled] { opacity: .3; pointer-events: none; }
.segmented.small button { font-size: .75rem; padding: 7px 4px; }

.picker-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--glass);
  color: var(--tx-2);
  font: inherit; font-size: .9375rem; font-weight: 550;
  cursor: pointer;
  transition: transform 90ms ease-out;
}
.picker-pill.filled, .picker-pill#ex-picker-btn { color: var(--tx); }
.picker-pill:active { transform: scale(.98); }
.picker-pill svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--tx-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.picker-pill.wide { border-radius: var(--r-md); }

/* ══ Cartes, stats ════════════════════════════════════════ */
.card-surface {
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--hair);
  padding: 14px;
}
.card-surface.block { padding: 18px; margin-bottom: 14px; }
.card-surface h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 650; letter-spacing: -.015em; }
.card-surface.danger { border-color: rgba(255,69,58,.2); }

.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 14px; }
.stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 12px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--hair);
}
.stat-val { font-size: 1.375rem; font-weight: 650; letter-spacing: -.028em; }
.stat-key { font-size: .6875rem; letter-spacing: .03em; color: var(--tx-2); }

/* ══ Graphiques ═══════════════════════════════════════════ */
.chart-host { position: relative; }
.chart-wrap { position: relative; touch-action: pan-y; }
.chart-wrap svg { display: block; overflow: visible; }
.chart-empty { margin: 0; padding: 34px 10px; text-align: center; color: var(--tx-2); font-size: .875rem; }
.chart-single { padding: 22px 8px; text-align: center; }
.chart-single-val { display: block; font-size: 2.5rem; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.chart-single-val em { font-style: normal; font-size: 1rem; color: var(--tx-2); margin-left: 4px; font-weight: 500; }
.chart-single-key { display: block; margin-top: 8px; font-size: .8125rem; color: var(--tx-2); line-height: 1.45; }

.chart-tip {
  position: absolute; top: 2px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: var(--pop);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  pointer-events: none;
  white-space: nowrap;
}
.chart-tip b { font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.chart-tip i { font-style: normal; font-size: .6875rem; color: var(--tx-2); }
.chart-tip u { text-decoration: none; font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--orange); }

.value-table { margin-top: 4px; border-top: 1px solid var(--line); }
.vrow {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 3px;
  border-bottom: 1px solid var(--grid);
  font-size: .8125rem; color: var(--tx-2);
}
.vrow b { margin-left: auto; color: var(--tx); font-weight: 600; }
.vrow em { font-style: normal; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }

/* ══ Formulaires ══════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .75rem; font-weight: 600; letter-spacing: .03em; color: var(--tx-2); }
.input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  color: var(--tx);
  font: inherit; font-size: 1rem;
  padding: 13px 14px;
  -webkit-appearance: none; appearance: none;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--glass-2); }
textarea.input { resize: vertical; line-height: 1.45; }
.input.search { margin-bottom: 12px; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-bottom: 16px; }
.inline-form .field { margin-bottom: 0; }
.inline-form .primary { width: auto; padding: 0 20px; }
/* Le poids du jour se tape debout, une main sur la barre : la
   cible est plus haute que les autres champs, et le bouton suit. */
.inline-form .input { height: 54px; padding: 0 16px; font-size: 1.125rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.inline-form .primary.compact { height: 54px; }
/* Les flèches natives du champ nombre volent la moitié de la
   largeur sur desktop. */
.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--glass);
  font-size: .875rem; cursor: pointer;
}
.check-row input { width: 19px; height: 19px; accent-color: var(--accent); }

/* ══ Feuilles ═════════════════════════════════════════════ */
.scrim { position: absolute; inset: 0; z-index: 50; background: var(--scrim); opacity: 0; will-change: opacity; }
.scrim[hidden] { display: none; }

.sheet {
  position: absolute;
  z-index: 60;
  left: 0; right: 0; bottom: 0;
  max-height: 92%;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--sheet);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid var(--sheet-line);
  box-shadow: var(--sh-2);
  transform: translate3d(0,100%,0);
  will-change: transform;
  touch-action: none;
}
.sheet[hidden] { display: none; }
.grabber { flex: none; width: 38px; height: 5px; border-radius: 100px; background: var(--line-hi); margin: 9px auto 2px; }
.sheet-scroll { touch-action: pan-y; overflow-y: auto; padding: 12px 22px calc(var(--safe-b) + 22px); }
.sheet-scroll::-webkit-scrollbar { width: 0; }
.sheet-h { margin: 6px 0 14px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.028em; }

.pick-list { display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; margin-bottom: 8px; }
.pick-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 14px;
  border: none; border-radius: var(--r-md);
  background: var(--glass);
  color: var(--tx);
  font: inherit; font-size: .9375rem; text-align: left; cursor: pointer;
  transition: background-color 100ms ease-out, transform 90ms ease-out;
}
.pick-row:active { transform: scale(.985); background: var(--glass-2); }
.pick-row.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pick-row.create { background: rgba(10,132,255,.12); color: var(--blue-tx); }
.pick-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-sub { font-style: normal; font-size: .75rem; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pick-row.on .tick { stroke: var(--accent-tx); }

.accent-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0 auto 6px; max-width: 296px; }
.accent {
  aspect-ratio: 1; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  will-change: transform;
}
.accent.on { outline: 2px solid var(--tx); outline-offset: 3px; }
/* Couleur déjà portée par un autre programme : en retrait, pas
   interdite. */
.accent.used { opacity: .34; }
.accent.used.on { opacity: 1; }

/* Poignée de réordonnancement — point de saisie séparé du glissé
   horizontal : vertical pour l'ordre, horizontal pour supprimer. */
.drag-handle {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; margin: -6px -6px -6px 0;
  color: var(--tx-3);
  cursor: grab; touch-action: none;
}
.drag-handle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.drag-handle:active { cursor: grabbing; color: var(--tx-2); }

/* Le maillon : lie l'exercice à celui du dessus. Allumé, il est le
   seul repère qui dit « ces deux-là s'enchaînent ». */
.link-btn {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; margin-right: -2px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--tx-3);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease-out, background-color .16s ease, color .16s ease;
}
.link-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.link-btn.on { background: rgba(10,132,255,.15); color: var(--blue-tx); }
.link-btn:active { transform: scale(.88); }
.link-btn.spacer { pointer-events: none; }
.swipe-row.lifted { z-index: 5; box-shadow: var(--sh-card); }
/* Opaque, sinon l'action « supprimer » posée dessous transparaît
   à travers la rangée soulevée. */
.swipe-row.lifted .draft-row { background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-hi); }
.swipe-row.lifted .swipe-action { opacity: 0; }

/* ══ Photos ═══════════════════════════════════════════════ */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 14px; }
.photo { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--glass); cursor: pointer; }
.photo img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.photo figcaption { padding: 8px 10px; font-size: .6875rem; color: var(--tx-2); }

.lightbox {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(0,0,0,.92);
  display: grid; place-items: center;
  padding: 20px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-md); }
.lightbox-close { position: absolute; top: calc(var(--safe-t) + 14px); right: 16px; background: var(--glass-2); }

/* ══ Toast ════════════════════════════════════════════════ */
.toast {
  position: absolute;
  z-index: 90;
  left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-tab) + 18px);
  transform: translate3d(-50%,22px,0);
  max-width: 84%;
  padding: 12px 18px;
  border-radius: 100px;
  background: var(--toast);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font-size: .8125rem; font-weight: 550;
  text-align: center;
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.toast[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════
   SÉANCE
   ════════════════════════════════════════════════════════════ */
.session {
  position: absolute; inset: 0;
  z-index: 70;
  display: flex; flex-direction: column;
  background: var(--bg);
  will-change: transform, opacity;
}
.session[hidden] { display: none; }
.session::before {
  content: "";
  position: absolute; inset: -30% -30% auto -30%; height: 70%;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%);
  pointer-events: none;
}

.chrome-top {
  position: relative; z-index: 30; flex: none;
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 10px) 14px 12px;
  background: var(--bar);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border-bottom: 1px solid var(--hair);
}
.head-mid { text-align: center; min-width: 0; }
.head-title { margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-sub { margin: 1px 0 0; font-size: .75rem; letter-spacing: .012em; color: var(--tx-2); display: flex; align-items: center; justify-content: center; gap: 7px; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--tx-3); flex: none; }

.progress-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grid); }
.progress-fill { height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }

.pr-banner {
  position: absolute; z-index: 25;
  top: calc(var(--safe-t) + 58px); left: 14px; right: 14px;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  background: rgba(255,159,10,.16);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,159,10,.34);
  box-shadow: var(--sh-1);
  transform: translate3d(0,-140%,0);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.pr-medal { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--orange); }
.pr-medal svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pr-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pr-text strong { font-size: .8125rem; font-weight: 650; letter-spacing: .01em; color: var(--orange-tx); }
.pr-text em { font-style: normal; font-size: .75rem; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stack { position: relative; z-index: 10; flex: 1 1 auto; min-height: 0; touch-action: pan-y; }

.card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 22px 20px 6px;
  overflow-y: auto; overscroll-behavior: contain;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
}
.card::-webkit-scrollbar { width: 0; }
/* Calée en haut : centrée, elle laissait ~200 px de vide au-dessus
   du nom sur un exercice court, et sautait d'un exo à l'autre. */
.card-inner { margin: 6px 0 auto; width: 100%; }

.badge {
  display: inline-block;
  font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue-tx);
  background: rgba(10,132,255,.14);
  border: 1px solid rgba(10,132,255,.3);
  padding: 4px 9px; border-radius: 100px; margin-bottom: 12px;
}
.ex-name { margin: 0; font-size: clamp(1.8rem, 8.4vw, 2.4rem); font-weight: 700; line-height: 1.03; letter-spacing: -.032em; }
.ex-target { margin: 9px 0 0; font-size: .875rem; color: var(--tx-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-target b { font-weight: 600; color: var(--tx); }
/* Deux ou trois noms sur la même carte : le corps de titre plein
   format les pousserait hors de l'écran avant le premier tour. */
.ss-title {
  font-size: clamp(1.35rem, 5.6vw, 1.75rem);
  line-height: 1.12;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px .35em;
}
.ss-title i { font-style: normal; font-weight: 600; font-size: .8em; color: var(--accent-tx); }

.ex-note {
  margin: 12px 0 0; padding: 10px 13px;
  border-left: 2px solid rgba(10,132,255,.5);
  background: rgba(10,132,255,.07);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .8125rem; color: var(--tx-2); line-height: 1.45;
}

.sets { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.set {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid transparent;
  will-change: transform;
}
.set-idx { font-size: .8125rem; font-weight: 600; color: var(--tx-3); text-align: center; font-variant-numeric: tabular-nums; }

/* Séparateur de tour : c'est lui qui donne au superset sa forme —
   tour 1 (A1 puis A2), tour 2, et ainsi de suite. */
.round-key {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 2px -1px;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3);
}
.round-key:first-child { margin-top: 0; }
.round-key::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.round-key.done { color: color-mix(in srgb, var(--accent-tx) 75%, transparent); }
.round-key.done::after { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* Dans un superset la rangée porte le nom de l'exercice : sans lui,
   deux lignes de chiffres identiques ne voudraient rien dire. */
.ss-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ss-ex {
  font-size: .75rem; font-weight: 550; color: var(--tx-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set.done .ss-ex { color: var(--tx-3); }
.set.active .ss-ex { color: var(--tx); font-size: .8125rem; }
.set-vals { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.num { position: relative; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tx-3); font-size: 1.0625rem; }
.unit { font-size: .75rem; color: var(--tx-3); font-weight: 500; }
.times { font-size: .8125rem; color: var(--tx-3); margin: 0 3px; }
.set-check { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--line-hi); display: grid; place-items: center; }
.set-check svg { width: 13px; height: 13px; fill: none; stroke: var(--accent-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }

.set.done { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.set.done .set-idx { color: color-mix(in srgb, var(--accent-tx) 78%, transparent); }
.set.done .num { color: var(--tx); }
.set.done .unit, .set.done .times { color: var(--tx-3); }
.set.done .set-check { background: var(--accent); border-color: var(--accent); }
.set.done .set-check svg { opacity: 1; }

.set.active { background: var(--glass-2); border-color: var(--line-hi); padding: 16px 14px; box-shadow: var(--sh-card); }
.set.active .num {
  color: var(--tx); font-size: 2rem; letter-spacing: -.035em;
  cursor: ns-resize; touch-action: none;
  padding: 2px 4px; margin: -2px -4px; border-radius: 8px;
  display: inline-block; will-change: transform;
}
.set.active .unit, .set.active .times { color: var(--tx-2); font-size: .875rem; }
.set.active .num.scrubbing { background: var(--glass-2); color: var(--tx); }
.set.active .num.unset { color: var(--tx-2); text-decoration: underline dashed var(--line-hi); text-underline-offset: 7px; }

.num-glow { position: absolute; inset: -9px -11px; border-radius: 13px; border: 2px solid var(--orange); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.scrub-hint { grid-column: 2 / -1; margin: 6px 0 0; font-size: .6875rem; letter-spacing: .02em; color: var(--tx-3); }

.chrome-bottom {
  position: relative; z-index: 30; flex: none;
  padding: 12px 20px calc(var(--safe-b) + 16px);
  background: var(--bar);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border-top: 1px solid var(--hair);
}
.dots { display: flex; justify-content: center; align-items: center; gap: 7px; height: 20px; margin-bottom: 10px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dot); will-change: transform, background-color; }

.hint {
  position: absolute; z-index: 40;
  left: 20px; right: 20px; bottom: calc(var(--safe-b) + 104px);
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--hintbg);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  pointer-events: none; opacity: 0;
  will-change: transform, opacity;
}
.hint[hidden] { display: none; }
.hint-row { display: flex; align-items: center; gap: 11px; font-size: .8125rem; color: var(--tx-2); }
.hint-row svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent-tx); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.sheet-kicker { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-tx); }
.sheet-title { margin: 5px 0 20px; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.sheet-block { margin-top: 22px; }
.pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pr-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 14px; border-radius: var(--r-md);
  background: rgba(255,159,10,.11);
  border: 1px solid rgba(255,159,10,.26);
  font-size: .875rem;
}
.pr-list b { font-weight: 600; }
.pr-list span { margin-left: auto; color: var(--orange); font-weight: 650; font-variant-numeric: tabular-nums; }
.pr-list i { font-style: normal; color: var(--tx-3); font-size: .75rem; }

.streak-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.streak-num { font-size: 2.75rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--accent-tx); font-variant-numeric: tabular-nums; }
.streak-lbl { font-size: .8125rem; line-height: 1.2; color: var(--tx-2); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 272px; }
.cal-cell { aspect-ratio: 1; border-radius: 6px; background: var(--grid); }
.cal-cell.on { background: color-mix(in srgb, var(--accent) 82%, transparent); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--tx); }
.cal-legend { margin: 12px 0 0; font-size: .6875rem; color: var(--tx-3); display: flex; align-items: center; gap: 7px; }
.cal-swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }
.sheet-cta { margin-top: 26px; }

/* ══ Calendrier mensuel (Historique) ══════════════════════
   Une case par jour, pleine quand il y a eu une séance. Les
   flèches ET un glissé horizontal changent de mois : le geste
   est 1:1, la page suit le doigt et repart à sa vitesse. */
.cal-card { padding: 15px 14px 16px; margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.cal-month { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.cal-title { font-size: 1rem; font-weight: 650; letter-spacing: -.018em; text-transform: capitalize; }
.cal-sum { font-size: .6875rem; letter-spacing: .03em; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.cal-viewport { overflow: hidden; margin: 0 -2px; padding: 0 2px; touch-action: pan-y; }
.cal-slide { will-change: transform; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 7px; }
.cal-dow span { text-align: center; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-day {
  position: relative; aspect-ratio: 1.18;   /* un peu écrasé : 6 rangées tiennent sans pousser la liste hors de l'écran */
  display: grid; place-items: center;
  border: none; padding: 0; border-radius: 9px;
  background: var(--fill);
  color: var(--tx-2);
  font: inherit; font-size: .75rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 90ms ease-out;
  will-change: transform;
}
.cal-day:active { transform: scale(.9); }
.cal-day.out { background: none; color: var(--tx-3); opacity: .5; }
.cal-day.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cal-day.today { box-shadow: inset 0 0 0 1.8px var(--line-hi); }
.cal-day.on.today { box-shadow: inset 0 0 0 1.8px var(--tx); }
.cal-day.sel { outline: 2px solid var(--accent-tx); outline-offset: 2px; }
.cal-foot { display: flex; align-items: center; gap: 7px; margin: 13px 0 0; font-size: .6875rem; color: var(--tx-3); }
.cal-foot .cal-swatch { background: var(--accent); }
.cal-clear {
  margin-left: auto; border: none; background: none; padding: 2px 0;
  color: var(--accent-tx); font: inherit; font-size: .6875rem; font-weight: 600; cursor: pointer;
}

/* ══ Apparence (Réglages) ═════════════════════════════════ */
.sw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 2px auto 0; max-width: 296px; }
.sw {
  position: relative; aspect-ratio: 1;
  border: none; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  transition: transform 90ms ease-out;
  will-change: transform;
}
.sw:active { transform: scale(.88); }
.sw.on { outline: 2px solid var(--tx); outline-offset: 3px; }
.sw svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.sw-name { margin: 13px 0 0; text-align: center; font-size: .8125rem; font-weight: 550; color: var(--tx-2); }
.sw-name b { color: var(--accent-tx); font-weight: 650; }

/* ════════════════════════════════════════════════════════════
   Accessibilité — trois signaux indépendants
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-transparency: reduce) {
  .chrome-top, .chrome-bottom, .page-bar, .pushed-bar, .pushed-foot, .tabbar { background: var(--bar-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sheet, .hint, .pr-banner, .toast, .chart-tip { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sheet  { background: var(--sheet-solid); }
  .hint   { background: var(--hint-solid); }
  .toast  { background: var(--toast-solid); }
  .chart-tip { background: var(--pop-solid); }
  .pr-banner { background: var(--pr-solid); }
}

@media (prefers-contrast: more) {
  :root {
    --tx-2: rgba(242,243,245,.82); --tx-3: rgba(242,243,245,.6);
    --line: rgba(255,255,255,.34); --line-hi: rgba(255,255,255,.5);
  }
  :root[data-theme="light"] {
    --tx-2: rgba(20,22,26,.84); --tx-3: rgba(20,22,26,.62);
    --line: rgba(0,0,0,.32); --line-hi: rgba(0,0,0,.48);
  }
  .set, .stat, .card-surface, .prog-card, .ex-row, .ss-group { border-color: var(--line); }
  .chrome-top, .chrome-bottom, .page-bar, .tabbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app::before, .session::before { display: none; }
  .icon-btn:active, .primary:active, .tile-btn:active, .ghost-btn:active, .pick-row:active, .picker-pill:active { transform: none; }
  .prog-card.pressed { transform: none; }
}

:focus-visible { outline: 2px solid var(--accent-tx); outline-offset: 2px; border-radius: 6px; }

/* ════════════════════════════════════════════════════════════
   SÉANCE MODIFIABLE, CARDIO, NOTES DE SÉANCE
   ════════════════════════════════════════════════════════════ */

/* En séance, la feuille générique (menu ⋯, sélecteur d'exercice)
   doit passer AU-DESSUS de l'écran de séance, qui est à 70. */
body.in-session #scrim { z-index: 75; }
body.in-session #sheet { z-index: 76; }

/* ── Menu ⋯ de la séance ── */
.menu-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.menu-list .pick-row .tick { color: var(--tx-3); }
.pick-row.warn { color: var(--orange-tx); }
.pick-row.warn .tick { color: var(--orange-tx); }
.segmented.who { margin-bottom: 14px; }
.segmented.who button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; padding-right: 8px; }

.stepper-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 14px; margin-bottom: 12px;
  border-radius: var(--r-md); background: var(--glass);
}
.stepper-row > span { display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; }
.stepper-row > span b { font-weight: 600; }
.stepper-row em { font-style: normal; font-size: .75rem; color: var(--tx-3); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 44px; height: 40px; border: 0; border-radius: 11px;
  background: var(--glass-2); color: var(--tx);
  font: inherit; font-size: 1.25rem; font-weight: 500; line-height: 1; cursor: pointer;
  transition: transform 90ms ease-out, background-color 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.stepper button:active { transform: scale(.92); background: var(--line-hi); }
.stepper b { min-width: 34px; text-align: center; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; display: inline-block; }

/* ── Exercice passé ── */
.card.is-skipped .card-inner > :not(.sets) { opacity: .45; }
.skip-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-hi);
  font-size: .8125rem; color: var(--tx-2);
}
.skip-txt b { font-weight: 600; color: var(--tx); }
.skip-undo {
  flex: none; height: 34px; padding: 0 14px;
  border: 0; border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-tx);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  transition: transform 90ms ease-out;
}
.skip-undo:active { transform: scale(.94); }

/* ── Carte cardio ── */
.cardio-form {
  padding: 16px 14px 14px;
  border-radius: var(--r-md);
  background: var(--glass-2); border: 1px solid var(--line-hi); box-shadow: var(--sh-card);
}
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cf.main { grid-column: 1 / -1; }
.cf-key { font-size: .6875rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin: 0; }
.cf-in {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--glass); border: 1px solid transparent;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.cf-in:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--glass-2); }
.cf-in input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; outline: 0; background: none; padding: 0;
  color: var(--tx); font: inherit; font-size: 1.375rem; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.cf.main .cf-in input { font-size: 2rem; letter-spacing: -.035em; }
.cf-in input::placeholder { color: var(--tx-3); font-weight: 500; }
.cf-in input::-webkit-inner-spin-button, .cf-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cf-in em { font-style: normal; font-size: .8125rem; color: var(--tx-2); }
.cf-int-key { margin: 14px 0 6px; }
.segmented.intensity { margin: 0; }
.cardio-done .num { font-size: .9375rem; letter-spacing: -.01em; }
.cardio-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ── Notes de séance (feuille de fin + historique) ── */
#session-note { width: 100%; resize: none; }
label.block-key { display: block; }
.day-note {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; padding: 10px 13px;
  border: 0; border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--tx); font: inherit; text-align: left; cursor: pointer;
  transition: transform 90ms ease-out;
}
.day-note:active { transform: scale(.99); }
.day-note-k { font-size: .6875rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-tx); }
.day-note-t { font-size: .8125rem; line-height: 1.45; color: var(--tx-2); white-space: pre-wrap; }

/* Le maillon des supersets (plus haut) a repris le nom `.link-btn`
   du lien texte « Voir les valeurs » et lui imposait 32 px de large :
   le lien s'empilait sur trois lignes. On lui rend sa forme. */
.chart-links .link-btn { display: inline-block; width: auto; height: auto; padding: 12px 2px; margin: 0; border-radius: 0; }
.chart-links .link-btn:active { transform: none; }
.chart-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════
   BILAN, SAUVEGARDE, PROGRESSION, MUSCLES, HISTORIQUE D'EXERCICE
   ════════════════════════════════════════════════════════════ */

/* ── Bilan de la semaine (Programmes) ── */
.week-card { padding: 16px 14px 2px; margin-bottom: 18px; }
.week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 12px; }
.week-head h3 { margin: 0; }
.week-range { font-size: .75rem; color: var(--tx-3); }
.week-card .stat { background: var(--glass); }
/* Le delta reste en encre neutre : un « −2 » n'est pas une faute. */
.stat-delta { font-size: .625rem; line-height: 1.3; color: var(--tx-3); letter-spacing: .01em; }

/* ── Rappel de sauvegarde ── */
.backup-card {
  padding: 15px 16px; margin-bottom: 14px;
  border-color: color-mix(in srgb, var(--orange) 34%, transparent);
  background: color-mix(in srgb, var(--orange) 8%, var(--glass));
}
.backup-k { margin: 0 0 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-tx); }
.backup-t { margin: 0 0 12px; font-size: .875rem; line-height: 1.45; color: var(--tx-2); }
.backup-t b { color: var(--tx); font-weight: 600; }
.backup-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* Boutons pilule partagés par la bulle de progression et le rappel. */
.nudge-yes, .nudge-no {
  height: 36px; padding: 0 15px; border: 0; border-radius: 100px;
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  transition: transform 90ms ease-out, background-color 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.nudge-yes { background: var(--accent); color: var(--accent-ink); }
.nudge-no { background: var(--glass-2); color: var(--tx-2); }
.nudge-yes:active, .nudge-no:active { transform: scale(.95); }

/* ── Bulle de progression (séance) ── */
.nudge {
  display: grid; grid-template-columns: 30px 1fr; gap: 4px 11px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  will-change: transform;
}
.nudge-ic {
  grid-row: span 2; align-self: start;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.nudge-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nudge-txt { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; line-height: 1.35; color: var(--tx-2); }
.nudge-txt b { font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: var(--accent-tx); }
.nudge-txt em { font-style: normal; font-weight: 650; color: var(--tx); }
.nudge-act { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }

/* ── Historique d'un exercice ── */
.hist-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hist-item { padding: 12px 14px; border-radius: var(--r-md); background: var(--glass); }
.hist-head { margin: 0 0 7px; display: flex; align-items: baseline; gap: 8px; font-size: .8125rem; }
.hist-head b { font-weight: 600; }
.hist-head em { font-style: normal; font-size: .6875rem; color: var(--tx-3); }
.hist-head span { margin-left: auto; font-weight: 600; color: var(--tx-2); }
.hist-sets { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.hist-set { padding: 4px 9px; border-radius: 8px; background: var(--glass-2); font-size: .8125rem; font-weight: 550; }
.hist-set i { font-style: normal; color: var(--tx-3); margin: 0 2px; }
/* Record : anneau, pas une deuxième couleur de remplissage. */
.hist-set.pr { box-shadow: inset 0 0 0 1.5px var(--orange); }

/* ── Corriger une entrée ── */
.log-row { cursor: pointer; }
.edit-sets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.edit-set { display: grid; grid-template-columns: 18px 1fr auto 1fr 36px; align-items: center; gap: 7px; }
.edit-idx { font-size: .75rem; font-weight: 600; color: var(--tx-3); text-align: center; font-variant-numeric: tabular-nums; }
.edit-in {
  display: flex; align-items: baseline; gap: 5px; min-width: 0;
  padding: 9px 11px; border-radius: 12px; background: var(--glass);
  border: 1px solid transparent;
}
.edit-in:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--glass-2); }
.edit-in input {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: none; padding: 0;
  color: var(--tx); font: inherit; font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.edit-in input::-webkit-inner-spin-button, .edit-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.edit-in em { font-style: normal; font-size: .6875rem; color: var(--tx-3); }
.edit-del { width: 36px; height: 36px; }
.edit-sets + .tile-btn { margin-bottom: 18px; }

/* ── Séries par muscle ── */
.muscle-card { padding: 16px; margin: 14px 0 0; }
.muscle-sum { margin: 0 0 12px; font-size: .8125rem; color: var(--tx-2); }
.muscle-sum b { color: var(--tx); font-weight: 650; }
.mbars { display: flex; flex-direction: column; gap: 2px; }
.mbar {
  display: grid; grid-template-columns: 76px 1fr 64px; align-items: center; gap: 10px;
  width: 100%; padding: 8px 4px; margin: 0 -4px; box-sizing: content-box;
  border: 0; border-radius: 10px; background: none;
  color: var(--tx); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 100ms ease-out;
}
.mbar:active { background: var(--glass); }
.mbar-name { font-size: .8125rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar-track { height: 10px; border-radius: 0 4px 4px 0; background: var(--grid); overflow: hidden; }
.mbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); }
.mbar-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.mbar-val b { font-size: .9375rem; font-weight: 650; }
.mbar-val i { font-style: normal; font-size: .625rem; color: var(--tx-3); white-space: nowrap; }
.mbar.zero .mbar-name, .mbar.zero .mbar-val b { color: var(--tx-3); }

/* ── Pastilles (choix du muscle) ── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.chip {
  height: 36px; padding: 0 14px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--glass); color: var(--tx-2);
  font: inherit; font-size: .8125rem; font-weight: 550; cursor: pointer;
  transition: background-color 100ms ease-out, color 100ms ease-out;
  will-change: transform;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.week-card { padding-bottom: 12px; }
.week-card .stat-row { margin-bottom: 10px; }
.stat-delta { font-size: .75rem; font-weight: 600; color: var(--tx-2); }
.week-foot { margin: 0 2px; font-size: .6875rem; color: var(--tx-3); }
.hist-pr { margin-left: 6px; font-size: .5625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-tx); vertical-align: 1px; }

/* Une rangée de l'éditeur se touche pour modifier son exercice. */
.draft-row { cursor: pointer; }

/* ════════════════════════════════════════════════════════════
   SÉANCE LIBRE, OBJECTIFS, JALONS, TECHNIQUE
   ════════════════════════════════════════════════════════════ */

/* Nouveau programme + Séance libre côte à côte. */
.tile-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.tile-pair .tile-btn { font-size: .875rem; padding: 15px 10px; }

/* Séance libre vide : la carte invite, elle ne liste rien. */
.empty-session .ex-target { display: block; margin-top: 12px; line-height: 1.5; }

/* ── Objectifs ── */
.goals-card { padding: 16px 14px 14px; margin-bottom: 14px; }
.goals-card .week-head { padding-bottom: 10px; }
.mini-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px 0 9px; border: 0; border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-tx);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  transition: transform 90ms ease-out;
}
.mini-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.mini-btn:active { transform: scale(.94); }
.goal-list { display: flex; flex-direction: column; gap: 6px; }
.goal {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; padding: 12px 13px; border: 0; border-radius: var(--r-md);
  background: var(--glass); color: var(--tx); font: inherit; text-align: left; cursor: pointer;
  transition: transform 90ms ease-out, background-color 100ms ease-out;
}
.goal:active { transform: scale(.985); background: var(--glass-2); }
.goal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .9375rem; }
.goal-top b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-top .tnum { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; color: var(--tx-2); }
.goal-top svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-tx); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.goal-track { height: 8px; border-radius: 100px; background: var(--grid); overflow: hidden; }
.goal-fill { display: block; height: 100%; border-radius: 100px; background: var(--accent); }
.goal-sub { font-size: .75rem; color: var(--tx-3); }
.goal.done { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.goal.done .goal-sub { color: var(--accent-tx); }
.goal-empty { margin: 0 2px; font-size: .8125rem; line-height: 1.45; color: var(--tx-2); }

/* ── Jalons ── */
.badges-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 14px 14px 16px; margin-bottom: 14px;
  color: var(--tx); font: inherit; text-align: left; cursor: pointer;
  transition: transform 90ms ease-out;
}
.badges-row:active { transform: scale(.985); }
.badges-count { flex: none; display: flex; align-items: baseline; gap: 3px; }
.badges-count b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--accent-tx); }
.badges-count i { font-style: normal; font-size: .75rem; color: var(--tx-3); }
.badges-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.badges-txt b { font-size: .9375rem; font-weight: 600; }
.badges-txt em { font-style: normal; font-size: .75rem; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bdg {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  aspect-ratio: 1.15; padding: 10px 8px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line);
}
.bdg-big { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--tx-3); }
.bdg-unit { font-size: .6875rem; color: var(--tx-3); }
.bdg-track { width: 70%; height: 4px; margin-top: 7px; border-radius: 100px; background: var(--grid); overflow: hidden; }
.bdg-track span { display: block; height: 100%; border-radius: 100px; background: var(--tx-3); }
.bdg.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.bdg.on .bdg-big { color: var(--accent-tx); }
.bdg.on .bdg-unit { color: var(--tx-2); }

/* ── Fin de séance : ce qu'on fête ── */
.win-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.win-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.win-ic {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-size: .75rem; font-weight: 700; letter-spacing: -.02em;
}
.win-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.win-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.win-t b { font-size: .875rem; font-weight: 600; }
.win-t i { font-style: normal; font-size: .75rem; color: var(--tx-2); }
.save-as { margin-top: 22px; }
.save-as + .sheet-cta { margin-top: 10px; }

/* ── Lien de technique sur la carte ── */
.tech-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px 8px 0 0; padding: 7px 13px 7px 9px; border-radius: 100px;
  background: var(--glass-2); color: var(--tx);
  font-size: .8125rem; font-weight: 600; text-decoration: none;
  transition: transform 90ms ease-out;
}
.tech-link svg { width: 18px; height: 18px; padding: 4px; border-radius: 50%; box-sizing: border-box; background: var(--red); fill: #fff; }
.tech-link:active { transform: scale(.95); }
/* Deux tuiles côte à côte : l'icône passe au-dessus du texte, sinon
   « Nouveau programme » se coupe sur deux lignes. */
.tile-pair .tile-btn { flex-direction: column; gap: 6px; margin-top: 12px; }
/* Séance libre : « Ajouter un exercice » sous chaque carte. */
.add-more { list-style: none; }
.add-more .tile-btn { margin-top: 6px; }

/* ══ Fiche d'exercice (js/fiche.js) ══════════════════════
   La même feuille partout : programme, séance, historique,
   Mes exercices. */

/* Le chiffre du − / + est un champ : le toucher ouvre le clavier. */
.step-val {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  min-width: 52px; padding: 0 2px; border-radius: 10px; cursor: text;
  will-change: transform;
}
.step-val input {
  width: 3.4ch; min-width: 0; padding: 6px 0; border: 0; outline: 0; background: none;
  color: var(--tx); font: inherit; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em;
  text-align: center; font-variant-numeric: tabular-nums;
}
.step-val input::placeholder { color: var(--tx-3); font-weight: 500; }
.step-val em { font-style: normal; font-size: .6875rem; color: var(--tx-3); }
.step-val:focus-within { background: var(--glass-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.stepper-row + .stepper-row { margin-top: -6px; }

/* Le nom en titre ; quand on peut le changer, il porte un chevron. */
.fx-title {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 6px 0 16px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--tx); font: inherit; font-size: 1.5rem; font-weight: 700; letter-spacing: -.028em; text-align: left;
}
.fx-title span { min-width: 0; }
.fx-title svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--tx-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.fx-title.empty { color: var(--tx-3); }
.fx-title:active { opacity: .7; }
.segmented.fx-kind { margin: 10px 0 4px; }

/* « L'exercice — partout » : des rangées qui se déplient. */
.disclose .tick { color: var(--tx-3); transition: transform 180ms ease-out; }
.disclose.open .tick { transform: rotate(90deg); }
.fx-panel { padding: 6px 2px 8px; }
.fx-panel .chips { margin-bottom: 4px; }
.fx-panel .input + .input { margin-top: 8px; }
.fx-panel .fineprint { margin-top: 8px; }
.fx-global { margin-bottom: 0; }
.fx-name { margin-bottom: 6px; }

/* Action destructive : là, mais sans crier. */
.fx-danger {
  display: block; width: 100%; margin-top: 6px; padding: 14px;
  border: 0; background: none; cursor: pointer;
  color: var(--red-tx); font: inherit; font-size: .875rem; font-weight: 500;
}
.fx-danger:active { opacity: .6; }

/* Une série : poids − / + × reps − / + et le retrait. */
.fx-set { display: grid; grid-template-columns: 16px auto 10px auto 1fr; align-items: center; gap: 4px; }
.fx-set .stepper { gap: 2px; }
.fx-set .stepper button { width: 32px; height: 36px; font-size: 1.0625rem; border-radius: 10px; }
.fx-set .step-val { min-width: 0; }
.fx-set .step-val input { font-size: 1.0625rem; }
.fx-set .times { margin: 0; text-align: center; }
.fx-set .edit-del { justify-self: end; width: 34px; height: 34px; }
.fx-set [data-step^="fx-w"] input { width: 5ch; }
.fx-set [data-step^="fx-r"] input { width: 2.6ch; }
.stepper-row .step-val { min-width: 78px; }
.sheet-resume { color: var(--tx-2); margin-top: 4px; }
/* Fourchette de reps : pas de largeur fixe (c'est fit() qui la
   donne), et le chiffre ne se fait jamais rogner. */
.step-val input.range { width: auto; text-overflow: clip; }
.stepper-row:has(input.range) .step-val { min-width: 0; padding: 0 6px; }
.stepper-row > span { min-width: 0; } .stepper-row em { white-space: nowrap; }