:root {
  --bg: #f3efe6;
  --ink: #1c1a16;
  --muted: #6a6458;
  --accent: #0f5c4c;
  --accent-ink: #f7f4ec;
  --line: #d4cbb8;
  --err: #8b2e2e;
  --ok: #1f5d3a;
  --warn: #8a5a12;
  --card: #faf7f0;
  /* Polices système uniquement (CSP style-src 'self' — pas de Google Fonts). */
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: Georgia, "Times New Roman", ui-serif, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, #dfece7 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, #efe4d2 0%, transparent 50%),
    var(--bg);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 85%, transparent);
  backdrop-filter: blur(6px);
}

.brand {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.brand-mobile { display: none; }

nav,
.top-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

nav a,
.top-nav a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

nav a:hover,
.top-nav a:hover { text-decoration: underline; }

.inline { display: inline; margin: 0; }

.auth-action {
  display: inline-flex;
  margin: 0;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.auth-btn:hover {
  color: var(--accent);
  text-decoration: none;
}

.auth-icon {
  flex-shrink: 0;
  display: block;
}

.auth-btn-icon {
  padding: 0.35rem;
}

.inline button:not(.auth-btn),
.btn {
  appearance: none;
  border: 0;
  border-radius: 0.4rem;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
  margin-left: 0.4rem;
}

.push-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}

.ok { color: var(--ok); }
.warn { color: var(--warn); }

.hint-box {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--line);
  border-radius: 0.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.hint-box summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.hint-box ol {
  margin: 0.6rem 0 0.4rem 1.1rem;
  padding: 0;
}

.hint-box li { margin-bottom: 0.35rem; }

.check-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
}

.check-line input { width: auto; margin: 0; }

.user-checks {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.user-checks legend {
  padding: 0 0.35rem;
  font-weight: 600;
}

.user-checks ul {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
}

.user-checks li {
  margin: 0.35rem 0;
}

.user-checks label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 500;
}

.user-checks input { width: auto; margin: 0; }

.inline button:not(.auth-btn) {
  background: transparent;
  color: var(--muted);
  padding: 0.25rem 0.4rem;
  font-weight: 500;
}

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hero h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 0.4rem; }

.muted, .hint { color: var(--muted); font-size: 0.92rem; }

.card-form, .notify-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem;
  max-width: 420px;
}

.notify-form { max-width: none; }

label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 500;
}

input[type="text"],
input[type="password"],
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
  font: inherit;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.messages li {
  padding: 0.7rem 0.9rem;
  border-radius: 0.45rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border: 1px solid var(--line);
}

.messages .success { border-color: var(--ok); color: var(--ok); }
.messages .error, .error { border-color: var(--err); color: var(--err); }
.messages .warning { border-color: var(--warn); color: var(--warn); }
.messages .info { border-color: var(--accent, #0d7377); color: var(--ink); }

.memo-session-efficiency {
  margin: 0 0 1rem;
}
.memo-session-efficiency li {
  font-size: 0.95rem;
  line-height: 1.35;
}

.recent { margin-top: 2.5rem; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

th { background: #efe8da; font-weight: 600; }

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

/* —— Coach santé —— */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.35rem;
}

.coach-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.coach-top h1 { margin: 0.1rem 0 0.35rem; }

.coach-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.coach-nav a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.coach-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
}

.coach-card.suggest { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }

/* Cards repliables (forme musculaire, encouragements, variantes séance) — fermées à l’ouverture */
.coach-card-accordion {
  padding: 0;
  overflow: hidden;
}

.coach-card-accordion-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 1.15rem 1.25rem;
  min-height: 2.75rem;
}

.coach-card-accordion-summary::-webkit-details-marker {
  display: none;
}

.coach-card-accordion-summary::before {
  content: "▸";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.85em;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.coach-card-accordion[open] > .coach-card-accordion-summary::before {
  transform: rotate(90deg);
}

.coach-card-accordion-summary h2 {
  margin: 0;
  font-size: 1.1rem;
  flex: 1 1 auto;
}

.coach-card-accordion-summary .coach-meta {
  margin: 0.15rem 0 0;
}

.coach-motivate-summary {
  justify-content: space-between;
}

.coach-motivate-summary > div {
  flex: 1 1 auto;
  min-width: 0;
}

.coach-card-accordion-body {
  padding: 0 1.25rem 1.15rem;
  border-top: 1px solid var(--line);
}

.coach-card-accordion-body > .hint:first-child,
.coach-card-accordion-body > .milestone-list:first-child {
  margin-top: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .coach-card-accordion-summary::before {
    transition: none;
  }
}

.suggest-item { margin-bottom: 1rem; }
.suggest-item:last-child { margin-bottom: 0; }

.streak-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  padding: 0.45rem 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--radius, 0.7rem);
  background: color-mix(in srgb, var(--card) 80%, var(--accent, #0f5c4c) 8%);
}
.streak-value {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
}
.streak-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.milestone-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.milestone-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.milestone-grid {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.65rem;
}
.milestone-grid li {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.milestone-grid li.is-locked {
  opacity: 0.45;
}
.milestone-grid li.is-unlocked {
  border-color: color-mix(in srgb, var(--accent, #0f5c4c) 45%, var(--line));
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.load-bias {
  margin: 1rem 0 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--card) 88%, #e8eef5);
}

.load-bias-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}

.load-bias-head label {
  font-weight: 600;
  margin: 0;
}

.load-bias-head strong {
  color: var(--accent);
  font-size: 0.95rem;
}

.load-bias-track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  margin: 0.65rem 0 0.35rem;
}

.load-bias-end {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.load-bias-track input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  height: 1.4rem;
  cursor: pointer;
}

.load-bias.is-updating {
  opacity: 0.78;
  transition: opacity 0.15s ease;
}

.load-bias.is-updating #load-bias-label::after,
.muscle-focus.is-updating #muscle-focus-label::after {
  content: "…";
}

.muscle-focus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.55rem 0 0.35rem;
}

.muscle-focus-chip {
  appearance: none;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.muscle-focus-chip.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
}

.muscle-focus-clear {
  appearance: none;
  display: inline-block;
  margin: 0.15rem 0 0;
  padding: 0.35rem 0;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .week-grid { grid-template-columns: 1fr 1fr; }
}

.coach-home {
  display: flex;
  flex-direction: column;
}

/* Home dashboard: header → motivate → bilan → planning → secondary */
.coach-home > .coach-top { order: 0; }
.coach-home > .coach-nav { order: 1; }
.coach-home > .coach-motivate { order: 2; }
.coach-home > .coach-bilan { order: 3; }
.coach-home > .coach-planning { order: 4; }
.coach-home > .suggest { order: 5; }
.coach-home > .coach-secondary { order: 6; }

/* Semaine (?view=week): top → nav → planning → encourage → bilan → rest
   Higher specificity than .coach-home > … so these always win. */
.coach-home.coach-home--week > .coach-planning { order: 2; }
.coach-home.coach-home--week > .coach-motivate { order: 3; }
.coach-home.coach-home--week > .coach-bilan { order: 4; }
.coach-home.coach-home--week > .suggest { order: 5; }
.coach-home.coach-home--week > .coach-secondary { order: 6; }

@media (max-width: 640px) {

  .coach-meta {
    display: none;
  }

  .coach-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.55rem;
    scrollbar-width: none;
  }

  .coach-nav::-webkit-scrollbar {
    display: none;
  }

  .coach-nav .nav-secondary {
    display: none;
  }

  .coach-home > .coach-secondary {
    display: none;
  }

  .load-bias {
    display: block;
    margin: 0.75rem 0 0.5rem;
    padding: 0.75rem 0.85rem;
  }

  .load-bias-track {
    gap: 0.45rem;
  }

  .load-bias-track input[type="range"] {
    min-height: 2rem;
    touch-action: pan-y;
  }

  .coach-card {
    padding: 0.9rem 0.95rem;
    margin-bottom: 0.9rem;
  }

  .coach-top {
    margin-bottom: 0.35rem;
  }

  .coach-top .eyebrow {
    display: none;
  }

  .coach-top h1 {
    font-size: 1.25rem;
    margin: 0;
  }

  .stats-strip.coach-bilan {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
  }

  .coach-bilan .stat {
    padding: 0.65rem 0.7rem;
  }

  .coach-bilan .stat-value {
    font-size: 1.35rem;
  }

  .coach-bilan .stat-label {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .week-grid {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .day-col {
    min-height: 0;
    padding: 0.5rem 0.6rem;
  }

  .day-col.yesterday {
    order: -2;
  }

  .day-col.today {
    order: -1;
  }

  .planning-past {
    margin-top: 0.75rem;
  }

}

.recalc-form {
  margin: 0;
  flex-shrink: 0;
}

.recalc-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0.2rem 0.15rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  box-shadow: none;
}

.recalc-btn:hover {
  color: var(--accent);
  background: transparent;
  transform: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .recalc-btn {
    font-size: 0.72rem;
    padding: 0.15rem 0;
  }
}

.day-col {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.55rem;
  background: #fff;
  min-height: 7rem;
  overflow: visible;
}

.day-col.today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.day-col.yesterday {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.day-col.yesterday .session-chip.is-late-checkin .chip-status {
  font-weight: 600;
}

.day-col.past {
  background: #f7f6f3;
}

.day-col.past header,
.day-col.past .day-col-head {
  color: var(--muted);
}

.day-col.future {
  background: #fff;
}

.planning-past {
  margin-top: 1rem;
  border-top: 1px dashed var(--line);
  padding-top: 0.75rem;
}

#planning-future + .load-bias,
#planning-future + .muscle-focus {
  margin-top: 1rem;
}

.planning-past > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  user-select: none;
}

.planning-past > summary::-webkit-details-marker {
  display: none;
}

.planning-past > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

.planning-past[open] > summary::before {
  transform: rotate(90deg);
}

.planning-past .week-grid {
  margin-top: 0.75rem;
}

.day-col-head,
.session-chip-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.85rem;
  column-gap: 0.3rem;
  align-items: center;
}

.day-col-head {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.day-col-date {
  text-align: center;
  justify-self: stretch;
}

.day-col-empty {
  grid-column: 1 / -1;
}

.session-chip {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.4rem;
  padding: 0.4rem 0.45rem;
  margin-bottom: 0.35rem;
  background: #efe8da;
  border-left: 3px solid var(--accent);
}

.session-chip-wrap {
  margin-bottom: 0.35rem;
  align-items: stretch;
}

.session-chip-wrap .session-chip {
  margin-bottom: 0;
  min-width: 0;
}

/* Swipe-left reveal « Retirer » on planned session chips (touch-first). */
.session-swipe {
  position: relative;
  overflow: hidden;
  border-radius: 0.4rem;
  min-width: 0;
  touch-action: pan-y;
}

.session-swipe-actions {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  display: flex;
  width: 5.5rem;
  align-items: stretch;
}

.session-swipe-delete {
  flex: 1;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 0;
  background: #a33b3b;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.session-swipe-delete:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

.session-swipe-front {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
  will-change: transform;
}

.session-swipe-front .session-chip {
  border-radius: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .session-swipe-front {
    transition: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  /* Desktop: day « + » menu remains the primary remove path; swipe still works if dragged. */
  .session-swipe--deletable:not(.is-open) .session-swipe-actions {
    opacity: 0.92;
  }
}

.session-swap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  align-self: center;
  min-height: 100%;
}

.session-swap:empty {
  display: none;
}

.session-swap-form {
  margin: 0;
  line-height: 0;
}

.session-swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.session-swap-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.session-swap-icon--v {
  display: none;
}

.session-swap-icon--h {
  display: inline;
}

/* Desktop : flèches horizontales sous la séance ; + en bas de colonne */
@media (min-width: 641px) {
  .planning-horizon {
    align-items: stretch;
  }

  .day-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .day-col-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    grid-template-columns: none;
    flex: 0 0 auto;
  }

  .day-col-date {
    text-align: right;
    justify-self: auto;
  }

  .day-col-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .session-chip-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    grid-template-columns: none;
    flex: 0 0 auto;
  }

  .day-col-empty {
    flex: 0 0 auto;
  }

  .session-swap {
    justify-content: center;
    min-height: 0;
    padding-bottom: 0.1rem;
  }

  .session-swap-btn {
    width: 1.5rem;
    height: 1.2rem;
  }

  .day-col > .day-session-dialog:not([open]):not(.is-open) {
    display: none;
  }
}

@media (max-width: 640px) {
  .day-col-head,
  .session-chip-wrap {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    column-gap: 0.4rem;
  }

  .session-swap {
    flex-direction: column;
    gap: 0.1rem;
  }

  .session-swap:empty {
    display: flex;
    visibility: hidden;
  }

  .session-swap-btn {
    width: 2.4rem;
    height: 1.55rem;
    font-size: 0.95rem;
  }

  .session-swap-icon--v {
    display: inline;
  }

  .session-swap-icon--h {
    display: none;
  }
}

.day-session-swap {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.day-swap-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: #fff;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
}

.day-swap-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.session-chip.kind-run { border-left-color: #2a6f97; background: #e7f1f7; }
.session-chip.kind-hybrid { border-left-color: #c47a2c; background: #f8efe4; }
.session-chip.kind-mobility { border-left-color: #6b7c3c; background: #eef2e4; }
.session-chip.kind-balance { border-left-color: #7a5c9e; background: #f3eef8; }
.session-chip.status-done,
.session-chip.kind-run.status-done,
.session-chip.kind-hybrid.status-done,
.session-chip.kind-mobility.status-done,
.session-chip.kind-balance.status-done,
.session-chip.kind-strength.status-done {
  background: #e5f3e8;
  border-left-color: #2f7a45;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #2f7a45 28%, transparent);
}

.session-chip.status-done .chip-title {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
}

.session-chip.status-done .chip-title::before {
  content: "✓";
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.05rem;
  border-radius: 999px;
  background: #2f7a45;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.session-chip.status-done .chip-status {
  color: #1f5c33;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.session-chip.status-partial,
.session-chip.kind-run.status-partial,
.session-chip.kind-hybrid.status-partial,
.session-chip.kind-mobility.status-partial,
.session-chip.kind-balance.status-partial,
.session-chip.kind-strength.status-partial {
  background: #f8f0df;
  border-left-color: #b07a1a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #b07a1a 28%, transparent);
}

.session-chip.status-partial .chip-status {
  color: #8a5a10;
  font-weight: 700;
}

.session-chip.status-skipped {
  opacity: 0.7;
  background: #eceff2;
  border-left-color: #8b95a3;
}

.session-chip.status-skipped .chip-title {
  text-decoration: line-through;
  color: var(--muted);
}

.session-chip.status-skipped .chip-status {
  font-weight: 600;
}

.chip-title { display: block; font-weight: 600; font-size: 0.82rem; }
.chip-meta { display: block; font-size: 0.72rem; color: var(--muted); }
.chip-status { color: inherit; }

/* Jours passés : teinte selon objectifs + sensations */
.session-chip.tone-good,
.session-chip.kind-run.tone-good,
.session-chip.kind-hybrid.tone-good,
.session-chip.kind-mobility.tone-good,
.session-chip.kind-balance.tone-good,
.session-chip.kind-strength.tone-good {
  background: #e4f3e8;
  border-left-color: #2f7a45;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #2f7a45 28%, transparent);
}

.session-chip.tone-mixed,
.session-chip.kind-run.tone-mixed,
.session-chip.kind-hybrid.tone-mixed,
.session-chip.kind-mobility.tone-mixed,
.session-chip.kind-balance.tone-mixed,
.session-chip.kind-strength.tone-mixed {
  background: #f8f0df;
  border-left-color: #b07a1a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #b07a1a 28%, transparent);
}

.session-chip.tone-tough,
.session-chip.kind-run.tone-tough,
.session-chip.kind-hybrid.tone-tough,
.session-chip.kind-mobility.tone-tough,
.session-chip.kind-balance.tone-tough,
.session-chip.kind-strength.tone-tough {
  background: #f8e8e6;
  border-left-color: #b44a3c;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #b44a3c 28%, transparent);
}

.session-chip.tone-neutral,
.session-chip.kind-run.tone-neutral,
.session-chip.kind-hybrid.tone-neutral,
.session-chip.kind-mobility.tone-neutral,
.session-chip.kind-balance.tone-neutral,
.session-chip.kind-strength.tone-neutral {
  background: #e8eef4;
  border-left-color: #5a7a94;
}

.day-session-open {
  appearance: none;
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: 0.35rem;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.day-session-open:hover {
  border-style: solid;
  color: var(--text);
  background: var(--card, #fff);
}

@media (min-width: 641px) {
  .day-col > .day-session-open {
    margin-top: auto;
    align-self: flex-start;
    flex: 0 0 auto;
  }
}

.day-session-dialog {
  border: none;
  border-radius: 0.75rem;
  padding: 0;
  width: min(42rem, calc(100vw - 1.25rem));
  max-height: calc(100vh - 2rem);
  background: var(--card, #fff);
  color: inherit;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

.day-session-dialog[open],
.day-session-dialog.is-open {
  display: block;
}

.day-session-dialog::backdrop {
  background: rgba(0, 0, 0, 0.42);
}

/* Fallback when <dialog>.showModal is unavailable */
.day-session-dialog.is-open {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 1000;
}

.day-session-dialog.is-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.42);
}

.day-session-dialog-inner {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

.day-session-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.day-session-dialog-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
}

.day-session-dialog-head .tiny {
  margin: 0;
}

.day-session-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 0.35rem;
  cursor: pointer;
}

.day-session-close:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--line) 55%, transparent);
}

.day-session-rows {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.day-session-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.1fr) auto minmax(14rem, 1.5fr);
  gap: 0.75rem 0.85rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--card, #fff) 92%, var(--line));
}

.day-session-planned {
  margin: 0;
  pointer-events: none;
}

.day-session-arrow {
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 600;
}

.day-session-actions {
  min-width: 0;
}

.day-session-label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
}

.day-session-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.day-kind-btn {
  appearance: none;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0.35rem;
  background: #efe8da;
  color: inherit;
  text-align: left;
  padding: 0.42rem 0.6rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.day-kind-btn.kind-run { border-left-color: #2a6f97; background: #e7f1f7; }
.day-kind-btn.kind-strength { border-left-color: #b56576; background: #f7e8ec; }
.day-kind-btn.kind-hybrid { border-left-color: #c47a2c; background: #f8efe4; }
.day-kind-btn.kind-mobility { border-left-color: #6b7c3c; background: #eef2e4; }
.day-kind-btn.kind-balance { border-left-color: #7a5c9e; background: #f3eef8; }

.day-kind-btn:hover {
  filter: brightness(0.97);
  transform: translateY(-1px);
}

.day-session-extra {
  padding-top: 0.15rem;
  border-top: 1px solid var(--line);
}

.day-session-extra--exercises {
  margin-bottom: 0.85rem;
  border-top: 0;
  padding-top: 0;
}

.day-session-extra--exercises .day-add-ex-open {
  width: 100%;
  min-height: 2.75rem;
  justify-content: center;
}

.day-session-extra--exercises .hint {
  margin: 0.35rem 0 0;
}

.day-session-extra--primary {
  border-top: 0;
  padding-top: 0;
}

.day-free-activity {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--muted);
}

.day-remove-btn {
  appearance: none;
  margin-top: 0.4rem;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 0.15rem 0;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.day-remove-btn:hover {
  color: var(--text);
}

@media (max-width: 640px) {
  .day-session-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .day-session-arrow {
    display: none;
  }
}

.session-chip.pinned {
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

.tiny { font-size: 0.8rem; }

.today-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.today-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.today-list li:last-child { border-bottom: 0; }

.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
}

.stat-value {
  font-family: var(--display);
  font-size: 1.8rem;
  display: block;
  line-height: 1.1;
}

.stat-label {
  color: var(--muted);
  font-size: 0.85rem;
}

.bar {
  margin-top: 0.55rem;
  height: 0.45rem;
  background: #ebe4d6;
  border-radius: 999px;
  overflow: hidden;
}

.bar.tall { height: 0.7rem; }

.bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #2a8f74);
  max-width: 100%;
  border-radius: inherit;
}

progress.bar,
progress.bar.tall {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  border: 0;
  padding: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  background: #ebe4d6;
}

progress.bar { height: 0.45rem; border-radius: 999px; }
progress.bar.tall { height: 0.7rem; border-radius: 999px; }

progress.bar::-webkit-progress-bar {
  background: #ebe4d6;
  border-radius: inherit;
}

progress.bar::-webkit-progress-value {
  background: linear-gradient(90deg, var(--accent), #2a8f74);
  border-radius: inherit;
}

progress.bar::-moz-progress-bar {
  background: linear-gradient(90deg, var(--accent), #2a8f74);
  border-radius: inherit;
}

.oms-row {
  display: grid;
  gap: 1.1rem;
}

.heat {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  max-width: 320px;
}

.heat-cell {
  aspect-ratio: 1;
  border-radius: 0.25rem;
  background: #ebe4d6;
}

.heat-cell.kind-strength { background: var(--accent); }
.heat-cell.kind-run { background: #2a6f97; }
.heat-cell.kind-cardio { background: #2a6f97; }
.heat-cell.kind-hybrid { background: #c47a2c; }
.heat-cell.kind-mobility { background: #6b7c3c; }
.heat-cell.kind-balance { background: #7a5c9e; }

.legend { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.15rem;
  margin-right: 0.25rem;
  vertical-align: middle;
}
.dot.kind-strength { background: var(--accent); }
.dot.kind-run { background: #2a6f97; }
.dot.kind-hybrid { background: #c47a2c; }
.dot.kind-mobility { background: #6b7c3c; }
.dot.kind-balance { background: #7a5c9e; }

.range-tabs {
  display: flex;
  gap: 0.4rem;
}
.range-tabs a {
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
}
.range-tabs a.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.exercise-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ex;
}

.session-add-ex {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.session-add-ex-dialog {
  width: min(36rem, calc(100vw - 1.25rem));
}

.session-add-ex-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.session-add-ex-filter input {
  width: 100%;
  font: inherit;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--bg, #fff);
  color: inherit;
}

.session-add-ex-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(55vh, 28rem);
  overflow: auto;
}

.session-add-ex-item label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid var(--line);
  cursor: pointer;
  min-height: 3.25rem;
}

.session-add-ex-item label:hover {
  background: color-mix(in srgb, var(--line) 35%, transparent);
}

.session-add-ex-item label.is-disabled {
  opacity: 0.55;
  cursor: default;
}

.session-add-ex-item label.is-disabled:hover {
  background: transparent;
}

.session-add-ex-item input {
  flex-shrink: 0;
}

.session-add-ex-thumb {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.35rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 40%, transparent);
  display: grid;
  place-items: center;
}

.session-add-ex-thumb img,
.session-add-ex-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.session-add-ex-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.session-add-ex-meta strong {
  font-weight: 600;
}

.session-add-ex-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.session-add-ex-empty {
  margin: 0.25rem 0 0;
}

.exercise-item {
  margin-bottom: 1.35rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  counter-increment: ex;
  scroll-margin-top: 4.5rem;
}

.exercise-item:target {
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 4px;
  border-radius: 0.35rem;
}

.exercise-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.exercise-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.exercise-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.exercise-summary > .exercise-title {
  flex: 1 1 auto;
  min-width: 0;
}

.exercise-accordion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.35rem 0 0 -0.55rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}

.exercise-accordion-toggle[hidden] {
  display: none;
}

.exercise-accordion-toggle::before {
  content: "▸";
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.exercise-item:not(.is-collapsed) > .exercise-head .exercise-accordion-toggle::before {
  transform: rotate(90deg);
}

.exercise-accordion-toggle:hover,
.exercise-accordion-toggle:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
}

.exercise-item.is-collapsed {
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  cursor: pointer;
}

.exercise-item.is-collapsed > .exercise-head {
  margin-bottom: 0;
}

.exercise-item.is-collapsed > .exercise-body {
  display: none;
}

.exercise-item.is-collapsed .ex-metric-tag,
.exercise-item.is-collapsed .ex-easy,
.exercise-item.is-collapsed .ex-more,
.exercise-item.is-collapsed .ex-bizarre {
  display: none;
}

.exercise-item.is-collapsed .ex-past {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.25rem;
}

.exercise-item.is-collapsed .ex-history-link {
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .exercise-accordion-toggle::before {
    transition: none;
  }
}

.exercise-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ex-prescription {
  color: var(--muted);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.ex-past {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.ex-metric-tag {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}

.exercise-head strong::before {
  content: counter(ex) ". ";
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.exercise-item.is-done {
  opacity: 0.78;
}

.exercise-item.is-done .exercise-title strong {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ok) 55%, transparent);
}

.exercise-item.is-saving {
  outline: 1px dashed color-mix(in srgb, var(--accent, #2563eb) 45%, transparent);
  outline-offset: 2px;
}

.exercise-item.is-saved {
  outline: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
  outline-offset: 2px;
}

.ex-progress-status {
  min-height: 1.2em;
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
}

.ex-progress-status[data-kind="ok"] {
  color: var(--ok);
}

.ex-progress-status[data-kind="error"] {
  color: var(--danger, #b91c1c);
}

.ex-progress-status[data-kind="pending"] {
  color: var(--muted, #64748b);
}

.ex-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-start;
  align-items: center;
}

.ex-edit-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.exercise-item.is-done .ex-edit-actions {
  display: none;
}

.ex-replace,
.ex-remove {
  padding: 0.35rem 0.65rem;
  min-height: 2.5rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.ex-replace {
  color: var(--accent);
}

.ex-replace:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ex-remove {
  color: var(--danger, #b91c1c);
}

.ex-remove:hover {
  color: var(--danger, #b91c1c);
  background: color-mix(in srgb, var(--danger, #b91c1c) 10%, transparent);
}

.ex-done,
.ex-more,
.ex-easy,
.ex-bizarre {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--card);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.ex-done input,
.ex-more input,
.ex-easy input,
.ex-bizarre input {
  width: auto;
  margin: 0;
  accent-color: var(--ok);
}

.ex-easy input {
  accent-color: #2563eb;
}

.ex-bizarre input {
  accent-color: #b45309;
}

.ex-done:has(input:checked) {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  background: color-mix(in srgb, var(--ok) 12%, var(--card));
  color: var(--ok);
}

.ex-more:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  color: var(--accent);
}

.ex-easy:has(input:checked) {
  border-color: color-mix(in srgb, #2563eb 45%, var(--line));
  background: color-mix(in srgb, #2563eb 12%, var(--card));
  color: #1d4ed8;
}

.ex-bizarre:has(input:checked) {
  border-color: color-mix(in srgb, #b45309 45%, var(--line));
  background: color-mix(in srgb, #b45309 12%, var(--card));
  color: #b45309;
}

.ex-easy-hint,
.ex-progression-note {
  margin: 0.35rem 0 0;
  color: #1d4ed8;
}

@media (min-width: 720px) {
  .exercise-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .ex-track {
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 0.4rem;
  }

  .ex-done,
  .ex-more,
  .ex-easy,
  .ex-bizarre {
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
  }
}

.ex-actual-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.35rem;
}

.ex-actual-head .ex-actual-label {
  margin-bottom: 0;
}

.ex-previous {
  margin: 0;
  font-size: 0.85rem;
}

.ex-history-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.35rem 0.4rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--accent, #0f5c4c);
  font: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  min-height: 2.75rem;
}

.ex-history-link:hover,
.ex-history-link:focus-visible {
  color: var(--text, inherit);
  background: color-mix(in srgb, var(--accent, #0f5c4c) 12%, transparent);
  outline: none;
}

.ex-history-dialog {
  width: min(28rem, calc(100vw - 1.25rem));
}

.ex-history-chart {
  margin: 0;
}

.ex-history-chart-legend {
  margin: 0.15rem 0 0;
  text-align: center;
}

.ex-history-list {
  margin-top: 0.15rem;
}

.ex-actual {
  margin: 0 0 0.65rem;
  max-width: 28rem;
}

.ex-actual-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.ex-actual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.55rem 0.65rem;
  align-items: end;
}

.ex-actual-field label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.ex-actual-field input {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.ex-actual-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ex-actual-row input {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.ex-unit {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
  min-width: 2.2rem;
}

.ex-actual-hint {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
}

.prior-day-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

.prior-day-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.prior-day-list li:last-child {
  border-bottom: none;
}

.prior-day-list li.is-carryover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  margin: 0 -0.4rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-radius: 0.4rem;
}

.sore-muscles {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.75rem 0.85rem 0.9rem;
  margin: 0 0 1rem;
}

.sore-muscles legend {
  padding: 0 0.25rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.sore-muscles-card .sore-muscles-form {
  margin-top: 0.5rem;
}

.sore-muscles-accordion {
  margin: 0 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.35rem 0.75rem 0.55rem;
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--bg, #f6f6f4));
}

.sore-muscles-accordion > summary {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
  user-select: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sore-muscles-accordion > summary::-webkit-details-marker {
  display: none;
}

.sore-muscles-accordion > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--muted);
}

.sore-muscles-accordion[open] > summary::before {
  transform: rotate(90deg);
}

.sore-muscles-accordion > .hint {
  margin: 0 0 0.45rem;
}

.sore-muscles-accordion .sore-muscle-list {
  margin-bottom: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .sore-muscles-accordion > summary::before {
    transition: none;
  }
}

.sore-muscle-list {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0.85rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.sore-muscle-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--bg, #f6f6f4));
  font-size: 0.95rem;
  cursor: pointer;
}

.sore-muscle-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.sore-muscle-option input {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

@media (max-width: 380px) {
  .sore-muscle-list {
    grid-template-columns: 1fr;
  }
}

.session-checkin {
  display: contents;
}

.weather-gps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin: 0.35rem 0 0.75rem;
}

.weather-gps-row #weather-status {
  flex: 1 1 12rem;
  margin: 0;
}

.weather-gps-row #weather-gps-btn {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 8.5rem;
}

.session-checkin-actions {
  margin-top: 1.25rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.session-checkin-actions .btn {
  min-width: 9rem;
}


.ex-diagram {
  margin: 0.35rem 0 0.65rem;
  max-width: 22rem;
}

.ex-diagram a.ex-diagram-source {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ex-diagram a.ex-diagram-source:hover img,
.ex-diagram a.ex-diagram-source:hover video,
.ex-diagram a.ex-diagram-source:focus-visible img,
.ex-diagram a.ex-diagram-source:focus-visible video {
  border-color: var(--accent);
}

.ex-diagram img,
.ex-diagram video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--card);
}

@media (max-width: 719px) {
  .ex-diagram {
    max-width: none;
    display: flex;
    justify-content: center;
  }

  .ex-diagram a.ex-diagram-source {
    width: fit-content;
    max-width: 100%;
  }

  .ex-diagram img,
  .ex-diagram video {
    width: auto;
    max-width: 100%;
    max-height: 13rem;
    height: auto;
    margin: 0;
    object-fit: contain;
  }

  .ex-actual {
    max-width: none;
  }

  .ex-actual-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ex-actual-field:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.ex-cue { margin: 0.35rem 0 0.5rem; }

.ex-steps {
  margin: 0.35rem 0 0.65rem;
  padding-left: 1.2rem;
  color: var(--ink);
  font-size: 0.92rem;
}

.ex-steps li { margin-bottom: 0.3rem; }

.ex-tip,
.ex-warn {
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.ex-tip {
  background: color-mix(in srgb, var(--ok) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--line));
  color: color-mix(in srgb, var(--ok) 70%, var(--ink));
}

.ex-warn {
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  color: color-mix(in srgb, var(--warn) 75%, var(--ink));
}

.ex-label {
  display: inline-block;
  font-weight: 650;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 0.35rem;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.option-card {
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.85rem 0.9rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.option-card.is-chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.option-card .btn { margin-top: auto; align-self: flex-start; }

.option-tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}

.option-tag.tag-recommande { color: var(--accent); font-weight: 600; }
.option-tag.tag-temps-court { color: #2a6f97; }
.option-tag.tag-micro { color: #1d4e89; }
.option-tag.tag-forme-legere { color: #6b7c3c; }
.option-tag.tag-footing-continu,
.option-tag.tag-forme-bonne { color: #8a5a2b; }

.coach-form .field { margin-bottom: 1rem; }
.coach-form .field input[type="checkbox"] {
  width: auto;
  display: inline-block;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.field-checks ul { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.field-checks li { margin: 0.3rem 0; }
.field-checks label { display: inline; font-weight: 500; }
.field-checks input { width: auto; display: inline; margin-right: 0.4rem; }

.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.equip-card {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--card);
}

.equip-card h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 0.55rem;
}

.equip-card input[type="date"] {
  margin-top: 0.25rem;
}

.equip-ideas {
  margin-bottom: 1.25rem;
}

.equip-idea-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.85rem;
}

.equip-idea-list li strong {
  display: block;
  margin-bottom: 0.2rem;
}

.equip-idea-list li p {
  margin: 0;
  color: var(--muted, inherit);
  font-size: 0.95rem;
  line-height: 1.45;
}

.weight-chart {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
}

.weight-chart canvas {
  width: 100%;
  max-width: 800px;
  height: auto;
}

.weight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}

.weight-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.trend-up { color: var(--ok); }
.trend-down { color: #b45309; }
.trend-flat { color: var(--muted); }

.load-evolution-list .muted {
  display: inline;
  margin-left: 0.35rem;
  font-size: 0.85em;
}

.stats-subhead {
  font-size: 1rem;
  margin: 1.25rem 0 0.45rem;
  font-weight: 600;
}

.stats-subhead:first-of-type {
  margin-top: 0.85rem;
}

.profile-switch select { margin-top: 0.25rem; min-width: 10rem; }

.source-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 1.1rem;
}

.source-item {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.source-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.source-title {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
}

.source-title:hover { text-decoration: underline; }

.source-org {
  margin: 0.25rem 0 0.35rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.plain-list {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
}

input[type="number"],
input[type="date"] {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
  font: inherit;
}

/* —— Coach · thème sport —— */
body.theme-coach {
  --bg: #e6ebf0;
  --ink: #0c1220;
  --muted: #5a6577;
  --accent: #ff3b1f;
  --accent-ink: #ffffff;
  --line: #c4ced9;
  --err: #c41e1e;
  --ok: #0b8a52;
  --warn: #d97706;
  --card: #f5f7fa;
  --font: "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --display: "Arial Narrow", "Helvetica Condensed", "Franklin Gothic Medium", "Segoe UI", sans-serif;
  --sport-blue: #1a6fb5;
  --sport-lime: #9fe870;
  --sport-navy: #0c1b33;
  --radius: 0.35rem;
  background:
    linear-gradient(115deg, transparent 0 42%, color-mix(in srgb, var(--accent) 7%, transparent) 42% 43%, transparent 43% 100%),
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 11px,
      color-mix(in srgb, var(--sport-navy) 4%, transparent) 11px,
      color-mix(in srgb, var(--sport-navy) 4%, transparent) 12px
    ),
    radial-gradient(ellipse 70% 45% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 0%, color-mix(in srgb, var(--sport-blue) 16%, transparent), transparent 50%),
    var(--bg);
}

body.theme-coach .top {
  background: color-mix(in srgb, var(--sport-navy) 92%, #000);
  border-bottom: 3px solid var(--accent);
  color: #e8eef6;
}

body.theme-coach .brand {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.15;
  max-width: min(16rem, calc(100% - 3rem));
}

body.theme-coach .top .auth-label {
  display: none;
}

body.theme-coach .top .auth-btn-icon {
  padding: 0.35rem;
  color: #e8eef6;
}

body.theme-coach .top nav a,
body.theme-coach .top .top-nav a:not(.auth-btn):not(.top-profile) {
  color: #c5d4e8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

body.theme-coach .top nav a:hover,
body.theme-coach .top .top-nav a:not(.auth-btn):not(.top-profile):hover {
  color: var(--sport-lime);
  text-decoration: none;
}

body.theme-coach .top .top-profile {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 0.15rem;
}

body.theme-coach .top .top-profile:hover {
  color: var(--sport-lime);
  text-decoration: none;
}

body.theme-coach .top .auth-btn {
  color: #9aabbf;
}

body.theme-coach .top .auth-btn:hover {
  color: var(--sport-lime);
}

body.theme-coach main {
  max-width: 980px;
}

body.theme-coach h1,
body.theme-coach h2,
body.theme-coach .stat-value,
body.theme-coach .equip-card h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.theme-coach h1 {
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  line-height: 1.05;
}

body.theme-coach h2 {
  font-size: 1.15rem;
  margin-top: 0;
}

body.theme-coach .btn {
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--sport-navy) 35%, transparent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

body.theme-coach .btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--sport-navy) 40%, transparent);
}

body.theme-coach .btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--sport-navy) 30%, transparent);
}

body.theme-coach .btn-ghost {
  box-shadow: none;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

body.theme-coach .btn-ghost:hover {
  box-shadow: none;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

body.theme-coach .eyebrow {
  color: var(--accent);
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.72rem;
}

body.theme-coach .coach-nav {
  gap: 0.45rem 0.55rem;
  border-bottom: 2px solid var(--sport-navy);
  padding-bottom: 0.95rem;
}

body.theme-coach .coach-nav a {
  color: var(--sport-navy);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.65rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.theme-coach .coach-nav a:hover {
  text-decoration: none;
  border-color: var(--accent);
  color: var(--accent);
  background: #fff;
}

body.theme-coach .coach-nav a.is-active {
  border-color: var(--sport-navy);
  background: #fff;
  color: var(--sport-navy);
}

body.theme-coach .coach-card,
body.theme-coach .stat,
body.theme-coach .equip-card,
body.theme-coach .card-form {
  background: var(--card);
  border: 2px solid var(--sport-navy);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--sport-navy) 12%, transparent);
}

body.theme-coach .coach-card.suggest {
  border-color: var(--warn);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--warn) 25%, transparent);
}

body.theme-coach .day-col {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

body.theme-coach .day-col.today {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: coach-today-pulse 2.4s ease-in-out infinite;
}

body.theme-coach .day-col.yesterday {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  box-shadow: none;
}

body.theme-coach .day-col.past {
  background: #eef1f5;
  border-color: #c5ced8;
  box-shadow: none;
}

body.theme-coach .day-col.past header strong {
  color: var(--muted);
}

body.theme-coach .day-col.past .session-chip {
  animation: none;
}

body.theme-coach .day-col.past .session-chip.tone-good,
body.theme-coach .day-col.past .session-chip.kind-run.tone-good,
body.theme-coach .day-col.past .session-chip.kind-hybrid.tone-good,
body.theme-coach .day-col.past .session-chip.kind-mobility.tone-good,
body.theme-coach .day-col.past .session-chip.kind-balance.tone-good,
body.theme-coach .day-col.past .session-chip.kind-strength.tone-good {
  background: #d7ebd9;
  border-left-color: #2f7a45;
}

body.theme-coach .day-col.past .session-chip.tone-mixed,
body.theme-coach .day-col.past .session-chip.kind-run.tone-mixed,
body.theme-coach .day-col.past .session-chip.kind-hybrid.tone-mixed,
body.theme-coach .day-col.past .session-chip.kind-mobility.tone-mixed,
body.theme-coach .day-col.past .session-chip.kind-balance.tone-mixed,
body.theme-coach .day-col.past .session-chip.kind-strength.tone-mixed {
  background: #f3e6c8;
  border-left-color: #b07a1a;
}

body.theme-coach .day-col.past .session-chip.tone-tough,
body.theme-coach .day-col.past .session-chip.kind-run.tone-tough,
body.theme-coach .day-col.past .session-chip.kind-hybrid.tone-tough,
body.theme-coach .day-col.past .session-chip.kind-mobility.tone-tough,
body.theme-coach .day-col.past .session-chip.kind-balance.tone-tough,
body.theme-coach .day-col.past .session-chip.kind-strength.tone-tough {
  background: #f3d9d5;
  border-left-color: #b44a3c;
}

body.theme-coach .day-col.past .session-chip.tone-neutral,
body.theme-coach .day-col.past .session-chip.kind-run.tone-neutral,
body.theme-coach .day-col.past .session-chip.kind-hybrid.tone-neutral,
body.theme-coach .day-col.past .session-chip.kind-mobility.tone-neutral,
body.theme-coach .day-col.past .session-chip.kind-balance.tone-neutral,
body.theme-coach .day-col.past .session-chip.kind-strength.tone-neutral {
  background: #dce5ee;
  border-left-color: #5a7a94;
}

body.theme-coach .day-col.past .session-chip:hover {
  transform: none;
}

body.theme-coach .planning-past > summary {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  body.theme-coach .top {
    padding: 0.45rem 0.75rem;
    border-bottom-width: 2px;
    gap: 0.5rem;
  }

  body.theme-coach .top-desktop {
    display: none;
  }

  body.theme-coach .brand {
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    max-width: calc(100% - 7.5rem);
  }

  body.theme-coach .top-nav {
    gap: 0.45rem;
    flex-wrap: nowrap;
  }

  body.theme-coach .top .top-profile {
    font-size: 0.78rem;
  }

  body.theme-coach .coach-nav {
    margin-bottom: 0.65rem;
    padding-bottom: 0.5rem;
  }

  body.theme-coach .coach-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    border-color: var(--line);
    background: #fff;
  }

  body.theme-coach .coach-top h1 {
    font-size: 1.2rem;
  }

  body.theme-coach .coach-bilan .stat-value {
    font-size: 1.35rem;
  }

  body.theme-coach main {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
}

body.theme-coach .day-col header strong,
body.theme-coach .day-col-date {
  font-family: var(--display);
  letter-spacing: 0.03em;
  color: var(--ink);
}

body.theme-coach .session-chip {
  border-radius: var(--radius);
  border-left-width: 4px;
  background: #edf1f6;
  font-weight: 600;
  transition: transform 0.12s ease, background 0.12s ease;
  animation: coach-chip-in 0.35s ease both;
}

body.theme-coach .day-col:nth-child(1) .session-chip { animation-delay: 0.02s; }
body.theme-coach .day-col:nth-child(2) .session-chip { animation-delay: 0.05s; }
body.theme-coach .day-col:nth-child(3) .session-chip { animation-delay: 0.08s; }
body.theme-coach .day-col:nth-child(4) .session-chip { animation-delay: 0.11s; }
body.theme-coach .day-col:nth-child(5) .session-chip { animation-delay: 0.14s; }
body.theme-coach .day-col:nth-child(6) .session-chip { animation-delay: 0.17s; }
body.theme-coach .day-col:nth-child(7) .session-chip { animation-delay: 0.2s; }

body.theme-coach .session-chip:hover {
  transform: translateX(2px);
  background: #fff;
}

body.theme-coach .session-chip.kind-run {
  border-left-color: var(--sport-blue);
  background: #e5f1fb;
}

body.theme-coach .session-chip.kind-hybrid {
  border-left-color: #c47a2c;
  background: #f8efe4;
}

body.theme-coach .session-chip.kind-mobility {
  border-left-color: #5f8f2d;
  background: #eef6e4;
}

body.theme-coach .session-chip.kind-balance {
  border-left-color: #6b5cad;
  background: #f0eef8;
}

body.theme-coach .session-chip.kind-strength {
  border-left-color: var(--accent);
  background: #ffeae6;
}

body.theme-coach .day-session-open {
  border-color: color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

body.theme-coach .day-session-dialog {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--text) 18%, transparent);
}

body.theme-coach .day-session-row {
  background: #fff;
  border-color: var(--line);
}

body.theme-coach .day-kind-btn.kind-run {
  border-left-color: var(--sport-blue, #2a6f97);
  background: #e5f1fb;
}

body.theme-coach .day-kind-btn.kind-strength {
  border-left-color: var(--accent);
  background: #ffeae6;
}

body.theme-coach .day-kind-btn.kind-hybrid {
  border-left-color: #c47a2c;
  background: #f8efe4;
}

body.theme-coach .day-kind-btn.kind-mobility {
  border-left-color: #6b7c3c;
  background: #eef2e4;
}

body.theme-coach .day-kind-btn.kind-balance {
  border-left-color: #7a5c9e;
  background: #f3eef8;
}

body.theme-coach .session-chip.pinned {
  outline-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

body.theme-coach .stat-value {
  font-size: 2.1rem;
  color: var(--sport-navy);
}

body.theme-coach .bar {
  background: #d5dde7;
  border-radius: 2px;
  height: 0.55rem;
}

body.theme-coach .bar.tall { height: 0.8rem; }

body.theme-coach .bar i {
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #ff7a3d 55%, var(--sport-lime));
  animation: coach-bar-fill 0.7s ease-out both;
  transform-origin: left center;
}

body.theme-coach progress.bar {
  background: #d5dde7;
  border-radius: 2px;
}

body.theme-coach progress.bar::-webkit-progress-bar {
  background: #d5dde7;
  border-radius: 2px;
}

body.theme-coach progress.bar::-webkit-progress-value {
  background: linear-gradient(90deg, var(--accent), #ff7a3d 55%, var(--sport-lime));
  border-radius: 2px;
}

body.theme-coach progress.bar::-moz-progress-bar {
  background: linear-gradient(90deg, var(--accent), #ff7a3d 55%, var(--sport-lime));
  border-radius: 2px;
}

body.theme-coach .heat-cell {
  border-radius: 2px;
  background: #d5dde7;
}

body.theme-coach .heat-cell.kind-strength { background: var(--accent); }
body.theme-coach .heat-cell.kind-run,
body.theme-coach .heat-cell.kind-cardio { background: var(--sport-blue); }
body.theme-coach .heat-cell.kind-hybrid { background: #c47a2c; }
body.theme-coach .heat-cell.kind-mobility { background: #5f8f2d; }
body.theme-coach .heat-cell.kind-balance { background: #6b5cad; }

body.theme-coach .dot.kind-strength { background: var(--accent); }
body.theme-coach .dot.kind-run { background: var(--sport-blue); }
body.theme-coach .dot.kind-hybrid { background: #c47a2c; }
body.theme-coach .dot.kind-mobility { background: #5f8f2d; }
body.theme-coach .dot.kind-balance { background: #6b5cad; }

body.theme-coach .range-tabs a {
  border-radius: var(--radius);
  border-width: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.8rem;
}

body.theme-coach .range-tabs a.active {
  background: var(--sport-navy);
  border-color: var(--sport-navy);
  color: #fff;
}

body.theme-coach .option-card {
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

body.theme-coach .option-card.is-chosen {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 25%, transparent);
}

body.theme-coach .option-tag.tag-recommande { color: var(--accent); }
body.theme-coach .option-tag.tag-temps-court { color: var(--sport-blue); }
body.theme-coach .option-tag.tag-micro { color: var(--sport-blue); }
body.theme-coach .option-tag.tag-forme-legere { color: #5f8f2d; }

body.theme-coach .ex-done,
body.theme-coach .ex-more,
body.theme-coach .ex-easy {
  border-width: 2px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

body.theme-coach .ex-diagram img,
body.theme-coach .ex-diagram video {
  border-width: 2px;
  border-radius: var(--radius);
  border-color: var(--sport-navy);
}

body.theme-coach .exercise-head strong::before {
  color: var(--accent);
  font-family: var(--display);
}

body.theme-coach th {
  background: var(--sport-navy);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}

body.theme-coach input[type="text"],
body.theme-coach input[type="password"],
body.theme-coach input[type="number"],
body.theme-coach input[type="date"],
body.theme-coach select,
body.theme-coach textarea {
  border-width: 2px;
  border-radius: var(--radius);
  border-color: var(--line);
}

body.theme-coach .load-bias {
  border: 2px solid var(--sport-navy);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff 0%, #eef3f8 55%, #e5f1fb 100%);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--sport-navy) 10%, transparent);
}

/* Encouragements — bloc joyeux (bleu / lime / orange) */
body.theme-coach .coach-motivate {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--sport-lime) 22%, #fff) 0%,
      #fff 42%,
      color-mix(in srgb, var(--sport-blue) 10%, #fff) 100%
    ) padding-box,
    linear-gradient(125deg, var(--sport-blue), var(--sport-lime) 48%, #ff7a3d) border-box;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--sport-navy) 14%, transparent);
}

body.theme-coach .coach-motivate::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #ff7a3d 35%, transparent), transparent 68%);
  pointer-events: none;
}

body.theme-coach .coach-motivate::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -15%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sport-blue) 28%, transparent), transparent 70%);
  pointer-events: none;
}

body.theme-coach .coach-motivate > * {
  position: relative;
  z-index: 1;
}

body.theme-coach .coach-motivate h2 {
  font-family: var(--display);
  letter-spacing: 0.03em;
  color: var(--sport-navy);
  margin: 0 0 0.15rem;
}

body.theme-coach .coach-motivate .streak-chip {
  background: linear-gradient(165deg, var(--sport-lime), color-mix(in srgb, var(--sport-lime) 55%, #fff));
  border-color: var(--sport-navy);
  color: var(--sport-navy);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--sport-navy) 18%, transparent);
  animation: coach-chip-in 0.4s ease both;
}

body.theme-coach .coach-motivate .streak-value {
  color: var(--sport-navy);
}

body.theme-coach .coach-motivate .streak-label {
  color: color-mix(in srgb, var(--sport-navy) 72%, transparent);
  font-weight: 700;
}

body.theme-coach .coach-motivate .milestone-list li {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  border: 2px solid var(--sport-navy);
  background: #fff;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--sport-navy) 10%, transparent);
  animation: coach-chip-in 0.35s ease both;
}

body.theme-coach .coach-motivate .milestone-list li:nth-child(3n + 1) {
  border-color: var(--sport-blue);
  background: color-mix(in srgb, var(--sport-blue) 9%, #fff);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--sport-blue) 28%, transparent);
}

body.theme-coach .coach-motivate .milestone-list li:nth-child(3n + 2) {
  border-color: #ff7a3d;
  background: color-mix(in srgb, #ff7a3d 10%, #fff);
  box-shadow: 2px 2px 0 color-mix(in srgb, #ff7a3d 30%, transparent);
  animation-delay: 0.05s;
}

body.theme-coach .coach-motivate .milestone-list li:nth-child(3n) {
  border-color: color-mix(in srgb, var(--sport-lime) 45%, var(--sport-navy));
  background: color-mix(in srgb, var(--sport-lime) 24%, #fff);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--sport-lime) 40%, transparent);
  animation-delay: 0.1s;
}

body.theme-coach .coach-motivate .milestone-list li strong {
  color: var(--sport-navy);
}

body.theme-coach .coach-motivate .hint {
  margin-top: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 2px dashed color-mix(in srgb, var(--sport-blue) 45%, var(--line));
  background: color-mix(in srgb, var(--sport-lime) 16%, #fff);
  color: var(--sport-navy);
}

body.theme-coach .load-bias-head label {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
}

body.theme-coach .load-bias-head strong {
  color: var(--sport-navy);
}

body.theme-coach .load-bias-track input[type="range"] {
  accent-color: var(--accent);
}

body.theme-coach .muscle-focus-chip {
  border-color: var(--sport-navy);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--sport-navy) 10%, transparent);
}

body.theme-coach .muscle-focus-chip.is-on {
  background: color-mix(in srgb, var(--sport-lime) 35%, #fff);
  color: var(--sport-navy);
}

body.theme-coach input:focus,
body.theme-coach select:focus,
body.theme-coach textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

@keyframes coach-today-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
}

@keyframes coach-chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes coach-bar-fill {
  from { transform: scaleX(0.15); opacity: 0.5; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-coach .day-col.today,
  body.theme-coach .session-chip,
  body.theme-coach .bar i,
  body.theme-coach .btn {
    animation: none;
    transition: none;
  }
}

.ex-diagram-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0 0.25rem;
}
.btn-small {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.ex-editor {
  display: block;
}
.ex-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: end;
  margin-bottom: 1rem;
}
.ex-editor-count { margin: 0; }
.ex-editor-status.is-ok { color: var(--accent, #0f5c4c); }
.ex-editor-status.is-error { color: #a33; }
.ex-filter-check {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.9rem;
}
.ex-editor-media-row {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
@media (min-width: 700px) {
  .ex-editor-media-row {
    grid-template-columns: minmax(200px, 320px) 1fr;
    align-items: center;
  }
}
.ex-editor-preview {
  border: 1px solid color-mix(in srgb, var(--border, #ccc) 80%, transparent);
  border-radius: 10px;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--bg, #fff) 94%, #000 3%);
  text-align: center;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ex-editor-preview.is-dragover {
  border-color: var(--accent, #0f5c4c);
  background: color-mix(in srgb, var(--accent, #0f5c4c) 12%, var(--bg, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #0f5c4c) 35%, transparent);
}
.ex-editor-preview.is-dropping {
  opacity: 0.7;
  pointer-events: none;
}
.ex-drop-preview {
  max-width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  pointer-events: none;
}
.ex-drop-empty {
  text-align: center;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  pointer-events: none;
}
.ex-drop-hint {
  margin: 0;
  flex-basis: 100%;
}
.ex-editor-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ex-field-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.55rem 0;
}
.ex-field-label input,
.ex-field-label textarea {
  font-weight: 400;
  width: 100%;
  box-sizing: border-box;
}
.ex-editor-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.ex-editor-actions .btn-ghost {
  margin-left: 0;
}
.btn-danger {
  color: #9b2c2c;
  border-color: color-mix(in srgb, #9b2c2c 45%, var(--line));
}
body.theme-coach .btn-danger:hover {
  background: color-mix(in srgb, #9b2c2c 10%, transparent);
  border-color: #9b2c2c;
}
.ex-media-key {
  display: block;
  font-size: 0.75rem;
  word-break: break-all;
}
.ex-media-link-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.ex-media-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: min(960px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
  background: var(--bg, #fff);
  color: inherit;
  box-shadow: 0 16px 48px color-mix(in srgb, #000 28%, transparent);
}
.ex-media-dialog::backdrop {
  background: color-mix(in srgb, #000 45%, transparent);
}
.ex-media-dialog-inner {
  margin: 0;
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: calc(100vh - 2rem);
}
.ex-media-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}
.ex-media-dialog-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
}
.ex-media-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
  overflow: auto;
  padding: 0.15rem;
  max-height: min(60vh, 520px);
}
.ex-media-pick {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border, #ccc) 85%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg, #fff) 96%, #000 2%);
  padding: 0.45rem;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  color: inherit;
  font: inherit;
}
.ex-media-pick:hover,
.ex-media-pick:focus-visible {
  border-color: var(--accent, #0f5c4c);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0f5c4c) 25%, transparent);
}
.ex-media-pick img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  display: block;
}
.ex-media-pick.is-link {
  min-height: 120px;
  justify-content: center;
}
.ex-media-pick .hint {
  font-size: 0.7rem;
  margin: 0;
}
.ex-media-upload {
  margin: 0;
  padding: 0.75rem 0.85rem;
}
.ex-media-upload .eyebrow {
  margin: 0 0 0.5rem;
}
.ex-media-upload-grid {
  display: grid;
  gap: 0.55rem 0.85rem;
}
@media (min-width: 700px) {
  .ex-media-upload-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: end;
  }
  .ex-upload-overwrite {
    grid-column: 1 / -1;
  }
}
.ex-media-upload .btn {
  margin-top: 0.65rem;
}
#ex-upload-status.is-error {
  color: #a33;
}

/* —— Mémo · thème théâtre —— */
body.theme-memo {
  --bg: #e7f3ef;
  --ink: #14242b;
  --muted: #5a7178;
  --accent: #0d7377;
  --accent-ink: #f4fffe;
  --line: #b7d4cd;
  --err: #c23b4a;
  --ok: #2a8f5c;
  --warn: #c4841d;
  --card: #ffffff;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Segoe UI", system-ui, -apple-system, sans-serif;
  --memo-spot: #ff5a36;
  --memo-sun: #ffc857;
  --memo-mist: #7dd3c0;
  /* Noms de personnages — self = toujours le rôle de l’utilisateur */
  --memo-char-self: var(--accent);
  --memo-char-1: #b33b2e;
  --memo-char-2: #2a4f8f;
  --memo-habit: #2a4f8f;
  --memo-char-3: #8a5a12;
  --memo-char-4: #6b3d7a;
  --memo-char-5: #1f6b4a;
  --memo-char-6: #a14a6a;
  --memo-char-7: #3d5a6c;
  --memo-char-8: #9a4e1a;
  --radius: 0.7rem;
  --memo-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow-x: clip;
}

body.theme-memo::before,
body.theme-memo::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

body.theme-memo::before {
  width: min(42rem, 90vw);
  height: min(42rem, 90vw);
  top: -18%;
  right: -12%;
  background:
    radial-gradient(circle at 35% 40%, color-mix(in srgb, var(--memo-spot) 28%, transparent), transparent 58%),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--memo-sun) 35%, transparent), transparent 55%);
  animation: memo-blob-a 16s var(--memo-ease) infinite alternate;
}

body.theme-memo::after {
  width: min(36rem, 80vw);
  height: min(36rem, 80vw);
  bottom: -16%;
  left: -14%;
  background:
    radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--memo-mist) 40%, transparent), transparent 55%);
  animation: memo-blob-b 20s var(--memo-ease) infinite alternate;
}

body.theme-memo .top {
  position: relative;
  background: linear-gradient(120deg, #0a5c60 0%, #0d7377 48%, #14919b 100%);
  border-bottom: 3px solid var(--memo-spot);
  color: #e8f8f6;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

body.theme-memo .brand {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}

body.theme-memo .brand.memo-top-script {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  opacity: 1;
  max-width: min(42vw, 18rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  pointer-events: auto;
}

body.theme-memo .brand.memo-top-script:visited,
body.theme-memo .brand.memo-top-script:hover,
body.theme-memo .brand.memo-top-script:active,
body.theme-memo .brand.memo-top-script:focus {
  color: #fff;
  text-decoration: none;
  opacity: 1;
  transform: translate(-50%, -50%);
}

body.theme-memo .brand.memo-top-script::after {
  display: none;
}

body.theme-memo .brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15rem;
  height: 0.28rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--memo-spot), var(--memo-sun));
  transform: scaleX(0.35);
  transform-origin: left center;
  opacity: 0.9;
  transition: transform 0.35s var(--memo-ease);
}

body.theme-memo .brand:hover::after {
  transform: scaleX(1);
}

body.theme-memo .top nav a,
body.theme-memo .top .top-nav a:not(.auth-btn) {
  color: #c5ebe6;
  font-weight: 600;
  transition: color 0.2s ease, transform 0.2s var(--memo-ease);
}

body.theme-memo .top nav a:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

body.theme-memo .top .top-user {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-right: 0.15rem;
  white-space: nowrap;
}

body.theme-memo .top .auth-btn-icon { color: #e8f8f6; }

@media (max-width: 640px) {
  body.theme-memo .top {
    padding: 0.45rem 0.75rem;
    border-bottom-width: 2px;
    gap: 0.5rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 14%, transparent);
  }

  body.theme-memo .top-desktop {
    display: none;
  }

  body.theme-memo .brand {
    font-size: 1.05rem;
    max-width: none;
  }

  body.theme-memo .brand.memo-top-script {
    font-size: 1.05rem;
    max-width: min(46vw, 11rem);
  }

  body.theme-memo .brand::after {
    height: 0.18rem;
    bottom: -0.1rem;
  }

  body.theme-memo .top-nav {
    gap: 0.45rem;
    flex-wrap: nowrap;
  }

  body.theme-memo .top .top-user {
    font-size: 0.8rem;
  }

  body.theme-memo .top .auth-btn-icon {
    padding: 0.25rem;
  }

  body.theme-memo .top .auth-icon {
    width: 18px;
    height: 18px;
  }

  body.theme-memo main {
    padding: 1rem 0.85rem 2.25rem;
  }

  .memo-nav-wrap { margin-bottom: 1.1rem; }

  .memo-nav a {
    padding: 0.55rem 0.9rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
  }

  .memo-hero { margin-bottom: 1.15rem; }
  .memo-hero h1 { font-size: 1.55rem; margin: 0.15rem 0 0.4rem; }
  .memo-lead { font-size: 0.95rem; }
  .memo-hero--compact { margin-bottom: 0.65rem; }
  .memo-hero--compact h1 { font-size: 1.35rem; margin: 0.05rem 0 0.15rem; }
  .memo-hero--compact .memo-lead { font-size: 0.88rem; }

  .memo-actions {
    gap: 0.55rem;
  }
  .memo-actions .btn,
  .memo-actions .btn-ghost {
    min-height: 2.75rem;
  }
}

body.theme-memo h1,
body.theme-memo h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.theme-memo .btn {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #0a4f53));
  color: var(--accent-ink);
  border-radius: var(--radius);
  border: none;
  font-family: inherit;
  font-weight: 700;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000);
  transition: transform 0.18s var(--memo-ease), box-shadow 0.18s var(--memo-ease), filter 0.18s ease;
}

body.theme-memo .btn:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 55%, #000);
  filter: brightness(1.03);
}

body.theme-memo .btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000);
}

body.theme-memo .btn-ghost {
  background: color-mix(in srgb, var(--card) 80%, transparent);
  color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: none;
}

body.theme-memo .btn-ghost:hover {
  border-color: var(--memo-spot);
  background: color-mix(in srgb, var(--memo-spot) 8%, var(--card));
  color: color-mix(in srgb, var(--memo-spot) 70%, var(--ink));
  box-shadow: none;
  filter: none;
}

body.theme-memo .eyebrow {
  color: var(--memo-spot);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.memo-nav-wrap {
  position: relative;
  margin: 0 0 1.5rem;
}

.memo-nav-wrap::before,
.memo-nav-wrap::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 0.55rem;
  width: 1.6rem;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.memo-nav-wrap::before {
  left: 1px;
  border-radius: calc(var(--radius) + 0.2rem) 0 0 calc(var(--radius) + 0.2rem);
  background: linear-gradient(90deg, color-mix(in srgb, var(--card) 92%, transparent), transparent);
}

.memo-nav-wrap::after {
  right: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 1.85rem;
  padding-right: 0.2rem;
  border-radius: 0 calc(var(--radius) + 0.2rem) calc(var(--radius) + 0.2rem) 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--card) 96%, transparent) 55%, transparent);
  color: var(--memo-spot);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.memo-nav-wrap.can-scroll-left::before {
  opacity: 1;
}

.memo-nav-wrap.can-scroll-right::after {
  content: "›";
  opacity: 1;
}

.memo-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.35rem 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--memo-spot) 65%, var(--line)) transparent;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: calc(var(--radius) + 0.2rem);
  backdrop-filter: blur(8px);
}

.memo-nav::-webkit-scrollbar {
  height: 5px;
}

.memo-nav::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 0.5rem;
}

.memo-nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--memo-spot) 55%, var(--line));
  border-radius: 999px;
}

.memo-nav a {
  flex: 1 1 0;
  min-width: 0;
  max-width: 7.5rem;
  scroll-snap-align: center;
  white-space: nowrap;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s var(--memo-ease);
}

.memo-nav a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}

.memo-nav a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--memo-spot)));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 45%, #000);
}

.memo-nav-help {
  color: var(--memo-spot) !important;
  font-size: 0.9rem;
}

.memo-nav-help.is-active,
.memo-nav a.memo-nav-help.is-active {
  background: linear-gradient(135deg, var(--memo-spot), color-mix(in srgb, var(--memo-spot) 70%, var(--memo-sun)));
  color: #fff !important;
}

.memo-lead { color: var(--muted); max-width: 36rem; }
.memo-hero { margin-bottom: 1.5rem; }
.memo-hero--compact {
  margin-bottom: 0.75rem;
}
.memo-hero--compact h1 {
  font-size: 1.45rem;
  margin: 0.05rem 0 0.2rem;
}
.memo-hero--compact .memo-lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.memo-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.85rem 0;
}
@media (min-width: 640px) {
  .memo-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.memo-stat {
  background: color-mix(in srgb, var(--card) 92%, var(--memo-mist));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 8%, transparent);
  transition: transform 0.25s var(--memo-ease), box-shadow 0.25s ease, border-color 0.2s ease;
}

.memo-stat:hover {
  transform: translateY(-2px) rotate(-0.3deg);
  border-color: color-mix(in srgb, var(--memo-spot) 45%, var(--line));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 10%, transparent);
}

.memo-stat:nth-child(2n):hover { transform: translateY(-2px) rotate(0.3deg); }

.memo-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.memo-stat-label {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.2;
}

.memo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.memo-actions .btn,
.memo-actions .btn-ghost {
  margin-left: 0;
  text-align: center;
}

.memo-actions--stack {
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 32rem;
  margin-inline: auto;
  width: 100%;
}

.memo-actions-row {
  display: grid;
  gap: 0.65rem;
  width: 100%;
}

.memo-actions-row--primary {
  grid-template-columns: 1fr 1fr;
}

.memo-actions-row--secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.memo-actions-row .btn,
.memo-actions-row .btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (max-width: 420px) {
  .memo-actions-row--primary,
  .memo-actions-row--secondary {
    grid-template-columns: 1fr;
  }
}

.memo-mode-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (min-width: 700px) {
  .memo-mode-grid { grid-template-columns: 1fr 1fr; }
}
.memo-mode-grid--compact { margin-top: 0.75rem; }
.memo-mode-grid--compact h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.memo-intent {
  margin: 1.75rem 0 0;
  padding-top: 0.25rem;
}
.memo-intent h2 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}
.memo-intent-lead--secondary {
  margin-top: 1.1rem;
  margin-bottom: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.memo-mode-card--auto {
  border-color: color-mix(in srgb, var(--accent, #0d7377) 35%, var(--border, #ddd));
  background: color-mix(in srgb, var(--accent, #0d7377) 6%, var(--card, #fff));
}
.memo-intent-lead {
  margin: 0 0 0.75rem;
  color: var(--muted);
  max-width: 40rem;
}
.memo-review-summary {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.memo-queue-preview,
.memo-queue-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.memo-queue-preview li,
.memo-queue-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.memo-queue-item--start {
  padding: 0;
  background: transparent;
  border: 0;
}
.memo-queue-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.85rem 1rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(
    160deg,
    var(--card),
    color-mix(in srgb, var(--memo-mist) 18%, var(--card))
  );
  border: 1.5px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: calc(var(--radius) + 0.1rem);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 12%, transparent);
  transition: border-color 0.2s ease, transform 0.2s var(--memo-ease),
    box-shadow 0.2s ease;
}
.memo-queue-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}
.memo-queue-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.memo-queue-card:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .memo-queue-card,
  .memo-queue-card:hover,
  .memo-queue-card:active {
    transition: none;
    transform: none;
  }
}
.memo-queue-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  flex: 1 1 10rem;
  min-width: 0;
}
.memo-queue-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.memo-inline-form {
  display: inline;
  margin: 0;
}
.memo-queue-actions .btn,
.memo-queue-actions .btn-ghost {
  margin-left: 0;
  min-height: 2.5rem;
  padding: 0.45rem 0.85rem;
}

/* Mobile: column stack without the 10rem horizontal flex-basis becoming height */
@media (max-width: 640px) {
  .memo-queue-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }
  .memo-queue-main {
    flex: 0 1 auto;
  }
  .memo-queue-actions {
    margin-left: 0;
    width: 100%;
  }
  .memo-queue-actions .btn,
  .memo-queue-actions .btn-ghost,
  .memo-queue-actions .memo-inline-form {
    flex: 1 1 0;
  }
  .memo-queue-actions .btn,
  .memo-queue-actions .btn-ghost {
    width: auto;
    text-align: center;
  }
  .memo-inline-form { flex: 1 1 0; display: flex; }
  .memo-inline-form .btn,
  .memo-inline-form .btn-ghost { width: 100%; }
}
.memo-queue-idx {
  font-weight: 700;
  color: var(--memo-spot);
  min-width: 1.25rem;
}
.memo-queue-label {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
a.memo-queue-label:hover { color: var(--accent); }
.memo-queue-reason,
.memo-toc-badge {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.memo-queue-reason--learning,
.memo-toc-badge--learning { color: #b45309; }
.memo-queue-reason--due,
.memo-toc-badge--due { color: var(--memo-spot); }
.memo-queue-reason--new,
.memo-toc-badge--new { color: var(--accent); }
.memo-queue-reason--mature,
.memo-toc-badge--mature { color: var(--muted); }
.memo-queue-empty {
  color: var(--muted);
  padding: 0.35rem 0;
}
.memo-review-panel { margin-bottom: 1.25rem; }
.memo-toc-lead--manual {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

.memo-mode-card {
  display: block;
  padding: 1.15rem 1.2rem;
  min-height: 5.5rem;
  background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--memo-mist) 18%, var(--card)));
  border: 1.5px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: calc(var(--radius) + 0.15rem);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 12%, transparent);
  transition: border-color 0.2s ease, transform 0.25s var(--memo-ease), box-shadow 0.25s ease;
}
@media (min-width: 700px) {
  .memo-mode-card { padding: 1.25rem 1.35rem; }
}

.memo-mode-card:hover {
  border-color: var(--memo-spot);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--memo-spot) 16%, transparent);
}

.memo-mode-card:active {
  transform: translateY(-1px) scale(0.995);
}

.memo-mode-card h2,
.memo-mode-card h3 { margin: 0 0 0.4rem; font-size: 1.35rem; }
.memo-mode-card h3 { font-size: 1.15rem; }
.memo-mode-card p { margin: 0; color: var(--muted); }

.memo-mode-card--resume {
  margin-top: 0.75rem;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent) 10%, var(--card)),
    color-mix(in srgb, var(--memo-mist) 22%, var(--card))
  );
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 22%, transparent);
}
.memo-mode-card--resume + .memo-mode-grid {
  margin-top: 0.65rem;
}
.memo-mode-card--resume[hidden] {
  display: none !important;
}

.memo-scene-list { display: grid; gap: 0.85rem; margin-top: 1rem; }
.memo-bilan-list { margin-top: 0.85rem; }

.memo-progress-acts {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.memo-progress-act > .memo-progress-act-scenes {
  margin: 0;
  padding: 0.75rem;
  border-top: 0;
}
.memo-progress-act:not([open]) > .memo-progress-act-scenes {
  display: none;
}

.memo-scene-card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: calc(var(--radius) + 0.1rem);
  padding: 0.9rem 1rem;
  scroll-margin-top: 4.5rem;
  transition: transform 0.22s var(--memo-ease), border-color 0.2s ease, box-shadow 0.22s ease;
}

.memo-scene-card:target {
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 3px;
}

.memo-scene-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 10%, transparent);
}

.memo-scene-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.memo-scene-card h2 { margin: 0; font-size: 1.05rem; }
.memo-scene-card--empty { opacity: 0.7; }
.memo-scene-pct { font-weight: 700; color: var(--accent); }
.memo-scene-card--empty .memo-scene-pct { color: var(--muted); font-weight: 600; }
.memo-scene-meta { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--muted); }
.memo-scene-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
}
.memo-scene-rehearsal-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.memo-scene-rehearsal-row > .memo-date-edit {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.memo-scene-rehearsal-row > .memo-scene-rehearsal {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  margin-top: 0;
}
.memo-scene-rehearsal-row > .memo-scene-texte,
.memo-scene-actions .memo-scene-texte,
.memo-scene-actions .memo-scene-su {
  flex: 0 0 auto;
  margin-top: 0;
  margin-left: auto;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.45rem 0.75rem;
}
.memo-scene-su {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.memo-scene-su.is-on {
  background: color-mix(in srgb, var(--ok) 22%, var(--card));
  border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
  color: var(--ink);
}
.memo-scene-su.is-on:hover {
  border-color: var(--ok);
}
.memo-scene-su:disabled {
  opacity: 0.65;
  cursor: wait;
}
.memo-scene-card.is-known {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
}
.memo-scene-card.is-known .memo-scene-pct {
  color: var(--ok);
}
.memo-lead--soft {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.memo-lead--soft strong {
  color: var(--ink);
  font-weight: 700;
}

a.memo-scene-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.memo-scene-card--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
a.memo-scene-card--link.is-active,
.memo-bilan-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.memo-bilan-card {
  position: relative;
  padding: 0.65rem 0.85rem;
}
.memo-bilan-card-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
}
.memo-bilan-card-hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Contenu non interactif : laisser passer le clic vers la hit-link (→ session). */
.memo-bilan-card > *:not(.memo-bilan-card-hit) {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.memo-bilan-card .memo-date-edit,
.memo-bilan-card .memo-role-switch,
.memo-bilan-card .memo-date-block,
.memo-bilan-card .memo-bilan-card-foot,
.memo-bilan-card .memo-role-switch-actions,
.memo-bilan-card details,
.memo-bilan-card summary,
.memo-bilan-card a:not(.memo-bilan-card-hit),
.memo-bilan-card button,
.memo-bilan-card input,
.memo-bilan-card label,
.memo-bilan-card form,
.memo-bilan-card select {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.memo-bilan-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.4rem;
  margin: 0.35rem 0 0;
  line-height: 1.3;
}
.memo-bilan-sub .memo-scene-meta {
  margin: 0;
}
.memo-bilan-sub-sep {
  color: var(--muted);
}
.memo-bilan-role {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.25;
}
.memo-bilan-card .memo-urgency-hint {
  margin-top: 0.25rem;
}
.memo-bilan-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem 0.75rem;
  margin-top: 0.35rem;
}
.memo-bilan-card-foot .memo-bilan-card-date {
  margin: 0;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.memo-bilan-card-foot .memo-date-edit {
  margin-top: 0;
}
.memo-bilan-card-foot .memo-date-edit[open] {
  flex: 1 1 100%;
}
.memo-bilan-card-foot .memo-date-edit > summary,
.memo-bilan-card-foot .memo-date-display {
  min-height: 2.75rem;
  font-size: 0.9rem;
}
.memo-bilan-card .memo-role-switch {
  margin: 0;
  flex: 0 1 auto;
  gap: 0.4rem 0.65rem;
}
.memo-bilan-card .memo-role-switch--actions-only {
  margin-top: 0;
}
.memo-bilan-card .memo-role-switch-actions {
  margin-left: 0;
}
.memo-bilan-card-date {
  margin-top: 0;
}
.memo-home-tips {
  position: relative;
  margin: 0 0 1.15rem;
  padding: 0.85rem 2.4rem 0.85rem 0.95rem;
  background: color-mix(in srgb, var(--card) 88%, var(--memo-mist));
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.memo-home-tips p {
  margin: 0 0 0.55rem;
}
.memo-home-tips p:last-child {
  margin-bottom: 0;
}
.memo-home-tips strong {
  color: var(--ink);
}
.memo-home-tips-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.memo-home-tips-close:hover,
.memo-home-tips-close:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--line) 35%, transparent);
}
.memo-goal-duration-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.memo-goal-duration-link:hover,
.memo-goal-duration-link:focus-visible {
  text-decoration-thickness: 2px;
}
.memo-goal-edit > summary.memo-goal-current {
  cursor: pointer;
  list-style: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.05rem;
}
.memo-goal-edit > summary.memo-goal-current::-webkit-details-marker {
  display: none;
}
.memo-goal-edit > summary.memo-goal-current strong {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.memo-goal-edit[open] > summary.memo-goal-current {
  margin-bottom: 0.75rem;
}

.memo-progress-back {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}
.memo-progress-back a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.memo-progress-back a:hover,
.memo-progress-back a:focus-visible {
  text-decoration: underline;
}

.memo-scene-bar {
  margin-top: 0.55rem;
  height: 0.4rem;
  background: color-mix(in srgb, var(--line) 70%, #fff);
  border-radius: 99px;
  overflow: hidden;
}

.memo-scene-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--memo-spot), var(--memo-sun));
  background-size: 160% 100%;
  transform-origin: left center;
  animation: memo-bar-shine 2.8s ease-in-out infinite, memo-bar-grow 0.7s var(--memo-ease) both;
}

.memo-progress-chart-panel {
  margin-top: 0.85rem;
  width: 100%;
}
.memo-progress-chart-panel--card {
  margin-top: 0.4rem;
}
.memo-progress-chart {
  display: block;
  width: 100%;
  height: 7.5rem;
  max-width: 100%;
}
.memo-progress-chart-panel--card .memo-progress-chart {
  height: 3.1rem;
}
.memo-progress-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.memo-progress-chart-key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.memo-progress-chart-key::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.memo-progress-chart-key--score::before {
  background: var(--accent);
}
.memo-progress-chart-key--points::before {
  background: var(--memo-spot);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--memo-spot) 35%, #fff);
}

.memo-session-heading {
  flex: 1;
  min-width: 0;
  grid-area: heading;
}

.memo-session-heading h1,
.memo-scene-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memo-session-kind {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memo-session-heading--audio {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}

.memo-session-heading--audio .memo-scene-title {
  font-size: 1.05rem;
}

.memo-session-heading--audio .memo-phase {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--memo-spot);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Override global `nav { display: flex; flex-wrap }` — otherwise acts wrap
   into a broken staircase on desktop. */
.memo-sommaire {
  display: block;
  margin: 0 0 1rem;
}

.memo-sommaire--audio {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
}
.memo-sommaire--audio[hidden],
.memo-play--audio[hidden] {
  display: none !important;
}

.memo-toc-lead {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.4;
  opacity: 0.78;
}

.memo-toc-empty {
  color: var(--muted);
}

.memo-toc-act {
  margin: 0 0 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 92%, var(--memo-mist));
  overflow: clip;
}

.memo-toc-act-title {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--memo-spot);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.memo-toc-act-name {
  min-width: 0;
}

.memo-toc-act-stats {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--accent);
  opacity: 0.9;
  white-space: nowrap;
}

.memo-toc-act-stats--l0 {
  color: var(--ink);
  opacity: 0.72;
}

/* Stats d'acte visibles seulement quand l'accordéon est fermé */
.memo-toc-act[open] > .memo-toc-act-title .memo-toc-act-stats {
  display: none;
}

.memo-toc-act-title::-webkit-details-marker {
  display: none;
}

.memo-toc-act-title::before {
  content: "▸";
  display: inline-block;
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.18s ease;
}

.memo-toc-act[open] > .memo-toc-act-title {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--memo-spot) 8%, var(--card));
}

.memo-toc-act[open] > .memo-toc-act-title::before {
  transform: rotate(90deg);
}

.memo-toc-act.is-active > .memo-toc-act-title {
  color: var(--accent);
}

.memo-toc-act.has-selection > .memo-toc-act-title::after {
  content: "· toutes";
  margin-left: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase;
}

.memo-toc-scenes {
  list-style: none;
  margin: 0;
  padding: 0.65rem;
  display: grid;
  gap: 0.5rem;
}

.memo-toc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: stretch;
  max-height: 8rem;
  overflow: hidden;
  transition:
    opacity 0.2s ease,
    max-height 0.22s ease,
    margin 0.2s ease,
    padding 0.2s ease,
    gap 0.2s ease;
}

/* Scène sélectionnée : les autres se replient dans l’accordéon */
.memo-toc-act.has-selection .memo-toc-row:not(.is-selected) {
  max-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  gap: 0;
}

/* Pendant le jeu écran : barre compacte (scène active + Texte) */
.memo-sommaire--scene-focus {
  margin: 0 0 0.55rem;
}

.memo-sommaire--scene-focus > .memo-review-panel,
.memo-sommaire--scene-focus > .memo-toc-lead,
.memo-sommaire--scene-focus > .memo-toc-empty {
  display: none;
}

.memo-sommaire--scene-focus > .memo-toc-act:not(.is-active) {
  display: none;
}

.memo-sommaire--scene-focus > .memo-toc-act.is-active {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0;
  padding: 0.2rem;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 92%, var(--memo-mist));
  overflow: visible;
}

.memo-sommaire--scene-focus > .memo-toc-act.is-active > .memo-toc-act-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border: 0;
  background: transparent;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.memo-sommaire--scene-focus > .memo-toc-act.is-active > .memo-toc-act-title::before {
  content: "←";
  transform: none;
}

.memo-sommaire--scene-focus > .memo-toc-act.is-active > .memo-toc-act-title::after {
  content: "changer";
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase;
}

.memo-sommaire--scene-focus .memo-toc-scenes {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.memo-sommaire--scene-focus .memo-toc-row {
  display: none;
  max-height: none;
  opacity: 1;
  pointer-events: auto;
}

.memo-sommaire--scene-focus .memo-toc-row.is-selected {
  display: contents;
}

.memo-sommaire--scene-focus .memo-toc-scene {
  display: none;
}

.memo-sommaire--scene-focus .memo-toc-texte {
  flex: 0 0 auto;
  align-self: stretch;
  pointer-events: auto;
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  border-radius: calc(var(--radius) - 2px);
}

/* « ← Sommaire » duplique le « changer » de la barre compacte */
.memo-session-screen:has(.memo-sommaire--scene-focus) .memo-btn-sommaire {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .memo-toc-act-title::before,
  .memo-toc-row {
    transition: none;
  }
}

.memo-toc-texte {
  appearance: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 88%, var(--memo-mist));
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  align-self: stretch;
}

.memo-toc-texte:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.memo-btn-texte {
  flex-shrink: 0;
  font-weight: 700;
}

.memo-play-toolbar .memo-btn-texte {
  margin-left: auto;
}

.memo-toc-scene {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  text-align: left;
  font: inherit;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.memo-toc-scene:hover {
  border-color: var(--memo-spot);
  transform: translateY(-1px);
}

.memo-toc-scene:focus-visible {
  outline: 2px solid var(--memo-spot);
  outline-offset: 2px;
}

.memo-toc-scene.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.memo-toc-scene--empty,
.memo-toc-scene:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.memo-toc-scene--empty:hover,
.memo-toc-scene:disabled:hover {
  border-color: var(--line);
  transform: none;
}

.memo-toc-scene-name {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
}

.memo-toc-scene-meta {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  flex-shrink: 0;
}

.memo-toc-scene-pct {
  font-weight: 700;
  color: var(--accent);
}

.memo-toc-scene-pct--l0 {
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* % acquis : paliers rouge → ambre → teal (évite hsl/calc fragile → fallback accent) */
.memo-toc-scene-pct.memo-acq-scale,
.memo-toc-act-stats.memo-acq-scale {
  color: #a32828;
}
.memo-acq-scale[data-acq-band="0"] { color: #a32828; }  /* 0–9 % */
.memo-acq-scale[data-acq-band="1"] { color: #b44520; }  /* 10–19 */
.memo-acq-scale[data-acq-band="2"] { color: #c45e14; }  /* 20–29 */
.memo-acq-scale[data-acq-band="3"] { color: #c47a12; }  /* 30–39 */
.memo-acq-scale[data-acq-band="4"] { color: #a88914; }  /* 40–49 */
.memo-acq-scale[data-acq-band="5"] { color: #7a8f18; }  /* 50–59 */
.memo-acq-scale[data-acq-band="6"] { color: #4f8a28; }  /* 60–69 */
.memo-acq-scale[data-acq-band="7"] { color: #2f7a38; }  /* 70–79 */
.memo-acq-scale[data-acq-band="8"] { color: #1a6b44; }  /* 80–89 */
.memo-acq-scale[data-acq-band="9"] { color: #12604c; }  /* 90–99 */
.memo-acq-scale[data-acq-band="10"] { color: #0f5c4c; } /* 100 */

.memo-play-toolbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
}

.memo-play-toolbar .memo-btn-sommaire {
  margin-left: 0;
  flex-shrink: 0;
  padding: 0.4rem 0.7rem;
}

.memo-play-status {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.65rem;
}

.memo-play-toolbar .memo-phase {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

/* Écran : pas de phase/méta (« Dis ta réplique… », « cued ») — place pour le jeu */
.memo-session-screen .memo-play-toolbar .memo-phase,
.memo-session-screen .memo-play-toolbar .memo-meta,
.memo-session-screen .memo-play-status {
  display: none !important;
}

.memo-scope[hidden] {
  display: none !important;
}

.memo-play-toolbar .memo-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memo-play-toolbar--audio {
  flex-shrink: 0;
  margin: 0 0 0.3rem;
}

/* Curseur de position dans la scène (recul / reprise) */
.memo-scene-nav {
  margin: 0.35rem 0 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3.5%, var(--card, #fff));
}

.memo-scene-nav[hidden] {
  display: none !important;
}

.memo-scene-nav-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

.memo-scene-nav-btn {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--card, #fff);
  color: var(--ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.memo-scene-nav-btn:hover,
.memo-scene-nav-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.memo-scene-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.memo-scene-scrub-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.memo-scene-scrub-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-align: center;
}

.memo-scene-scrub {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.memo-scene-scrub:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: 999px;
}

.memo-scene-scrub::-webkit-slider-runnable-track {
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.memo-scene-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: calc((0.35rem - 1.35rem) / 2);
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--card, #fff);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent);
}

.memo-scene-scrub::-moz-range-track {
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border: 0;
}

.memo-scene-scrub::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--card, #fff);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent);
}

.memo-scene-end {
  margin: 0.5rem 0 1rem;
  padding: 1.1rem 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.memo-scene-end.is-suggest-redo {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

.memo-scene-end[hidden] {
  display: none !important;
}

.memo-scene-end-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.memo-scene-end-title {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
  line-height: 1.25;
}

.memo-scene-end-lead {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

.memo-scene-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.memo-scene-end-actions .btn {
  flex: 1 1 calc(50% - 0.25rem);
  min-height: 2.75rem;
  min-width: 8rem;
}

.memo-scene-end-actions #btn-scene-end-finish {
  flex: 1 1 100%;
}

.memo-play.is-scene-end .memo-heard-panel {
  display: none;
}

.memo-session-audio .memo-scene-nav {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.memo-play--audio:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Zone haute : peut scroller ; les contrôles restent ancrés en bas */
.memo-play--audio .memo-play-toolbar,
.memo-play--audio .memo-scene-nav,
.memo-play--audio .memo-scope,
.memo-play--audio .memo-scene-end,
.memo-play--audio .memo-cmds-legend,
.memo-play--audio .memo-feedback--audio {
  flex-shrink: 0;
}

.memo-session-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "back heading chrome count";
  align-items: center;
  column-gap: 0.4rem;
  row-gap: 0;
  margin-bottom: 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.memo-back {
  grid-area: back;
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--accent);
  line-height: 1;
  padding: 0.2rem 0.25rem;
  margin: 0;
}

.memo-session-count {
  grid-area: count;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: center;
  padding-top: 0;
}

.memo-session-chrome {
  grid-area: chrome;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 0;
  flex-shrink: 0;
}

.memo-mode-switch {
  display: inline-flex;
  align-items: stretch;
  padding: 0.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5.5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

.memo-mode-switch-opt {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.4rem 0.65rem;
  min-height: 2.4rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

button.memo-mode-switch-opt:hover {
  color: var(--ink);
}

.memo-mode-switch-opt.is-current {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
  cursor: default;
}

@media (min-width: 720px) {
  .memo-session-top {
    column-gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .memo-session-chrome {
    gap: 0.75rem;
  }

  .memo-mode-switch-opt {
    font-size: 0.82rem;
    padding: 0.45rem 0.85rem;
  }

  .memo-session-count {
    font-size: 0.9rem;
  }

  .memo-session-heading h1,
  .memo-scene-title {
    font-size: 1.25rem;
  }

  .memo-session-kind,
  .memo-session-heading--audio .memo-phase {
    font-size: 0.85rem;
  }
}

.memo-phase {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--memo-spot);
  margin: 0 0 0.25rem;
}

.memo-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.memo-cue-wrap {
  position: relative;
  z-index: 0;
  margin-bottom: 0.75rem;
  /* Cadre / rebord de la « fenêtre » — le cue paraît en retrait derrière. */
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--ink) 7%, var(--bg));
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--card) 35%, transparent),
    0 1px 0 color-mix(in srgb, var(--card) 55%, transparent);
  overflow: hidden;
}

.memo-cue {
  /* Fond plus profond que la carte active : historique derrière la vue. */
  background: color-mix(in srgb, var(--ink) 5%, color-mix(in srgb, var(--accent) 7%, var(--bg)));
  border-left: 3px solid var(--accent);
  border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0;
  font-size: 1.02rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
  /* Empreinte fixe (~5 lignes) — pan JS via .memo-cue-track */
  max-height: calc(1.4em * 5 + 1.3rem);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  touch-action: none;
  overscroll-behavior: none;
  /* Enfoncement intérieur (vitre / puits). */
  box-shadow:
    inset 0 2px 6px color-mix(in srgb, var(--ink) 12%, transparent),
    inset 0 -1px 3px color-mix(in srgb, var(--ink) 5%, transparent),
    inset 4px 0 8px color-mix(in srgb, var(--ink) 4%, transparent);
}

/* Bords de fenêtre : le contenu défile sous le cadre, pas toute la page. */
.memo-cue::before,
.memo-cue::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 0;
  height: 1.15rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--memo-ease, ease);
}

.memo-cue::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 10%, var(--bg)) 0%,
    transparent 100%
  );
}

.memo-cue::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 10%, var(--bg)) 0%,
    transparent 100%
  );
}

.memo-cue.is-scrollable::before,
.memo-cue.is-scrollable::after {
  opacity: 0.4;
}

.memo-cue.is-scrollable.can-scroll-up::before,
.memo-cue.is-scrollable.can-scroll-down::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .memo-cue::before,
  .memo-cue::after {
    transition: none;
  }
}

.memo-cue.is-scrollable {
  /* Hauteur aussi posée en inline par syncCueScrollability */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.memo-cue.is-scrollable:active {
  cursor: grabbing;
}

.memo-cue-track {
  position: relative;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  /* Évite que la dernière ligne colle / soit rognée au bord bas. */
  padding-bottom: 0.2rem;
}

.memo-cue-name {
  font-weight: 700;
}

.memo-cue-turn {
  margin: 0;
}

.memo-cue-turn.is-cue-locked {
  position: relative;
  z-index: 1;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--accent) 22%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.memo-cue.has-cue-locked.can-scroll-down::after {
  opacity: 0;
}

.memo-cue-turn + .memo-cue-turn {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

/* Changement de scène dans l’historique cue (scroll vers le haut). */
.memo-cue-scene {
  margin: 0.55rem 0 0.25rem;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

.memo-cue-turn + .memo-cue-scene {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

.memo-cue-scene:first-child {
  margin-top: 0;
}

.memo-cue-turn-text {
  white-space: pre-wrap;
}

.memo-cue-turn.is-self .memo-cue-name {
  color: var(--memo-char-self, var(--accent));
}

/* Phrases déjà dites (mode écran · découpage) — sous le cue, au-dessus de la capture */
.memo-said-phrases {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: color-mix(in srgb, var(--memo-char-self, var(--accent)) 7%, var(--card));
  border-left: 3px solid var(--memo-char-self, var(--accent));
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.55rem;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--text);
}

.memo-said-phrases[hidden] {
  display: none !important;
}

.memo-said-phrases-name {
  font-weight: 700;
}

.memo-said-phrases-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.memo-said-phrase {
  margin: 0;
  white-space: pre-wrap;
}

.memo-session-screen .memo-scope {
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.65rem;
}

/* Écran : Phrases / Réplique seuls (texte encore masqué) */
.memo-session-screen .memo-scope--toggle-only {
  padding: 0.3rem;
  border-color: color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--card) 92%, var(--memo-sun));
}

.memo-session-screen .memo-scope--toggle-only .memo-scope-toggle {
  gap: 0.3rem;
}

.memo-session-screen .memo-scope--toggle-only .memo-scope-btn {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.5rem;
  min-height: 2.5rem;
  border-radius: 9px;
}

.memo-session-screen .memo-scope--toggle-only .memo-scope-steps {
  margin: 0 0 0.35rem;
  justify-content: center;
}

.memo-session-screen .memo-line-panel {
  position: relative;
  z-index: 1;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.65rem;
  /* Au-dessus du puits de cue (fenêtre d’historique en retrait). */
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 7%, transparent);
}

.memo-session-screen .memo-line-panel-head {
  margin-bottom: 0.35rem;
  gap: 0.45rem;
}

.memo-session-screen .memo-answer-input {
  margin-bottom: 0.55rem;
  /* Place laissée au dock sticky (actions + Dicter) lors du scrollIntoView. */
  scroll-margin-bottom: 8.75rem;
}

.memo-session-screen .memo-answer-input[hidden] {
  display: none !important;
}

.memo-session-screen .memo-answer-input .memo-recite {
  min-height: 3.5rem;
  margin-bottom: 0;
}

.memo-session-screen .memo-feedback {
  margin: 0 0 0.45rem;
}

.memo-session-screen .memo-feedback[hidden] {
  display: none !important;
}

/* Bilan + actions collés en bas d’écran (toujours visibles). */
.memo-session-screen .memo-session-dock {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 0.35rem 0 0;
  padding: 0.45rem 0 0.3rem;
  background: linear-gradient(
    to top,
    var(--bg) 78%,
    color-mix(in srgb, var(--bg) 55%, transparent)
  );
}

.memo-session-screen .memo-session-dock .memo-feedback:not([hidden]) {
  max-height: min(42vh, 16rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -0.35rem 0.85rem color-mix(in srgb, var(--bg) 70%, transparent);
  scroll-margin-bottom: 6.5rem;
}

.memo-prompt {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0.5rem 0 1rem;
}

.memo-line-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.memo-line-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.memo-line-panel-head .memo-hide-level {
  margin-bottom: 0;
}

.memo-line-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.memo-line-row .memo-line-text {
  flex: 1 1 auto;
  min-width: 0;
}

.memo-line-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.memo-line-main .memo-line-text {
  flex: 0 1 auto;
  width: 100%;
}

.memo-line-tools {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}

.memo-first-word-btn {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  font: inherit;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.memo-first-word-btn[hidden] {
  display: none !important;
}

.memo-first-word-btn:hover,
.memo-first-word-btn:focus-visible,
.memo-first-word-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: none;
}

.memo-first-word-btn:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.memo-first-word-btn-glyph {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.memo-first-word-inline {
  margin: 0;
  color: var(--ink);
  font-size: 1em;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.memo-first-word-inline[hidden] {
  display: none !important;
}

.memo-line-text.is-first-word-hold {
  color: var(--ink);
  letter-spacing: normal;
  font-weight: 600;
}

.memo-line-text.is-initials {
  letter-spacing: 0.04em;
}

.memo-init-token {
  display: inline-block;
  min-width: 1.35em;
  min-height: 1.75em;
  padding: 0.15em 0.2em;
  margin: -0.15em 0;
  border-radius: 0.35rem;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1.45;
  text-align: center;
  vertical-align: baseline;
}

.memo-init-token:hover,
.memo-init-token:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
}

.memo-init-token.is-peeking,
.memo-init-token[aria-pressed="true"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.memo-hide-controls-slot {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.memo-init-peek {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.28rem);
  transform: translateX(-50%);
  z-index: 3;
  max-width: min(18rem, 78vw);
  padding: 0.35rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--card) 92%, var(--accent));
  box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
  pointer-events: none;
}

.memo-init-peek[hidden] {
  display: none !important;
}

.memo-line-edit-btn,
.memo-script-ctx-edit-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  line-height: 0;
}

.memo-line-tools .memo-line-edit-btn {
  margin-left: 0;
}

.memo-line-edit-btn:hover,
.memo-line-edit-btn:focus-visible,
.memo-script-ctx-edit-btn:hover,
.memo-script-ctx-edit-btn:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
}

.memo-line-edit-btn:focus-visible,
.memo-script-ctx-edit-btn:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.memo-line-edit-btn[hidden] {
  display: none !important;
}

.memo-line-edit-btn svg,
.memo-script-ctx-edit-btn svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.memo-line-edit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.35rem 0 0.75rem;
}

.memo-line-edit[hidden] {
  display: none !important;
}

.memo-line-edit-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.memo-line-edit-hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.memo-didascalie,
.memo-script-ctx-line.is-didascalie,
.memo-script-ctx-turn.is-didascalie .memo-script-ctx-line,
.memo-cue-turn.is-didascalie .memo-cue-turn-text {
  font-style: italic;
  color: var(--muted);
}

.memo-line-edit-text {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #fff);
  color: inherit;
}

.memo-line-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.memo-line-edit-actions .btn-danger,
.memo-script-ctx-edit-actions .btn-danger {
  margin-left: auto;
}

.memo-line-edit-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.memo-line-edit-status.is-error {
  color: #a33;
}

.memo-line-edit-status.is-ok {
  color: var(--accent, #0f5c4c);
}

.memo-line-panel.is-editing .memo-line-row,
.memo-line-panel.is-editing .memo-hide-controls {
  display: none;
}

.memo-line-staging {
  margin-top: 0.4rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: 0.15rem;
  opacity: 0.72;
  filter: grayscale(0.18);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.memo-line-staging[hidden] {
  display: none !important;
}

.memo-line-staging[open] {
  opacity: 1;
  filter: none;
}

.memo-line-staging-summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0.1rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: 0.78rem;
  line-height: 1.2;
}

.memo-line-staging-summary::-webkit-details-marker {
  display: none;
}

.memo-line-staging-summary::before {
  content: "▸";
  flex: 0 0 auto;
  color: inherit;
  font-size: 0.65rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.memo-line-staging[open] > .memo-line-staging-summary {
  color: var(--muted);
  min-height: 1.9rem;
}

.memo-line-staging[open] > .memo-line-staging-summary::before {
  transform: rotate(90deg);
}

.memo-line-staging-title {
  font-weight: 700;
  color: inherit;
  letter-spacing: 0.02em;
}

.memo-line-staging[open] > .memo-line-staging-summary .memo-line-staging-title {
  color: var(--ink);
}

.memo-line-staging-hint {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.memo-line-staging.has-notes:not([open]) > .memo-line-staging-summary {
  opacity: 0.9;
}

.memo-line-staging.has-notes > .memo-line-staging-summary .memo-line-staging-hint {
  color: color-mix(in srgb, var(--accent, #0f5c4c) 70%, var(--muted));
}

.memo-line-staging.has-notes[open] > .memo-line-staging-summary .memo-line-staging-hint {
  color: var(--accent, #0f5c4c);
}

.memo-line-staging-form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.1rem 0 0.15rem;
}

.memo-line-staging-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.memo-line-staging-text {
  width: 100%;
  min-height: 2.25rem;
  resize: vertical;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: inherit;
}

.memo-line-staging-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.05rem;
}

.memo-line-staging-actions .btn {
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.88rem;
}

.memo-line-staging-status {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.memo-line-staging-status.is-error {
  color: #a33;
}

.memo-line-staging-status.is-ok {
  color: var(--accent, #0f5c4c);
}

.memo-session-audio .memo-line-staging {
  margin: 0.4rem 0 0.25rem;
  border-top: 0;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--card) 82%, var(--muted));
  padding: 0.1rem 0.65rem 0.35rem;
}

.memo-session-audio .memo-line-staging[open] {
  background: var(--card);
}

@media (prefers-reduced-motion: reduce) {
  .memo-line-staging,
  .memo-line-staging-summary::before {
    transition: none;
  }
}

.memo-hide-level {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.memo-hide-controls {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  padding: 0.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5.5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

.memo-hide-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.4rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.memo-hide-btn:hover,
.memo-hide-btn:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

.memo-hide-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.memo-scope {
  flex-shrink: 0;
  margin: 0 0 0.65rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--memo-spot) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 88%, var(--memo-sun));
}

.memo-scope--long {
  border-color: color-mix(in srgb, var(--memo-spot) 55%, var(--line));
  background: color-mix(in srgb, var(--card) 82%, var(--memo-spot));
}

.memo-scope--phrases {
  background: color-mix(in srgb, var(--card) 85%, var(--memo-mist));
}

.memo-scope-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.45rem;
}

.memo-scope-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, #fff);
  color: var(--ink);
}

.memo-scope-badge--long {
  background: color-mix(in srgb, var(--memo-spot) 22%, #fff);
  color: color-mix(in srgb, var(--memo-spot) 75%, #000);
}

.memo-scope-badge--phrases {
  background: color-mix(in srgb, var(--memo-mist) 40%, #fff);
}

.memo-scope-badge--complete {
  background: color-mix(in srgb, var(--accent) 28%, #fff);
}

.memo-scope-badge--short {
  background: color-mix(in srgb, var(--line) 55%, #fff);
  color: var(--muted);
}

.memo-scope-detail {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.memo-scope-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  margin: 0 0 0.55rem;
}

/* Groupe de phrases liées : capsule + fil entre les points. */
.memo-scope-union {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  margin: 0.1rem 0.08rem;
  padding: 0.05rem 0.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.memo-scope-step {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0.4rem;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--line) 70%, #fff);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--line));
  cursor: pointer;
  flex: 0 0 auto;
  z-index: 1;
}

/* Zone tactile ~44px sans grossir le point. */
.memo-scope-step::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
}

/* Petit fil vers le point suivant de la même union. */
.memo-scope-step.is-link-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% - 1px);
  width: 0.95rem;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--accent) 70%, var(--line));
  pointer-events: none;
  z-index: 0;
}

.memo-scope-step.is-link-next.is-done::after,
.memo-scope-step.is-link-next.is-current::after {
  background: color-mix(in srgb, var(--ok) 55%, var(--accent));
}

.memo-scope-step:hover,
.memo-scope-step:focus-visible {
  outline: none;
  border-color: var(--memo-spot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--memo-spot) 22%, transparent);
}

.memo-scope-step.is-done {
  background: color-mix(in srgb, var(--ok) 55%, #fff);
  border-color: var(--ok);
}

.memo-scope-step.is-done:hover,
.memo-scope-step.is-done:focus-visible {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 28%, transparent);
}

.memo-scope-step.is-current {
  background: var(--memo-spot);
  border-color: var(--memo-spot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--memo-spot) 28%, transparent);
  cursor: default;
}

.memo-scope-step.is-current:hover,
.memo-scope-step.is-current:focus-visible {
  border-color: var(--memo-spot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--memo-spot) 28%, transparent);
}

.memo-scope-step.is-anchor {
  background: color-mix(in srgb, var(--accent) 45%, #fff);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.memo-scope-step.is-united:not(.is-current):not(.is-done):not(.is-anchor) {
  background: color-mix(in srgb, var(--accent) 28%, #fff);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.memo-scope-step.is-united.is-done {
  background: color-mix(in srgb, var(--ok) 40%, color-mix(in srgb, var(--accent) 20%, #fff));
}

.memo-scope-chunk-hint {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.memo-scope-chunk-hint[hidden] {
  display: none !important;
}

.memo-scope-chunk-hint.is-grouped {
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}

.memo-scope-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.memo-scope-toggle[hidden] {
  display: none !important;
}

.memo-scope-btn {
  appearance: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.45rem 0.55rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.memo-scope-btn:hover,
.memo-scope-btn:focus-visible {
  border-color: var(--memo-spot);
  outline: none;
}

.memo-scope-btn.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: color-mix(in srgb, var(--accent) 70%, #000);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.memo-session-audio .memo-scope {
  margin-bottom: 0.35rem;
}

.memo-line-text {
  font-size: 1.25rem;
  line-height: 1.5;
  min-height: 3.5rem;
  white-space: pre-wrap;
}

.memo-line-text.is-hidden {
  color: var(--muted);
  letter-spacing: 0.2em;
}

.memo-line-text.is-flash-peek {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent, #0f5c4c) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .memo-line-text.is-flash-peek {
    transition: box-shadow 0.35s ease, opacity 0.25s ease;
  }
}

.memo-reveal-row {
  display: none;
}

.memo-recite-head {
  margin-bottom: 0.35rem;
}

.memo-recite-label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* Indicateur micro — intégré au bouton Dicter */
.memo-dictation-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
}

.memo-dictation-status[hidden] {
  display: none !important;
}

.memo-dictation-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 55%, transparent);
  flex-shrink: 0;
}

.memo-dictation-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.95rem;
  flex-shrink: 0;
}

.memo-dictation-meter i {
  display: block;
  width: 3px;
  height: 25%;
  border-radius: 1px;
  background: color-mix(in srgb, #fff 70%, transparent);
  transition: height 60ms linear, background 120ms ease;
}

/* Libellé annoncé (aria-live), masqué visuellement — le bouton garde « Dicter » */
.memo-dictation-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.memo-dictation-status.is-listening .memo-dictation-dot {
  background: #fff;
  box-shadow: 0 0 0 0 color-mix(in srgb, #fff 45%, transparent);
  animation: memo-dictation-pulse 1.2s ease-out infinite;
}

/* Texte entendu : ambre bien distinct du blanc « en écoute » */
.memo-dictation-status.is-signal .memo-dictation-dot {
  background: #fde68a;
  box-shadow: 0 0 0 0 color-mix(in srgb, #fde68a 55%, transparent);
  animation: memo-dictation-pulse-signal 0.85s ease-out infinite;
}

.memo-dictation-status.is-listening .memo-dictation-meter i {
  background: #fff;
  animation: memo-dictation-bars 0.9s ease-in-out infinite;
}

.memo-dictation-status.is-signal .memo-dictation-meter i {
  background: #fde68a;
  animation: memo-dictation-bars 0.7s ease-in-out infinite;
}

.memo-dictation-status.is-listening .memo-dictation-meter i:nth-child(2),
.memo-dictation-status.is-signal .memo-dictation-meter i:nth-child(2) {
  animation-delay: 0.12s;
}
.memo-dictation-status.is-listening .memo-dictation-meter i:nth-child(3),
.memo-dictation-status.is-signal .memo-dictation-meter i:nth-child(3) {
  animation-delay: 0.24s;
}
.memo-dictation-status.is-listening .memo-dictation-meter i:nth-child(4),
.memo-dictation-status.is-signal .memo-dictation-meter i:nth-child(4) {
  animation-delay: 0.36s;
}
.memo-dictation-status.is-listening .memo-dictation-meter i:nth-child(5),
.memo-dictation-status.is-signal .memo-dictation-meter i:nth-child(5) {
  animation-delay: 0.48s;
}

@keyframes memo-dictation-bars {
  0%, 100% { height: 25%; }
  50% { height: 95%; }
}

@media (prefers-reduced-motion: reduce) {
  .memo-dictation-status.is-listening .memo-dictation-dot,
  .memo-dictation-status.is-signal .memo-dictation-dot,
  .memo-dictation-status.is-computing .memo-dictation-dot,
  .memo-dictation-status.is-listening .memo-dictation-meter i,
  .memo-dictation-status.is-signal .memo-dictation-meter i {
    animation: none;
  }
}

.memo-dictation-status.is-computing .memo-dictation-dot {
  background: #fff;
  animation: memo-dictation-spin-dot 0.85s linear infinite;
}

.memo-dictation-status.is-computing .memo-dictation-meter {
  opacity: 0.35;
}

@keyframes memo-dictation-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #fff 40%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes memo-dictation-pulse-signal {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #fde68a 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes memo-dictation-spin-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.memo-recite {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 0.85rem;
  resize: vertical;
}

.memo-recite.is-dictating {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 14%, transparent);
}

.memo-recite.is-dictating.is-hearing {
  border-color: color-mix(in srgb, #0f766e 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, #0f766e 18%, transparent);
  background: color-mix(in srgb, #0f766e 6%, #fff);
}

.memo-recite.is-computing {
  border-color: color-mix(in srgb, var(--memo-spot, var(--accent)) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--memo-spot, var(--accent)) 14%, transparent);
}

#memo-line-flow[hidden] {
  display: none !important;
}

.memo-scene-grade[hidden] {
  display: none !important;
}

.memo-scene-grade {
  display: block;
  margin: 0.5rem 0 1.25rem;
  padding: 1.1rem 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.memo-play.is-grading .memo-scene-grade {
  display: block !important;
}

.memo-play.is-grading .memo-feedback {
  margin-top: 0.35rem;
}

.memo-scene-grade-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.memo-scene-grade-title {
  margin: 0 0 0.55rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.memo-scene-grade-lead {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

.memo-grade-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  gap: 0.45rem;
  margin-bottom: 0;
}

.memo-grade {
  box-sizing: border-box;
  flex: 1 1 calc(33% - 0.45rem);
  min-width: 5.5rem;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  padding: 0.65rem 0.4rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}

.memo-grade-num {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.memo-grade-label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  opacity: 0.9;
}

.memo-grade[data-q="5"] { background: color-mix(in srgb, var(--ok) 22%, #fff); }
.memo-grade[data-q="4"] { background: color-mix(in srgb, var(--ok) 12%, #fff); }
.memo-grade[data-q="3"] { background: color-mix(in srgb, var(--warn) 18%, #fff); }
.memo-grade[data-q="2"] { background: color-mix(in srgb, var(--err) 12%, #fff); }
.memo-grade[data-q="1"] { background: color-mix(in srgb, var(--err) 22%, #fff); }

.memo-grade:hover { border-color: var(--accent); }

.memo-session-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0.45rem 0 0.65rem;
}

/* Écran : actions dans le dock sticky (voir .memo-session-dock) */
.memo-session-screen .memo-session-tools {
  position: static;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Une seule ligne (phrases ou réplique) : aide + avancer */
.memo-session-tools-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  min-width: 0;
}

.memo-session-advance {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-left: auto;
  min-width: 0;
}

.memo-session-tools .memo-btn-suite,
.memo-session-tools .memo-btn-suite-correct {
  font-weight: 700;
  margin-left: 0;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.memo-session-tools .memo-btn-suite {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.memo-session-tools .memo-btn-suite-correct {
  background: color-mix(in srgb, var(--ok) 14%, #fff);
  border-color: var(--ok);
  color: color-mix(in srgb, var(--ok) 75%, #1a1a1a);
}

.memo-session-tools .memo-btn-suite:hover,
.memo-session-tools .memo-btn-suite-correct:hover {
  filter: brightness(0.97);
}

.memo-session-tools .memo-btn-suite[hidden],
.memo-session-tools .memo-btn-suite-correct[hidden],
.memo-session-tools .memo-btn-validate[hidden],
.memo-session-advance [hidden] {
  display: none !important;
}

/* Validation réponse écrite : compact, à gauche de Juste */
.memo-session-tools .memo-btn-validate,
body.theme-memo .memo-session-tools .memo-btn-validate {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.memo-session-tools-sec {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.memo-session-tools-sec .btn {
  flex: 0 0 auto;
  margin-left: 0;
  padding: 0.5rem 0.55rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.memo-session-tools-sec .btn[hidden] {
  display: none !important;
}

@media (max-width: 420px) {
  .memo-session-tools-row {
    gap: 0.25rem;
  }

  .memo-session-tools-sec .btn {
    padding: 0.48rem 0.45rem;
    font-size: 0.78rem;
  }

  .memo-session-tools .memo-btn-suite,
  .memo-session-tools .memo-btn-suite-correct,
  .memo-session-tools .memo-btn-validate {
    padding: 0.48rem 0.55rem;
    font-size: 0.82rem;
  }
}

/* Dicter : ligne pleine largeur sous les actions */
.memo-session-tools-dict {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.45rem;
  width: 100%;
}

.memo-session-tools-dict:has(#btn-mic[hidden]) {
  display: none;
}

.memo-session-tools-dict .memo-btn-dict,
body.theme-memo .memo-session-tools-dict .memo-btn-dict {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.7rem 0.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--memo-spot, var(--accent));
  border-color: var(--memo-spot, var(--accent));
  color: #fff;
  box-shadow: none;
}

.memo-session-tools-dict .memo-btn-dict[hidden] {
  display: none !important;
}

.memo-session-tools-dict .memo-btn-dict-text {
  line-height: 1.2;
}

.memo-session-tools-dict .memo-btn-dict:hover,
body.theme-memo .memo-session-tools-dict .memo-btn-dict:hover {
  background: color-mix(in srgb, var(--memo-spot, var(--accent)) 88%, #fff);
  border-color: var(--memo-spot, var(--accent));
  color: #fff;
  filter: none;
  transform: none;
  box-shadow: none;
}

#btn-mic.is-listening,
body.theme-memo #btn-mic.is-listening,
body.theme-memo #btn-mic.btn-ghost.is-listening,
body.theme-memo #btn-mic.memo-btn-dict.is-listening {
  background: var(--ok) !important;
  color: #fff !important;
  border-color: var(--ok) !important;
}

/* Micro à l’écoute + texte ASR reçu : teal distinct du vert « en attente » */
#btn-mic.is-listening.is-hearing,
body.theme-memo #btn-mic.is-listening.is-hearing,
body.theme-memo #btn-mic.btn-ghost.is-listening.is-hearing,
body.theme-memo #btn-mic.memo-btn-dict.is-listening.is-hearing {
  background: #0f766e !important;
  color: #fff !important;
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #0f766e 35%, transparent);
}

.memo-feedback {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  margin: 0.75rem 0;
  border: 1px solid var(--line);
  background: var(--card);
}

.memo-feedback--ok {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, #fff);
}

.memo-feedback--info {
  border-color: color-mix(in srgb, var(--accent, #0d7377) 55%, var(--line));
  background: color-mix(in srgb, var(--accent, #0d7377) 8%, #fff);
}

.memo-feedback--warn {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, #fff);
}

.memo-feedback--err {
  border-color: var(--err);
  background: color-mix(in srgb, var(--err) 10%, #fff);
}

/* Session écran : pied de page masqué dès l’ouverture — Dicter = bas de vue */
body.memo-screen-focus .memo-footer { display: none; }
body.memo-screen-focus main {
  padding-bottom: 0.5rem;
}
body.memo-screen-focus .memo-stage {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 7.25rem);
}
body.memo-screen-focus .memo-session-screen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body.memo-screen-focus .memo-session-screen .memo-play:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body.memo-screen-focus .memo-session-screen .memo-play:not([hidden]) #memo-line-flow {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body.memo-screen-focus .memo-session-screen .memo-session-dock {
  margin-top: auto;
}

/* Mode audio plein écran : chrome minimal, contrôles toujours visibles */
body.memo-audio-focus .memo-nav { display: none; }
body.memo-audio-focus .memo-nav-wrap {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
body.memo-audio-focus .memo-footer { display: none; }
body.memo-audio-focus .top {
  padding: 0.45rem 0.75rem;
}
body.memo-audio-focus .top .top-desktop,
body.memo-audio-focus .top .top-secondary { display: none; }
body.memo-audio-focus main {
  padding: 0.35rem 0.75rem 0.5rem;
  min-height: 0;
  max-width: none;
}
body.memo-audio-focus .brand {
  font-size: 1.15rem;
}
@media (min-width: 800px) {
  body.memo-audio-focus main {
    padding: 0.75rem 1.5rem 1rem;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  .memo-session-heading--audio .memo-scene-title {
    font-size: 1.35rem;
  }
  .memo-session-heading--audio .memo-phase {
    font-size: 1.05rem;
  }
  .memo-session-count {
    font-size: 1.1rem;
  }
  .memo-sommaire,
  .memo-sommaire--audio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.25rem;
    align-content: start;
  }
  .memo-review-panel,
  .memo-toc-lead,
  .memo-toc-empty {
    grid-column: 1 / -1;
  }
  .memo-toc-lead {
    font-size: 1.1rem;
    margin-bottom: 1.15rem;
  }
  .memo-toc-act {
    margin: 0;
    grid-column: 1 / -1;
  }
  .memo-heard-panel {
    min-height: 5.5rem;
    padding: 1rem 1.15rem;
  }
  .memo-heard-label {
    font-size: 0.82rem;
  }
  .memo-heard-text {
    font-size: 1.35rem;
  }
  .memo-cmds-legend {
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
  }
  .memo-audio-dock {
    gap: 0.5rem;
    padding: 0.35rem 0 0.5rem;
    max-width: 20rem;
  }
  .memo-audio-controls {
    gap: 0.45rem 0.65rem;
  }
  .memo-lvl-row {
    gap: 0.4rem;
  }
  .memo-big-btn {
    width: 3.5rem;
    font-size: 0.88rem;
  }
  .memo-lvl-btn {
    width: 2.65rem !important;
    max-width: 2.65rem !important;
    font-size: 1rem !important;
  }
}

.memo-audio-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.memo-heard-panel {
  flex: 1 1 auto;
  flex-shrink: 1;
  min-height: 4.25rem;
  margin: 0 0 0.4rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid color-mix(in srgb, var(--memo-spot) 55%, var(--line));
  border-radius: 12px;
  background: #fff;
  overflow: auto;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--memo-spot) 18%, transparent);
}

.memo-heard-panel.is-live {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent);
}

.memo-heard-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
  margin-bottom: 0.25rem;
}

.memo-heard-text {
  margin: 0;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 600;
  word-break: break-word;
}

.memo-heard-text.is-interim {
  color: var(--muted);
  font-style: italic;
}

.memo-heard-text.is-empty {
  color: var(--muted);
}

.memo-heard-text.has-baffouille {
  font-weight: 600;
}

s.memo-baffouille,
.memo-recite-rich s.memo-baffouille,
.memo-feedback s.memo-baffouille {
  text-decoration: line-through;
  text-decoration-thickness: 0.12em;
  text-decoration-color: color-mix(in srgb, var(--err, #b33) 70%, var(--ink));
  color: var(--muted);
  font-weight: 500;
}

/* Bilan : mots non dits (Attendu) ou faux (Toi) */
.memo-heard-bad {
  color: var(--err);
  font-weight: 700;
}

/* Erreur habituelle (ASR / manque répété) — bleu, clic = accepter le vrai texte */
.memo-feedback .memo-heard-habit,
.memo-heard-habit {
  color: #2a4f8f !important;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.14em;
  -webkit-tap-highlight-color: transparent;
}
.memo-feedback .memo-heard-habit:hover,
.memo-feedback .memo-heard-habit:focus-visible,
.memo-heard-habit:hover,
.memo-heard-habit:focus-visible {
  color: color-mix(in srgb, #2a4f8f 75%, #000) !important;
  outline: none;
  text-decoration-style: solid;
}

/* Erreur habituelle (même manque répété) — signal danger, clic = correction ciblée */
.memo-habit-alert {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
  margin: 0.55rem 0 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--err, #b33) 55%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--err, #b33) 10%, var(--card, #fff));
  color: var(--err, #b33);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 2.5rem;
  -webkit-tap-highlight-color: transparent;
}
.memo-habit-alert[hidden] {
  display: none !important;
}
.memo-habit-alert:hover,
.memo-habit-alert:focus-visible {
  background: color-mix(in srgb, var(--err, #b33) 16%, var(--card, #fff));
  outline: none;
}
.memo-habit-alert-signal {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.memo-habit-alert-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--err, #b33);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err, #b33) 22%, transparent);
}
.memo-habit-alert-fix {
  margin: 0;
  padding: 0.15rem 0 0.1rem;
  color: var(--ink);
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  font-weight: 650;
  line-height: 1.35;
  word-break: break-word;
}
.memo-habit-alert-fix[hidden] {
  display: none !important;
}
.memo-habit-alert.is-open .memo-habit-alert-fix {
  display: block;
}
.memo-play--audio .memo-habit-alert {
  margin: 0.45rem 0 0.35rem;
  flex-shrink: 0;
}

.memo-recite-rich {
  margin: 0 0 0.5rem;
  padding: 0.65rem 0.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg, #fff) 92%, var(--memo-spot, #c9a227));
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
  cursor: text;
}

.memo-feedback--audio {
  flex-shrink: 0;
  margin: 0 0 0.4rem;
  max-height: 4.5rem;
  overflow: auto;
}

.memo-heard-compare {
  margin-top: 0.35rem;
  font-size: 0.92em;
  line-height: 1.35;
}

.memo-heard-k {
  display: inline-block;
  min-width: 4.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.memo-session-audio {
  display: flex;
  flex-direction: column;
  /* svh = viewport stable (barre URL mobile) — évite boutons qui apparaissent/disparaissent */
  height: calc(100vh - 3.5rem);
  max-height: calc(100vh - 3.5rem);
  height: calc(100svh - 3.5rem);
  max-height: calc(100svh - 3.5rem);
  min-height: 0;
  overflow: hidden;
}

.memo-session-audio .memo-audio-dock {
  flex: 0 0 auto;
  margin-top: auto;
  width: 100%;
}

.memo-session-top--audio {
  margin-bottom: 0.45rem;
  padding-bottom: 0.4rem;
  flex-shrink: 0;
}

.memo-session-top--audio .memo-session-count {
  margin-left: 0;
}

.memo-cmds-legend {
  flex-shrink: 0;
  margin: 0 0 0.3rem;
  padding: 0.2rem 0.35rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink);
  opacity: 0.72;
}

.memo-cmds-legend strong {
  color: var(--ink);
  opacity: 1;
  font-weight: 700;
}

.memo-audio-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 20rem;
  margin: auto auto 0;
  padding: 0.25rem 0 max(0.4rem, env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg, #f6f3ee) 92%, transparent);
  position: relative;
  z-index: 2;
}

.memo-lvl-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.28rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4.5%, var(--card, #fff));
}

.memo-lvl-panel[hidden] {
  display: none !important;
}

.memo-lvl-title {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0.3rem 0.25rem;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

.memo-lvl-title:hover,
.memo-lvl-title:focus-visible {
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
  outline: none;
}

.memo-lvl-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

.memo-lvl-btn {
  color: #fff;
  width: min(12vw, 2.65rem);
  min-width: 2.5rem;
  max-width: 2.65rem;
  font-size: clamp(0.85rem, 2.4vw, 1rem);
}

.memo-lvl-btn--0 { background: #6d7c86; }
.memo-lvl-btn--1 { background: var(--accent); }
.memo-lvl-btn--2 { background: #2f3a6b; }
.memo-lvl-btn--3 { background: var(--err); }

.memo-lvl-btn.is-selected,
.memo-lvl-btn[aria-pressed="true"] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--memo-spot) 50%, transparent);
  filter: brightness(1.06);
}

.memo-cue-short-btn {
  background: color-mix(in srgb, var(--ink) 22%, var(--card, #fff));
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-size: clamp(0.62rem, 2vw, 0.72rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.memo-cue-short-btn.is-selected,
.memo-cue-short-btn[aria-pressed="true"] {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 78%, #000);
  border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--memo-spot) 45%, transparent);
}

.memo-cue-short-btn:hover,
.memo-cue-short-btn:focus-visible {
  filter: brightness(1.04);
  outline: none;
}

.memo-lvl-btn:hover,
.memo-lvl-btn:focus-visible {
  filter: brightness(1.1);
  outline: none;
}

.memo-lvl-dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  max-width: min(22rem, calc(100vw - 2rem));
  width: 100%;
  background: var(--card, #fff);
  color: var(--ink);
  box-shadow: 0 18px 40px color-mix(in srgb, #000 22%, transparent);
}

.memo-lvl-dialog::backdrop {
  background: color-mix(in srgb, #000 42%, transparent);
}

.memo-lvl-dialog-inner {
  padding: 1rem 1.1rem 1.15rem;
}

.memo-lvl-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.memo-lvl-dialog-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.memo-lvl-dialog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.memo-lvl-dialog-list li {
  display: grid;
  grid-template-columns: 2.35rem 1fr;
  gap: 0.7rem;
  align-items: start;
}

.memo-lvl-dialog-list p {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.memo-lvl-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
}

.memo-audio-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem 0.45rem;
  align-items: center;
  justify-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  position: static;
  z-index: auto;
  max-width: none;
}

@media (max-width: 799px) {
  /* Dock toujours visible : hors du flux overflow:hidden */
  .memo-session-audio .memo-audio-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0.3rem 0.75rem max(0.45rem, env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg, #f6f3ee) 96%, #fff);
    box-shadow: 0 -4px 14px color-mix(in srgb, #000 8%, transparent);
    z-index: 40;
  }
  .memo-play--audio:not([hidden]) {
    padding-bottom: 14.5rem;
  }
  .memo-play--audio .memo-cmds-legend {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.memo-big-btn {
  box-sizing: border-box;
  width: min(20vw, 3.5rem);
  min-width: 2.75rem;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  padding: 0.25rem;
  font: inherit;
  font-size: clamp(0.72rem, 2.4vw, 0.88rem);
  font-weight: 700;
  line-height: 1.05;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

.memo-big-btn[hidden] {
  display: none !important;
}

.memo-btn-start { background: var(--accent); }
.memo-btn-stop { background: #5a3d3d; }
.memo-btn-listen { background: color-mix(in srgb, var(--accent) 70%, #000); }
.memo-btn-mic { background: var(--memo-spot); }
.memo-btn-ok { background: var(--ok); }
.memo-btn-ok-correct {
  background: color-mix(in srgb, var(--ok) 72%, #1a3d28);
  font-size: clamp(0.68rem, 2.2vw, 0.8rem);
}
.memo-btn-help { background: var(--accent); }
.memo-btn-rappel { background: color-mix(in srgb, var(--accent) 55%, #1a1a2e); }
.memo-btn-retake { background: color-mix(in srgb, var(--warn, #c9a227) 75%, #3a2a10); }
.memo-btn-fail { background: var(--err); }

.memo-big-btn:active { transform: scale(0.98); }
.memo-big-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.memo-big-btn.is-listening {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 55%, transparent);
}

@media (max-width: 799px) {
  .memo-big-btn {
    width: min(18vw, 3.25rem);
    min-width: 2.75rem;
    font-size: clamp(0.7rem, 2.3vw, 0.82rem);
  }
  .memo-lvl-btn {
    width: min(12vw, 2.5rem) !important;
    max-width: 2.5rem !important;
    min-width: 2.5rem;
    font-size: clamp(0.85rem, 2.6vw, 0.95rem) !important;
  }
}

.memo-hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.memo-empty {
  margin: 1rem 0 0;
  color: var(--muted);
  display: grid;
  gap: 0.85rem;
  max-width: 32rem;
}
.memo-empty > p { margin: 0; }
.memo-empty .memo-actions {
  justify-content: flex-start;
  margin-top: 0;
}
.memo-empty code {
  font-size: 0.9em;
  background: color-mix(in srgb, var(--line) 50%, #fff);
  padding: 0.1rem 0.35rem;
  border-radius: 0.2rem;
}

body.theme-memo .memo-session-audio .memo-cue {
  font-size: 1.15rem;
}

.memo-role-grid {
  display: grid;
  gap: 0.3rem;
  max-width: 40rem;
}
.memo-role-grid > .memo-actions {
  margin-top: 0.65rem;
}
.memo-cast-head {
  display: none;
}
.memo-role-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 0.85);
  cursor: pointer;
  min-height: 2.75rem;
}
.memo-role-main {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.memo-role-option .memo-role-name {
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  font-size: 0.98rem;
  line-height: 1.25;
}
.memo-role-option .memo-role-cast {
  color: color-mix(in srgb, var(--accent) 72%, var(--memo-mist));
  font-size: 0.82rem;
  font-weight: 500;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.memo-role-mine {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
  align-self: center;
  min-height: 2.75rem;
  padding: 0.15rem 0;
}
.memo-role-mine input {
  margin: 0;
  width: 1.15rem;
  height: 1.15rem;
}
.memo-role-mine-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 70%, var(--memo-mist));
  white-space: nowrap;
}
@media (min-width: 560px) {
  .memo-cast-head {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.85fr) minmax(0, 1.5fr) auto;
    gap: 0.45rem 0.85rem;
    padding: 0 0.7rem 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 48%, var(--memo-mist));
  }
  .memo-cast-head span:last-child {
    justify-self: end;
    min-width: 5rem;
    text-align: right;
  }
  .memo-role-option {
    grid-template-columns: minmax(6.5rem, 0.85fr) minmax(0, 1.5fr) auto;
    gap: 0.45rem 0.85rem;
    padding: 0.35rem 0.7rem;
    min-height: 2.5rem;
  }
  .memo-role-main {
    display: contents;
  }
  .memo-role-option .memo-role-cast {
    font-size: 0.9rem;
  }
  .memo-role-mine {
    min-width: 5rem;
    min-height: 2.5rem;
    justify-content: flex-end;
  }
}

.memo-role-row {
  display: grid;
  gap: 0.2rem;
}
.memo-role-costumes {
  margin: 0 0.7rem 0.45rem;
  padding: 0.45rem 0.55rem;
  border-radius: calc(var(--radius) * 0.75);
  background: color-mix(in srgb, var(--memo-mist) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.memo-role-costumes-label {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, var(--memo-mist));
}
.memo-role-costumes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.memo-role-costumes-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.88rem;
  line-height: 1.3;
}
.memo-role-costumes-scope {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--accent) 75%, var(--memo-mist));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.memo-role-costumes-text {
  flex: 1 1 8rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.memo-role-costumes-empty {
  color: color-mix(in srgb, var(--ink) 45%, var(--memo-mist));
  font-size: 0.88rem;
}
.memo-role-costumes-remove {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 55%, var(--memo-mist));
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.memo-role-costumes-remove:hover,
.memo-role-costumes-remove:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.memo-role-costumes-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.memo-role-costumes-input {
  flex: 1 1 10rem;
  min-width: 0;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 0.65);
  background: var(--surface);
}
.memo-role-costumes-scope-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.memo-role-costumes-scope-kind,
.memo-role-costumes-scope-act,
.memo-role-costumes-scope-scene {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 0.65);
  background: var(--surface);
  max-width: 100%;
}
.memo-role-costumes-add-btn {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 0.65);
  background: var(--surface);
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.memo-role-costumes-add-btn:hover,
.memo-role-costumes-add-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.memo-role-costumes-status {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--ink) 60%, var(--memo-mist));
}
.memo-role-costumes-status.is-ok {
  color: var(--accent);
}
.memo-role-costumes-status.is-error {
  color: #b42318;
}

.memo-role-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 0 1.15rem;
}
.memo-role-switch-form {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.memo-role-switch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.memo-role-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 2.75rem;
  cursor: pointer;
  line-height: 1.2;
}
.memo-role-chip.is-active,
button.memo-role-chip.is-active {
  border-color: var(--memo-spot);
  background: color-mix(in srgb, var(--memo-spot) 14%, transparent);
  color: var(--ink);
  cursor: default;
}
.memo-role-switch-single {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.memo-role-switch-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
  flex-shrink: 0;
}
.memo-role-switch-edit {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 80%, var(--memo-mist));
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.15rem;
  cursor: pointer;
  line-height: 1.2;
}
a.memo-role-switch-edit,
button.memo-role-switch-edit {
  color: color-mix(in srgb, var(--accent) 80%, var(--memo-mist));
  font-weight: 600;
}
.memo-role-switch-edit:hover,
.memo-role-switch-edit:focus-visible {
  text-decoration: underline;
}
.memo-role-option.is-selected,
.memo-role-option:has(input:checked) {
  border-color: var(--memo-spot);
  background: color-mix(in srgb, var(--memo-spot) 8%, transparent);
}

.memo-versions {
  display: grid;
  gap: 1.25rem;
  max-width: 48rem;
}
.memo-versions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.memo-version-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.75rem;
}
.memo-version-meta {
  margin: 0;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--ink) 55%, var(--memo-mist));
}
.memo-version-cols {
  display: grid;
  gap: 0.65rem;
}
.memo-version-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.65rem;
  align-items: start;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  cursor: pointer;
  min-height: 2.75rem;
}
.memo-version-choice input {
  margin-top: 0.2rem;
}
.memo-version-choice-head {
  font-weight: 600;
  color: var(--ink);
}
.memo-version-text {
  grid-column: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-weight: 400;
  color: color-mix(in srgb, var(--ink) 88%, var(--memo-mist));
  line-height: 1.45;
}
.memo-version-choice.is-current,
.memo-version-choice:has(input:checked) {
  border-color: var(--memo-spot);
  background: color-mix(in srgb, var(--memo-spot) 8%, transparent);
}
@media (min-width: 720px) {
  .memo-version-cols {
    grid-template-columns: 1fr 1fr;
  }
}

.memo-form {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}
.memo-form label {
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
}
.memo-form input[type="text"],
.memo-form input[type="file"],
.memo-form select,
.memo-form textarea,
.memo-form-row input {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  width: 100%;
}
.memo-md-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.45;
  min-height: 24rem;
}
.memo-form-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 28rem;
  align-items: stretch;
}
.memo-form-row input { flex: 1 1 12rem; min-width: 0; }
.memo-form-row .btn {
  flex: 0 0 auto;
  min-height: 2.75rem;
}
.memo-form .memo-actions {
  flex-direction: column;
  align-items: stretch;
}
.memo-form .memo-actions .btn,
.memo-form .memo-actions .btn-ghost {
  width: 100%;
  text-align: center;
  margin-left: 0;
}
@media (min-width: 480px) {
  .memo-form .memo-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .memo-form .memo-actions .btn,
  .memo-form .memo-actions .btn-ghost {
    width: auto;
  }
}
.memo-proposals {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--memo-spot) 40%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--memo-spot) 6%, transparent);
}
.memo-proposals h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}
.memo-proposals .memo-queue-item {
  margin-top: 0.5rem;
}
.memo-section { margin-top: 1.75rem; }
.memo-section h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }

/* Accueil · autres pièces : rangées compactes (titre + méta / bouton) */
.memo-other-scripts h2 {
  margin-bottom: 0.35rem;
}
.memo-other-scripts .memo-queue-list {
  gap: 0.35rem;
  margin-bottom: 0;
}
.memo-other-scripts .memo-queue-item {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.45rem 0.35rem 0.7rem;
  min-height: 0;
}
.memo-other-scripts .memo-queue-main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.05rem;
  flex: 1 1 auto;
  min-width: 0;
}
.memo-other-scripts .memo-queue-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 0.95rem;
  line-height: 1.2;
}
.memo-other-scripts .memo-queue-reason {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
}
.memo-other-scripts .memo-queue-actions {
  margin-left: 0;
  width: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.memo-other-scripts .memo-queue-actions .btn,
.memo-other-scripts .memo-queue-actions .btn-ghost,
.memo-other-scripts .memo-queue-actions .memo-inline-form {
  flex: 0 0 auto;
  width: auto;
}
.memo-other-scripts .memo-inline-form {
  display: inline;
}
.memo-other-scripts .memo-queue-actions .btn,
.memo-other-scripts .memo-queue-actions .btn-ghost,
.memo-other-scripts .memo-inline-form .btn,
.memo-other-scripts .memo-inline-form .btn-ghost {
  width: auto;
  min-height: 2.5rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .memo-other-scripts .memo-queue-item {
    flex-direction: row;
    align-items: center;
  }
  .memo-other-scripts .memo-queue-actions {
    width: auto;
    margin-left: 0;
  }
  .memo-other-scripts .memo-queue-actions .btn,
  .memo-other-scripts .memo-queue-actions .btn-ghost,
  .memo-other-scripts .memo-inline-form .btn,
  .memo-other-scripts .memo-inline-form .btn-ghost {
    width: auto;
  }
}

/* —— Mémo · texte d’origine (contexte de scène) —— */
.memo-script-ctx {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: min(36rem, calc(100vw - 1.25rem));
  width: 100%;
  max-height: min(88dvh, 40rem);
  background: transparent;
  color: inherit;
}
.memo-script-ctx::backdrop {
  background: color-mix(in srgb, #0a1628 55%, transparent);
}
.memo-script-ctx.is-open {
  display: block;
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 220;
}
.memo-script-ctx-panel {
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, 40rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px color-mix(in srgb, #000 28%, transparent);
  overflow: hidden;
}
.memo-script-ctx-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  padding: 0.85rem 0.85rem 0.65rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  min-width: 0;
}
.memo-script-ctx-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 0;
}
.memo-script-ctx-titles {
  min-width: 0;
  flex: 1 1 auto;
}
.memo-script-ctx-titles .eyebrow {
  margin: 0 0 0.15rem;
}
.memo-script-ctx-close {
  flex-shrink: 0;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding-inline: 0.85rem;
}
.memo-script-ctx-iconbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}
.memo-script-ctx-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.memo-script-ctx-iconbtn:hover,
.memo-script-ctx-iconbtn:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.memo-script-ctx-iconbtn[aria-pressed="true"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.memo-script-ctx-iconbtn svg {
  display: block;
  flex-shrink: 0;
}
.memo-script-ctx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}
.memo-script-ctx-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.75rem;
  padding-inline: 0.45rem;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memo-script-ctx-act-short {
  display: none;
}
.memo-script-ctx-actions .btn[aria-pressed="true"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.memo-script-ctx-head h2 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (max-width: 22.5rem) {
  .memo-script-ctx-act-long {
    display: none;
  }
  .memo-script-ctx-act-short {
    display: inline;
  }
}
@media (min-width: 28rem) {
  .memo-script-ctx-head {
    padding: 1rem 1.1rem 0.75rem;
  }
  .memo-script-ctx-actions .btn {
    flex: 0 1 auto;
    padding-inline: 0.85rem;
    font-size: inherit;
  }
}
.memo-script-ctx-line.is-masked {
  cursor: pointer;
  color: var(--muted);
  letter-spacing: 0.02em;
  border-radius: 0.35rem;
  outline: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  outline-offset: 2px;
}
.memo-script-ctx-line.is-masked:hover,
.memo-script-ctx-line.is-masked:focus-visible {
  color: var(--ink);
  outline-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.memo-script-ctx-turn.is-role.is-hide-practice .memo-script-ctx-line.is-masked {
  user-select: none;
}

.memo-script-hide-intro {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  max-width: min(22rem, calc(100vw - 2rem));
  width: 100%;
  background: var(--card, #fff);
  color: var(--ink);
  box-shadow: 0 18px 40px color-mix(in srgb, #000 22%, transparent);
  z-index: 240;
}
.memo-script-hide-intro::backdrop {
  background: color-mix(in srgb, #0a1628 55%, transparent);
}
.memo-script-hide-intro.is-open {
  display: block;
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}
.memo-script-hide-intro-inner {
  padding: 1.1rem 1.15rem 1.2rem;
}
.memo-script-hide-intro-head {
  margin: 0 0 0.75rem;
}
.memo-script-hide-intro-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.memo-script-hide-intro-steps {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.memo-script-hide-intro-steps ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.memo-script-hide-intro-actions {
  display: flex;
  justify-content: flex-end;
}
.memo-script-hide-intro-actions .btn {
  min-height: 2.75rem;
  padding-inline: 1.1rem;
}
.memo-script-ctx-lead {
  margin: 0;
  padding: 0.55rem 1.1rem 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
  flex-shrink: 0;
}
.memo-script-ctx-lead.is-jump {
  cursor: pointer;
  border-radius: 8px;
  outline: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.memo-script-ctx-lead.is-jump:hover,
.memo-script-ctx-lead.is-jump:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--memo-spot, #c45c26) 10%, transparent);
}
.memo-script-ctx-lead.is-jump:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--memo-spot, #c45c26) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .memo-script-ctx-lead.is-jump {
    transition: none;
  }
}
.memo-script-ctx--jump .memo-script-ctx-turn:not(.is-didascalie) {
  cursor: pointer;
}
.memo-script-ctx-body {
  overflow: auto;
  padding: 0 0.65rem 1rem;
  -webkit-overflow-scrolling: touch;
}
.memo-script-ctx--full {
  max-width: min(42rem, calc(100vw - 1.25rem));
  max-height: min(92dvh, 48rem);
}
.memo-script-ctx--full .memo-script-ctx-panel {
  max-height: min(92dvh, 48rem);
}
.memo-script-ctx-empty {
  margin: 0.75rem 0.45rem;
  color: var(--muted);
}
.memo-script-ctx-scene {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0.85rem 0 0.45rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: color-mix(in srgb, var(--card, #fff) 92%, var(--memo-mist, #e8f0ef));
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.memo-script-ctx-scene:first-child {
  margin-top: 0.25rem;
}
.memo-script-ctx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.memo-script-ctx-turn {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid transparent;
  line-height: 1.4;
}
/* Autres rôles en retrait — le tien doit sauter aux yeux */
.memo-script-ctx-turn:not(.is-role) {
  opacity: 0.78;
}
.memo-script-ctx-turn:not(.is-role) .memo-script-ctx-line {
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.memo-script-ctx-turn.is-role {
  border-color: color-mix(in srgb, var(--memo-char-self) 42%, var(--line));
  background: color-mix(in srgb, var(--memo-char-self) 16%, var(--card));
  box-shadow: inset 4px 0 0 var(--memo-char-self);
}
.memo-script-ctx-turn.is-role .memo-script-ctx-line {
  font-weight: 600;
  color: var(--ink);
}
.memo-script-ctx-turn.is-current {
  opacity: 1;
  border-color: var(--memo-spot);
  background: color-mix(in srgb, var(--memo-spot) 12%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--memo-spot) 18%, transparent);
}
.memo-script-ctx-turn.is-role.is-current {
  border-color: var(--memo-spot);
  background: color-mix(in srgb, var(--memo-spot) 14%, color-mix(in srgb, var(--memo-char-self) 10%, var(--card)));
  box-shadow:
    inset 4px 0 0 var(--memo-char-self),
    0 0 0 3px color-mix(in srgb, var(--memo-spot) 18%, transparent);
}
/* Réplique rajoutée après effacement — petit trait rouge à droite */
.memo-script-ctx-turn.is-readded {
  box-shadow: inset -3px 0 0 var(--err, #8b2e2e);
}
.memo-script-ctx-turn.is-role.is-readded {
  box-shadow:
    inset 4px 0 0 var(--memo-char-self),
    inset -3px 0 0 var(--err, #8b2e2e);
}
.memo-script-ctx-turn.is-current.is-readded {
  box-shadow:
    inset -3px 0 0 var(--err, #8b2e2e),
    0 0 0 3px color-mix(in srgb, var(--memo-spot) 18%, transparent);
}
.memo-script-ctx-turn.is-role.is-current.is-readded {
  box-shadow:
    inset 4px 0 0 var(--memo-char-self),
    inset -3px 0 0 var(--err, #8b2e2e),
    0 0 0 3px color-mix(in srgb, var(--memo-spot) 18%, transparent);
}
.memo-script-ctx-who {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.1rem;
}
.memo-script-ctx-turn.is-role .memo-script-ctx-who {
  font-size: 0.84rem;
}
.memo-role-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem;
  max-width: 100%;
  outline: none;
}
.memo-role-tip-who {
  cursor: help;
  outline: none;
}
.memo-role-tip-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  flex: 0 0 auto;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0.2rem 0.48rem;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, var(--accent, #0f5c4c));
  color: color-mix(in srgb, var(--accent, #0f5c4c) 78%, var(--ink));
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.memo-role-tip-toggle-icon {
  display: block;
  flex: 0 0 auto;
}
.memo-role-tip-toggle-text {
  display: block;
  line-height: 1;
}
.memo-role-tip-toggle:hover,
.memo-role-tip-toggle:focus-visible,
.memo-role-tip.is-open > .memo-role-tip-toggle {
  border-color: color-mix(in srgb, var(--accent, #0f5c4c) 45%, var(--line));
  background: color-mix(in srgb, var(--accent, #0f5c4c) 14%, var(--card));
  color: var(--accent, #0f5c4c);
  outline: none;
}
.memo-role-tip-bubble {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 40;
  min-width: 11rem;
  max-width: min(18rem, 78vw);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  display: grid;
  gap: 0.45rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.2rem);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.memo-role-tip:hover .memo-role-tip-bubble,
.memo-role-tip-who:focus-visible ~ .memo-role-tip-bubble,
.memo-role-tip.is-open > .memo-role-tip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.memo-role-tip-block {
  display: grid;
  gap: 0.15rem;
}
.memo-role-tip-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.memo-role-tip-text {
  white-space: pre-wrap;
  color: var(--ink);
}
/* Tactile / pas de survol : bouton Jeu explicite ; tip via .is-open */
@media (hover: none), (pointer: coarse) {
  .memo-role-tip-toggle {
    display: inline-flex;
  }
  .memo-role-tip:hover .memo-role-tip-bubble {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.2rem);
  }
  .memo-role-tip.is-open > .memo-role-tip-bubble,
  .memo-role-tip-who:focus-visible ~ .memo-role-tip-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .memo-role-tip-bubble {
    transition: none;
  }
}
.memo-script-ctx-who.memo-char-self,
.memo-cue-name.memo-char-self,
.memo-said-phrases-name.memo-char-self {
  color: var(--memo-char-self);
}
.memo-script-ctx-who.memo-char-1,
.memo-cue-name.memo-char-1 { color: var(--memo-char-1); }
.memo-script-ctx-who.memo-char-2,
.memo-cue-name.memo-char-2 { color: var(--memo-char-2); }
.memo-script-ctx-who.memo-char-3,
.memo-cue-name.memo-char-3 { color: var(--memo-char-3); }
.memo-script-ctx-who.memo-char-4,
.memo-cue-name.memo-char-4 { color: var(--memo-char-4); }
.memo-script-ctx-who.memo-char-5,
.memo-cue-name.memo-char-5 { color: var(--memo-char-5); }
.memo-script-ctx-who.memo-char-6,
.memo-cue-name.memo-char-6 { color: var(--memo-char-6); }
.memo-script-ctx-who.memo-char-7,
.memo-cue-name.memo-char-7 { color: var(--memo-char-7); }
.memo-script-ctx-who.memo-char-8,
.memo-cue-name.memo-char-8 { color: var(--memo-char-8); }
.memo-script-ctx-line {
  font-size: 1.02rem;
  white-space: pre-wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.memo-script-ctx-turn-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.memo-script-ctx-line-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}
.memo-script-ctx-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  /* Slightly smaller than .memo-script-ctx-line (1.02rem); stay mobile-readable. */
  font-size: 0.88rem;
  line-height: 1.4;
  background: color-mix(in srgb, var(--accent, #0f5c4c) 7%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, var(--accent, #0f5c4c) 16%, var(--line));
}
.memo-script-ctx-note.is-movement {
  background: color-mix(in srgb, var(--ink) 4%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--ink) 12%, var(--line));
}
.memo-script-ctx-note-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}
.memo-script-ctx-note-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.memo-script-ctx-note-text {
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  color: var(--ink);
}
.memo-script-ctx-note-text.is-empty {
  color: var(--muted);
}
.memo-script-ctx-note-edit {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #0f5c4c) 7%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, var(--accent, #0f5c4c) 16%, var(--line));
}
.memo-script-ctx-note-edit .memo-script-ctx-edit-text {
  min-height: 4.25rem;
}
.memo-script-ctx-edit {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.15rem;
}
.memo-script-ctx-edit-text {
  width: 100%;
  min-height: 5.5rem;
  resize: vertical;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #fff);
  color: inherit;
}
.memo-script-ctx-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.memo-script-ctx-edit-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.memo-script-ctx-edit-status.is-error {
  color: #a33;
}
.memo-script-ctx-edit-status.is-ok {
  color: var(--accent, #0f5c4c);
}
.memo-script-ctx-phrase {
  opacity: 0.55;
}
.memo-script-ctx-phrase.is-current-phrase {
  opacity: 1;
  background: color-mix(in srgb, var(--memo-sun) 35%, transparent);
  border-radius: 0.25rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.05rem 0.15rem;
}

@media (max-width: 520px) {
  .memo-script-ctx-turn {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

.memo-script-ctx-accessories {
  margin: 0.15rem 0 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.memo-script-ctx-accessories-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink, #1a1a1a));
  margin-bottom: 0.35rem;
}
.memo-script-ctx-accessories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.memo-script-ctx-accessories-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.88rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
}
.memo-script-ctx-accessories-chip-label {
  line-height: 1.2;
}
.memo-script-ctx-accessories-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 55%, transparent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.memo-script-ctx-accessories-remove:hover,
.memo-script-ctx-accessories-remove:focus-visible {
  color: var(--danger, #b42318);
  background: color-mix(in srgb, var(--danger, #b42318) 10%, transparent);
}
.memo-script-ctx-accessories-empty {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 55%, transparent);
}
.memo-script-ctx-accessories-empty[hidden] {
  display: none;
}
.memo-script-ctx-accessories-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.45rem;
}
.memo-script-ctx-accessories-input {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  font: inherit;
}
.memo-script-ctx-accessories-status {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 65%, transparent);
}
.memo-script-ctx-accessories-status.is-ok {
  color: var(--accent);
}
.memo-script-ctx-accessories-status.is-error {
  color: var(--danger, #b42318);
}
.memo-script-ctx-accessories-edit {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
}
.memo-script-ctx-accessories-edit:hover,
.memo-script-ctx-accessories-edit:focus-visible {
  text-decoration: underline;
}

/* —— Mémo · accessoires (page pièce) —— */
.memo-accessories-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.memo-accessories-block h2,
.memo-accessories-scenes h2 {
  margin-bottom: 0.35rem;
}
.memo-accessories-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.75rem 0;
}
.memo-accessories-table {
  width: 100%;
  min-width: 20rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.memo-accessories-table th,
.memo-accessories-table td {
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
}
.memo-accessories-table th {
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 65%, transparent);
  white-space: nowrap;
}
.memo-accessories-table th:nth-child(2),
.memo-accessories-table th:nth-child(4),
.memo-accessories-table td.memo-accessories-cell-found,
.memo-accessories-table td.memo-accessories-cell-returned {
  text-align: center;
  width: 4.5rem;
}
.memo-accessories-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.memo-accessories-row {
  background: var(--card);
}
.memo-accessories-cell-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 7rem;
}
.memo-accessories-label {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.memo-accessories-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.memo-accessories-check input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  cursor: pointer;
}
.memo-accessories-assigned {
  width: 100%;
  min-width: 5rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: inherit;
}
.memo-accessories-cell-returned {
  white-space: nowrap;
}
.memo-accessories-returned-date {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 60%, transparent);
}
.memo-accessories-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.65;
}
.memo-accessories-remove:hover,
.memo-accessories-remove:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--danger, #b91c1c) 12%, transparent);
}
.memo-accessories-empty {
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 55%, transparent);
  text-align: center;
  padding: 0.75rem 0.5rem;
}
.memo-accessories-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.memo-accessories-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--accent, inherit);
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}
.memo-accessories-add-btn:hover,
.memo-accessories-add-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.memo-accessories-input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
}
.memo-accessories-scenes {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.memo-accessories-scenes-nested {
  margin-top: 0.35rem;
}
.memo-accessories-section > .memo-accessories-scene-body > .hint {
  margin-top: 0.65rem;
}
.memo-accessories-scene {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.memo-accessories-scene-title {
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.memo-accessories-scene-title::-webkit-details-marker {
  display: none;
}
.memo-accessories-scene-body {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid var(--line);
}
.memo-accessories-status {
  font-size: 0.92rem;
  margin: 0;
}
.memo-accessories-status.is-ok {
  color: var(--accent);
}
.memo-accessories-status.is-error {
  color: var(--danger, #b91c1c);
}

.memo-plateau-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin: 0 0 1.25rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.memo-plateau-nav a {
  font-size: 0.92rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.memo-plateau-nav a.is-active {
  color: var(--ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.memo-plateau-nav-secondary {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.memo-plateau-hub {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .memo-plateau-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.memo-costumes-meta {
  display: block;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: 0.15rem;
}
.memo-costumes-status,
.memo-rehearsals-status {
  font-size: 0.92rem;
  margin: 0.75rem 0 0;
}
.memo-costumes-status.is-ok,
.memo-rehearsals-status.is-ok {
  color: var(--accent);
}
.memo-costumes-status.is-error,
.memo-rehearsals-status.is-error {
  color: var(--danger, #b91c1c);
}
.memo-rehearsals-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.memo-rehearsal-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  background: var(--card);
}
.memo-rehearsal-card--cancelled {
  opacity: 0.75;
  background: color-mix(in srgb, var(--danger, #b91c1c) 6%, var(--card));
}
.memo-rehearsal-card--performance {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.memo-rehearsal-card--general {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}
.memo-rehearsal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.memo-rehearsal-head time {
  font-weight: 600;
}
.memo-rehearsal-programme {
  margin: 0.25rem 0;
  font-size: 0.95rem;
}
.memo-rehearsal-absences-label {
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
  color: color-mix(in srgb, var(--danger, #b91c1c) 55%, var(--ink));
}
.memo-rehearsal-absence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.memo-rehearsal-absence-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.88rem;
  min-height: 2.75rem;
  padding: 0.25rem 0;
}
.memo-rehearsals-scene-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.memo-rehearsals-scene-list li {
  font-size: 0.92rem;
}
.memo-rehearsals-add {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.memo-rehearsals-add-title {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}

/* Planning calendar */
.memo-cal-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .memo-cal-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.memo-cal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.memo-cal-nav-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}
.memo-cal-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  min-width: 8rem;
}
.memo-cal-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4%, var(--card));
}
.memo-cal-view-btn {
  min-height: 2.75rem;
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 0.88rem;
  cursor: pointer;
}
.memo-cal-view-btn.is-active {
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
.memo-cal-body {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow-x: auto;
}
.memo-cal-measure {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  width: max-content;
}
.memo-cal-month {
  display: grid;
}
@media (min-width: 640px) {
  .memo-cal-month {
    width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .memo-cal-month .memo-cal-event-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 639px) {
  .memo-cal-month {
    justify-content: start;
    width: max-content;
    max-width: 100%;
  }
  .memo-cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    min-height: 1.65rem;
    line-height: 1;
  }
}
.memo-cal-weekday {
  padding: 0.45rem 0.25rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  border-bottom: 1px solid var(--line);
}
.memo-cal-day {
  min-height: 5.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.memo-cal-day:nth-child(7n) {
  border-right: none;
}
.memo-cal-day--muted {
  opacity: 0.45;
}
.memo-cal-day--today {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.memo-cal-day-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 2rem;
}
.memo-cal-absence-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
.memo-cal-absence-dot {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--cast-color, var(--danger, #dc2626));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--card) 70%, transparent);
}
.memo-cal-day-num {
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 999px;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
}
.memo-cal-day--today .memo-cal-day-num {
  background: var(--accent);
  color: var(--card);
}
.memo-cal-day-events {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}
.memo-cal-month .memo-cal-day-events {
  overflow: hidden;
}
.memo-cal-month .memo-cal-event {
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.memo-cal-month .memo-cal-event-label {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

.memo-cal-event {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 6px;
  padding: 0.15rem 0.35rem;
  font-size: 0.68rem;
  line-height: 1.25;
  cursor: pointer;
}
.memo-cal-event-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memo-cal-event--has-absences .memo-cal-absence-dots {
  margin-left: auto;
}
.memo-cal-event--scene {
  background: color-mix(in srgb, #3b82f6 18%, var(--card));
  color: color-mix(in srgb, #1d4ed8 80%, var(--ink));
}
.memo-cal-event--work {
  background: color-mix(in srgb, var(--accent) 15%, var(--card));
}
.memo-cal-event--performance {
  background: color-mix(in srgb, var(--accent) 28%, var(--card));
  font-weight: 600;
}
.memo-cal-event--general {
  background: color-mix(in srgb, #a855f7 18%, var(--card));
}
.memo-cal-event--cancelled {
  background: color-mix(in srgb, var(--danger, #b91c1c) 12%, var(--card));
}
.memo-cal-year {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.75rem;
}
@media (min-width: 640px) {
  .memo-cal-year {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .memo-cal-year {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.memo-cal-year-month {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  text-align: left;
}
.memo-cal-year-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.memo-cal-year-month-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.memo-cal-year-count {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.memo-cal-year-mini {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}
.memo-cal-year-mini-day {
  position: relative;
  min-width: 0;
  min-height: 1.35rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.1rem;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
}
.memo-cal-year-mini-day--muted {
  opacity: 0.35;
  cursor: default;
}
.memo-cal-year-mini-day--has-events {
  font-weight: 700;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.memo-cal-year-mini-day--today {
  background: var(--accent);
  color: var(--card);
  font-weight: 700;
}
.memo-cal-year-mini-day--today.memo-cal-year-mini-day--has-events {
  background: var(--accent);
  color: var(--card);
}
.memo-cal-year-mini-day--has-absences {
  position: relative;
}
.memo-cal-year-mini-day .memo-cal-absence-dots {
  position: absolute;
  top: 1px;
  right: 1px;
  gap: 1px;
  pointer-events: none;
}
.memo-cal-year-mini-day .memo-cal-absence-dot {
  width: 0.32rem;
  height: 0.32rem;
  box-shadow: 0 0 0 1px var(--card);
}
.memo-cal-year-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.memo-cal-year-event {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  width: 100%;
  border: none;
  border-radius: 6px;
  padding: 0.2rem 0.35rem;
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.memo-cal-year-event-day {
  flex-shrink: 0;
  min-width: 1.1rem;
  font-weight: 700;
  font-size: 0.68rem;
}
.memo-cal-year-event-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memo-cal-year-event--has-absences .memo-cal-absence-dots {
  margin-left: auto;
}
.memo-cal-year-event.memo-cal-event--scene {
  background: color-mix(in srgb, #3b82f6 14%, var(--card));
  color: color-mix(in srgb, #1d4ed8 80%, var(--ink));
}
.memo-cal-year-event.memo-cal-event--work {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}
.memo-cal-year-event.memo-cal-event--performance {
  background: color-mix(in srgb, var(--accent) 22%, var(--card));
  font-weight: 600;
}
.memo-cal-year-event.memo-cal-event--general {
  background: color-mix(in srgb, #a855f7 14%, var(--card));
}
.memo-cal-year-event.memo-cal-event--cancelled {
  background: color-mix(in srgb, var(--danger, #b91c1c) 10%, var(--card));
}
.memo-cal-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.memo-rehearsal-dialog {
  border: none;
  padding: 0;
  max-width: min(24rem, calc(100vw - 2rem));
  width: 100%;
  background: transparent;
  color: inherit;
}
.memo-rehearsal-dialog::backdrop {
  background: color-mix(in srgb, var(--accent) 45%, #000 25%);
  backdrop-filter: blur(2px);
}
.memo-rehearsal-dialog-panel {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 22%, transparent);
}
.memo-rehearsal-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.memo-rehearsal-dialog-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.memo-rehearsal-dialog-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.memo-rehearsal-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.memo-rehearsal-dialog-body input,
.memo-rehearsal-dialog-body select {
  width: 100%;
  min-height: 2.75rem;
  margin-bottom: 0.35rem;
}
.memo-rehearsal-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.memo-rehearsal-absences-compact {
  margin-top: 0.5rem;
}
.memo-rehearsal-absence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.memo-rehearsal-absence-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 2px solid var(--cast-color, var(--line));
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 2.75rem;
  --cast-color: var(--line);
}
.memo-rehearsal-absence-chip:disabled {
  opacity: 0.72;
  cursor: default;
}
@media (prefers-reduced-motion: no-preference) {
  .memo-rehearsal-absence-chip:not(:disabled):active {
    transform: scale(0.98);
  }
}
.memo-rehearsal-absence-chip.is-absent {
  background: color-mix(in srgb, var(--ink) 9%, var(--line));
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}
.memo-costumes-by-role {
  margin-top: 0.5rem;
}

.memo-bilan-plateau-link {
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}
.memo-date-display--perf-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.memo-tutorial {
  border: none;
  padding: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  width: 100%;
  background: transparent;
  color: inherit;
}
.memo-tutorial::backdrop {
  background: color-mix(in srgb, var(--accent) 55%, #000 20%);
  backdrop-filter: blur(2px);
}
.memo-tutorial-panel {
  margin: 0;
  padding: 1.35rem 1.4rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 28%, transparent);
}
.memo-tutorial-panel > .eyebrow { margin-bottom: 0.2rem; }
.memo-tutorial-panel > h2 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  line-height: 1.25;
}
.memo-tutorial-steps { min-height: 11.5rem; }
.memo-tutorial-step h3 {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  color: var(--memo-spot);
}
.memo-tutorial-step p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}
.memo-tutorial-list,
.memo-tutorial-levels {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.55rem;
  line-height: 1.4;
}
.memo-tutorial-note {
  margin-top: 0.75rem !important;
  color: var(--muted) !important;
  font-size: 0.92rem;
}
.memo-tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 1.1rem 0 0.9rem;
}
.memo-tutorial-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.memo-tutorial-dot.is-active {
  background: var(--memo-spot);
  transform: scale(1.15);
}
.memo-tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
.memo-tutorial-actions .btn { min-width: 6.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .memo-tutorial-step.is-active {
    animation: memo-tutorial-in 0.28s ease-out;
  }
  @keyframes memo-tutorial-in {
    from { opacity: 0; transform: translateY(0.35rem); }
    to { opacity: 1; transform: none; }
  }
  .memo-tutorial::backdrop {
    animation: memo-tutorial-fade 0.2s ease-out;
  }
  @keyframes memo-tutorial-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes memo-blob-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-6%, 8%, 0) scale(1.08); }
  }
  @keyframes memo-blob-b {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(8%, -6%, 0) scale(1.1); }
  }
  @keyframes memo-rise {
    from { opacity: 0; transform: translateY(0.7rem); }
    to { opacity: 1; transform: none; }
  }
  @keyframes memo-bar-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @keyframes memo-bar-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  @keyframes memo-pop {
    0% { transform: scale(0.92); opacity: 0; }
    70% { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
  }

  .memo-stage > * {
    animation: memo-rise 0.5s var(--memo-ease) both;
  }
  .memo-stage > *:nth-child(1) { animation-delay: 0.02s; }
  .memo-stage > *:nth-child(2) { animation-delay: 0.08s; }
  .memo-stage > *:nth-child(3) { animation-delay: 0.14s; }
  .memo-stage > *:nth-child(4) { animation-delay: 0.2s; }
  .memo-stage > *:nth-child(5) { animation-delay: 0.26s; }
  .memo-stage > *:nth-child(6) { animation-delay: 0.32s; }

  .memo-stats .memo-stat {
    animation: memo-pop 0.45s var(--memo-ease) both;
  }
  .memo-stats .memo-stat:nth-child(1) { animation-delay: 0.12s; }
  .memo-stats .memo-stat:nth-child(2) { animation-delay: 0.18s; }
  .memo-stats .memo-stat:nth-child(3) { animation-delay: 0.24s; }
  .memo-stats .memo-stat:nth-child(4) { animation-delay: 0.3s; }

  .memo-mode-card {
    animation: memo-rise 0.45s var(--memo-ease) both;
  }
  .memo-mode-grid .memo-mode-card:nth-child(1) { animation-delay: 0.1s; }
  .memo-mode-grid .memo-mode-card:nth-child(2) { animation-delay: 0.18s; }

  .memo-nav a.is-active {
    animation: memo-pop 0.35s var(--memo-ease) both;
  }

  .memo-queue-item:not(.memo-queue-item--start),
  .memo-queue-preview li {
    transition: transform 0.2s var(--memo-ease), border-color 0.2s ease;
  }
  .memo-queue-item:not(.memo-queue-item--start):hover,
  .memo-queue-preview li:hover {
    transform: translateX(0.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-memo::before,
  body.theme-memo::after {
    animation: none;
  }
  .memo-scene-bar > span {
    animation: none;
  }
}

/* —— Mémo · retours / propositions —— */
.memo-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: .75rem 1rem 1.25rem;
}
.fb-root { display: inline-flex; align-items: center; }
.fb-footer-link {
  appearance: none;
  display: inline-block;
  margin: 0;
  padding: .2rem .45rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  border-radius: .3rem;
}
.fb-footer-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.fb-footer-link.is-active {
  color: var(--accent);
  font-weight: 600;
}
.fb-page-form {
  display: grid;
  gap: 1rem;
  max-width: 36rem;
}
.fb-form-actions {
  display: flex;
  gap: .5rem;
  padding-top: .25rem;
}
.fb-form-actions .btn {
  min-height: 2.75rem;
  width: 100%;
}
@media (min-width: 420px) {
  .fb-form-actions .btn { width: auto; }
}
.fb-star-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  font-size: .95rem;
  padding: .45rem .5rem;
  min-height: 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius, .5rem);
}
.fb-star-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fb-star-option:has(input:checked),
.fb-star-option:has(input:focus-visible) {
  color: #c9a227;
  border-color: color-mix(in srgb, #c9a227 45%, var(--line));
  background: color-mix(in srgb, #c9a227 10%, transparent);
}
.fb-page-form textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius, .5rem);
  border: 1px solid var(--line);
  padding: .65rem .75rem;
  font: inherit;
  background: var(--card);
  color: inherit;
  resize: vertical;
  min-height: 6rem;
}

/* Caché par défaut — jamais display:flex sans .is-open (Alpine peut retirer x-cloak sans x-show) */
.fb-modal-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
}
.fb-modal-root.is-open {
  display: flex;
}
.fb-modal-root[x-cloak] {
  display: none !important;
}
@media (min-width: 640px) {
  .fb-modal-root,
  .fb-modal-root.is-open { align-items: center; }
}
.fb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.fb-modal {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow: hidden;
  background: var(--surface, #fff);
  color: var(--text, #1a1714);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.fb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #0d7377;
  color: #fff;
}
.fb-modal-head h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.fb-icon-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .7);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.fb-icon-btn:hover { color: #fff; }
.fb-modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.fb-modal-body {
  padding: 1.25rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fb-modal-foot {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border, rgba(0,0,0,.1));
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}
.fb-modal-foot .btn-ghost,
.fb-vote-actions .btn-ghost {
  margin-left: 0;
}
.fb-help, .fb-muted { color: var(--muted); font-size: .875rem; }
.fb-page-meta {
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 6px;
  background: var(--bg, #f4f7f7);
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .85rem;
}
.fb-page-meta code {
  word-break: break-all;
  color: var(--muted);
  font-size: .8rem;
}
.fb-fieldset {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fb-fieldset legend,
.fb-label {
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .35rem;
  display: block;
}
.fb-choice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
}
.fb-choice.is-active,
.fb-choice:has(input:checked) {
  border-color: #0d7377;
  background: rgba(13, 115, 119, .06);
}
.fb-choice input { margin-top: .2rem; }
.fb-msg { display: block; white-space: pre-wrap; font-size: .9rem; }
.fb-meta { display: block; margin-top: .35rem; font-size: .75rem; color: var(--muted); }
.fb-meta code { font-size: .72rem; word-break: break-all; }
.fb-star-row { display: flex; gap: .15rem; }
.fb-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  color: #d6d3d1;
  line-height: 1;
  padding: .1rem;
}
.fb-star.is-on { color: #c9a227; }
.fb-modal textarea {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 6px;
  font: inherit;
  resize: vertical;
  background: #fff;
  color: inherit;
  box-sizing: border-box;
}
.fb-account-block { margin: 1.5rem 0; }
.fb-account-block h2 {
  font-size: 1.25rem;
  margin-bottom: .75rem;
}
.fb-account-card {
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 8px;
  background: var(--surface, #fff);
  padding: 1rem;
  margin-bottom: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fb-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.fb-vote-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.fb-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem .75rem;
  align-items: center;
  margin-top: .15rem;
}
.fb-admin-actions .btn {
  min-height: 2.75rem;
}
.fb-status-form {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
}
.fb-status-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}
.fb-status-form select {
  font: inherit;
  font-size: .85rem;
  min-height: 2.5rem;
  padding: .35rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  background: var(--surface, #fff);
}
.fb-vote-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .35rem .15rem;
  min-height: 2.5rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.fb-vote-link:hover {
  color: var(--accent, #0d7377);
}
.fb-cat, .fb-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  background: var(--bg, #f4f7f7);
  color: var(--text, #1a1714);
}
.fb-cat-bug {
  background: rgba(180, 60, 60, .1);
  color: #a33;
  border-color: rgba(180, 60, 60, .28);
}
.fb-cat-comfort {
  background: rgba(201, 162, 39, .12);
  color: #8a6b10;
  border-color: rgba(201, 162, 39, .35);
}
.fb-cat-feature {
  background: rgba(13, 115, 119, .08);
  color: #0d7377;
  border-color: rgba(13, 115, 119, .22);
}
.fb-badge-new {
  background: rgba(13, 115, 119, .1);
  color: #0d7377;
  border-color: rgba(13, 115, 119, .28);
}
.fb-badge-progress {
  background: rgba(201, 162, 39, .12);
  color: #8a6b10;
  border-color: rgba(201, 162, 39, .35);
}
.fb-badge-snooze {
  background: rgba(107, 101, 96, .1);
  color: var(--muted);
  border-color: var(--border, rgba(0,0,0,.1));
}
.fb-badge-done {
  background: rgba(42, 107, 60, .12);
  color: #2a6b3c;
  border-color: rgba(42, 107, 60, .28);
}
.fb-badge-vote {
  background: rgba(13, 115, 119, .08);
  color: #0d7377;
  border-color: rgba(13, 115, 119, .22);
}


/* —— Mémo rewards / settings —— */
.memo-rewards-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin: 0.65rem 0 0.15rem;
}
.memo-rewards-chip {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.3rem 0.55rem;
  background: color-mix(in srgb, var(--card) 90%, var(--memo-sun));
  border: 1px solid color-mix(in srgb, var(--memo-sun) 35%, var(--line));
  border-radius: var(--radius);
}
.memo-rewards-chip--badge { min-width: 0; max-width: 16rem; }
.memo-rewards-chip-value {
  font-weight: 800;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--memo-spot) 70%, var(--ink));
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memo-rewards-chip-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: lowercase;
  white-space: nowrap;
}
.memo-rewards-link {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--memo-spot);
}
.memo-rewards-panel { margin: 1.25rem 0 1.75rem; }
.memo-rewards-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.memo-rewards-panel-head h2 { margin: 0; font-size: 1.25rem; }
.memo-stats--rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.memo-stats--rewards .memo-stat {
  padding: 0.45rem 0.4rem;
  min-width: 0;
}
.memo-stats--rewards .memo-stat-value {
  font-size: clamp(1rem, 4.2vw, 1.35rem);
}
.memo-stats--rewards .memo-stat-label {
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memo-badge-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr;
}
.memo-badge-details {
  margin-top: 0.35rem;
}
.memo-badge-details-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  min-height: 2.75rem;
  padding: 0.55rem 0;
}
.memo-badge-details-summary::-webkit-details-marker { display: none; }
.memo-badge-details-summary::before {
  content: "▸";
  display: inline-block;
  width: 1rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.memo-badge-details[open] > .memo-badge-details-summary::before {
  transform: rotate(90deg);
}
.memo-badge-details-summary .hint {
  font-weight: 400;
}
.memo-badge-details .memo-badge-grid {
  margin-top: 0.35rem;
  padding-bottom: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .memo-badge-details-summary::before { transition: none; }
}
@media (min-width: 480px) {
  .memo-badge-grid {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}
.memo-badge {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  opacity: 0.45;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s var(--memo-ease);
}
.memo-badge strong { font-size: 0.95rem; }
.memo-badge span { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.memo-badge.is-unlocked {
  opacity: 1;
  border-color: color-mix(in srgb, var(--memo-spot) 40%, var(--line));
  background: color-mix(in srgb, var(--card) 88%, var(--memo-mist));
}
.memo-badge.is-unlocked:hover { transform: translateY(-2px); }
.memo-rewards-off {
  color: var(--muted);
  margin: 0.75rem 0 1.25rem;
}
.memo-settings-form { max-width: 32rem; }
.memo-settings-toggle { margin: 1rem 0 1.25rem; }
.memo-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
}
.memo-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.memo-switch-ui {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 1.55rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, var(--card));
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.2s ease;
}
.memo-switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 0.2s var(--memo-ease);
}
.memo-switch input:checked + .memo-switch-ui {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--memo-spot)));
  border-color: transparent;
}
.memo-switch input:checked + .memo-switch-ui::after {
  transform: translateX(1.15rem);
}
.memo-switch input:focus-visible + .memo-switch-ui {
  outline: 2px solid var(--memo-spot);
  outline-offset: 2px;
}
.memo-switch-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.memo-switch-label .hint { margin: 0; }
.memo-input-narrow { max-width: 5rem; }

.memo-goal-fieldset {
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  border: none;
}
.memo-goal-fieldset legend {
  font-weight: 650;
  font-size: 1.05rem;
  padding: 0;
  margin-bottom: 0.35rem;
}
.memo-goal-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.75rem 0 1rem;
}
.memo-goal-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.65rem;
  cursor: pointer;
  background: color-mix(in srgb, var(--muted) 8%, transparent);
}
.memo-goal-option:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.memo-goal-option input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.memo-goal-target-field label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.memo-goal-unit {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.92rem;
}
.memo-goal-today {
  margin: 0 0 1.1rem;
  padding: 0.85rem 0;
}
.memo-goal-today-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.45rem;
}
.memo-goal-today-head span { color: var(--muted); }
.memo-goal-today.is-met .memo-goal-today-head span {
  color: var(--accent);
  font-weight: 600;
}
.memo-goal-today .memo-scene-bar { margin-bottom: 0.35rem; }
.memo-goal-today .hint { margin: 0; }

.memo-rewards-preview { margin-top: 2rem; }
.memo-rewards-preview h2 { margin: 0 0 0.75rem; font-size: 1.2rem; }
.memo-push-box {
  margin: 1.75rem 0 0;
  max-width: 32rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 92%, var(--memo-mist));
}
.memo-push-box h2 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}
.memo-push-box .memo-actions { margin-top: 0.75rem; }
.memo-rewards-intro-body,
.memo-director-intro-body {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 0.35rem;
}
.memo-rewards-intro-body > p,
.memo-director-intro-body > p { margin: 0; line-height: 1.45; }
.memo-rewards-intro-actions {
  margin-top: 1rem;
}
.memo-rewards-intro #memo-rewards-intro-status:not([hidden]) {
  margin: 0.65rem 0 0;
}

.memo-activity-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: end;
  margin: 0 0 1.5rem;
}
.memo-activity-accordion {
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 94%, var(--memo-mist));
  overflow: hidden;
}
.memo-activity-accordion-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.9rem 1rem;
  min-height: 2.75rem;
  font-size: 0.95rem;
}
.memo-activity-accordion-summary::-webkit-details-marker {
  display: none;
}
.memo-activity-accordion-summary::before {
  content: "▸";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.85em;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.memo-activity-accordion[open] > .memo-activity-accordion-summary::before {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .memo-activity-accordion-summary::before {
    transition: none;
  }
}
.memo-activity-total {
  margin: 0;
  font-size: inherit;
}
.memo-activity-total strong {
  font-variant-numeric: tabular-nums;
}
.memo-activity-accordion-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--line);
}
.memo-activity-accordion-body .memo-activity-summary,
.memo-activity-accordion-body .memo-activity-list {
  margin-top: 1rem;
  margin-bottom: 0;
}
.memo-activity-accordion-body .memo-activity-summary + .memo-activity-list {
  margin-top: 1.5rem;
}
.memo-activity-filter label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 12rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.memo-activity-filter input {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.memo-activity-filter .btn,
.memo-activity-filter .btn-ghost {
  margin-left: 0;
  min-height: 2.75rem;
}
.memo-activity-summary,
.memo-activity-list {
  margin: 0 0 1.75rem;
}
.memo-activity-summary h2,
.memo-activity-list h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}
.memo-activity-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.memo-activity-summary-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: baseline;
}
.memo-activity-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 0 0.75rem;
  background: color-mix(in srgb, var(--card) 94%, var(--memo-mist));
  overflow: hidden;
}
.memo-activity-card-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  min-height: 2.75rem;
}
.memo-activity-card-summary::-webkit-details-marker {
  display: none;
}
.memo-activity-card-summary::before {
  content: "▸";
  display: inline-block;
  flex: 0 0 auto;
  margin-top: 0.2rem;
  font-size: 0.85em;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.memo-activity-card[open] > .memo-activity-card-summary::before {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .memo-activity-card-summary::before {
    transition: none;
  }
}
.memo-activity-card-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}
.memo-activity-card-top strong {
  display: block;
  margin-bottom: 0.15rem;
}
.memo-activity-card-body {
  padding: 0 1rem 0.9rem;
  border-top: 1px solid var(--line);
}
.memo-activity-meta {
  color: var(--muted);
  font-size: 0.8rem;
}
.memo-activity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.memo-activity-scenes {
  margin: 0.65rem 0 0;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.memo-activity-card-body > .memo-activity-meta {
  margin: 0.65rem 0 0;
}
.memo-activity-scenes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}
.memo-activity-scene-label {
  font-weight: 600;
}
.memo-activity-scene-mode {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .memo-activity-scenes li {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

.memo-ensemble-section {
  margin: 0 0 1.75rem;
}
.memo-ensemble-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}
.memo-ensemble-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.memo-ensemble-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--card) 94%, var(--memo-mist));
}
.memo-ensemble-card-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  align-items: flex-start;
}
.memo-ensemble-card-top strong {
  display: block;
  margin-bottom: 0.1rem;
}
.memo-ensemble-meta {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.memo-ensemble-roles {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.memo-ensemble-roles li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
  align-items: baseline;
  font-size: 0.9rem;
}
.memo-ensemble-role-char {
  font-weight: 600;
}

/* Dates représentation / répétition */
.memo-date-block {
  margin: 0.85rem 0 0;
  max-width: 28rem;
}
.memo-date-block--compact {
  margin-top: 0.55rem;
}
.memo-date-display {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}
.memo-date-display--empty,
.memo-scene-rehearsal--empty {
  color: var(--muted);
}
.memo-date-display--empty span {
  font-style: italic;
}
.memo-date-edit {
  margin-top: 0.35rem;
}
.memo-date-edit > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
}
.memo-date-edit > summary::-webkit-details-marker {
  display: none;
}
.memo-date-edit > summary.memo-date-display,
.memo-date-edit > summary.memo-scene-rehearsal {
  margin: 0;
  color: inherit;
}
.memo-date-edit > summary strong,
.memo-date-edit > summary.memo-date-display--empty span,
.memo-date-edit > summary.memo-scene-rehearsal--empty {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.memo-date-edit > summary:hover strong,
.memo-date-edit > summary:hover.memo-date-display--empty span,
.memo-date-edit > summary:hover.memo-scene-rehearsal--empty {
  text-decoration-thickness: 2px;
}
.memo-date-form {
  margin-top: 0.45rem;
  display: grid;
  gap: 0.35rem;
}
.memo-date-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.memo-date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.memo-date-row input[type="date"] {
  min-height: 44px;
  flex: 1 1 10rem;
  max-width: 100%;
}
.memo-scene-rehearsal {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--text);
}
.memo-scene-pct-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}
.memo-urgency {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.65rem;
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.35;
}
.memo-urgency-hint {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.35;
}
.memo-urgency-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 16%, var(--card));
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.memo-urgency-badge--overdue,
.memo-urgency--overdue .memo-urgency-badge {
  background: color-mix(in srgb, #b42318 14%, var(--card));
  color: #912018;
  border-color: color-mix(in srgb, #b42318 28%, var(--line));
}
.memo-urgency-badge--critical,
.memo-urgency--critical .memo-urgency-badge {
  background: color-mix(in srgb, #d92d20 12%, var(--card));
  color: #b42318;
  border-color: color-mix(in srgb, #d92d20 26%, var(--line));
}
.memo-urgency-badge--high,
.memo-urgency--high .memo-urgency-badge {
  background: color-mix(in srgb, #b54708 12%, var(--card));
  color: #b54708;
  border-color: color-mix(in srgb, #b54708 26%, var(--line));
}
.memo-urgency-badge--medium,
.memo-urgency--medium .memo-urgency-badge {
  background: color-mix(in srgb, var(--memo-spot, #0e7490) 12%, var(--card));
  color: var(--memo-spot, #0e7490);
  border-color: color-mix(in srgb, var(--memo-spot, #0e7490) 28%, var(--line));
}
.memo-urgency-badge--ok,
.memo-urgency--ok .memo-urgency-badge {
  background: color-mix(in srgb, #079455 10%, var(--card));
  color: #067647;
  border-color: color-mix(in srgb, #079455 22%, var(--line));
}
.memo-scene-card--urgent {
  border-color: color-mix(in srgb, #d92d20 32%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, #d92d20 10%, transparent);
}
.memo-date-edit--scene {
  margin: 0.25rem 0 0.15rem;
}