/* ============================================================
   Composants partagés desktop + mobile : écrans natifs (views.js),
   formulaires groupés, séance. Les jetons --m-* ont ici leur
   valeur desktop ; mobile.css, chargé après, les redéfinit.
   ============================================================ */

:root {
  --m-gutter: 1.5rem;
  --m-radius: 20px;
  --m-radius-sm: 16px;
  --m-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --m-bg: #0a0b0e;
  --m-card: #14171c;
  --m-card-2: #1b1f26;
  --m-hairline: rgba(255, 255, 255, 0.07);
}

/* ============================================================
   Écrans natifs (mobile-views.js) : Tableau, Repas, Suivi,
   Objectifs. Même vocabulaire que la page Historique.
   ============================================================ */

:root {
  --chart-bg: #14161a;
  /* Couleurs fixes, façon anneaux Activité : elles ne suivent pas le
     thème, sinon calories et protéines se confondent avec l'accent. */
  --ring-kcal: 255, 69, 105;
  --ring-prot: 52, 211, 120;
  --ring-sess: 90, 200, 250;
  --ring-carb: 255, 209, 102;
  --ring-fat: 197, 140, 255;
}


.mv-view .mv-ic,
.fd-sheet .mv-ic,
.mv-view .hs-stat-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.mv-card {
  position: relative;
  padding: 1rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius);
}

.mv-section {
  margin-top: 1.5rem;
}

.mv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.8rem;
  margin: 0 0.25rem 0.65rem;
}

.mv-head .eyebrow {
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
}

.mv-head h2 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.022em;
}

.mv-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent-text);
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}

.mv-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.mv-pill.accent {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-text);
}

.mv-pill.coral {
  background: rgba(255, 122, 89, 0.14);
  color: var(--coral);
}

.mv-stats {
  margin-top: 0.6rem;
}

.mv-tile strong {
  font-size: 1.35rem;
  white-space: nowrap;
}

.mv-big {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.mv-big small {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.mv-bar {
  display: block;
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
}

.mv-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transform-origin: left;
  animation: mvGrowX 700ms var(--m-spring) both;
}

@keyframes mvGrowX {
  from { transform: scaleX(0); }
}

/* ---------- Anneaux ---------- */

.mv-rings {
  flex: none;
  transform: rotate(-90deg);
}

.mv-ring-track,
.mv-ring-value {
  fill: none;
  stroke-width: 10.5;
}

.mv-ring-track {
  opacity: 0.18;
}

.mv-ring-value {
  stroke-linecap: round;
  stroke-dasharray: var(--c);
  stroke-dashoffset: var(--off);
  animation: mvRing 1100ms var(--m-spring) both;
}

@keyframes mvRing {
  from { stroke-dashoffset: var(--c); }
}

.r-kcal { --tone: var(--ring-kcal); }
.r-prot { --tone: var(--ring-prot); }
.r-sess { --tone: var(--ring-sess); }
.r-carb { --tone: var(--ring-carb); }
.r-fat { --tone: var(--ring-fat); }

.mv-ring-track.r-kcal, .mv-ring-value.r-kcal { stroke: rgb(var(--ring-kcal)); }
.mv-ring-track.r-prot, .mv-ring-value.r-prot { stroke: rgb(var(--ring-prot)); }
.mv-ring-track.r-sess, .mv-ring-value.r-sess { stroke: rgb(var(--ring-sess)); }

.mv-activity {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(var(--accent-rgb), 0.1), transparent 60%),
    var(--m-card);
}

.mv-activity-legend {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.mv-activity-legend .eyebrow {
  margin: 0;
}

.mv-legend-line {
  display: grid;
  gap: 0;
}

.mv-legend-line span {
  color: rgb(var(--tone));
  font-size: 0.74rem;
  font-weight: 800;
}

.mv-legend-line strong {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.mv-legend-line small {
  margin-left: 0.2rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Prochaine séance ---------- */

.mv-next {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  background:
    radial-gradient(130% 140% at 100% 0%, rgba(var(--tone), 0.22), transparent 60%),
    var(--m-card);
  border: 1px solid rgba(var(--tone), 0.3);
  border-radius: var(--m-radius);
  color: var(--text);
  text-align: left;
  transition: transform 180ms var(--m-spring);
}

.mv-next:active {
  transform: scale(0.98);
}

.mv-next-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: rgba(var(--tone), 0.18);
  border-radius: 0.95rem;
  color: rgb(var(--tone));
}

.mv-next-icon .mv-ic {
  width: 1.4rem;
  height: 1.4rem;
}

.mv-next-main {
  display: grid;
  min-width: 0;
}

.mv-next-main small {
  color: rgb(var(--tone));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mv-next-main strong {
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

.mv-next-main span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mv-chev {
  width: 0.95rem !important;
  height: 0.95rem !important;
  color: var(--subtle);
}

/* ---------- Graphiques ---------- */

.mv-chart {
  padding: 0.5rem 0.35rem 0.2rem;
}

.mv-chart canvas {
  display: block;
  width: 100%;
  height: 13rem;
}

.mv-chart-flat {
  margin: 0.4rem -0.65rem -0.5rem;
  padding: 0;
  background: none;
  border: 0;
}

.mv-week-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mv-week-summary div {
  display: grid;
}

.mv-week-summary span {
  color: var(--subtle);
  font-size: 0.72rem;
  font-weight: 800;
}

.mv-week-summary strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mv-week-summary small {
  color: var(--muted);
  font-size: 0.72rem;
}

.mv-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
  height: 9.5rem;
  padding-bottom: 1.3rem;
}

.mv-week-goal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(1.3rem + (100% - 1.3rem) * var(--goal) / 100);
  border-top: 1px dashed rgba(var(--accent-rgb), 0.5);
  pointer-events: none;
}

.mv-week-goal span {
  position: absolute;
  right: 0;
  bottom: 0.15rem;
  color: var(--accent-text);
  font-size: 0.62rem;
  font-weight: 800;
}

.mv-week-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mv-week-bar {
  display: block;
  width: 100%;
  max-width: 1.8rem;
  height: max(var(--h), 4px);
  background: rgba(var(--ring-kcal), 0.35);
  border-radius: 0.5rem 0.5rem 0.3rem 0.3rem;
  transform-origin: bottom;
  animation: hsGrow 700ms var(--m-spring) both;
}

.mv-week-col.ok .mv-week-bar {
  background: linear-gradient(180deg, rgb(var(--ring-kcal)), rgba(var(--ring-kcal), 0.5));
}

.mv-week-col small {
  position: absolute;
  bottom: -1.3rem;
  color: var(--subtle);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mv-week-col.today small {
  color: var(--text);
}

.mv-week-col.today .mv-week-bar {
  box-shadow: 0 0 0 2px var(--m-card), 0 0 0 3px rgba(var(--ring-kcal), 0.8);
}

/* ---------- Formulaires façon Réglages ---------- */

.mv-form {
  display: grid;
  gap: 0.7rem;
}

.mv-group {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
  overflow: hidden;
}

.mv-frow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 3.2rem;
  padding: 0.35rem 1rem;
  margin: 0;
}

.mv-frow + .mv-frow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

.mv-flabel {
  display: grid;
  flex: none;
  color: var(--text);
  font-size: 0.97rem;
  font-weight: 600;
}

.mv-flabel small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.mv-fvalue {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.mv-fvalue input,
.mv-fvalue select {
  width: 100%;
  min-width: 0;
  min-height: 2.4rem;
  padding: 0.2rem 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--accent-text);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
}

.mv-fvalue input::placeholder {
  color: var(--subtle);
  font-weight: 500;
}

.mv-fvalue input[type="date"] {
  display: flex !important;
  justify-content: flex-end;
  width: auto !important;
  flex: 1;
}

.mv-fvalue input[type="date"]::-webkit-date-and-time-value {
  text-align: right;
}

.mv-fvalue input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

.mv-fvalue select {
  width: auto;
  padding-right: 1.3rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-text) 50%),
    linear-gradient(135deg, var(--accent-text) 50%, transparent 50%) !important;
  background-position: calc(100% - 0.55rem) 1.08rem, calc(100% - 0.25rem) 1.08rem !important;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem !important;
  background-repeat: no-repeat !important;
  text-align-last: right;
}

.mv-fvalue em {
  flex: none;
  color: var(--muted);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 700;
}

.mv-frow:focus-within {
  background: rgba(255, 255, 255, 0.03);
}

.mv-toggle .switch {
  flex: none;
}

.mv-frow-area {
  padding: 0.7rem 1rem;
}

.mv-frow-area textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 0.97rem;
  resize: none;
  outline: none;
}

.mv-frow-seg {
  min-height: 3.4rem;
}

.mv-seg {
  display: inline-flex;
  padding: 0.18rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.7rem;
}

.mv-frow-seg .mv-seg {
  margin-left: auto;
}

.mv-seg label {
  position: relative;
}

.mv-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mv-seg span {
  display: block;
  padding: 0.38rem 0.7rem;
  border-radius: 0.55rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  transition: background 220ms var(--m-spring), color 180ms ease;
}

.mv-seg input:checked + span {
  background: var(--m-card-2);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mv-submit {
  width: 100%;
  min-height: 3.3rem;
  font-size: 1rem;
}

/* ---------- Listes groupées ---------- */

.mv-list {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
  overflow: hidden;
}

.mv-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 3.6rem;
  padding: 0.65rem 0.9rem;
  margin: 0;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  --tone: 170, 179, 192;
}

button.mv-row:active,
label.mv-row:active {
  background: rgba(255, 255, 255, 0.06);
}

.mv-row + .mv-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.75rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

.mv-row-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  background: rgba(var(--tone), 0.15);
  border-radius: 0.7rem;
  color: rgb(var(--tone));
}

.mv-row-main {
  display: grid;
  flex: 1;
  gap: 0.1rem;
  min-width: 0;
}

.mv-row-main strong {
  overflow: hidden;
  font-size: 0.95rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mv-row-main span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mv-row-value {
  display: grid;
  justify-items: end;
  flex: none;
}

.mv-row-value strong {
  font-size: 0.96rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mv-row-value small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.mv-tone-accent { --tone: var(--accent-rgb); }
.mv-tone-blue { --tone: 105, 183, 255; }
.mv-tone-gold { --tone: 255, 209, 102; }
.mv-tone-danger { --tone: 255, 94, 108; }

.mv-tone-danger .mv-row-main strong {
  color: var(--danger);
}

.mv-del {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  transition: transform 160ms var(--m-spring), background 160ms ease, color 160ms ease;
}

.mv-del .mv-ic {
  width: 0.85rem;
  height: 0.85rem;
}

.mv-del:active {
  transform: scale(0.88);
  background: rgba(255, 94, 108, 0.2);
  color: var(--danger);
}

.mv-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mv-empty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 1.6rem 1rem;
  background: var(--m-card);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--m-radius-sm);
  color: var(--muted);
  text-align: center;
}

.mv-empty .mv-ic {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--subtle);
}

.mv-empty p {
  margin: 0;
  font-size: 0.88rem;
}

.mv-foot-note {
  margin: 0.7rem 0.3rem 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.mv-foot-note a {
  color: var(--accent-text);
}

/* ---------- Repas ---------- */

.mv-macro-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
}

.mv-macro-ring {
  position: relative;
  display: grid;
  place-items: center;
}

.mv-ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.mv-ring-center strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mv-ring-center small {
  max-width: 4.5rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.2;
}

.mv-macros {
  display: grid;
  gap: 0.6rem;
}

.mv-macro > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.22rem;
}

.mv-macro span {
  color: rgb(var(--tone));
  font-size: 0.74rem;
  font-weight: 800;
}

.mv-macro strong {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mv-macro small {
  color: var(--muted);
  font-size: 0.7rem;
}

.mv-macro .mv-bar i {
  background: rgb(var(--tone));
}

.mv-rail {
  display: flex;
  gap: 0.6rem;
  margin: 0 calc(var(--m-gutter) * -1);
  padding: 0 var(--m-gutter) 0.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--m-gutter);
  scrollbar-width: none;
}

.mv-rail::-webkit-scrollbar {
  display: none;
}

.mv-template {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 0.3rem;
  flex: 0 0 15.5rem;
  scroll-snap-align: start;
  padding: 0.95rem;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-rgb), 0.1), transparent 60%),
    var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
}

.mv-template-slot {
  color: var(--accent-text);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mv-template strong {
  font-size: 0.98rem;
  line-height: 1.25;
}

.mv-template p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.mv-template-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.mv-template-foot b {
  color: var(--text);
}

.mv-add {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  color: var(--accent-ink);
  transition: transform 180ms var(--m-spring);
}

.mv-add .mv-ic {
  stroke-width: 2.6;
}

.mv-add:active {
  transform: scale(0.86);
}

/* Planificateur */

.mv-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.mv-day {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  padding: 0.5rem 0 0.6rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 0.9rem;
  color: var(--muted);
  transition: transform 180ms var(--m-spring), background 200ms ease, border-color 200ms ease;
}

.mv-day small {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mv-day strong {
  color: var(--text);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.mv-day i {
  position: absolute;
  bottom: 0.25rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 999px;
}

.mv-day.st-ok i { background: var(--accent); }
.mv-day.st-low i { background: var(--yellow); }
.mv-day.st-high i { background: var(--coral); }

.mv-day.active {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--accent-text);
}

.mv-day:active {
  transform: scale(0.92);
}

.mv-dayplan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.mv-dayplan-head > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mv-dayplan-head strong {
  font-size: 1.15rem;
}

.mv-dayplan-head > span {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mv-dayplan-head small {
  color: var(--muted);
  font-weight: 700;
}

.mv-dayplan-sub {
  margin: 0.45rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.mv-dayplan-sub b {
  color: var(--yellow);
}

.mv-slots {
  display: grid;
  gap: 0.45rem;
}

.mv-slot {
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 0.95rem;
  transition: border-color 200ms ease, background 200ms ease;
}

.mv-slot.active {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.mv-slot-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.mv-slot-head strong {
  flex: 1;
  font-size: 0.92rem;
}

.mv-slot-head > span:last-child {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.mv-slot.active .mv-slot-head > span:last-child {
  color: var(--accent-text);
}

.mv-slot-icon {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.6rem;
  color: var(--muted);
}

.mv-slot.active .mv-slot-icon {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-text);
}

.mv-slot-icon .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
}

.mv-slot-foods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.mv-food-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.45rem 0.3rem 0.65rem;
  background: var(--m-card-2);
  border: 1px solid var(--m-hairline);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.mv-food-chip .mv-ic {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--subtle);
}

.mv-food-chip:active {
  background: rgba(255, 94, 108, 0.18);
}

.mv-picker {
  margin-top: 0.6rem;
}

.mv-picker-target {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.mv-picker-target b {
  color: var(--accent-text);
}

.mv-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.8rem;
  color: var(--subtle);
}

.mv-search input {
  flex: 1;
  min-height: 2.6rem;
  padding: 0;
  background: none !important;
  border: 0 !important;
  color: var(--text);
  outline: none;
}

.mv-cats {
  display: flex;
  gap: 0.35rem;
  margin: 0.6rem calc(-1rem - 1px) 0.5rem;
  padding: 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.mv-cats::-webkit-scrollbar {
  display: none;
}

.mv-cats .cat-chip {
  flex: none;
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.mv-cats .cat-chip.active {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent-text);
}

.mv-foods {
  display: grid !important;
  gap: 0 !important;
  max-height: 17rem !important;
  margin: 0 -0.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mv-foods .food-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name portion"
    "macros macros";
  gap: 0.05rem 0.6rem;
  width: 100%;
  padding: 0.6rem 0.4rem;
  background: none;
  border: 0;
  border-radius: 0.7rem;
  color: var(--text);
  text-align: left;
}

.mv-foods .food-item + .food-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.4rem;
  right: 0.4rem;
  border-top: 1px solid var(--m-hairline);
}

.mv-foods .food-item:active {
  background: rgba(var(--accent-rgb), 0.12);
}

.mv-foods .food-name {
  grid-area: name;
  font-size: 0.92rem;
  font-weight: 700;
}

.mv-foods .food-portion {
  grid-area: portion;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.mv-foods .food-macros {
  grid-area: macros;
  color: var(--subtle);
  font-size: 0.74rem;
}

.mv-foods .empty {
  min-height: 5rem;
  border: 0;
}

.mv-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  margin: 0.7rem 0;
}

.mv-actions .primary-button,
.mv-actions .ghost-button,
.mv-actions .danger-button {
  min-height: 2.9rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.mv-week-list {
  margin-top: 0.2rem;
}

/* ---------- Suivi ---------- */

.mv-weight {
  overflow: hidden;
}

.mv-weight-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.mv-weight-top .eyebrow {
  margin-bottom: 0.15rem;
}

.mv-weight-top .hs-delta {
  font-size: 0.82rem;
  padding: 0.2rem 0.55rem;
}

.mv-journey {
  margin-top: 0.9rem;
}

.mv-journey-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.45rem 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.mv-journey-track {
  position: relative;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
}

.mv-journey-track i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.35), var(--accent));
  border-radius: inherit;
  animation: mvGrowX 900ms var(--m-spring) both;
  transform-origin: left;
}

.mv-journey-track b {
  position: absolute;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--text);
  border: 3px solid var(--accent);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}

.mv-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.mv-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--m-card);
  border-radius: var(--m-radius-sm);
}

.mv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.6rem 0.7rem 0.6rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  font-size: 0.82rem;
}

.mv-photo figcaption span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.74rem;
  font-weight: 700;
}

.mv-photo .mv-del {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}

.mv-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--m-card);
  border: 1.5px dashed rgba(var(--accent-rgb), 0.4);
  border-radius: var(--m-radius-sm);
  transition: background 200ms ease;
}

.mv-upload:active {
  background: rgba(var(--accent-rgb), 0.08);
}

.mv-upload.filled {
  border-style: solid;
  background: rgba(var(--accent-rgb), 0.08);
}

.mv-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.mv-upload-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 0.85rem;
  color: var(--accent-text);
}

.mv-upload-text {
  display: grid;
  min-width: 0;
}

.mv-upload-text strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mv-upload-text small {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---------- Objectifs ---------- */

.mv-countdown {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb), 0.2), transparent 60%),
    var(--m-card-2);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.mv-countdown .eyebrow {
  margin-bottom: 0.2rem;
}

.mv-countdown-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.mv-countdown .mv-big {
  font-size: 3.2rem;
  color: var(--accent-text);
}

.mv-countdown-main span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.mv-countdown-date {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.mv-timeline {
  position: relative;
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0 0 0 1.6rem;
  list-style: none;
}

.mv-timeline::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  left: 0.42rem;
  border-left: 2px solid var(--m-hairline);
}

.mv-phase {
  position: relative;
}

.mv-phase-dot {
  position: absolute;
  top: 1.05rem;
  left: -1.6rem;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--m-bg);
  border: 2px solid var(--line);
  border-radius: 999px;
}

.mv-phase.done .mv-phase-dot {
  background: var(--subtle);
  border-color: var(--subtle);
}

.mv-phase.now .mv-phase-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.2);
  animation: mPulse 2s ease-in-out infinite;
}

.mv-phase-card {
  padding: 0.85rem 0.95rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
}

.mv-phase.now .mv-phase-card {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb), 0.14), transparent 60%),
    var(--m-card);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.mv-phase.done .mv-phase-card {
  opacity: 0.6;
}

.mv-phase-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.mv-phase-top small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.mv-phase-card strong {
  font-size: 1.02rem;
}

.mv-phase-card p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.mv-rank {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  background: rgba(var(--accent-rgb), 0.14);
  border-radius: 0.7rem;
  color: var(--accent-text);
  font-weight: 800;
}

.mv-prio .mv-row-main strong {
  white-space: normal;
  line-height: 1.3;
}

.mv-prio-ic {
  color: var(--subtle);
}

/* ---------- Séance : les listes du bas prennent le même habillage ---------- */

#training .m-recent .hs-rows {
  background: var(--m-card);
}

@media (prefers-reduced-motion: reduce) {
  .mv-ring-value,
  .mv-bar i,
  .mv-week-bar,
  .mv-journey-track i,
  .mv-phase.now .mv-phase-dot {
    animation: none;
  }
}

.mv-row-main span,
.mv-upload-text small {
  font-weight: 500;
}

.mv-macro-card {
  gap: 0.9rem;
  padding: 0.9rem;
}

.mv-macros,
.mv-macro > div {
  min-width: 0;
}

.mv-macro strong {
  font-size: 0.8rem;
}

.mv-ring-center strong {
  font-size: 1.15rem;
}

/* ============================================================
   Séance : formulaires de performance et d'exercice perso au
   même format que les Réglages (lignes groupées).
   ============================================================ */

#training .compact-form {
  gap: 0.6rem;
}

#training .compact-form .form-grid {
  display: block;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
  overflow: hidden;
}

#training .compact-form .field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 3.1rem;
  padding: 0.3rem 1rem;
}

#training .compact-form .field + .field::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

#training .compact-form .field > span {
  flex: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}

#training .compact-form .field input,
#training .compact-form .field select {
  flex: 1;
  width: auto !important;
  min-width: 0;
  min-height: 2.4rem;
  padding: 0.2rem 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--accent-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-align-last: right;
  outline: none;
}

#training .compact-form .field input::placeholder {
  color: var(--subtle);
  font-weight: 500;
}

#training .compact-form .field input[type="date"] {
  display: flex !important;
  justify-content: flex-end;
}

#training .compact-form .field input[type="date"]::-webkit-date-and-time-value {
  text-align: right;
}

#training .compact-form .field input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

#training .compact-form .field select {
  flex: none;
  padding-right: 1.3rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-text) 50%),
    linear-gradient(135deg, var(--accent-text) 50%, transparent 50%) !important;
  background-position: calc(100% - 0.55rem) 1.08rem, calc(100% - 0.25rem) 1.08rem !important;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem !important;
  background-repeat: no-repeat !important;
}

/* Séries : une grosse case par série, comme les tuiles du récap. */
#training .set-grid {
  grid-template-columns: repeat(auto-fit, minmax(3.6rem, 1fr));
  gap: 0.45rem;
}

#training .set-grid input {
  min-height: 3.6rem;
  padding: 0;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1rem;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color 180ms ease, background 180ms ease;
}

#training .set-grid input::placeholder {
  color: var(--subtle);
  font-size: 0.9rem;
  font-weight: 800;
}

#training .set-grid input:focus {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.6);
  outline: none;
}

#training .set-grid input:not(:placeholder-shown) {
  border-color: rgba(var(--accent-rgb), 0.35);
}

#training .compact-form .inline-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

#training .compact-form .inline-actions:has(.danger-button) {
  grid-template-columns: 1fr auto;
}

#training .compact-form .primary-button {
  width: 100%;
  min-height: 3.2rem;
}

#training .metric-line {
  padding: 0.7rem 0.9rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
}

#training .metric-line span:first-child {
  font-size: 0.78rem;
  font-weight: 700;
}

#training .custom-exercise-panel .panel-header {
  margin-bottom: 0.65rem;
}

#training .custom-exercise-panel h2 {
  font-size: 1.22rem;
  font-weight: 800;
}

@keyframes mPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  50% { box-shadow: 0 0 0 0.5rem rgba(var(--accent-rgb), 0); }
}

/* ---------- Carte héros de séance (copie partagée, mobile.css la surcharge) ---------- */

.m-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 0.85rem;
  padding: 1.15rem 1.15rem 1.05rem;
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(var(--accent-rgb), 0.28), transparent 62%),
    var(--m-card-2);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: var(--m-radius);
  animation: mPop 380ms var(--m-spring) both;
}

@keyframes mPop {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.m-hero-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  color: var(--accent-text);
  font-size: 0.82rem;
  font-weight: 800;
}

.m-live-dot {
  width: 0.52rem;
  height: 0.52rem;
  background: var(--accent);
  border-radius: 999px;
}

.m-hero.running .m-live-dot {
  animation: mPulse 1.7s ease-in-out infinite;
}

@keyframes mPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  }
  50% {
    box-shadow: 0 0 0 0.5rem rgba(var(--accent-rgb), 0);
  }
}

.m-hero-name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.m-hero-caption {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.m-hero-clock {
  display: block;
  margin-top: 0.1rem;
  color: var(--accent-text);
  font-size: 3.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.m-hero.paused .m-hero-clock {
  color: var(--muted);
}

/* Rangée de pastilles d'info, comme les sous-cartes de la référence. */
.m-hero-pills {
  display: flex;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.m-hero-pills::-webkit-scrollbar {
  display: none;
}

.m-pill {
  flex: 1 0 auto;
  display: grid;
  gap: 0.1rem;
  min-width: 6.2rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--m-hairline);
  border-radius: 0.95rem;
}

.m-pill span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.m-pill strong {
  font-size: 0.92rem;
  font-weight: 800;
}

/* Barre d'action pleine largeur en pied de carte héros. */
.m-hero-action {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--accent);
  border: 0;
  border-radius: 1.05rem;
  color: var(--accent-ink);
  font-size: 1rem;
  font-weight: 800;
  transition: transform 180ms var(--m-spring), filter 180ms ease;
}

.m-hero-action:active {
  transform: scale(0.975);
  filter: brightness(0.94);
}

.m-hero-action .m-ha-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.m-hero-action .m-ha-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.m-hero-action .m-ha-label {
  flex: 1;
  text-align: center;
}

.m-hero-action .m-ha-value {
  padding-left: 0.7rem;
  border-left: 1px solid rgba(0, 0, 0, 0.22);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.m-hero-secondary {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--m-hairline);
  border-radius: 1.05rem;
  color: var(--text);
  font-weight: 800;
  transition: transform 180ms var(--m-spring);
}

.m-hero-secondary:active {
  transform: scale(0.975);
}

/* ============================================================
   Desktop : même langage visuel que le mobile, mis en page en
   colonnes. Rien ici ne s'applique sous 861px.
   ============================================================ */

@media (min-width: 861px) {
  html,
  body {
    background: var(--m-bg);
  }

  body {
    background:
      radial-gradient(60rem 30rem at 85% -10%, rgba(var(--accent-rgb), 0.07), transparent 70%),
      var(--m-bg);
  }

  .mv-ic {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  /* ---------- Barre latérale ---------- */

  .sidebar {
    gap: 1.75rem;
    padding: 1.4rem 1rem;
    background: rgba(10, 11, 14, 0.82);
    border-right: 1px solid var(--m-hairline);
  }

  .brand {
    padding: 0 0.45rem;
  }

  .brand strong {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
  }

  .nav-list {
    gap: 0.25rem;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.72rem 0.85rem;
    border: 0;
    border-radius: 14px;
    color: var(--muted);
    font-weight: 700;
    transition: background 200ms ease, color 200ms ease, transform 160ms var(--m-spring);
  }

  .nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  .nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: transparent;
    color: var(--text);
  }

  .nav-item.active {
    background: rgba(var(--accent-rgb), 0.14);
    box-shadow: none;
    color: var(--accent-text);
  }

  .nav-item:active {
    transform: scale(0.97);
  }

  .sidebar-card {
    padding: 1rem;
    background:
      radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
      var(--m-card);
    border: 1px solid var(--m-hairline);
    border-radius: var(--m-radius-sm);
  }

  /* ---------- En-tête ---------- */

  .main-area {
    padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem) 3rem;
  }

  .main-area > .view {
    max-width: 1320px;
    margin: 0 auto;
  }

  .topbar {
    align-items: flex-end;
    margin-bottom: 1.6rem;
    padding: 1.4rem clamp(1.25rem, 3vw, 2.5rem) 1.1rem;
    background: rgba(10, 11, 14, 0.78);
    border-bottom: 1px solid var(--m-hairline);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }

  .topbar h1 {
    font-size: clamp(1.8rem, 2.4vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.035em;
  }

  .top-date {
    margin: 0.3rem 0 0;
    color: var(--muted);
    font-size: 0.95rem;
  }

  .top-actions {
    gap: 0.5rem;
  }

  .top-actions .ghost-button,
  .top-actions .icon-button {
    min-height: 2.6rem;
    background: var(--m-card);
    border: 1px solid var(--m-hairline);
    border-radius: 999px;
  }

  .top-actions .ghost-button {
    padding: 0.55rem 1.05rem;
    font-size: 0.88rem;
  }

  .top-actions .icon-button {
    width: 2.6rem;
  }

  .top-actions .ghost-button:hover,
  .top-actions .icon-button:hover {
    background: var(--m-card-2);
  }

  /* ---------- Composants génériques ---------- */

  .panel,
  .stat-card,
  .exercise-card,
  .meal-card,
  .timeline-item,
  .source-card {
    background: var(--m-card);
    border: 1px solid var(--m-hairline);
    border-radius: var(--m-radius);
    box-shadow: none;
  }

  .panel {
    padding: 1.15rem;
  }

  .panel-header h2 {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .primary-button,
  .ghost-button,
  .danger-button {
    border-radius: 999px;
    transition: transform 160ms var(--m-spring), filter 160ms ease, background 160ms ease;
  }

  .primary-button:hover {
    filter: brightness(1.06);
    transform: none;
  }

  .primary-button:active,
  .ghost-button:active,
  .danger-button:active {
    transform: scale(0.97);
  }

  table {
    min-width: 36rem;
  }

  th {
    padding: 0.6rem 0.9rem;
    color: var(--subtle);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  td {
    padding: 0.8rem 0.9rem;
    border-bottom-color: var(--m-hairline);
    vertical-align: middle;
  }

  tbody tr {
    transition: background 160ms ease;
  }

  tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
  }

  tbody tr:last-child td {
    border-bottom: 0;
  }

  .empty {
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--m-radius-sm);
  }

  /* ---------- Écrans natifs en colonnes ---------- */

  .mv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
  }

  .mv-grid-nutri {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .mv-grid-goals {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mv-col {
    min-width: 0;
  }

  .mv-first-desk {
    margin-top: 0;
  }

  /* Le journal du jour reste à portée pendant qu'on fait défiler. */
  .mv-grid-dash > .mv-col:last-child {
    position: sticky;
    top: 7.5rem;
  }

  .mv-head {
    margin-bottom: 0.75rem;
  }

  .mv-activity {
    padding: 1.3rem 1.5rem;
    gap: 2rem;
  }

  .mv-activity .mv-rings {
    width: 160px;
    height: 160px;
  }

  .mv-activity-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .mv-activity-legend .eyebrow {
    grid-column: 1 / -1;
  }

  .mv-legend-line strong {
    font-size: 1.4rem;
  }

  .mv-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-legend-line strong {
    white-space: nowrap;
  }

  .mv-legend-line small {
    display: block;
    margin: 0.1rem 0 0;
  }

  .mv-cats {
    flex-wrap: wrap;
    margin: 0.6rem 0 0.5rem;
    padding: 0;
    overflow: visible;
  }

  .hs-stat,
  .hs-card,
  .hs-rows,
  .hs-filter {
    background: var(--m-card);
    border-color: var(--m-hairline);
    box-shadow: none;
  }

  .hs-stat,
  .hs-card {
    border-radius: var(--m-radius);
  }

  .hs-rows {
    border-radius: var(--m-radius-sm);
  }

  .hs-panel,
  .hs-panel-foot {
    background: #101216;
  }

  .hs-tile,
  .hs-ex {
    background: var(--m-card);
    border-color: var(--m-hairline);
  }

  .mv-stats .hs-stat-icon {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    margin: 0;
  }

  .mv-chart canvas {
    height: 15rem;
  }

  .mv-week {
    height: 11rem;
  }

  button.mv-row:hover,
  label.mv-row:hover {
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
  }

  .mv-next:hover {
    border-color: rgba(var(--tone), 0.5);
  }

  /* Recettes : rail horizontal aussi sur desktop, sinon la colonne
     s'étire sur 60 cartes. */
  .mv-rail {
    margin: 0;
    padding: 0 0 0.5rem;
    scroll-padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }

  .mv-template {
    flex: 0 0 14.5rem;
  }

  .nu-idea-tabs {
    margin: 0 0 0.6rem;
    padding: 0;
  }

  .mv-macro-card {
    padding: 1.2rem 1.4rem;
    gap: 1.6rem;
  }

  .mv-macro-card .mv-rings {
    width: 150px;
    height: 150px;
  }

  .mv-foods {
    max-height: 22rem !important;
  }

  .mv-foods .food-item {
    cursor: pointer;
  }

  .mv-foods .food-item:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .mv-slot {
    cursor: pointer;
  }

  .mv-slot:not(.active):hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .mv-food-chip {
    cursor: pointer;
  }

  .mv-day:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.16);
  }

  .mv-photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-upload {
    cursor: pointer;
  }

  .mv-upload:hover {
    background: rgba(var(--accent-rgb), 0.06);
  }

  .mv-countdown {
    padding: 1.5rem;
  }

  .mv-countdown .mv-big {
    font-size: 4rem;
  }

  /* ---------- Séance ---------- */

  #training > .grid {
    gap: 1.2rem;
  }

  #training .tabs {
    gap: 0.5rem;
  }

  #training .tab-button {
    padding: 0.6rem 1rem;
    background: var(--m-card-2);
    border: 1px solid var(--m-hairline);
    border-radius: 14px;
    color: var(--muted);
    font-weight: 800;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--m-spring);
  }

  #training .tab-button:hover {
    color: var(--text);
  }

  #training .tab-button.active {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--accent-text);
  }

  #training .exercise-grid {
    gap: 1.1rem;
  }

  #training .exercise-card {
    overflow: hidden;
    transition: border-color 200ms ease, transform 200ms var(--m-spring);
  }

  #training .exercise-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
  }

  #training .exercise-body {
    padding: 1rem 1.1rem 1.15rem;
  }

  #training .exercise-body h3 {
    font-size: 1.08rem;
    letter-spacing: -0.01em;
  }

  #training .exercise-session-tools {
    display: grid;
    gap: 0.75rem;
  }

  #training .compact-form .form-grid {
    background: var(--m-card-2);
  }

  #training .set-grid input,
  #training .metric-line {
    background: var(--m-card-2);
  }

  #training .rest-start {
    border-radius: 999px;
  }

  #training .m-recent {
    padding: 0;
  }

  #training .m-sechead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0.4rem 0.25rem 0.7rem;
  }

  #training .m-sechead h2 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  #training .m-seclink {
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-text);
    font-weight: 800;
  }

  /* Carte chrono : infos à gauche, actions à droite. */
  .m-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    column-gap: 2rem;
    margin: 0;
    padding: 1.4rem 1.5rem;
  }

  .m-hero > * {
    grid-column: 1;
  }

  .m-hero-action {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: end;
    margin-top: 0;
  }

  .m-hero-secondary {
    grid-column: 2;
    grid-row: 5;
    align-self: end;
  }

  .m-hero-name {
    font-size: 2.1rem;
  }

  .m-hero-pills {
    flex-wrap: wrap;
  }

  .m-hero:not(.running):not(.paused) .m-live-dot {
    animation: mBlink 1.4s ease-in-out infinite;
  }

  .m-hero.running .m-live-dot {
    animation: mPulse 1.7s ease-in-out infinite;
  }
}

@keyframes mBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.18; transform: scale(0.82); }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .mv-grid,
  .mv-grid-nutri,
  .mv-grid-goals {
    grid-template-columns: minmax(0, 1fr);
  }

  .mv-grid-dash > .mv-col:last-child {
    position: static;
  }

  .mv-col + .mv-col .mv-first-desk {
    margin-top: 1.5rem;
  }
}

/* ============================================================
   Repas : navigation par jour, hydratation, journal par moment,
   menu prévu, recettes et feuille d'ajout (nutrition.js).
   ============================================================ */

.nu-daynav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.nu-daybtn,
.nu-round,
.nu-plus,
.nu-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 999px;
  color: var(--text);
  transition: transform 180ms var(--m-spring), background 180ms ease, opacity 180ms ease;
}

.nu-daybtn:active,
.nu-round:active,
.nu-plus:active,
.nu-check:active {
  transform: scale(0.88);
}

.nu-round:disabled {
  opacity: 0.35;
}

.nu-round.accent,
.nu-plus {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: transparent;
  color: var(--accent-text);
}

.nu-plus .mv-ic,
.nu-round .mv-ic,
.nu-check .mv-ic {
  stroke-width: 2.4;
}

.nu-plus.sm {
  width: 1.9rem;
  height: 1.9rem;
}

.nu-plus.sm .mv-ic {
  width: 0.9rem;
  height: 0.9rem;
}

.nu-daylabel {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  min-height: 2.5rem;
  padding: 0.2rem 0.5rem;
  background: none;
  border: 0;
  border-radius: 0.8rem;
  color: var(--text);
}

.nu-daylabel:disabled {
  opacity: 1;
  cursor: default;
}

.nu-daylabel strong {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.nu-daylabel small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.nu-daylabel:not(:disabled) strong {
  color: var(--accent-text);
}

/* Hydratation */

.nu-water {
  margin-top: 0.6rem;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(105, 183, 255, 0.12), transparent 55%),
    var(--m-card);
}

.nu-water-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nu-water-icon {
  --tone: 105, 183, 255;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  background: rgba(105, 183, 255, 0.16);
  border-radius: 0.7rem;
  color: var(--blue);
}

.nu-water-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.nu-water-main span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.nu-water-main strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.nu-water-main small {
  color: var(--muted);
  font-size: 0.8rem;
}

.nu-water-actions {
  display: flex;
  gap: 0.45rem;
}

.nu-water .nu-round.accent {
  background: rgba(105, 183, 255, 0.18);
  color: var(--blue);
}

.nu-glasses {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.8rem;
}

.nu-glasses i {
  flex: 1;
  height: 0.45rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  transition: background 300ms ease;
}

.nu-glasses i.on {
  background: var(--blue);
}

/* Menu prévu */

.nu-planned .mv-row-main span {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nu-check {
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(var(--accent-rgb), 0.16);
  border-color: transparent;
  color: var(--accent-text);
}

.nu-check.done {
  background: var(--accent);
  color: var(--accent-ink);
}

.nu-check .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
}

/* Journal par moment */

.nu-slots {
  display: grid;
  gap: 0.55rem;
}

.nu-slot {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
  overflow: hidden;
}

.nu-slot-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.75rem 0.7rem 0.85rem;
}

.nu-slot-head > div {
  display: grid;
  flex: 1;
  min-width: 0;
}

.nu-slot-head strong {
  font-size: 0.98rem;
}

.nu-slot-head small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nu-slot:not(.is-empty) .mv-slot-icon {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-text);
}

.nu-slot.is-empty .nu-slot-head small {
  color: var(--subtle);
}

.nu-meals {
  border-top: 1px solid var(--m-hairline);
}

.nu-meal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem 0.6rem 0.85rem;
}

.nu-meal + .nu-meal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.85rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

.nu-meal-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.nu-meal-main strong {
  overflow: hidden;
  font-size: 0.9rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nu-meal-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nu-meal-kcal {
  font-weight: 800;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

/* Idées repas */

.nu-idea-tabs {
  margin: 0 calc(var(--m-gutter) * -1) 0.6rem;
  padding: 0 var(--m-gutter);
}

.nu-recipe {
  cursor: pointer;
  transition: transform 200ms var(--m-spring);
}

.nu-recipe:active {
  transform: scale(0.97);
}

.nu-recipe .mv-template-slot {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nu-recipe .mv-template-slot .mv-ic {
  width: 0.85rem;
  height: 0.85rem;
}

.nu-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0.3rem;
}

.nu-tag {
  padding: 0.14rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.mv-link .mv-ic {
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: -0.12em;
}

.mv-food-chip.recipe {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.mv-day.is-today small {
  color: var(--accent-text);
}

.mv-slot-head > span:not(.mv-slot-icon) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Repas du jour sur le Tableau */

.nu-mini {
  margin-top: 0.6rem;
  padding: 0.85rem 0.85rem 0.8rem;
}

.nu-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.15rem 0.65rem;
}

.nu-mini-head strong {
  font-size: 1rem;
}

.nu-mini-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.nu-mini-slot {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.6rem 0.2rem 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 0.95rem;
  color: var(--text);
  transition: transform 180ms var(--m-spring);
}

.nu-mini-slot:active {
  transform: scale(0.93);
}

.nu-mini-icon {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-bottom: 0.15rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: var(--muted);
}

.nu-mini-icon .mv-ic {
  width: 0.9rem;
  height: 0.9rem;
}

.nu-mini-slot small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.nu-mini-slot strong {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.nu-mini-slot em {
  color: var(--subtle);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 700;
}

.nu-mini-slot.logged {
  background: rgba(var(--accent-rgb), 0.09);
  border-color: rgba(var(--accent-rgb), 0.28);
}

.nu-mini-slot.logged .nu-mini-icon {
  background: var(--accent);
  color: var(--accent-ink);
}

.nu-mini-slot.logged .nu-mini-icon .mv-ic {
  stroke-width: 2.8;
}

.nu-mini-slot.planned strong {
  color: var(--muted);
}

.nu-mini-slot.empty strong {
  color: var(--accent-text);
}

.nu-mini-water {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.7rem;
  padding: 0.55rem 0.4rem 0 0.2rem;
  border-top: 1px solid var(--m-hairline);
}

.nu-mini-water .nu-water-icon {
  width: 1.9rem;
  height: 1.9rem;
}

.nu-mini-water-bar {
  flex: 1;
}

.nu-mini-water strong {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nu-mini-water .nu-round {
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(105, 183, 255, 0.18);
  color: var(--blue);
}

.mv-bar.water i {
  background: var(--blue);
}

/* ---------- Feuille d'ajout ---------- */

.fd-panel {
  --tone: var(--accent-rgb);
}

.fd-head h2 {
  margin: 0.45rem 0 0.7rem;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
}

.fd-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.65rem;
}

.fd-slot {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 0.8rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.fd-slot .mv-ic {
  width: 1rem;
  height: 1rem;
}

.fd-slot.active {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent-text);
}

.fd-search {
  margin-bottom: 0.65rem;
}

.fd-search input {
  font-size: 16px;
}

.fd-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.7rem;
}

.fd-tabs button {
  flex: 1;
  min-height: 2rem;
  padding: 0 0.3rem;
  background: none;
  border: 0;
  border-radius: 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  transition: background 200ms ease, color 200ms ease;
}

.fd-tabs button.active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.fd-body {
  padding-top: 0.4rem;
}

.fd-group-title {
  margin: 0.9rem 0.25rem 0.4rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fd-list {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
  overflow: hidden;
}

.fd-item,
.fd-ing {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.55rem 0.6rem 0.55rem 0.75rem;
  cursor: pointer;
  transition: background 160ms ease;
}

.fd-ing {
  cursor: default;
  min-height: 3.1rem;
}

.fd-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.fd-item + .fd-item::before,
.fd-ing + .fd-ing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.45rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

.fd-item-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.65rem;
  color: var(--muted);
}

.fd-item.recipe .fd-item-icon {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-text);
}

.fd-item-icon .mv-ic {
  width: 1rem;
  height: 1rem;
}

.fd-item-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.fd-item-main strong {
  overflow: hidden;
  font-size: 0.92rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fd-item-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fd-fav-mini {
  width: 0.75rem !important;
  height: 0.75rem !important;
  color: var(--yellow);
  fill: var(--yellow) !important;
  vertical-align: -0.05em;
}

.fd-item-kcal {
  display: grid;
  justify-items: end;
  flex: none;
}

.fd-item-kcal strong {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.fd-item-kcal small {
  color: var(--subtle);
  font-size: 0.66rem;
  font-weight: 700;
}

.fd-quick {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: rgba(var(--accent-rgb), 0.16);
  border: 0;
  border-radius: 999px;
  color: var(--accent-text);
  transition: transform 180ms var(--m-spring), background 200ms ease;
}

.fd-quick .mv-ic {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.6;
}

.fd-quick:active {
  transform: scale(0.85);
}

.fd-item.added .fd-quick {
  animation: fdAdded 700ms var(--m-spring);
}

@keyframes fdAdded {
  0% { transform: scale(0.7); background: var(--accent); color: var(--accent-ink); }
  60% { transform: scale(1.12); background: var(--accent); color: var(--accent-ink); }
  100% { transform: none; }
}

.fd-cats {
  margin: 0.4rem calc(var(--m-gutter) * -1) 0.2rem;
  padding: 0 var(--m-gutter);
}

.fd-manual {
  padding-top: 0.6rem;
}

.fd-manual .mv-submit {
  margin-top: 0.3rem;
}

/* Détail d'un aliment ou d'une recette */

.fd-detail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3rem;
}

.fd-back {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: -0.35rem;
  padding: 0.3rem 0.4rem;
  background: none;
  border: 0;
  color: var(--accent-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.fd-back .mv-ic {
  width: 1.2rem;
  height: 1.2rem;
  stroke-width: 2.4;
}

.fd-star {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  transition: transform 220ms var(--m-spring), color 200ms ease;
}

.fd-star .mv-ic {
  width: 1.15rem;
  height: 1.15rem;
}

.fd-star.on {
  background: rgba(255, 209, 102, 0.16);
  color: var(--yellow);
}

.fd-star.on .mv-ic {
  fill: currentColor;
}

.fd-star:active {
  transform: scale(0.82);
}

.fd-panel.is-detail .fd-head h2 {
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.fd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.2rem 0 0.9rem;
}

.fd-macros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.fd-macro {
  display: grid;
  justify-items: center;
  padding: 0.7rem 0.2rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 0.95rem;
}

.fd-macro strong {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.fd-macro span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.fd-macro.kcal strong { color: rgb(var(--ring-kcal)); }
.fd-macro.prot strong { color: rgb(var(--ring-prot)); }
.fd-macro.carb strong { color: rgb(var(--ring-carb)); }
.fd-macro.fat strong { color: rgb(var(--ring-fat)); }

.fd-split {
  display: flex;
  gap: 3px;
  height: 0.5rem;
  margin-top: 0.8rem;
  overflow: hidden;
  border-radius: 999px;
}

.fd-split i {
  min-width: 3px;
  border-radius: 999px;
}

.fd-split .prot { background: rgb(var(--ring-prot)); }
.fd-split .carb { background: rgb(var(--ring-carb)); }
.fd-split .fat { background: rgb(var(--ring-fat)); }

.fd-split-legend {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.4rem 0.1rem 0;
  font-size: 0.7rem;
  font-weight: 800;
}

.fd-split-legend .prot { color: rgb(var(--ring-prot)); }
.fd-split-legend .carb { color: rgb(var(--ring-carb)); }
.fd-split-legend .fat { color: rgb(var(--ring-fat)); }

.fd-how {
  margin: 0;
  padding: 0.85rem 0.95rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.fd-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.fd-days button {
  min-height: 2.4rem;
  padding: 0;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 0.8rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  transition: transform 180ms var(--m-spring), background 200ms ease;
}

.fd-days button.today {
  color: var(--accent-text);
}

.fd-days button.done {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}

.fd-days button:active {
  transform: scale(0.9);
}

.fd-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fd-foot[hidden] {
  display: none;
}

.fd-stepper {
  display: flex;
  align-items: center;
  flex: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.fd-stepper button {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 3.1rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
}

.fd-stepper button:disabled {
  opacity: 0.3;
}

.fd-stepper button .mv-ic {
  width: 1.05rem;
  height: 1.05rem;
  stroke-width: 2.4;
}

.fd-stepper span {
  min-width: 4.3rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fd-add {
  flex: 1;
  min-height: 3.1rem;
  border-radius: 999px;
  font-size: 0.98rem;
  white-space: nowrap;
}

.fd-body .mv-empty {
  margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .fd-item.added .fd-quick {
    animation: none;
  }
}

.nu-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.nu-generate .mv-ic {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.2;
}

/* ============================================================
   Séance : objectif du jour, exercice fait, progression.
   ============================================================ */

#training .target-line {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--m-hairline);
  border-radius: 0.95rem;
}

#training .target-line span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#training .target-line strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

#training .target-line small {
  color: var(--muted);
  font-size: 0.78rem;
}

#training .target-line.up {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.35);
}

#training .target-line.up span,
#training .target-line.up strong {
  color: var(--accent-text);
}

.done-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  background: var(--accent);
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 0.74rem;
  font-weight: 800;
}

.done-badge svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exercise-card.is-done {
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Licence Gym visual : jamais au-delà de 180 × 180 px. */
.exercise-media img {
  max-width: 180px;
  max-height: 180px;
}

.m-dots i.done {
  background: rgba(var(--accent-rgb), 0.5);
}

.m-dots i.done.on {
  background: var(--accent);
}

.m-hero-progress {
  height: 0.3rem;
  margin: 0.8rem 0 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.m-hero-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 500ms var(--m-spring);
}

/* ============================================================
   Séance (training.js) : sélecteur, carte séance, liste,
   fiche exercice avec saisie série par série.
   ============================================================ */

.tr-switch {
  display: flex;
  gap: 0.45rem;
  margin: 0 calc(var(--m-gutter) * -1) 0.85rem;
  padding: 0.1rem var(--m-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.tr-switch::-webkit-scrollbar {
  display: none;
}

.tr-chip {
  display: grid;
  flex: 1 0 auto;
  gap: 0.05rem;
  min-width: 5.3rem;
  padding: 0.55rem 0.85rem 0.6rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1rem;
  color: var(--text);
  text-align: left;
  transition: transform 200ms var(--m-spring), background 220ms ease, border-color 220ms ease, opacity 200ms ease;
}

.tr-chip small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tr-chip strong {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.tr-chip.active {
  background: rgba(var(--tone), 0.16);
  border-color: rgba(var(--tone), 0.55);
}

.tr-chip.active small {
  color: rgb(var(--tone));
}

.tr-chip:active {
  transform: scale(0.95);
}

.tr-chip:disabled {
  opacity: 0.35;
}

/* Carte séance */

.tr-hero {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.15rem 1.1rem;
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(var(--tone), 0.32), transparent 58%),
    radial-gradient(90% 80% at 0% 100%, rgba(var(--tone), 0.1), transparent 60%),
    var(--m-card);
  border: 1px solid rgba(var(--tone), 0.28);
  border-radius: 1.6rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.tr-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.tr-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgb(var(--tone));
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tr-kicker i {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(var(--tone));
  border-radius: 999px;
}

.tr-hero.running .tr-kicker i {
  animation: trPulse 1.6s ease-in-out infinite;
}

@keyframes trPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--tone), 0.6); }
  50% { box-shadow: 0 0 0 0.35rem rgba(var(--tone), 0); }
}

.tr-badge {
  padding: 0.22rem 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.tr-name {
  margin: 0.5rem 0 0;
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.tr-focus {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.tr-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.1rem 0 1rem;
  padding: 0.75rem 0;
  border-block: 1px solid var(--m-hairline);
}

.tr-stats div {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
}

.tr-stats div + div {
  border-left: 1px solid var(--m-hairline);
}

.tr-stats strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tr-stats span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.tr-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0 1rem;
  background: rgb(var(--tone));
  border: 0;
  border-radius: 999px;
  color: #0c0e12;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(var(--tone), 0.35);
  transition: transform 200ms var(--m-spring);
}

.tr-start:active {
  transform: scale(0.97);
}

.tr-start-icon .mv-ic {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  stroke: none;
}

/* Séance en cours */

.tr-live {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tr-live-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.tr-live .tr-name {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.tr-clock {
  margin-top: 0.15rem;
  font-size: 3.3rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tr-hero.paused .tr-clock {
  color: var(--muted);
}

.tr-live-sub {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.tr-ring {
  position: relative;
  flex: none;
  width: 5.6rem;
  height: 5.6rem;
}

.tr-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.tr-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 8;
}

.tr-ring-value {
  fill: none;
  stroke: rgb(var(--tone));
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 700ms var(--m-spring);
}

.tr-ring > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}

.tr-ring strong {
  font-size: 1.5rem;
  font-weight: 900;
}

.tr-ring small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.tr-next {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--m-hairline);
  border-radius: 1.1rem;
  color: var(--text);
  text-align: left;
  transition: transform 200ms var(--m-spring), background 200ms ease;
}

.tr-next:active {
  transform: scale(0.98);
}

.tr-next-label {
  padding: 0.25rem 0.5rem;
  background: rgba(var(--tone), 0.2);
  border-radius: 0.5rem;
  color: rgb(var(--tone));
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tr-next-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.tr-next-main strong {
  overflow: hidden;
  font-size: 0.95rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tr-next-main small {
  color: var(--muted);
  font-size: 0.76rem;
}

.tr-next.done > .mv-ic {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--yellow);
}

.tr-chev {
  width: 1rem !important;
  height: 1rem !important;
  color: var(--subtle);
}

.tr-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.tr-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3.1rem;
  padding: 0 0.8rem;
  background: rgb(var(--tone));
  border: 0;
  border-radius: 999px;
  color: #0c0e12;
  font-size: 0.98rem;
  font-weight: 900;
  transition: transform 200ms var(--m-spring);
}

.tr-ctrl .mv-ic {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  stroke: none;
}

.tr-ctrl.end {
  background: rgba(255, 94, 108, 0.16);
  color: var(--danger);
}

.tr-ctrl:active {
  transform: scale(0.96);
}

/* Liste des exercices */

.tr-list {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1.2rem;
  overflow: hidden;
}

.tr-ex {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 4.6rem;
  padding: 0.6rem 0.75rem 0.6rem 0.65rem;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  transition: background 160ms ease;
}

.tr-ex:active {
  background: rgba(255, 255, 255, 0.05);
}

.tr-ex + .tr-ex::before,
.tr-add::before {
  content: "";
  position: absolute;
  top: 0;
  left: 4.6rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

.tr-thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  overflow: hidden;
  background: #fff;
  border-radius: 0.9rem;
  color: #0c0e12;
}

.tr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tr-thumb b {
  font-size: 1.2rem;
}

.tr-thumb em {
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  display: grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  background: rgba(12, 14, 18, 0.78);
  border-radius: 999px;
  color: #fff;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.tr-ex.done .tr-thumb {
  opacity: 0.55;
}

.tr-ex-main {
  display: grid;
  flex: 1;
  gap: 0.1rem;
  min-width: 0;
}

.tr-ex-main strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tr-ex.done .tr-ex-main strong {
  color: var(--muted);
}

.tr-ex-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tr-ex-tag {
  justify-self: start;
  margin-top: 0.15rem;
  padding: 0.1rem 0.45rem;
  background: rgba(var(--tone), 0.18);
  border-radius: 999px;
  color: rgb(var(--tone));
  font-size: 0.66rem;
  font-weight: 900;
}

.tr-ex-end {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}

.tr-target {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tr-target.up {
  color: var(--accent-text);
}

.tr-up {
  width: 0.8rem !important;
  height: 0.8rem !important;
  stroke-width: 2.8 !important;
}

.tr-done {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  background: var(--accent);
  border-radius: 999px;
  color: var(--accent-ink);
}

.tr-done .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
  stroke-width: 3;
}

.tr-add {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 0.5rem 0.75rem 0.5rem 0.65rem;
  background: none;
  border: 0;
  color: var(--accent-text);
  font-size: 0.92rem;
  font-weight: 800;
}

.tr-add-icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 2rem;
}

.tr-add-icon .mv-ic {
  width: 1.2rem;
  height: 1.2rem;
  stroke-width: 2.4;
}

.tr-credit {
  margin: 0.55rem 0.3rem 0;
  color: var(--subtle);
  font-size: 0.7rem;
}

.tr-credit a {
  color: inherit;
}

/* Semaine */

.tr-week {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.tr-week-cell {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0.8rem 0.75rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1.1rem;
}

.tr-week-cell > span {
  color: var(--accent-text);
}

.tr-week-cell strong {
  margin-top: 0.2rem;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tr-week-cell strong small {
  margin-left: 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.tr-week-cell em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
}

/* ---------- Fiche exercice ---------- */

.tr-sheet .mv-ic {
  width: 1.1rem;
  height: 1.1rem;
}

.tr-panel {
  --tone: var(--accent-rgb);
}

.tr-panel h2 {
  margin: 0.45rem 0 0.6rem;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.tr-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tr-sheet-chips .mv-pill {
  gap: 0.25rem;
}

.tr-sheet-chips .mv-pill .mv-ic {
  width: 0.8rem;
  height: 0.8rem;
}

.tr-sheet-chips .mv-pill.tone {
  background: rgba(var(--tone), 0.16);
  color: rgb(var(--tone));
}

.tr-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.9rem;
}

.tr-media {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0.2rem 0 1rem;
  background: #fff;
  border-radius: 1.2rem;
}

/* Licence Gym visual : 180 × 180 px maximum, mention visible. */
.tr-media img {
  width: 180px;
  max-width: 100%;
  height: auto;
}

.tr-media figcaption {
  position: absolute;
  right: 0.7rem;
  bottom: 0.45rem;
  color: #5d6572;
  font-size: 0.66rem;
  font-weight: 700;
}

.tr-body > * {
  flex: none;
}

.tr-goal {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1.1rem;
}

.tr-goal > div {
  display: grid;
  flex: 1;
  gap: 0.1rem;
  min-width: 0;
}

.tr-goal span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tr-goal strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.tr-goal small {
  color: var(--muted);
  font-size: 0.76rem;
}

.tr-goal-last {
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem !important;
  padding-top: 0.6rem;
  border-top: 1px solid var(--m-hairline);
}

.tr-goal-last strong {
  font-size: 0.9rem;
}

.tr-goal.up {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.32);
}

.tr-goal.up > div:first-child span,
.tr-goal.up > div:first-child strong {
  color: var(--accent-text);
}

.tr-load {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0.55rem 0.55rem 0.95rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1.1rem;
}

.tr-load-label {
  font-weight: 800;
}

.tr-stepper {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.tr-stepper button {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 999px;
  color: var(--text);
  transition: transform 160ms var(--m-spring);
}

.tr-stepper button:active {
  transform: scale(0.86);
}

.tr-stepper .mv-ic {
  stroke-width: 2.5;
}

.tr-stepper label {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0 0.2rem;
}

.tr-stepper input {
  width: 4.2rem;
  padding: 0;
  background: none !important;
  border: 0 !important;
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.tr-stepper em {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 800;
}

.tr-sets {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1.1rem;
  overflow: hidden;
}

.tr-set {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 4.4rem 2.6rem;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.3rem;
  padding: 0.35rem 0.6rem 0.35rem 0.5rem;
  transition: background 220ms ease;
}

.tr-set + .tr-set {
  border-top: 1px solid var(--m-hairline);
}

.tr-set-head {
  min-height: 2.1rem;
  color: var(--subtle);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tr-set-head span:first-child,
.tr-set-head span:nth-child(3) {
  text-align: center;
}

.tr-set-n {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  justify-self: center;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0.55rem;
  font-size: 0.85rem;
  font-weight: 900;
}

.tr-set-prev {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.tr-set input {
  width: 100%;
  height: 2.4rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 0 !important;
  border-radius: 0.7rem;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.tr-set input::placeholder {
  color: var(--subtle);
  font-weight: 700;
}

.tr-check {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 0.75rem;
  color: var(--subtle);
  transition: transform 200ms var(--m-spring), background 200ms ease, color 200ms ease;
}

.tr-check .mv-ic {
  stroke-width: 3;
}

.tr-check:active {
  transform: scale(0.85);
}

.tr-set.done {
  background: rgba(var(--accent-rgb), 0.1);
}

.tr-set.done .tr-check {
  background: var(--accent);
  color: var(--accent-ink);
  animation: trCheck 420ms var(--m-spring);
}

.tr-set.done .tr-set-n {
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--accent-text);
}

.tr-set.done input {
  background: transparent !important;
  color: var(--accent-text);
}

@keyframes trCheck {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.12); }
  100% { transform: none; }
}

.tr-set-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tr-set-tools button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.4rem;
  padding: 0 0.85rem;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 800;
}

.tr-set-tools button .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
  stroke-width: 2.4;
}

.tr-set-tools .rest {
  margin-left: auto;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-text);
}

.tr-body .fd-group-title {
  margin: 0.3rem 0.25rem -0.35rem;
}

.tr-rir {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.8rem;
}

.tr-rir button {
  min-height: 2.2rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0.65rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.tr-rir button.active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tr-note input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0 0.95rem;
  background: var(--m-card) !important;
  border: 1px solid var(--m-hairline) !important;
  border-radius: 1rem;
  color: var(--text);
  font-size: 16px;
  outline: none;
}

.tr-tech {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1.1rem;
}

.tr-tech summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0.95rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.tr-tech summary::-webkit-details-marker {
  display: none;
}

.tr-tech summary .tr-chev {
  transition: transform 220ms var(--m-spring);
}

.tr-tech[open] summary .tr-chev {
  transform: rotate(90deg);
}

.tr-tech ol {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0 1rem 0.3rem 2.1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.tr-cue {
  margin: 0 0.95rem 0.7rem;
  color: var(--text);
  font-size: 0.9rem;
}

.tr-tech .tr-credit {
  margin: 0.4rem 0.95rem 0.8rem;
}

.tr-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.9rem;
  background: rgba(255, 94, 108, 0.12);
  border: 0;
  border-radius: 999px;
  color: var(--danger);
  font-weight: 800;
}

.tr-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tr-nav {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 999px;
  color: var(--text);
}

.tr-nav:disabled {
  opacity: 0.3;
}

.tr-nav .mv-ic {
  stroke-width: 2.4;
}

.tr-save {
  flex: 1;
  min-height: 3.1rem;
  border-radius: 999px;
  font-size: 1rem;
  white-space: nowrap;
}

.tr-save:disabled {
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .tr-hero.running .tr-kicker i,
  .tr-set.done .tr-check {
    animation: none;
  }
}

/* Minuteur visible : on laisse de la place sous le contenu des fiches. */
body.rest-on .tr-body,
body.rest-on .fd-body {
  padding-bottom: 6rem;
}

/* ============================================================
   Apple Santé (health.js) : carte du Tableau, guide, FC séance.
   ============================================================ */

.mv-tone-red { --tone: 255, 94, 108; }

.hl-connect {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin-top: 0.6rem;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 55, 95, 0.18), transparent 60%),
    var(--m-card);
  color: var(--text);
  text-align: left;
}

.hl-connect-icon,
.hl-session-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  background: linear-gradient(145deg, #ff5e7e, #ff2d55);
  border-radius: 0.8rem;
  color: #fff;
}

.hl-connect-icon .mv-ic,
.hl-session-icon .mv-ic {
  fill: currentColor;
  stroke: none;
}

.hl-connect-main {
  display: grid;
  flex: 1;
  gap: 0.15rem;
}

.hl-connect-main small {
  color: var(--muted);
  font-size: 0.8rem;
}

.hl-chev {
  color: var(--subtle);
}

.hl-card {
  margin-top: 0.6rem;
  padding: 0.9rem;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 55, 95, 0.12), transparent 55%),
    var(--m-card);
}

.hl-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #ff5e7e;
  font-size: 0.8rem;
  font-weight: 900;
}

.hl-badge .mv-ic {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  stroke: none;
}

.hl-sync {
  flex: 1;
  color: var(--subtle);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: right;
}

.hl-sync-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: var(--text);
}

.hl-sync-btn .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
}

.hl-body {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.7rem;
}

.hl-steps {
  position: relative;
  width: 7.4rem;
  height: 7.4rem;
}

.hl-steps svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hl-ring-track,
.hl-ring-value {
  fill: none;
  stroke-width: 10;
}

.hl-ring-track {
  stroke: rgba(255, 159, 10, 0.16);
}

.hl-ring-value {
  stroke: #ff9f0a;
  stroke-linecap: round;
  transition: stroke-dashoffset 800ms var(--m-spring);
}

.hl-steps > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.hl-steps .mv-ic {
  width: 1rem;
  height: 1rem;
  color: #ff9f0a;
}

.hl-steps strong {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hl-steps small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.hl-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.hl-tile {
  display: grid;
  gap: 0.05rem;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 0.85rem;
}

.hl-tile > span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.hl-tile > span .mv-ic {
  width: 0.8rem;
  height: 0.8rem;
}

.hl-tile strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hl-tile small {
  overflow: hidden;
  color: var(--subtle);
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hl-tile.coral > span { color: #ff6b4a; }
.hl-tile.red > span { color: #ff5e7e; }
.hl-tile.violet > span { color: #a78bfa; }
.hl-tile.blue > span { color: var(--blue); }

.hl-foot {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.7rem 0.1rem 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.hl-foot .mv-ic {
  width: 0.9rem;
  height: 0.9rem;
}

/* FC d'une séance, dans le récap */

.hl-session {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.7rem;
  padding: 0.75rem 0.85rem;
  background: rgba(255, 55, 95, 0.08);
  border: 1px solid rgba(255, 55, 95, 0.25);
  border-radius: 1rem;
}

.hl-session-icon {
  width: 2.2rem;
  height: 2.2rem;
}

.hl-session-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.hl-session div {
  display: grid;
}

.hl-session div span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.hl-session div strong {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.hl-session small {
  color: var(--muted);
  font-size: 0.7rem;
}

/* Guide */

.hl-sheet .mv-ic {
  width: 1.05rem;
  height: 1.05rem;
}

.hl-panel {
  --tone: 255, 55, 95;
}

.hl-panel h2 {
  margin: 0.45rem 0 0.3rem;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
}

.hl-lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.hl-guide {
  padding-top: 0.4rem;
}

.hl-copies {
  display: grid;
  gap: 0.45rem;
}

.hl-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label button"
    "code button";
  align-items: center;
  gap: 0.2rem 0.6rem;
  padding: 0.65rem 0.7rem 0.65rem 0.85rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1rem;
}

.hl-copy > span {
  grid-area: label;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.hl-copy code {
  grid-area: code;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  user-select: all;
  -webkit-user-select: all;
}

.hl-copy button {
  grid-area: button;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.3rem;
  padding: 0 0.8rem;
  background: rgba(255, 55, 95, 0.16);
  border: 0;
  border-radius: 999px;
  color: #ff5e7e;
  font-size: 0.8rem;
  font-weight: 800;
}

.hl-copy button .mv-ic {
  width: 0.9rem;
  height: 0.9rem;
}

.hl-warn,
.hl-note {
  margin: 0.55rem 0.2rem 0;
  color: var(--subtle);
  font-size: 0.76rem;
  line-height: 1.45;
}

.hl-warn button {
  padding: 0;
  background: none;
  border: 0;
  color: #ff5e7e;
  font-size: inherit;
  font-weight: 800;
  text-decoration: underline;
}

.hl-inline {
  width: 0.85rem !important;
  height: 0.85rem !important;
  vertical-align: -0.15em;
}

.hl-steps-list {
  display: grid;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.hl-step {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.85rem 0.85rem 0.85rem 0.75rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1.1rem;
}

.hl-step-n {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  background: linear-gradient(145deg, #ff5e7e, #ff2d55);
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
}

.hl-step strong {
  display: block;
  margin: 0.3rem 0 0.35rem;
  font-size: 0.98rem;
}

.hl-step p {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.hl-step b {
  color: var(--text);
}

.hl-step em {
  color: #ffb4c2;
  font-style: normal;
  font-weight: 700;
}

.hl-step code,
.hl-note code {
  padding: 0.05rem 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.35rem;
  color: var(--text);
  font-size: 0.8rem;
}

.hl-recipe {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.7rem 0.15rem;
  background: rgba(255, 255, 255, 0.035);
  border-left: 3px solid rgba(255, 55, 95, 0.55);
  border-radius: 0.3rem 0.8rem 0.8rem 0.3rem;
}

.hl-recipe p {
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
}

.hl-table {
  width: 100%;
  margin: 0.2rem 0 0.5rem;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.hl-table td {
  padding: 0.3rem 0.2rem;
  border-top: 1px solid var(--m-hairline);
  color: var(--muted);
}

.hl-table td:first-child {
  width: 55%;
}

/* Carrousel des séances : pastilles libres en haut, grandes cartes
   à balayer dessous, aimantées au centre. */
.tr-switch {
  scroll-snap-type: x proximity;
}

.tr-chip {
  flex: 0 0 auto;
  min-width: 6.6rem;
  scroll-snap-align: center;
}

.tr-heroes {
  display: flex;
  gap: 0.65rem;
  margin: 0 calc(var(--m-gutter) * -1);
  padding: 0.1rem var(--m-gutter) 0.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tr-heroes::-webkit-scrollbar {
  display: none;
}

.tr-heroes > .tr-hero {
  flex: 0 0 86%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.tr-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.tr-dots i {
  width: 0.4rem;
  height: 0.4rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: width 280ms var(--m-spring), background 280ms ease;
}

.tr-dots i.on {
  width: 1.2rem;
  background: rgb(var(--tone));
}

@media (min-width: 861px) {
  .tr-heroes {
    margin: 0;
    padding: 0 0 0.4rem;
  }

  .tr-heroes > .tr-hero {
    flex-basis: 100%;
  }
}

/* Sélecteur de thème : option « couleur de la séance ». */
.theme-auto {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-soft);
  border-radius: 0.8rem;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
}

.theme-auto.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}

.theme-auto-dots {
  display: flex;
}

.theme-auto-dots i {
  width: 0.95rem;
  height: 0.95rem;
  margin-left: -0.3rem;
  background: var(--swatch);
  border: 2px solid var(--bg-elevated);
  border-radius: 999px;
}

.theme-auto-dots i:first-child {
  margin-left: 0;
}

/* Les pastilles sont pilotées par le carrousel : pas d'aimantation
   propre, sinon elles « rattrapent » avec un temps de retard. */
.tr-switch {
  scroll-snap-type: none;
}

.tr-chip {
  transition: transform 200ms var(--m-spring), opacity 200ms ease;
}

/* Toasts : en haut à droite, au-dessus de tout (feuilles comprises),
   qui glissent depuis le haut comme une notification iOS. */
.toast {
  top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  bottom: auto;
  z-index: 120;
  max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.75rem 1rem;
  background: rgba(244, 247, 238, 0.96);
  border-radius: 1.1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  line-height: 1.3;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(-0.9rem) scale(0.97);
  transition:
    opacity 200ms ease,
    transform 380ms var(--m-spring);
}

.toast.show {
  transform: none;
}

/* ============================================================
   Section Santé du Tableau (health.js), façon app Forme d'Apple.
   ============================================================ */

.hk {
  margin-top: 1.4rem;
}

.hk-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0.15rem 0.65rem;
}

.hk-logo {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.65rem;
}

.hk-apple {
  width: 1.2rem;
  height: 1.2rem;
  fill: #fff;
  stroke: none !important;
}

.hk-apple-box {
  background: #000 !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hk-apple-box .hk-apple {
  width: 1.35rem;
  height: 1.35rem;
}

.hk-title {
  display: grid;
  flex: 1;
  line-height: 1.2;
}

.hk-title strong {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hk-title small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.hk-btn {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 999px;
  color: var(--muted);
}

.hk-btn.sync {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.hk-btn .mv-ic,
.hk .mv-ic {
  width: 1rem;
  height: 1rem;
}

/* Anneaux Bouger / Exercice / Pas */

.hk-activity {
  display: grid;
  grid-template-columns: 8.2rem minmax(0, 1fr);
  grid-template-areas:
    "rings legend"
    "foot foot";
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 1rem;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(250, 17, 79, 0.13), transparent 55%),
    var(--m-card);
}

.hk-rings {
  grid-area: rings;
  width: 8.2rem;
  height: 8.2rem;
  transform: rotate(-90deg);
}

.hk-ring-track,
.hk-ring-value {
  fill: none;
  stroke-width: 12;
}

.hk-ring-value {
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms var(--m-spring);
}

.hk-ring-track.move { stroke: rgba(250, 17, 79, 0.2); }
.hk-ring-value.move { stroke: #fa114f; }
.hk-ring-track.ex { stroke: rgba(146, 232, 42, 0.2); }
.hk-ring-value.ex { stroke: #92e82a; }
.hk-ring-track.step { stroke: rgba(30, 234, 239, 0.2); }
.hk-ring-value.step { stroke: #1eeaef; }

.hk-legend {
  grid-area: legend;
  display: grid;
  gap: 0.45rem;
}

.hk-legend div {
  display: grid;
}

.hk-legend span {
  font-size: 0.74rem;
  font-weight: 800;
}

.hk-legend strong {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hk-legend small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.hk-legend .move span,
.hk-legend .move strong { color: #fa114f; }
.hk-legend .ex span,
.hk-legend .ex strong { color: #92e82a; }
.hk-legend .step span,
.hk-legend .step strong { color: #1eeaef; }

.hk-activity-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--m-hairline);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.hk-activity-foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.hk-activity-foot .mv-ic {
  width: 0.85rem;
  height: 0.85rem;
}

/* Tuiles */

.hk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.hk-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.85rem 0.9rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
}

.hk-sleep,
.hk-steps-week,
.hk-wide {
  grid-column: 1 / -1;
}

.hk-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 800;
}

.hk-label .mv-ic {
  width: 0.85rem;
  height: 0.85rem;
}

.hk-label em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.hk-label.red { color: #ff375f; }
.hk-label.blue { color: #64d2ff; }
.hk-label.violet { color: #a78bfa; }
.hk-label.orange { color: #ff9f0a; }
.hk-label.green { color: #30d158; }

.hk-big {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.hk-big small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
}

.hk-big.muted {
  color: var(--subtle);
}

.hk-sub {
  color: var(--muted);
  font-size: 0.74rem;
}

.hk-trend {
  align-self: flex-start;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
}

.hk-trend.good { background: rgba(48, 209, 88, 0.15); color: #30d158; }
.hk-trend.bad { background: rgba(255, 159, 10, 0.15); color: #ff9f0a; }
.hk-trend.flat { background: rgba(255, 255, 255, 0.07); color: var(--muted); }

.hk-spark {
  width: 100%;
  height: 1.9rem;
  margin-top: auto;
  padding-top: 0.3rem;
  overflow: visible;
}

.hk-spark polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hk-spark.red polyline { stroke: #ff375f; }
.hk-spark.red circle { fill: #ff375f; }
.hk-spark.blue polyline { stroke: #64d2ff; }
.hk-spark.blue circle { fill: #64d2ff; }

div.hk-spark.empty {
  display: flex;
  align-items: flex-end;
  height: auto;
  color: var(--subtle);
  font-size: 0.68rem;
  font-weight: 700;
}

/* Sommeil */

.hk-stack {
  display: flex;
  gap: 2px;
  height: 0.6rem;
  margin-top: 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.hk-stack i {
  min-width: 2px;
}

.hk-stack .deep { background: #5e5ce6; }
.hk-stack .rem { background: #64d2ff; }
.hk-stack .light { background: #a78bfa; }

.hk-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.hk-stack-legend .deep { color: #8e8cf5; }
.hk-stack-legend .rem { color: #64d2ff; }
.hk-stack-legend .light { color: #b9a4ff; }

/* Pas sur 7 jours */

.hk-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
  height: 6.2rem;
  margin-top: 0.5rem;
}

.hk-bars > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.hk-bars > div > span {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 1.6rem;
}

.hk-bars i {
  position: absolute;
  inset: auto 0 0;
  background: rgba(255, 159, 10, 0.45);
  border-radius: 0.35rem;
  transition: height 700ms var(--m-spring);
}

.hk-bars .hit i { background: #ff9f0a; }
.hk-bars .today i { box-shadow: 0 0 0 2px var(--m-card), 0 0 0 3px rgba(255, 159, 10, 0.8); }

.hk-bars small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.hk-bars .today small {
  color: var(--text);
}

/* Ligne d'objectif, alignée sur la zone des barres (hors libellés). */
.hk-bars > b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(1.15rem + (100% - 1.15rem) * var(--goal));
  border-top: 1px dashed rgba(255, 159, 10, 0.55);
  pointer-events: none;
}

.hk-pair {
  display: flex;
  gap: 1.6rem;
  margin-top: 0.15rem;
}

.hk-pair div {
  display: grid;
}

.hk-pair strong {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.hk-pair strong small {
  color: var(--muted);
  font-size: 0.78rem;
}

.hk-pair span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.mv-next-section {
  margin-top: 1.4rem;
}

.mv-next-section .mv-next {
  margin-top: 0;
}

/* Bilan du jour (Tableau) : texte à gauche, anneaux à droite, bilan
   énergétique en dessous. */
.r-burn { --tone: 255, 159, 10; }

.en-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "legend rings"
    "bal bal";
  align-items: center;
  gap: 0.9rem 1rem;
}

.en-card .mv-activity-legend {
  grid-area: legend;
}

.en-card .mv-rings {
  grid-area: rings;
}

.en-sub {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
}

.en-apple {
  margin-left: 0.25rem;
  padding: 0.02rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.en-balance {
  grid-area: bal;
  padding-top: 0.8rem;
  border-top: 1px solid var(--m-hairline);
  --tone: 170, 179, 192;
}

.en-balance.good { --tone: 48, 209, 88; }
.en-balance.low { --tone: 100, 210, 255; }
.en-balance.high { --tone: 255, 159, 10; }

.en-balance-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.en-balance-top span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.en-balance-top strong {
  color: rgb(var(--tone));
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.en-bar {
  display: grid;
  gap: 3px;
  margin-top: 0.45rem;
}

.en-bar i {
  display: block;
  height: 0.45rem;
  border-radius: 999px;
}

.en-bar .eat { background: rgb(var(--ring-kcal)); }
.en-bar .burn { background: #ff9f0a; }

.en-balance p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Carte Apple : texte à gauche, anneaux à droite. */
.hk-activity {
  grid-template-columns: minmax(0, 1fr) 8.2rem;
  grid-template-areas:
    "legend rings"
    "foot foot";
}

/* ============================================================
   Onglet IA de la feuille d'ajout : texte libre estimé par Claude.
   ============================================================ */

.ai-card {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.7rem;
  padding: 0.95rem;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(217, 119, 87, 0.16), transparent 55%),
    var(--m-card);
  border: 1px solid rgba(217, 119, 87, 0.28);
  border-radius: var(--m-radius-sm);
}

.ai-loading-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-weight: 700;
}

.ai-hero {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.ai-hero > .mv-ic {
  flex: none;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin-top: 0.1rem;
  color: #d97757;
}

.ai-hero div {
  display: grid;
  gap: 0.1rem;
}

.ai-hero strong {
  font-size: 1rem;
}

.ai-hero small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.ai-text,
.ai-key input {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--m-hairline) !important;
  border-radius: 0.9rem;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}

.ai-text:focus,
.ai-key input:focus {
  border-color: rgba(217, 119, 87, 0.6) !important;
}

.ai-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ai-examples button {
  padding: 0.35rem 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--m-hairline);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.ai-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.1rem;
  background: #d97757 !important;
  border-radius: 999px;
  color: #fff !important;
  font-size: 0.98rem;
}

.ai-go .mv-ic {
  width: 1.05rem !important;
  height: 1.05rem !important;
}

.ai-go:disabled {
  opacity: 0.75;
}

.ai-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: aiSpin 700ms linear infinite;
}

.ai-loading-card .ai-spinner {
  border-color: rgba(217, 119, 87, 0.3);
  border-top-color: #d97757;
}

@keyframes aiSpin {
  to { transform: rotate(360deg); }
}

.ai-error {
  margin: 0;
  color: #ff8a80;
  font-size: 0.84rem;
  font-weight: 700;
}

.ai-icon {
  background: rgba(217, 119, 87, 0.16) !important;
  color: #d97757 !important;
}

.ai-item .mv-del {
  margin-left: 0.2rem;
}

.ai-total {
  background: rgba(255, 255, 255, 0.03);
}

.ai-total .fd-item-main {
  padding-left: 2.7rem;
}

.ai-note {
  display: flex;
  gap: 0.4rem;
  margin: 0.6rem 0.2rem 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.ai-note .mv-ic {
  flex: none;
  width: 0.95rem !important;
  height: 0.95rem !important;
  margin-top: 0.1rem;
}

.ai-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.ai-actions .primary-button,
.ai-actions .ghost-button {
  min-height: 3.1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.ai-actions .primary-button {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-foot {
  margin: 0.9rem 0.2rem 0;
  color: var(--subtle);
  font-size: 0.72rem;
}

.ai-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.ai-card .ai-link {
  justify-self: center;
}

/* ============================================================
   Cartes d'analyse Claude (ai.js).
   ============================================================ */

.aii {
  margin-top: 0.6rem;
  padding: 0.95rem;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(217, 119, 87, 0.14), transparent 55%),
    var(--m-card);
  border-color: rgba(217, 119, 87, 0.22);
}

.aii-top {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.aii-sheet {
  margin-top: 0.8rem;
}

.aii-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.aii-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  background: #d97757;
  border-radius: 0.65rem;
  color: #fff;
}

.aii .mv-ic {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aii-badge .mv-ic {
  fill: currentColor;
  stroke: none;
}

.aii-title {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.aii-title strong {
  font-size: 1rem;
}

.aii-title small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.aii-refresh {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 999px;
  color: var(--muted);
}

.aii-pitch {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.aii-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.8rem;
  margin-top: 0.75rem;
  background: #d97757;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
}

.aii-cta .mv-ic {
  fill: currentColor;
  stroke: none;
}

.aii-cta.ghost {
  background: rgba(217, 119, 87, 0.16);
  color: #f0a283;
}

.aii-stale {
  display: block;
  margin-top: 0.6rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255, 159, 10, 0.14);
  border: 0;
  border-radius: 999px;
  color: #ffb340;
  font-size: 0.74rem;
  font-weight: 800;
}

.aii-headline {
  margin: 0.7rem 0 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.aii-bullets {
  display: grid;
  gap: 0.45rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.aii-bullets li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.aii-bullets li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0.1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--muted);
}

.aii-bullets li.good::before { background: #30d158; }
.aii-bullets li.warn::before { background: #ff9f0a; }
.aii-bullets li.info::before { background: #64d2ff; }

.aii-action {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.8rem 0 0;
  padding: 0.65rem 0.75rem;
  background: rgba(217, 119, 87, 0.12);
  border-radius: 0.8rem;
  color: #f6c2ad;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.aii-action .mv-ic {
  flex: none;
  margin-top: 0.15rem;
  color: #d97757;
}

.aii-error {
  margin: 0.5rem 0 0;
  color: #ff8a80;
  font-size: 0.8rem;
  font-weight: 700;
}

.aii-skeleton {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.aii-skeleton i {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.aii-skeleton i:nth-child(2) { width: 82%; }
.aii-skeleton i:nth-child(3) { width: 64%; }

.aii-skeleton.live i {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(217, 119, 87, 0.28), rgba(255, 255, 255, 0.05));
  background-size: 200% 100%;
  animation: aiiShimmer 1.2s linear infinite;
}

@keyframes aiiShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* Choix du modèle dans l'onglet IA */
.ai-models {
  display: grid;
  gap: 0.4rem;
}

.ai-models button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 0.9rem;
  color: var(--text);
  text-align: left;
}

.ai-models button small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.ai-models button.active {
  border-color: #d97757;
  background: rgba(217, 119, 87, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .aii-skeleton.live i { animation: none; }
}

/* ============================================================
   Banque d'exercices (fiche « Ajouter un exercice »).
   ============================================================ */

.bk-tabs {
  margin-top: 0.3rem;
}

.bk-search {
  margin: 0.6rem 0 0;
}

.bk-search input {
  font-size: 16px;
}

.bk-cats {
  margin: 0.5rem calc(var(--m-gutter) * -1) 0;
  padding: 0 var(--m-gutter);
}

.bk-cats + .bk-cats {
  margin-top: 0.35rem;
}

.bk-list {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1.1rem;
  overflow: hidden;
}

.bk-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 4.2rem;
  padding: 0.5rem 0.75rem 0.5rem 0.55rem;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
}

.bk-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.bk-item + .bk-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 4.4rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

.bk-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  overflow: hidden;
  background: #fff;
  border-radius: 0.8rem;
}

.bk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bk-main {
  display: grid;
  flex: 1;
  gap: 0.1rem;
  min-width: 0;
}

.bk-main strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bk-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bk-more {
  width: 100%;
  min-height: 2.8rem;
  margin-top: 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 999px;
  color: var(--text);
  font-weight: 800;
}

.bk-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  color: var(--muted);
  font-weight: 700;
}

.bk-empty .ai-spinner {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
}

.bk-back {
  align-self: flex-start;
}

.bk-head {
  display: grid;
  gap: 0.1rem;
}

.bk-head strong {
  font-size: 1.2rem;
  line-height: 1.25;
}

.bk-head small {
  color: var(--subtle);
  font-size: 0.78rem;
}

.tr-body .tr-credit a {
  color: inherit;
}

/* Bilan du jour : anneaux en haut à droite, protéines et séances
   côte à côte en dessous. */
.en-card {
  grid-template-areas:
    "legend rings"
    "prot sess"
    "bal bal";
  align-items: start;
  row-gap: 0.7rem;
}

.en-card .mv-rings {
  align-self: start;
  margin-top: 0.2rem;
}

.en-prot {
  grid-area: prot;
}

.en-sess {
  grid-area: sess;
  justify-self: end;
  text-align: right;
}

/* Logo IA animé (Lottie) : la pastille laisse voir l'animation. */
.aii-badge {
  width: 2.5rem;
  height: 2.5rem;
  overflow: visible;
  background: none;
}

.aii-badge svg,
.ai-lottie svg {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.75);
}

.ai-lottie {
  display: block;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
}

/* ============================================================
   Bordure « Apple Intelligence » des blocs IA : un liseré de 1 px
   aux couleurs d'Apple Intelligence qui tourne. Un grand dégradé
   conique pivote derrière le bloc (rotation CSS, animée partout,
   Safari compris) ; le fond du bloc le recouvre sauf sur le bord.
   ============================================================ */

.aii,
.ai-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 0 22px rgba(201, 89, 221, 0.18), 0 0 34px rgba(8, 148, 255, 0.1);
}

/* Le dégradé qui tourne, bien plus grand que le bloc. */
.aii::before,
.ai-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  width: 250%;
  aspect-ratio: 1;
  background: conic-gradient(#0894ff, #c959dd, #ff2e54, #ff9004, #ffd36b, #ff9004, #ff2e54, #c959dd, #0894ff);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: aiBorderSpin 4s linear infinite;
  pointer-events: none;
}

/* Le fond du bloc, 1 px en retrait : seul le liseré reste visible. */
.aii::after,
.ai-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--m-radius-sm) - 1px);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(201, 89, 221, 0.1), transparent 55%),
    var(--m-card);
  pointer-events: none;
}

.aii::after {
  border-radius: calc(var(--m-radius) - 1px);
}

@keyframes aiBorderSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aii::before,
  .ai-card::before {
    animation: none;
  }
}

/* Accordéon des blocs IA */
.aii-head {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.aii-chevron {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--muted);
  transition: transform 320ms var(--m-spring);
}

.aii.is-collapsed .aii-chevron {
  transform: rotate(-90deg);
}

.aii-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 360ms var(--m-spring), opacity 260ms ease;
}

.aii-inner {
  min-height: 0;
  overflow: hidden;
}

.aii.is-collapsed .aii-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.aii.is-collapsed .aii-refresh {
  display: none;
}

.aii-sub-closed {
  display: none !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aii.is-collapsed .aii-sub-open {
  display: none !important;
}

.aii.is-collapsed .aii-sub-closed {
  display: block !important;
}

/* Plus d'air entre le bloc Coach du jour et la carte du dessus. */
.mv-view .aii[data-ai-insight="day"] {
  margin-top: 1.25rem;
}

/* Sélecteur de couleur ouvert : l'arrière-plan se floute légèrement. */
body.theme-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(6, 7, 9, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hsFade 220ms ease both;
}

.theme-panel {
  z-index: 70;
}

/* Date facultative vide : on masque le gabarit du navigateur et on
   affiche un libellé à la place. */
.mv-date {
  position: relative;
}

.mv-date-ph {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--subtle);
  font-weight: 500;
  pointer-events: none;
  display: none;
}

.mv-date.is-empty .mv-date-ph {
  display: block;
}

.mv-date.is-empty input[type="date"],
.mv-date.is-empty input[type="date"]::-webkit-datetime-edit,
.mv-date.is-empty input[type="date"]::-webkit-date-and-time-value {
  color: transparent !important;
}

/* Carte « Aujourd'hui » du Tableau sur PC : Mangé et Dépensé côte à
   côte, sur toute la largeur laissée par les anneaux. */
@media (min-width: 861px) {
  .en-card .mv-activity-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-self: center;
  }

  .en-card .mv-legend-line strong {
    white-space: normal;
  }

  .en-card .mv-legend-line strong small {
    display: inline;
    margin-left: 0.2rem;
  }

  .en-card .en-sub {
    display: block;
    margin-top: 0.15rem;
  }
}

/* Petits écrans : un libellé long passe à la ligne plutôt que
   d'écraser la valeur (« Calories actives / jour » en 320px). */
.mv-frow .mv-flabel {
  flex: 0 1 auto;
  min-width: 0;
}

.mv-frow .mv-fvalue {
  flex: 1 0 4.5rem;
}

.admin-password-form {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--m-hairline, rgba(255, 255, 255, 0.07));
}

.admin-password-form .eyebrow {
  margin: 0;
}

/* ---------- Rappels (reminders.js) ---------- */

.rm .mv-group + .mv-group {
  margin-top: 0.6rem;
}

.rm-card {
  display: grid;
  gap: 0.6rem;
}

.rm-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.rm-card-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.rm-card-top strong {
  font-size: 1.05rem;
}

.rm-bell {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(var(--accent-rgb), 0.16);
  border-radius: 0.85rem;
  color: var(--accent-text);
}

.rm-bell.off {
  background: rgba(255, 94, 108, 0.14);
  color: var(--danger);
}

.rm-bell .mv-ic {
  width: 1.3rem;
  height: 1.3rem;
}

.rm-steps {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text);
  font-size: 0.9rem;
}

.rm-steps .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
  vertical-align: -0.15rem;
  color: var(--accent-text);
}

.rm-loading {
  color: var(--muted);
  font-size: 0.88rem;
}

.rm-head {
  gap: 0.75rem;
}

.rm-head .mv-flabel {
  flex: 1 1 auto;
}

.rm-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(var(--tone), 0.16);
  border-radius: 0.7rem;
  color: rgb(var(--tone));
}

.rm-weigh { --tone: 105, 183, 255; }
.rm-creatine { --tone: 197, 140, 255; }
.rm-water { --tone: 100, 210, 255; }

.rm-time .mv-fvalue input[type="time"] {
  display: flex !important;
  justify-content: flex-end;
  width: auto !important;
}

.rm-time input[type="time"]::-webkit-date-and-time-value {
  text-align: right;
}

.rm-time input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

.rm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.rm-off {
  padding: 0.4rem 0.2rem;
  background: none;
  border: 0;
  color: var(--danger);
  font-size: 0.86rem;
  font-weight: 700;
}

.rm-actions .ghost-button,
.rm-off {
  white-space: nowrap;
}

.rm-actions .ghost-button {
  min-height: 2.7rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}

/* Bouton de rechargement : l'icône tourne pendant le rafraîchissement. */
.app-reload.spinning svg {
  animation: aiSpin 700ms linear infinite;
}

.aii-meals {
  margin-top: 1.25rem !important;
}

/* Changements proposés par l'analyse des repas */
.aii-changes {
  display: grid;
  gap: 0.4rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.aii-changes li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

.aii-changes li span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 900;
}

.aii-changes li.add span { background: rgba(48, 209, 88, 0.2); color: #30d158; }
.aii-changes li.remove span { background: rgba(255, 69, 58, 0.2); color: #ff6961; }
.aii-changes li.swap span { background: rgba(100, 210, 255, 0.2); color: #64d2ff; }

/* ============================================================
   Journée en détail (day.js) et jours « avec données » du
   calendrier de l'Historique.
   ============================================================ */

.hs-day.has-data {
  position: relative;
  color: var(--text);
  cursor: pointer;
}

.hs-day-data {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  width: 0.3rem;
  height: 0.3rem;
  margin-left: -0.15rem;
  background: var(--muted);
  border-radius: 999px;
}

/* Courbe cardiaque heure par heure */
.dj-hr {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  height: 6rem;
  margin-top: 0.6rem;
  padding: 0.5rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1rem;
}

.dj-hr i {
  position: relative;
  display: block;
  min-width: 0;
  height: 100%;
  font-style: normal;
}

.dj-hr i::before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: var(--b);
  height: var(--h);
  background: rgba(255, 55, 95, 0.35);
  border-radius: 999px;
}

.dj-hr i.dj-nohr::before {
  display: none;
}

.dj-hr b {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: 0 0 -2.5px -2.5px;
  background: #ff375f;
  border-radius: 999px;
}

.dj-hr-axis {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 0.5rem 0;
  color: var(--subtle);
  font-size: 0.66rem;
  font-weight: 700;
}

.dj-hint {
  margin: 0.35rem 0.2rem 0;
  color: var(--subtle);
  font-size: 0.72rem;
}

/* ---------- Fiche journée : même vocabulaire que le reste ---------- */

.dj-panel {
  --tone: var(--accent-rgb);
}

.dj-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.45rem;
}

.dj-titlebar h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.dj-nav {
  display: flex;
  flex: none;
  gap: 0.4rem;
}

.dj-nav .hs-round:disabled {
  opacity: 0.3;
}

.dj-panel .mv-ic,
.dj-nav .mv-ic {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dj-body {
  padding-top: 0.9rem;
}

/* Carte principale */
.dj-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.6rem;
  grid-template-areas: "legend rings" "foot foot";
  align-items: center;
  gap: 0.8rem 1rem;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 55%),
    var(--m-card);
}

.dj-hero-legend {
  grid-area: legend;
  display: grid;
  gap: 0.5rem;
}

.dj-hero-legend div {
  display: grid;
}

.dj-hero-legend span {
  font-size: 0.74rem;
  font-weight: 800;
}

.dj-hero-legend strong {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.dj-hero-legend small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}

.dj-hero-legend .kcal span { color: rgb(var(--ring-kcal)); }
.dj-hero-legend .prot span { color: rgb(var(--ring-prot)); }
.dj-hero-legend .steps span { color: #ff9f0a; }

.dj-rings {
  grid-area: rings;
  width: 7.6rem;
  height: 7.6rem;
  transform: rotate(-90deg);
}

.dj-rings circle {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
}

.dj-hero-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--m-hairline);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.dj-hero-foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dj-hero-foot .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
}

/* Sections */
.dj-section {
  margin-top: 1.4rem;
}

.dj-section h3 {
  margin: 0 0.25rem 0.55rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dj-group {
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
  overflow: hidden;
}

.dj-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.2rem;
  padding: 0.55rem 0.9rem;
}

.dj-line + .dj-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.6rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

.dj-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  background: rgba(var(--tone), 0.16);
  border-radius: 0.65rem;
  color: rgb(var(--tone));
}

.dj-ic .mv-ic {
  width: 1rem;
  height: 1rem;
}

.dj-label {
  flex: 1;
  min-width: 0;
  font-size: 0.93rem;
}

.dj-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.dj-value small {
  color: var(--subtle);
  font-size: 0.78rem;
  font-weight: 700;
}

.dj-hint {
  margin: 0.45rem 0.3rem 0;
  color: var(--subtle);
  font-size: 0.74rem;
  line-height: 1.4;
}

/* Nutrition */
.dj-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2rem 0.6rem;
}

.dj-macros > div:not(.fd-split) {
  display: grid;
}

.dj-macros span {
  font-size: 0.72rem;
  font-weight: 800;
}

.dj-macros strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.dj-macros em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
}

.dj-macros .prot span { color: rgb(var(--ring-prot)); }
.dj-macros .carb span { color: rgb(var(--ring-carb)); }
.dj-macros .fat span { color: rgb(var(--ring-fat)); }

.dj-macros .fd-split {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
}

.dj-slots {
  margin-top: 0.55rem;
}

.dj-ia {
  padding: 0.05rem 0.35rem;
  background: rgba(201, 89, 221, 0.18);
  border-radius: 0.35rem;
  color: #d9a8f5;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  vertical-align: 0.1em;
}

/* Cœur */
.dj-heart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.45rem;
}

.dj-heart .hl-tile {
  padding: 0.7rem 0.75rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1rem;
}

.dj-heart .hl-tile strong {
  font-size: 1.4rem;
}

.dj-heart .hl-tile.coral > span {
  color: #ff6b4a;
}

.dj-hr-card {
  margin-top: 0.45rem;
  padding: 0.75rem;
}

.dj-hr-card .dj-hr {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* Corps */
.dj-note {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.45rem;
  color: var(--muted);
}

.dj-note p {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.45;
}

.dj-note .mv-ic {
  flex: none;
  margin-top: 0.15rem;
}

/* Séances */
.dj-session {
  display: grid;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.85rem 0.9rem;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(var(--tone), 0.22), transparent 58%),
    var(--m-card);
  border: 1px solid rgba(var(--tone), 0.3);
  border-radius: var(--m-radius-sm);
  color: var(--text);
  text-align: left;
}

.dj-session-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.dj-session-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  background: rgba(var(--tone), 0.2);
  border-radius: 0.75rem;
  color: rgb(var(--tone));
}

.dj-session-name {
  display: grid;
  flex: 1;
  min-width: 0;
}

.dj-session-name strong {
  font-size: 1.05rem;
}

.dj-session-name small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.dj-session-top > .mv-ic {
  color: var(--subtle);
}

.dj-ex-list {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--m-hairline);
}

.dj-ex {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.84rem;
}

.dj-ex span {
  overflow: hidden;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dj-ex b {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* Analyses IA figées */
.dj-ai {
  margin-top: 0 !important;
  margin-bottom: 0.6rem;
}

.dj-ai .aii-head {
  cursor: default;
}

/* ============================================================
   En-tête : menu Réglages (engrenage) et chat avec Claude.
   ============================================================ */

.mset {
  position: relative;
}

.mset-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 75;
  display: grid;
  min-width: 15.5rem;
  padding: 0.35rem;
  background: rgba(30, 32, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  transform-origin: top right;
  animation: msetIn 220ms var(--m-spring) both;
}

.mset-menu[hidden] {
  display: none;
}

@keyframes msetIn {
  from { opacity: 0; transform: scale(0.9) translateY(-4px); }
}

.mset-menu button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0 0.8rem;
  background: none;
  border: 0;
  border-radius: 0.8rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.mset-menu button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
}

.mset-menu button:active {
  background: rgba(255, 255, 255, 0.08);
}

.mset-menu svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent-text);
}

/* ---------- Chat ---------- */

.ch-panel {
  --tone: 201, 89, 221;
}

.ch-sheet .hs-round svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ch-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.ch-head h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.ch-head small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.ch-logo {
  display: block;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
}

.ch-logo svg,
.ch-empty-logo svg {
  transform: scale(1.7);
}

.ch-head-actions {
  display: flex;
  gap: 0.4rem;
}

.ch-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.8rem;
}

.ch-msg {
  display: flex;
}

.ch-msg.me {
  justify-content: flex-end;
}

.ch-bubble {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ch-msg.me .ch-bubble {
  background: var(--accent);
  border-bottom-right-radius: 0.35rem;
  color: var(--accent-ink);
}

.ch-msg.me.pending .ch-bubble {
  opacity: 0.6;
}

.ch-msg.ai .ch-bubble {
  background: var(--m-card-2);
  border: 1px solid rgba(201, 89, 221, 0.22);
  border-bottom-left-radius: 0.35rem;
}

.ch-bubble p {
  margin: 0;
}

.ch-bubble p + p,
.ch-bubble p + ul,
.ch-bubble ul + p,
.ch-bubble p + ol,
.ch-bubble ol + p {
  margin-top: 0.55rem;
}

.ch-bubble ul,
.ch-bubble ol {
  margin: 0;
  padding-left: 1.2rem;
}

.ch-bubble li + li {
  margin-top: 0.2rem;
}

.ch-typing {
  display: flex;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
}

.ch-typing i {
  width: 0.45rem;
  height: 0.45rem;
  background: var(--muted);
  border-radius: 999px;
  animation: chDot 1.2s ease-in-out infinite;
}

.ch-typing i:nth-child(2) { animation-delay: 0.15s; }
.ch-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes chDot {
  0%, 60%, 100% { opacity: 0.3; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ch-empty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin: auto 0;
  padding: 1rem 0.5rem;
  text-align: center;
}

.ch-empty-logo {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
}

.ch-empty strong {
  font-size: 1.05rem;
}

.ch-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.ch-suggest {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.6rem;
}

.ch-suggest button {
  padding: 0.65rem 0.85rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1rem;
  color: var(--text);
  font-size: 0.86rem;
  text-align: left;
}

.ch-error {
  align-self: center;
}

.ch-foot {
  padding-top: 0.6rem;
}

.ch-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
}

.ch-form textarea {
  flex: 1;
  min-height: 2.8rem;
  max-height: 8.75rem;
  padding: 0.7rem 0.95rem;
  background: var(--m-card) !important;
  border: 1px solid var(--m-hairline) !important;
  border-radius: 1.4rem;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  resize: none;
  outline: none;
}

.ch-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  color: var(--accent-ink);
}

.ch-send:disabled {
  opacity: 0.45;
}

.ch-send svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .ch-typing i { animation: none; }
}

/* ---------- Repas : photo du plat & scan code-barres ---------- */
.ai-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.ai-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.95rem;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  transition: transform 160ms var(--m-spring), background 160ms ease;
}

.ai-tool .mv-ic {
  width: 1.1rem;
  height: 1.1rem;
  color: #e39bf5;
}

.ai-tool:active {
  transform: scale(0.96);
  background: rgba(217, 119, 87, 0.14);
}

.ai-photo {
  position: relative;
  margin-top: 0.6rem;
  border-radius: 1rem;
  overflow: hidden;
}

.ai-photo img {
  display: block;
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
}

.ai-photo .mv-del {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.scan-live,
.scan-card {
  display: grid;
  gap: 0.75rem;
}

.scan-video {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 1rem;
  overflow: hidden;
}

.scan-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.scan-video::after {
  content: "";
  position: absolute;
  inset: 32% 12%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 0.8rem;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.scan-help {
  margin: 0;
  text-align: center;
}

.scan-manual {
  display: flex;
  gap: 0.5rem;
}

.scan-manual input {
  flex: 1;
  min-width: 0;
}

.scan-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.scan-head img,
.scan-noimg {
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  background: #fff;
  border-radius: 0.8rem;
  object-fit: contain;
}

.scan-noimg {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.scan-head div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.scan-head strong {
  font-size: 1rem;
  line-height: 1.25;
}

.scan-head small {
  color: var(--muted);
  font-size: 0.8rem;
}

.scan-grams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 650;
}

.scan-grams > span:last-child {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.scan-grams input {
  width: 5.5rem;
  text-align: right;
  font-weight: 750;
}

.scan-grams em {
  color: var(--muted);
  font-style: normal;
}

.scan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.scan-chips button {
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
}

.scan-chips button.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.scan-warn {
  margin: 0;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 209, 102, 0.1);
  border-radius: 0.75rem;
  color: #ffd166;
  font-size: 0.85rem;
  font-weight: 650;
}

/* ---------- Chat en flux ---------- */
.ch-bubble .ch-typing {
  padding: 0.3rem 0;
}

.ch-tool {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0 !important;
  color: var(--muted);
  font-size: 0.85rem;
}

.ch-tool:first-child {
  margin-top: 0 !important;
}

.ch-tool .ai-spinner {
  width: 0.85rem;
  height: 0.85rem;
  border-color: rgba(217, 119, 87, 0.3);
  border-top-color: #d97757;
}

/* ---------- Note du jour : étoiles ---------- */
.dj-stars-row {
  display: inline-flex;
  gap: 0.18rem;
  line-height: 0;
}

.dj-star {
  position: relative;
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
}

.dj-star svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 214, 10, 0.16);
  stroke: rgba(255, 214, 10, 0.35);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.dj-star-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
}

.dj-star-fill svg {
  width: 1.35rem;
  fill: #ffd60a;
  stroke: #ffd60a;
}

.dj-stars-row.big .dj-star,
.dj-stars-row.big .dj-star-fill svg {
  width: 2.1rem;
  height: 2.1rem;
}

.dj-stars-row.mini {
  position: absolute;
  bottom: 0.12rem;
  left: 50%;
  gap: 0;
  transform: translateX(-50%);
}

.dj-stars-row.mini .dj-star,
.dj-stars-row.mini .dj-star-fill svg {
  width: 0.5rem;
  height: 0.5rem;
}

.hs-day:has(.dj-stars-row.mini) > span:first-child {
  transform: translateY(-0.2rem);
}

/* Plus de pastille ronde : le numéro prend la couleur de la séance
   (aujourd'hui : couleur d'accent), les étoiles restent lisibles. */
.hs-day.done,
.hs-day.done:hover,
.hs-day.today {
  background: transparent;
  border-color: transparent;
}

.hs-day.today:not(.done) {
  color: var(--accent);
  font-weight: 800;
}

.dj-rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.7rem;
}

.dj-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
}

.dj-rating-stars > span:last-child {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dj-rating-stars small {
  color: var(--muted);
  font-weight: 650;
}

.dj-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.8rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  transition: transform 160ms var(--m-spring), background 160ms ease;
}

.dj-edit-btn .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
}

.dj-edit-btn:active {
  transform: scale(0.94);
  background: rgba(var(--accent-rgb), 0.2);
}

.dj-note-card {
  display: grid;
  gap: 0.9rem;
}

.dj-note-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.dj-note-top div {
  display: grid;
  gap: 0.1rem;
}

.dj-note-top strong {
  font-size: 1.1rem;
}

.dj-note-top small {
  color: var(--muted);
  font-size: 0.82rem;
}

.dj-crit {
  display: grid;
  gap: 0.6rem;
}

.dj-crit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 2.6rem;
  align-items: center;
  gap: 0.6rem;
  --c: 48, 209, 88;
}

.dj-crit-row.mid { --c: 255, 214, 10; }
.dj-crit-row.bad { --c: 255, 69, 58; }

.dj-crit-label {
  display: grid;
  min-width: 0;
}

.dj-crit-label strong {
  font-size: 0.9rem;
}

.dj-crit-label small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dj-crit-bar {
  height: 0.4rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
}

.dj-crit-bar i {
  display: block;
  height: 100%;
  background: rgb(var(--c));
  border-radius: inherit;
}

.dj-crit-row b {
  text-align: right;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.dj-crit-row b small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

/* ---------- Modifier une journée ---------- */
.hs-sheet.fd-top {
  z-index: 95;
}

.hs-sheet.dje-sheet {
  z-index: 80;
}

.dje-panel h2 {
  margin: 0.45rem 0 0;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.dje-done {
  padding: 0.45rem 1rem;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  color: var(--accent-ink);
  font-weight: 800;
}

.dje-meal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dje-meal .nu-meal-main {
  flex: 1;
  min-width: 0;
}

.dje-ic .mv-ic {
  width: 0.9rem;
  height: 0.9rem;
}

.dje-ic.danger {
  color: var(--danger);
}

.dje-ic.confirm {
  background: var(--danger);
  color: #fff;
}

.dje-meal-form {
  display: grid;
  gap: 0.6rem;
  padding: 0.6rem 0;
}

.dje-meal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.dje-add {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.8rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px dashed rgba(var(--accent-rgb), 0.5);
  border-radius: 1rem;
  color: var(--accent);
  font-weight: 750;
}

.dje-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.dje-stepper button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: rgba(100, 210, 255, 0.14);
  border: 0;
  border-radius: 999px;
  color: #64d2ff;
  font-size: 1.2rem;
  font-weight: 700;
}

.dje-stepper strong {
  min-width: 3.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Code-barres en photo (webapp iOS : caméra en direct bloquée) */
.scan-photo-intro {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.scan-photo-intro > .mv-ic {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.6rem;
  background: rgba(217, 119, 87, 0.14);
  border-radius: 0.9rem;
  color: #d97757;
}

.scan-photo-intro p {
  display: grid;
  gap: 0.15rem;
  margin: 0;
}

.scan-photo-intro small {
  color: var(--muted);
  font-size: 0.84rem;
}

.scan-photo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Boutons IA : verre sombre + liseré dégradé, assortis au contour
   animé des blocs Claude (au lieu de l'aplat orange). */
.aii-cta,
.ai-card .primary-button.ai-go {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) padding-box,
    linear-gradient(var(--m-card-2), var(--m-card-2)) padding-box,
    linear-gradient(100deg, #0894ff, #c959dd 35%, #ff2e54 65%, #ff9004) border-box !important;
  border: 1.5px solid transparent;
  box-shadow: 0 6px 22px rgba(201, 89, 221, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff;
  letter-spacing: -0.01em;
  transition: transform 160ms var(--m-spring), box-shadow 200ms ease;
}

.aii-cta .mv-ic,
.ai-card .primary-button.ai-go .mv-ic {
  color: #e39bf5;
  fill: #e39bf5;
  filter: drop-shadow(0 0 6px rgba(201, 89, 221, 0.6));
}

.aii-cta:active,
.ai-card .primary-button.ai-go:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(201, 89, 221, 0.25);
}

.aii-cta.ghost {
  background:
    linear-gradient(var(--m-card), var(--m-card)) padding-box,
    linear-gradient(100deg, rgba(8, 148, 255, 0.6), rgba(201, 89, 221, 0.6), rgba(255, 144, 4, 0.6)) border-box;
  box-shadow: none;
  color: var(--text);
}

/* Lecture de la charge : « par haltère », « + barre 15 kg »… */
.tr-load-label {
  display: grid;
  gap: 0.1rem;
}

.tr-load-label small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

/* Taper vite sur un bouton (« + » de la charge…) ne doit jamais
   déclencher le zoom double-tap d'iOS. */
button,
[data-action],
.tr-stepper,
.tr-stepper * {
  touch-action: manipulation;
}

.hk-fit {
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  background: rgba(146, 232, 42, 0.14);
  border-radius: 999px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  vertical-align: middle;
}

/* ---------- Plan de la salle ---------- */
.gym-card {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}

.gym-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
}

.gym-head h3 {
  margin: 0;
  font-size: 1.2rem;
}

.gym-next {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: rgba(var(--accent-rgb), 0.16);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 750;
}

.gym-next i {
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent);
  border-radius: 999px;
  animation: gymPulse 1.4s ease-in-out infinite;
}

.gym-map {
  width: 100%;
  height: auto;
  overflow: visible;
}

.gym-room {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.5;
}

.gym-window {
  stroke: #64d2ff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.6;
}

.gym-mirror {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 3;
  stroke-dasharray: 6 4;
}

.gym-door {
  stroke: #d9a15b;
  stroke-width: 3;
  stroke-linecap: round;
}

.gym-wall {
  fill: var(--muted);
  font-size: 7px;
}

.gym-m {
  cursor: pointer;
}

.gym-m rect {
  fill: var(--m-card-2);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  transition: fill 200ms ease, stroke 200ms ease;
}

.gym-m text {
  fill: var(--muted);
  font-weight: 650;
  pointer-events: none;
}

.gym-m.used rect {
  fill: rgba(var(--accent-rgb), 0.14);
  stroke: rgba(var(--accent-rgb), 0.6);
}

.gym-m.used text {
  fill: var(--text);
}

.gym-m.next rect {
  fill: rgba(var(--accent-rgb), 0.35);
  stroke: var(--accent);
  stroke-width: 1.8;
  animation: gymGlow 1.4s ease-in-out infinite;
}

.gym-m.sel rect {
  stroke: #fff;
  stroke-width: 2;
}

@keyframes gymPulse {
  50% { opacity: 0.3; }
}

@keyframes gymGlow {
  50% { fill: rgba(var(--accent-rgb), 0.15); }
}

.gym-info {
  display: grid;
  gap: 0.5rem;
}

.gym-info small,
.gym-hint,
.gym-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.gym-note {
  font-size: 0.72rem;
}

.gym-ex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.gym-ex button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  background: rgba(var(--tone), 0.14);
  border: 1px solid rgba(var(--tone), 0.4);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
}

.gym-ex button b {
  color: rgb(var(--tone));
  font-size: 0.7rem;
}

.gym-ex button:disabled {
  opacity: 0.55;
}

.gym-info strong {
  font-size: 0.95rem;
}

/* ---------- Partage d'une séance ---------- */
.hs-sheet.share-sheet {
  z-index: 90;
}

.hs-share-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.2rem;
  padding: 0;
}

.hs-share-btn svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-body {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
}

.share-img {
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 4 / 5;
  border-radius: 1.2rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  -webkit-touch-callout: default;
}

.share-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 26rem;
  background: var(--m-card);
  border-radius: 1.2rem;
  color: var(--muted);
}

.share-go {
  width: 100%;
  max-width: 26rem;
}

.share-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Illustrations maison : deux images en fondu enchaîné, en boucle
   (tenue en position de départ, montée, tenue contractée, retour). */
.tr-media.ai {
  padding: 0;
  overflow: hidden;
}

.ai-frames {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.tr-media.ai .ai-frames img,
.ai-frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-frames img + img {
  animation: aiFramesFade 2.8s ease-in-out infinite;
}

@keyframes aiFramesFade {
  0%, 18% { opacity: 0; }
  42%, 68% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* Trois images en aller-retour : 1 → 2 → 3 → 2 → 1 (puis on recommence). */
.ai-frames.f3 img:nth-child(2) {
  animation: aiFrames3a 5.6s ease-in-out infinite;
}

.ai-frames.f3 img:nth-child(3) {
  animation: aiFrames3b 5.6s ease-in-out infinite;
}

@keyframes aiFrames3a {
  0%, 10% { opacity: 0; }
  20%, 75% { opacity: 1; }
  85%, 100% { opacity: 0; }
}

@keyframes aiFrames3b {
  0%, 35% { opacity: 0; }
  45%, 55% { opacity: 1; }
  65%, 100% { opacity: 0; }
}

/* Quatre images : 1 → 2 → 3 → 4 → 4 → 2 → 3 → 1. */
.ai-frames.f4 img:nth-child(2) {
  animation: aiFrames4a 9.8s ease-in-out infinite;
}

.ai-frames.f4 img:nth-child(3) {
  animation: aiFrames4b 9.8s ease-in-out infinite;
}

.ai-frames.f4 img:nth-child(4) {
  animation: aiFrames4c 9.8s ease-in-out infinite;
}

@keyframes aiFrames4a {
  0%, 5.14% { opacity: 0; }
  9.14%, 19.43% { opacity: 1; }
  23.43%, 62.29% { opacity: 0; }
  66.29%, 76.57% { opacity: 1; }
  80.57%, 100% { opacity: 0; }
}

@keyframes aiFrames4b {
  0%, 19.43% { opacity: 0; }
  23.43%, 33.71% { opacity: 1; }
  37.71%, 76.57% { opacity: 0; }
  80.57%, 90.86% { opacity: 1; }
  94.86%, 100% { opacity: 0; }
}

@keyframes aiFrames4c {
  0%, 33.71% { opacity: 0; }
  37.71%, 62.29% { opacity: 1; }
  66.29%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-frames img + img { animation: none; opacity: 0; }
}

/* ---------- Admin : illustrations d'exercices ---------- */
.admin-frames {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft, rgba(255, 255, 255, 0.08));
}

.frames-hint,
.frames-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.frames-status {
  color: #30d158;
  font-weight: 650;
}

.frames-status.error {
  color: var(--danger);
}

.frames-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.frames-slot {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  cursor: pointer;
}

.frames-prev {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
}

.frames-slot.new .frames-prev {
  border: 2px solid var(--accent);
}

.frames-prev img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frames-prev b {
  color: #8a94a3;
  font-size: 2rem;
  font-weight: 400;
}

.frames-slot small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.frames-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  color: rgb(var(--tone));
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.frames-group i {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(var(--tone));
  border-radius: 999px;
}

.frames-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.frames-tile {
  display: grid;
  gap: 0.25rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  text-align: center;
}

.frames-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 0.8rem;
}

.frames-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frames-thumb em {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  background: #30d158;
  border-radius: 999px;
  color: #fff;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 800;
}

.frames-tile.on .frames-thumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}

.frames-tile small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.66rem;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.frames-tile.on small {
  color: var(--accent);
  font-weight: 750;
}

.frames-picked {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
}

.frames-refs p {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.frames-refs > div {
  display: flex;
  gap: 0.6rem;
}

.frames-ref {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

.frames-ref img {
  width: 5.5rem;
  height: 5.5rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.7rem;
  object-fit: contain;
}

/* ---------- Modifier une séance (ordre, retrait) ---------- */
.tr-head-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tr-edit-btn {
  padding: 0.35rem 0.8rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 750;
}

.tr-edit-btn.on {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}

.tr-edit-hint {
  margin: -0.2rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.tr-ex-edit {
  cursor: default;
}

.tr-edit-tools {
  display: flex;
  flex: none;
  gap: 0.3rem;
  margin-left: auto;
}

.tr-edit-tools button {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 999px;
  color: var(--text);
}

.tr-edit-tools button:disabled {
  opacity: 0.25;
}

.tr-edit-tools button.danger {
  background: rgba(255, 69, 58, 0.15);
  color: var(--danger);
}

.tr-edit-tools .mv-ic,
.tr-restore .mv-ic {
  width: 1rem;
  height: 1rem;
}

.tr-hidden-title {
  margin: 0;
  padding: 0.8rem 0.9rem 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tr-ex-hidden {
  opacity: 0.75;
}

.tr-restore {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.4rem 0.75rem;
  background: rgba(48, 209, 88, 0.14);
  border: 0;
  border-radius: 999px;
  color: #30d158;
  font-size: 0.8rem;
  font-weight: 750;
}

/* ---------- Compléments (page Repas) ---------- */
.nu-supps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding: 0.6rem;
}

.nu-supp {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  color: var(--text);
  text-align: left;
  transition: transform 160ms var(--m-spring), background 200ms ease, border-color 200ms ease;
}

.nu-supp:active {
  transform: scale(0.97);
}

.nu-supp-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background: rgba(var(--tone), 0.15);
  border-radius: 0.8rem;
  color: rgb(var(--tone));
}

.nu-supp-icon .mv-ic {
  width: 1.15rem;
  height: 1.15rem;
}

.nu-supp-main {
  display: grid;
  min-width: 0;
}

.nu-supp-main strong {
  font-size: 0.95rem;
}

.nu-supp-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-supp.on {
  background: rgba(var(--tone), 0.14);
  border-color: rgba(var(--tone), 0.5);
}

.nu-supp.on .nu-supp-icon {
  background: rgb(var(--tone));
  color: #0b0d10;
}

.nu-supp.on small {
  color: rgb(var(--tone));
  font-weight: 700;
}

.nu-supps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
}

.nu-supps .nu-supp {
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
}

.nu-supps .nu-supp-main {
  justify-items: center;
}

/* « Prévu ce jour » en accordéon */
.nu-planned-acc > summary {
  list-style: none;
}

.nu-planned-acc > summary::-webkit-details-marker {
  display: none;
}

.nu-acc-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.2rem 0;
  cursor: pointer;
}

.nu-acc-head > div {
  flex: 1;
  min-width: 0;
}

.nu-acc-head h2 {
  margin: 0;
}

.nu-acc-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.nu-acc-meta .mv-ic {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--accent);
}

.nu-acc-chev .mv-ic {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--muted);
  transition: transform 220ms ease;
}

/* Comme les blocs Jarvis : › fermé, ⌄ ouvert. */
.nu-planned-acc[open] .nu-acc-chev .mv-ic {
  transform: rotate(90deg);
}

.nu-acc-all {
  display: block;
  margin: 0.5rem 0 0.4rem auto;
}

.nu-planned-acc[open] .nu-planned {
  animation: accOpen 260ms ease both;
}

@keyframes accOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.nu-sort {
  border-style: dashed !important;
}

.nu-sort.active {
  border-style: solid !important;
}

/* ---------- Muscles travaillés (Suivi) ---------- */
.mu-card {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.9rem;
  --mu: 255, 42, 36;
}

.mu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mu-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.mu-period {
  display: flex;
  padding: 0.2rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.mu-period button {
  padding: 0.3rem 0.75rem;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.mu-period button.on {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.mu-bodies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.mu-bodies figure {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  margin: 0;
}

.mu-bodies figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.mu-fig {
  position: relative;
  width: 100%;
  max-width: 10.5rem;
  isolation: isolate;
}

.mu-fig img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Muscle travaillé : rouge posé sur la planche (les reliefs restent visibles),
   clair avec peu de séries, vif avec beaucoup. */
.mu-tint {
  position: absolute;
  inset: 0;
  background: rgb(var(--mu));
  -webkit-mask: var(--m) center / 100% 100% no-repeat;
  mask: var(--m) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  transition: opacity 300ms ease;
}

.mu-tint.l1 { opacity: 0.3; }
.mu-tint.l2 { opacity: 0.5; }
.mu-tint.l3 { opacity: 0.75; }
.mu-tint.l4 { opacity: 0.9; }

.mu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.mu-chip.l0 {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
}

.mu-chip b {
  color: var(--muted);
  font-weight: 600;
}

.mu-chip i,
.mu-legend i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
}

.mu-chip.l0 i, .mu-legend i.l0 { background: rgba(255, 255, 255, 0.18); }
.mu-chip.l1 i, .mu-legend i.l1 { background: rgba(var(--mu), 0.3); }
.mu-chip.l2 i, .mu-legend i.l2 { background: rgba(var(--mu), 0.5); }
.mu-chip.l3 i, .mu-legend i.l3 { background: rgba(var(--mu), 0.75); }
.mu-chip.l4 i, .mu-legend i.l4 { background: rgb(var(--mu)); }

.mu-legend {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.76rem;
}

.mu-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mu-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- Répartition musculaire (radar) ---------- */
.mr-sub {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.mr-card .mu-head {
  align-items: flex-start;
  gap: 0.75rem;
}

.mr-chart {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  aspect-ratio: 1;
}

.mr-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mr-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.mr-ring.outer {
  stroke: rgba(255, 255, 255, 0.14);
}

.mr-spoke {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.mr-spoke.on {
  stroke: rgba(var(--mu), 0.7);
  stroke-dasharray: none;
}

.mr-area {
  fill: rgba(var(--mu), 0.22);
  stroke: rgb(var(--mu));
  stroke-width: 2;
  stroke-linejoin: round;
}

.mr-dot {
  fill: #fff;
  stroke: rgb(var(--mu));
  stroke-width: 2;
}

.mr-dot.on {
  fill: rgb(var(--mu));
  stroke: #fff;
}

/* Mini-figure de chaque axe (cadrage de la planche, muscle en rouge). */
.mr-icon {
  position: absolute;
  width: 13.5%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: #101216;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  isolation: isolate;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease, opacity 200ms ease;
}

.mr-icon .mu-fig {
  position: absolute;
  max-width: none;
}

.mr-icon.off {
  opacity: 0.4;
}

.mr-icon.on {
  border-color: rgb(var(--mu));
  transform: translate(-50%, -50%) scale(1.12);
}

.mr-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 0.55rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  text-align: center;
}

.mr-focus b {
  font-size: 0.95rem;
  font-weight: 800;
}

.mr-focus strong {
  color: rgb(var(--mu));
  font-size: 0.95rem;
  font-weight: 800;
}

.mr-focus span {
  color: var(--muted);
  font-size: 0.78rem;
}

.mr-split {
  display: grid;
  gap: 0.35rem;
}

.mr-split-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.mr-split-top b {
  color: var(--text);
  font-weight: 800;
}

.mr-split-top em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mr-bar {
  height: 0.5rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.mr-bar i {
  display: block;
  height: 100%;
  background: rgb(var(--mu));
  border-radius: 999px 0 0 999px;
}

.mr-bar.empty i {
  background: none;
}

/* ---------- Trophées ---------- */
.tp-card {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.tp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tp-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.tp-head small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.tp-all {
  background: none;
  border: 0;
  color: var(--accent);
  font-weight: 750;
}

.tp-medal {
  position: relative;
  display: inline-grid;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--tb) 45%, transparent));
}

.tp-medal svg {
  width: 100%;
  height: 100%;
}

.tp-medal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  background-size: 250% 100%;
  clip-path: polygon(50% 5%, 89% 27%, 89% 73%, 50% 95%, 11% 73%, 11% 27%);
  animation: tpShine 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tpShine {
  0%, 60% { background-position: 150% 0; }
  100% { background-position: -100% 0; }
}

.tp-medal.locked {
  filter: grayscale(1) brightness(0.45);
  opacity: 0.7;
}

.tp-medal.locked::after {
  display: none;
}

.tp-medal.sm { width: 2.6rem; height: 2.6rem; }
.tp-medal.lg { width: 4.2rem; height: 4.2rem; }
.tp-medal.xl { width: 7rem; height: 7rem; }

.tp-recent {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.tp-mini {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
}

.tp-mini small {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.tp-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.tp-sub {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tp-next {
  display: grid;
  gap: 0.6rem;
}

.tp-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tp-row > div {
  display: grid;
  flex: 1;
  gap: 0.25rem;
  min-width: 0;
}

.tp-row strong {
  font-size: 0.9rem;
}

.tp-row small {
  color: var(--muted);
  font-size: 0.76rem;
}

.tp-bar {
  height: 0.4rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.tp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd60a, #ff9f0a);
  border-radius: inherit;
}

.tp-panel h2 {
  margin: 0.45rem 0 0;
}

.tp-body {
  display: grid;
  gap: 0.7rem;
}

.tp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.tp-cell {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  padding: 0.8rem 0.4rem;
  background: var(--m-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  text-align: center;
}

.tp-cell.done {
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 214, 10, 0.1), transparent 60%), var(--m-card);
  border-color: rgba(255, 214, 10, 0.25);
}

.tp-cell strong {
  font-size: 0.8rem;
  line-height: 1.2;
}

.tp-cell small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.tp-cell em {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
}

.tp-cell.done em {
  color: #ffd60a;
}

.tp-toast {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: hsFade 300ms ease both;
}

.tp-toast-card {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  width: min(22rem, 100%);
  padding: 1.6rem 1.3rem 1.3rem;
  background: radial-gradient(100% 70% at 50% 0%, rgba(255, 214, 10, 0.16), transparent 70%), var(--m-card);
  border: 1px solid rgba(255, 214, 10, 0.3);
  border-radius: 1.6rem;
  text-align: center;
  animation: tpPop 520ms cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.tp-toast-card p {
  margin: 0.4rem 0 0;
  color: #ffd60a;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tp-toast-card strong {
  font-size: 1.5rem;
}

.tp-toast-card small {
  color: var(--muted);
}

.tp-toast-card .primary-button {
  width: 100%;
  margin-top: 0.6rem;
}

@keyframes tpPop {
  from { opacity: 0; transform: scale(0.6) translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Niveau (couleur de l'app) ---------- */
.lv-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
  cursor: pointer;
}

.lv-ring {
  position: relative;
  flex: none;
  width: 4.6rem;
  height: 4.6rem;
}

.lv-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.lv-track {
  fill: rgba(var(--accent-rgb), 0.08);
  stroke: rgba(var(--accent-rgb), 0.16);
  stroke-width: 5;
}

.lv-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}

.lv-emoji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
}

.lv-pill {
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  min-width: 1.6rem;
  padding: 0.08rem 0.4rem;
  background: var(--accent);
  border: 2px solid var(--m-card);
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
  transform: translateX(-50%);
}

.lv-main {
  display: grid;
  flex: 1;
  gap: 0.3rem;
  min-width: 0;
}

.lv-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.lv-main h3 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.lv-sub {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lv-chev {
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
}

.lv-bar {
  display: block;
  height: 0.35rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.lv-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.lv-badge {
  display: grid;
  place-content: center;
  width: 6.5rem;
  height: 6.5rem;
  background: linear-gradient(145deg, #ffe27a, #c98a06);
  border-radius: 1.8rem;
  box-shadow: 0 8px 22px rgba(201, 138, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #2a1c00;
  line-height: 1;
  text-align: center;
}

.lv-badge small {
  font-size: 0.8rem;
  font-weight: 800;
}

.lv-badge strong {
  font-size: 2.6rem;
  font-weight: 900;
}

/* Feuille « Ta route vers Boss » */
.lv-panel h2 {
  margin: 0.45rem 0 0;
}

.lv-body {
  display: grid;
  gap: 0.8rem;
}

.lv-rules {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.lv-road {
  position: relative;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lv-road::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1.25rem;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.lv-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.7rem 0.55rem 0;
  border-radius: 1rem;
}

.lv-dot {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--m-card-2);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 1.15rem;
}

.lv-step-main {
  display: grid;
  flex: 1;
  gap: 0.2rem;
  min-width: 0;
}

.lv-step-main strong {
  font-size: 0.95rem;
}

.lv-step-main small {
  color: var(--muted);
  font-size: 0.74rem;
}

.lv-step em {
  flex: none;
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 700;
}

.lv-step.todo .lv-dot {
  filter: grayscale(1);
  opacity: 0.55;
}

.lv-step.todo strong {
  color: var(--muted);
}

.lv-step.done .lv-dot {
  border-color: rgba(48, 209, 88, 0.6);
}

.lv-step.done em {
  color: #30d158;
}

.lv-step.here {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.14), transparent);
}

.lv-step.here .lv-dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}

.lv-step.here em {
  color: var(--accent);
}

/* ---------- Suivi : derniers jours ---------- */
.pr-day {
  align-items: center;
}

.pr-date {
  display: grid;
  flex: none;
  place-content: center;
  width: 2.8rem;
  height: 2.8rem;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 0.9rem;
  line-height: 1;
  text-align: center;
}

.pr-date small {
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pr-date strong {
  font-size: 1.15rem;
  font-weight: 850;
}

.pr-weight {
  margin-left: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
}

.pr-chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.pr-chip {
  padding: 0.12rem 0.45rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.pr-chip.kcal { background: rgba(var(--ring-kcal), 0.14); color: rgb(var(--ring-kcal)); }
.pr-chip.gym { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.pr-chip.water { background: rgba(100, 210, 255, 0.14); color: #64d2ff; }
.pr-chip.steps { background: rgba(255, 159, 10, 0.14); color: #ff9f0a; }
.pr-chip.sleep { background: rgba(191, 90, 242, 0.14); color: #bf5af2; }

.dj-stars-row.inl {
  flex: none;
  gap: 0.05rem;
}

.dj-stars-row.inl .dj-star,
.dj-stars-row.inl .dj-star-fill svg {
  width: 0.8rem;
  height: 0.8rem;
}

.lv-card {
  position: relative;
}

.lv-info {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 700;
}

.lv-quests {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 750;
}

.lv-quest-list {
  display: grid;
  gap: 0.45rem;
}

.lv-quest {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  background: var(--m-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
}

.lv-quest > div {
  display: grid;
  flex: 1;
  gap: 0.2rem;
  min-width: 0;
}

.lv-quest strong {
  font-size: 0.9rem;
}

.lv-quest small {
  color: var(--muted);
  font-size: 0.74rem;
}

.lv-quest em {
  flex: none;
  color: var(--accent);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.lv-q-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.8rem;
  font-size: 1.05rem;
}

.lv-quest.done {
  border-color: rgba(48, 209, 88, 0.35);
  background: rgba(48, 209, 88, 0.07);
}

.lv-quest.done .lv-q-icon {
  background: #30d158;
  color: #07130a;
  font-weight: 900;
}

.lv-quest.done em {
  color: #30d158;
}

.lv-rules-list {
  display: grid;
  overflow: hidden;
  background: var(--m-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
}

.lv-rules-list > div {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
}

.lv-rules-list > div + div {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.lv-rules-list p {
  flex: 1;
  margin: 0;
  font-size: 0.86rem;
}

.lv-rules-list b {
  color: var(--accent);
  font-size: 0.82rem;
}

.lv-rules-btn {
  justify-self: start;
  padding: 0.45rem 0.8rem;
  background: rgba(var(--accent-rgb), 0.12);
  border: 0;
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 750;
}

/* Le corps de la feuille est plus petit que son contenu : les lignes
   gardent leur hauteur naturelle (sinon la liste « overflow: hidden »
   s'écrase à 0) et c'est le corps qui défile. */
.lv-body {
  align-content: start;
  grid-auto-rows: max-content;
}

/* ---------- Progression par exercice (1RM) ---------- */
.tr-prog {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem;
  background: var(--m-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.1rem;
  color: var(--accent);
}

.tr-prog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
}

.tr-prog-head div {
  display: grid;
}

.tr-prog-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.tr-prog-head strong {
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 850;
}

.tr-prog-delta {
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  font-size: 0.74rem !important;
}

.tr-prog-delta.up { background: rgba(48, 209, 88, 0.14); color: #30d158 !important; }
.tr-prog-delta.down { background: rgba(255, 69, 58, 0.14); color: #ff453a !important; }

.tr-prog-chart {
  width: 100%;
  height: 7rem;
}

.tr-prog-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.tr-prog-foot b {
  color: #ffd60a;
}

.tr-prog-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* ---------- Échauffement ---------- */
.hs-sheet.wu-sheet {
  z-index: 90;
}

.wu-body {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.wu-now {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
}

.wu-tag {
  padding: 0.25rem 0.7rem;
  background: rgba(var(--tone), 0.16);
  border-radius: 999px;
  color: rgb(var(--tone));
  font-size: 0.75rem;
  font-weight: 800;
}

.wu-ring {
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
}

.wu-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.wu-track {
  fill: none;
  stroke: rgba(var(--tone), 0.15);
  stroke-width: 8;
}

.wu-fill {
  fill: none;
  stroke: rgb(var(--tone));
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 250ms linear;
}

.wu-ring strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.wu-now h2 {
  margin: 0;
  font-size: 1.35rem;
}

.wu-now p {
  margin: 0;
  max-width: 24rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.wu-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.3rem;
}

.wu-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wu-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--m-card);
  border-radius: 0.9rem;
}

.wu-list li > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.wu-list li div {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 0.5rem;
}

.wu-list strong {
  font-size: 0.86rem;
}

.wu-list small {
  color: var(--muted);
  font-size: 0.78rem;
}

.wu-list li.on {
  outline: 1px solid rgba(var(--tone), 0.6);
}

.wu-list li.on > span {
  background: rgb(var(--tone));
  color: #0b0d10;
}

.wu-list li.done {
  opacity: 0.55;
}

.wu-list li.done > span {
  background: #30d158;
  color: #07130a;
}

.wu-skip {
  justify-self: center;
  padding: 0.4rem 0.8rem;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 650;
}

/* ---------- Défis ---------- */
.ch-card {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.ch-list {
  display: grid;
  gap: 0.6rem;
}

.ch-item,
.ch-def {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ch-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 0.9rem;
  font-size: 1.3rem;
}

.ch-main,
.ch-def > div {
  display: grid;
  flex: 1;
  gap: 0.28rem;
  min-width: 0;
}

.ch-main strong,
.ch-def strong {
  font-size: 0.92rem;
}

.ch-main small,
.ch-def small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.ch-item.done .ch-ic { background: rgba(255, 214, 10, 0.16); }
.ch-item.done small { color: #ffd60a; }
.ch-item.failed { opacity: 0.7; }
.ch-item.failed small { color: #ff453a; }

.ch-add {
  display: flex;
  gap: 0.35rem;
}

.ch-add button {
  padding: 0.3rem 0.65rem;
  background: rgba(var(--accent-rgb), 0.14);
  border: 0;
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
}

.ch-x {
  flex: none;
  padding: 0.35rem 0.7rem;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.ch-def {
  padding: 0.75rem;
  background: var(--m-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
}

.ch-def .primary-button,
.ch-def .ghost-button {
  flex: none;
  min-height: 2.3rem;
  padding: 0 0.9rem;
  font-size: 0.82rem;
}

.ch-tier {
  justify-self: start;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.ch-tier.bronze { background: rgba(240, 178, 122, 0.16); color: #f0b27a; }
.ch-tier.argent { background: rgba(200, 208, 218, 0.14); color: #d6dce4; }
.ch-tier.or { background: rgba(255, 214, 10, 0.16); color: #ffd60a; }
.ch-tier.platine { background: rgba(120, 200, 230, 0.16); color: #8fd8f3; }

/* Bloc niveau (Tableau) : fond noir, un seul blob flou qui dérive
   et change lentement de couleur. */
.lv-card {
  isolation: isolate;
  overflow: hidden;
  background: var(--m-card) !important;
  border: 1px solid var(--m-hairline) !important;
}

.lv-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 14%;
  width: 9rem;
  height: 9rem;
  margin: -4.5rem 0 0 -4.5rem;
  background: #bf5af2;
  border-radius: 999px;
  filter: blur(42px);
  opacity: 0.55;
  pointer-events: none;
  animation: lvBlobMove 16s ease-in-out infinite alternate, lvBlobHue 12s linear infinite;
}

/* 2e blob : part de la droite, suit un autre trajet et a toujours une
   demi-période d'avance sur les couleurs du 1er (jamais la même). */
.lv-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 30%;
  right: 8%;
  width: 8rem;
  height: 8rem;
  margin: -4rem 0 0 0;
  background: #30d158;
  border-radius: 999px;
  filter: blur(42px);
  opacity: 0.5;
  pointer-events: none;
  animation: lvBlobMove2 13s ease-in-out infinite alternate, lvBlobHue 12s linear -6s infinite;
}

@keyframes lvBlobMove2 {
  0% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-80%, 45%) scale(0.9); }
  100% { transform: translate(-190%, -10%) scale(1.2); }
}

.lv-card > :not(.lv-info) {
  position: relative;
}

.lv-card .lv-track {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.12);
}

.lv-card .lv-fill {
  stroke: #fff;
}

.lv-card .lv-pill {
  background: #fff;
  border-color: var(--m-card);
  color: #111;
}

.lv-card .lv-kicker,
.lv-card .lv-sub {
  color: rgba(255, 255, 255, 0.6);
}

.lv-card .lv-quests {
  color: #fff;
}

.lv-card .lv-bar {
  background: rgba(255, 255, 255, 0.1);
}

.lv-card .lv-bar i {
  background: #fff;
}

.lv-card .lv-info {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@keyframes lvBlobMove {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(90%, -20%) scale(1.25); }
  100% { transform: translate(170%, 15%) scale(0.95); }
}

@keyframes lvBlobHue {
  0% { background: #bf5af2; }
  25% { background: #0a84ff; }
  50% { background: #30d158; }
  75% { background: #ff375f; }
  100% { background: #bf5af2; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-card::before,
  .lv-card::after {
    animation: none;
  }
}

/* ---------- Bloc niveau : contenu (v3) ---------- */
.lv-card {
  display: grid !important;
  gap: 0.9rem;
  padding: 1.1rem 1.1rem 0.95rem !important;
}

.lv-head {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding-right: 2rem;
}

.lv-level {
  display: grid;
  flex: none;
  place-content: center;
  width: 4.1rem;
  height: 4.1rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1;
  text-align: center;
}

.lv-level small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lv-level strong {
  margin-top: 0.15rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.lv-id {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.lv-id h3 {
  margin: 0;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.lv-id h3 span {
  font-size: 1.15rem;
}

.lv-id small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  font-weight: 600;
}

.lv-xp {
  display: grid;
  gap: 0.4rem;
}

.lv-xp-top {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}

.lv-xp-top em {
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
  font-weight: 650;
}

.lv-xp-top span:last-child {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}

.lv-card .lv-bar {
  height: 0.55rem;
  background: rgba(255, 255, 255, 0.1);
}

.lv-card .lv-bar i {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.75), #fff);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.lv-foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 650;
}

.lv-foot b {
  color: #fff;
}

.lv-dots {
  display: flex;
  gap: 0.25rem;
}

.lv-dots i {
  width: 0.55rem;
  height: 0.55rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

.lv-dots i.on {
  background: #30d158;
  box-shadow: 0 0 8px rgba(48, 209, 88, 0.7);
}

.lv-go {
  margin-left: auto;
  color: #fff;
  font-weight: 750;
}

.lv-card .lv-info {
  top: 0.9rem;
  right: 0.9rem;
}

/* ---------- Page Profil ---------- */
.hs-sheet.pf-sheet { z-index: 72; }
.hs-sheet.tp-sheet { z-index: 80; }

.pf-body {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  grid-auto-rows: max-content;
}

.pf-hero {
  gap: 1rem !important;
  cursor: default !important;
}

.pf-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.pf-avatar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  padding: 3px;
  border-radius: 999px;
}

/* Anneau dégradé qui tourne (seul l'anneau tourne, pas le contenu). */
.pf-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: conic-gradient(from 0deg, #bf5af2, #0a84ff, #30d158, #ff375f, #bf5af2);
  border-radius: 999px;
  animation: pfRing 8s linear infinite;
}

.pf-avatar span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #15171c;
  border-radius: 999px;
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 850;
}

.pf-avatar i {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  background: #15171c;
  border: 2px solid var(--m-card);
  border-radius: 999px;
  z-index: 2;
  font-size: 0.95rem;
  font-style: normal;
}

@keyframes pfRing {
  to { transform: rotate(360deg); }
}

.pf-who {
  display: grid;
  flex: 1;
  gap: 0.3rem;
  min-width: 0;
}

.pf-who h2 {
  margin: 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.pf-title {
  justify-self: start;
  padding: 0.18rem 0.55rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 750;
}

.pf-lvl {
  display: grid;
  flex: none;
  justify-items: end;
  line-height: 1;
}

.pf-lvl small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pf-lvl strong {
  color: #fff;
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.pf-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.pf-links button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.95rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.pf-links svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-links span {
  flex: 1;
  min-width: 0;
}

.pf-links b {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

.pf-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.pf-stats div {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.3rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 1rem;
  text-align: center;
}

.pf-stats strong {
  font-size: 1.05rem;
  font-weight: 850;
}

.pf-stats span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.pf-body .tp-card,
.pf-body .ch-card {
  margin-top: 0;
}

.lv-card .lv-profile-btn {
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.lv-profile-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Tuile « Niveau » du Tableau : fond transparent et fine bordure
   dégradée qui tourne (angle animé via @property). */
@property --lv-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.lv-card .lv-level {
  position: relative;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lv-card .lv-level::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: conic-gradient(from var(--lv-angle), #bf5af2, #0a84ff, #30d158, #ff375f, #bf5af2);
  border-radius: 1.2rem;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lvAngle 8s linear infinite;
  pointer-events: none;
}

@keyframes lvAngle {
  to { --lv-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-card .lv-level::before,
  .pf-avatar::before {
    animation: none;
  }
}

/* Blobs animés retirés à la demande (fond uni de la carte). */
.lv-card::before,
.lv-card::after {
  display: none !important;
}

/* ---------- Bloc niveau du Tableau (v4, sobre) ---------- */
.lvh {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
  padding: 0.9rem 0.95rem !important;
  cursor: pointer;
}

.lvh-emoji {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  background: rgba(var(--accent-rgb), 0.14);
  border-radius: 999px;
  font-size: 1.55rem;
}

.lvh-main {
  display: grid;
  flex: 1;
  gap: 0.4rem;
  min-width: 0;
}

.lvh-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.lvh-row strong {
  overflow: hidden;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lvh-lvl {
  flex: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.lvh-lvl b {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 900;
}

.lvh-bar {
  display: block;
  height: 0.32rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.lvh-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.lvh-sub {
  align-items: center;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.lvh-q {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.lvh .lv-dots i {
  width: 0.42rem;
  height: 0.42rem;
}

.lvh-info {
  display: grid;
  flex: none;
  align-self: flex-start;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin: -0.2rem -0.15rem 0 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 700;
}

/* « Séances 7 j » centré sous les anneaux. */
.en-sess {
  justify-self: center !important;
  width: 100%;
  text-align: center !important;
}

.en-sess .mv-legend-line {
  justify-items: center;
  text-align: center;
}

.lvh-initial {
  color: var(--accent);
  font-size: 1.35rem !important;
  font-weight: 900;
}

/* Étoile favori (Jarvis, scan) */
.fd-star-mini {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 999px;
  color: var(--muted);
}

.fd-star-mini .mv-ic {
  width: 0.95rem;
  height: 0.95rem;
}

.fd-star-mini.on {
  background: rgba(255, 214, 10, 0.16);
  color: #ffd60a;
}

.fd-star-mini.on .mv-ic {
  fill: #ffd60a;
}

.scan-fav {
  margin-left: auto;
}

/* Onglets de la feuille d'ajout : une seule ligne, défilable. */
.fd-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
}

.fd-tabs::-webkit-scrollbar {
  display: none;
}

.fd-tabs button {
  flex: none !important;
  white-space: nowrap;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}

.frames-full {
  display: flex;
  justify-content: center;
  text-decoration: none;
}

/* ---------- Paramètres (settings.js) ---------- */
.hs-sheet.st-sheet { z-index: 70; }

.st-panel {
  --tone: var(--accent-rgb);
}

.st-panel .st-head {
  padding: 0.9rem 1rem 0.8rem;
  background: none;
}

.st-bar {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.5rem;
}

.st-bar h2 {
  margin: 0;
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.st-bar-side {
  width: 2.5rem;
}

.st-back .mv-ic {
  width: 1.2rem;
  height: 1.2rem;
}

.st-panel .st-body {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 1.4rem;
  padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
}

.st-panel .st-body.st-page-reminders,
.st-panel .st-body.st-page-theme,
.st-panel .st-body.st-page-training {
  gap: 0.8rem;
}

.st-hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 18px;
  color: var(--text);
  text-align: left;
}

.st-hero:active {
  background: #1b1e24;
}

.st-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--av);
  border-radius: 50%;
  color: var(--accent-ink);
  font-size: 1.3rem;
  font-weight: 850;
}

.st-who {
  display: grid;
  flex: 1;
  gap: 0.15rem;
  min-width: 0;
}

.st-who strong {
  font-size: 1.15rem;
  font-weight: 800;
}

.st-who span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.st-group {
  display: grid;
  gap: 0.55rem;
}

.st-group h3,
.st-sub {
  margin: 0;
  padding: 0 0.2rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.st-sub {
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

.st-list {
  overflow: hidden;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 18px;
}

.st-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.7rem;
  padding: 0.7rem 0.95rem;
  margin: 0;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.st-row.st-static {
  cursor: default;
}

button.st-row:active,
label.st-row:active {
  background: rgba(255, 255, 255, 0.06);
}

.st-row + .st-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.6rem;
  right: 0;
  border-top: 1px solid var(--m-hairline);
}

.st-static + .st-static::before {
  left: 0.95rem;
}

.st-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  color: var(--text);
}

.st-ic .mv-ic {
  width: 1.4rem;
  height: 1.4rem;
}

.st-red .st-ic { color: #ff5e6c; }
.st-gold .st-ic { color: #ffd166; }

.st-main {
  display: grid;
  flex: 1;
  gap: 0.12rem;
  min-width: 0;
}

.st-main strong {
  font-size: 0.98rem;
  font-weight: 650;
}

.st-row .st-main > span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
}

.st-main a {
  color: var(--accent-text);
}

.st-row .st-main > .st-status.on { color: #69b7ff; }
.st-row .st-main > .st-status.warn { color: #ffd166; }

.st-chev {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--muted);
  opacity: 0.6;
}

.st-swatch {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.st-bad .st-main strong,
.st-bad .st-ic {
  color: #ff5e6c;
}

.st-version {
  margin: -0.4rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.7;
}

/* Interrupteur */
.st-switch {
  position: relative;
  flex: none;
  width: 3.1rem;
  height: 1.85rem;
}

.st-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.st-switch i {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  transition: background 200ms ease;
}

.st-switch i::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.45rem;
  height: 1.45rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.st-switch input:checked + i {
  background: var(--accent);
}

.st-switch input:checked + i::after {
  transform: translateX(1.25rem);
}

/* Sous-pages */
.st-intro,
.st-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.st-note {
  font-size: 0.8rem;
}

.st-radio {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.st-radio.on {
  border: 0.42rem solid var(--accent);
}

.st-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr));
  gap: 0.7rem;
  padding: 1rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 18px;
}

.st-color {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  background: var(--c);
  border: 3px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.st-color.on {
  border-color: #fff;
}

.st-custom {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.3);
}

.st-custom.on {
  background: var(--c);
  border-style: solid;
  border-color: #fff;
}

.st-custom span {
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 700;
  pointer-events: none;
}

.st-custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.st-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.st-seg button {
  padding: 0.8rem 0.4rem;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: 14px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

.st-seg button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.st-about {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.8rem 0 0.4rem;
  text-align: center;
}

.st-about img {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 0.4rem;
}

.st-about strong {
  font-size: 1.3rem;
  font-weight: 850;
}

.st-about span {
  color: var(--muted);
  font-size: 0.85rem;
}

.st-page-reminders .rm .mv-head {
  display: none;
}

.is-native .app-reload {
  display: none !important;
}