/* Comptes → MRR. Préfixe .mr-
   La page prolonge tokens.css et app.css : mêmes surfaces, mêmes rayons, l'or pour ce qui compte.
   Les largeurs se règlent sur le conteneur (.mr-body), pas sur l'écran : la barre latérale ne fausse rien. */

.mr-body { container: mrbody / inline-size; display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
/* Le petit verre de la page (badges, lignes d'échéances, abonnements, chips, récap) : sans flou, avec le liseré.
   Posé sur la page et sur ses formulaires (les modales vivent hors de .mr-body). */
.mr-body, .mr-form { --mr-glass-shadow: var(--glass-inset), 0 0 0 1px var(--glass-line), 0 1px 3px rgb(var(--shade) / calc(0.12 * var(--shade-k))); }
.mr-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.mr-block { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

.mr-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.mr-label { font: 500 var(--fs-xs)/1 var(--font-varsity); letter-spacing: 0.01em; color: var(--muted); margin-bottom: var(--s-2); }
.mr-title { font: 650 var(--fs-xl)/1.05 var(--font-display); font-stretch: 108%; letter-spacing: -0.025em; }
.mr-head-note { color: var(--text-2); font-size: var(--fs-sm); max-width: 52ch; }
.mr-empty__action { margin-top: var(--s-4); }
.mr-strong { font-weight: 650; color: var(--text); }
.mr-muted { color: var(--muted); }
.mr-sub-line { display: block; font-size: var(--fs-xs); color: var(--muted); }
.mr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; }

.mr-note { display: flex; align-items: flex-start; gap: var(--s-2); padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2); background: var(--glass-control); border: 1px solid var(--glass-border); box-shadow: var(--mr-glass-shadow); }
.mr-note svg { flex: none; margin-top: 2px; }
.mr-note--warn { background: color-mix(in srgb, var(--warn) 13%, var(--glass-control)); border-color: color-mix(in srgb, var(--warn) 28%, var(--glass-border)); color: color-mix(in srgb, var(--warn) var(--tint), var(--mix)); }
.mr-note--info { background: color-mix(in srgb, var(--info) 13%, var(--glass-control)); border-color: color-mix(in srgb, var(--info) 28%, var(--glass-border)); color: color-mix(in srgb, var(--info) var(--tint), var(--mix)); }

/* La coche qui se dessine */
.mr-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes mr-draw { from { stroke-dashoffset: 1; } }
@keyframes mr-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ───── 2. Chiffres clés ───── */
.mr-kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.mr-kpi {
  container-type: inline-size;
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), box-shadow var(--t-med);
}
.mr-kpi:hover { transform: translateY(-2px); box-shadow: var(--glass-inset), var(--glass-shadow-lift); }
.mr-kpi:hover::before { opacity: 1; }
.mr-kpi .mr-label { margin-bottom: var(--s-1); }
.mr-kpi__value { font: 650 clamp(1.5rem, 12cqi, 2.9rem)/1 var(--font-display); font-stretch: 108%; letter-spacing: -0.02em; white-space: nowrap; }
.mr-kpi__hint { margin-top: auto; padding-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.mr-kpi__hint--warn { display: flex; align-items: flex-start; gap: var(--s-2); color: color-mix(in srgb, var(--warn) var(--tint), var(--mix)); }
.mr-kpi__hint--warn svg { flex: none; margin-top: 2px; }
.mr-kpi--gold { border-color: var(--gold-line); background-image: linear-gradient(180deg, rgba(var(--gold-rgb), 0.15), rgba(var(--gold-rgb), 0) 72%); }
.mr-kpi--gold:hover { border-color: var(--gold); box-shadow: var(--glass-inset), var(--glow-gold); }
.mr-kpi--gold .mr-kpi__value { color: var(--gold-bright); }
.mr-kpi--gold .mr-label { color: var(--gold); }
.mr-kpi--warn { border-color: color-mix(in srgb, var(--warn) 26%, var(--line)); }

.mr-split { display: flex; flex-direction: column; gap: var(--s-2); }
.mr-split__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: baseline; gap: var(--s-3); }
.mr-split__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: var(--fs-sm); min-width: 0; }
.mr-split__role { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }
.mr-split__amount { font: 650 var(--fs-lg)/1.1 var(--font-display); color: color-mix(in srgb, var(--c, var(--muted)) var(--tint), var(--mix)); white-space: nowrap; }
.mr-split__share { text-align: right; font-size: var(--fs-xs); color: var(--muted); }
.mr-split__bar { display: flex; gap: 3px; height: 12px; margin-top: var(--s-2); border-radius: var(--r-pill); overflow: hidden; background: rgba(var(--overlay), 0.08); box-shadow: inset 0 1px 0 var(--glass-line), inset 0 -1px 0 var(--glass-edge-low); }
.mr-split__bar.is-empty { background: repeating-linear-gradient(115deg, rgba(var(--overlay), 0.04) 0 6px, rgba(var(--overlay), 0.10) 6px 12px); }
.mr-split__seg { flex: 1 1 0; min-width: 4px; background: var(--c, var(--muted)); transition: flex-grow var(--t-slow) var(--ease-out); }

@container mrbody (min-width: 560px) {
  .mr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container mrbody (min-width: 1180px) {
  .mr-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* ───── 2 bis. Le MRR à venir ───── */
.mr-upcoming { border-color: color-mix(in srgb, var(--info) 28%, var(--line)); background-image: linear-gradient(180deg, color-mix(in srgb, var(--info) 10%, transparent), transparent 60%); }
.mr-upcoming[data-count='0'] { background-image: none; border-color: var(--line); }
.mr-upcoming[data-count='0'] .mr-upcoming__value { color: var(--text-2); }
.mr-badge--info { border-color: color-mix(in srgb, var(--info) 40%, transparent); color: color-mix(in srgb, var(--info) var(--tint), var(--mix)); background: color-mix(in srgb, var(--info) 12%, transparent); }
.mr-upcoming__figure { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.mr-upcoming__value { font: 650 clamp(1.4rem, 5cqi, 2.2rem)/1 var(--font-display); font-stretch: 108%; letter-spacing: -0.02em; color: color-mix(in srgb, var(--info) var(--tint), var(--mix)); margin: var(--s-1) 0; }
.mr-upcoming__rule { max-width: 44ch; font-size: var(--fs-sm); color: var(--text-2); }
.mr-up__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.mr-up__row {
  display: grid; align-items: center; gap: var(--s-2) var(--s-4);
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'mark who' 'amount start' 'action action';
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--glass-border);
  background: var(--glass-control); box-shadow: var(--mr-glass-shadow); outline: none;
  transition: border-color var(--t-med), background-color var(--t-med);
}
.mr-up__row:hover { border-color: color-mix(in srgb, var(--info) 40%, var(--glass-edge-low)); background-color: var(--glass-control-hover); }
.mr-up__row:focus-visible { border-color: var(--gold-bright); }
.mr-up__mark { grid-area: mark; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.mr-up__who { grid-area: who; min-width: 0; }
.mr-up__client { font-weight: 600; overflow-wrap: anywhere; }
.mr-up__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-xs); color: var(--muted); }
.mr-up__amount { grid-area: amount; }
.mr-up__start { grid-area: start; }
.mr-up__action { grid-area: action; display: flex; justify-content: flex-end; }
@container mrbody (min-width: 820px) {
  .mr-up__row { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: 'mark who amount start action'; }
}
.mr-sub[data-status='upcoming'] { box-shadow: var(--mr-glass-shadow), inset 3px 0 0 var(--info); }

/* ───── 3. Le croisement ───── */
.mr-cross { overflow: hidden; background-image: var(--glass-sheen), var(--glass-caustic); }
.mr-cross::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
}
.mr-cross[data-state='done']::before { background: linear-gradient(90deg, var(--ok), transparent 70%); }
.mr-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-border); background: var(--glass-sheen), var(--glass-control); color: var(--text-2);
  box-shadow: var(--mr-glass-shadow);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
}
.mr-badge--gap { border-color: var(--gold-line); background: var(--glass-sheen), color-mix(in srgb, var(--gold) 14%, var(--glass-control)); color: var(--gold-bright); }
.mr-badge--ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--glass-border)); background: var(--glass-sheen), color-mix(in srgb, var(--ok) 14%, var(--glass-control)); color: var(--ok); }
.mr-badge--ok .mr-check path { animation: mr-draw 620ms var(--ease-out) 500ms both; }
.mr-badge--warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--glass-border)); background: var(--glass-sheen), color-mix(in srgb, var(--warn) 14%, var(--glass-control)); color: var(--warn); }

.mr-cross__figures { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.mr-fig { container-type: inline-size; padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--glass-border); background: var(--glass-control); box-shadow: var(--mr-glass-shadow); min-width: 0; }
.mr-fig__label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.mr-fig__label::before { content: ''; width: 14px; height: 3px; border-radius: 2px; background: var(--fig, var(--muted)); flex: none; }
.mr-fig__value { margin-top: var(--s-2); font: 650 clamp(1.3rem, 13cqi, 2.1rem)/1.05 var(--font-display); letter-spacing: -0.015em; white-space: nowrap; }
.mr-fig__hint { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.mr-fig--declared { --fig: var(--gold); }
.mr-fig--documented { --fig: var(--info); }
.mr-fig--gap { --fig: var(--warn); border-style: dashed; border-color: color-mix(in srgb, var(--warn) 34%, var(--glass-border)); background: color-mix(in srgb, var(--warn) 6%, var(--glass-control)); }
.mr-fig--gap .mr-fig__value { color: color-mix(in srgb, var(--warn) var(--tint), var(--mix)); }
.mr-fig--ok { --fig: var(--ok); }
.mr-fig--ok .mr-fig__value { color: var(--ok); }
.mr-fig--warn { --fig: var(--warn); }
@container mrbody (min-width: 640px) {
  .mr-cross__figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mr-gauge { display: flex; flex-direction: column; gap: var(--s-2); }
.mr-gauge__track {
  position: relative; height: 14px; border-radius: var(--r-pill); overflow: hidden;
  background: repeating-linear-gradient(115deg, rgba(var(--overlay), 0.04) 0 7px, rgba(var(--overlay), 0.10) 7px 14px);
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 var(--glass-edge-low);
}
.mr-gauge__fill { position: absolute; inset: 0; background: var(--fill-sheen), linear-gradient(90deg, var(--gold-fill-to), var(--gold-fill-from)); box-shadow: inset 0 1px 0 var(--fill-edge); }
.mr-gauge.is-done .mr-gauge__fill { background: var(--fill-sheen), linear-gradient(90deg, color-mix(in srgb, var(--ok) 62%, transparent), var(--ok)); }
.mr-gauge__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.mr-gauge__legend strong { color: var(--gold-bright); font-family: var(--font-display); font-weight: 650; }
.mr-gauge.is-done .mr-gauge__legend strong { color: var(--ok); }
.mr-cross__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.mr-cross__text { flex: 1 1 320px; color: var(--text); max-width: 78ch; line-height: 1.55; }

/* ───── 4. La courbe ───── */
.mr-chart { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.mr-chart__legend { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); font-size: var(--fs-xs); color: var(--text-2); }
.mr-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.mr-legend__line { position: relative; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
.mr-legend__line--alt { background: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 8px); }
.mr-legend__line::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bg-raised); box-shadow: 0 0 0 2px var(--c, var(--gold-bright)); }
.mr-legend__box { width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--muted)); }
.mr-legend__box--hatch { background: repeating-linear-gradient(135deg, var(--text-2) 0 2px, rgba(var(--overlay), 0.08) 2px 5px); }

.mr-chart__stage { position: relative; min-width: 0; min-height: 264px; }
.mr-chart__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.mr-chart__rule { stroke: var(--line); stroke-dasharray: 3 5; }
.mr-chart__base { stroke: var(--line-strong); }
.mr-chart__tick, .mr-chart__month, .mr-chart__year, .mr-chart__date { fill: var(--muted); font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.mr-chart__month { fill: var(--text-2); }
.mr-chart__month.is-current { fill: var(--text); font-weight: 600; }
.mr-chart__date { fill: var(--text-2); }
.mr-chart__zone rect { fill: rgba(var(--overlay), 0.022); }
.mr-chart__zone line { stroke: var(--line-strong); stroke-dasharray: 2 4; }
.mr-chart__zone text { fill: var(--muted); font-family: var(--font-varsity); letter-spacing: 0.01em; }

.mr-chart__item { outline: none; cursor: pointer; transition: opacity var(--t-med) var(--ease-out); }
.mr-chart__hit { fill: transparent; transition: fill var(--t-fast); }
.mr-chart__focus { fill: none; stroke: var(--gold-bright); stroke-width: 1.5; opacity: 0; pointer-events: none; }
.mr-chart__item:focus-visible .mr-chart__focus { opacity: 1; }
.mr-chart__bar.is-active .mr-chart__hit { fill: rgba(var(--overlay), 0.035); }
.mr-chart__stack { transform-box: fill-box; transform-origin: 50% 100%; }
.mr-chart__seg { transition: filter var(--t-fast); }
.mr-chart__bar.is-active .mr-chart__seg { filter: brightness(1.18); }
.mr-chart__zero { fill: var(--line-strong); }
.mr-chart__value { fill: var(--text); font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; pointer-events: none; }
.mr-chart__line { stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.4)); transition: opacity var(--t-med); pointer-events: none; }
.mr-chart__mark { transform-box: fill-box; transform-origin: center; transition: transform var(--t-med) var(--ease-spring); }
.mr-chart__dot { fill: var(--bg-raised); stroke-width: 2.5; }
.mr-chart__point:not(.is-alt) .mr-chart__dot { stroke: var(--gold-bright); }
.mr-chart__point.is-last .mr-chart__dot { fill: var(--gold-bright); }
.mr-chart__line--alt { stroke-width: 1.8; stroke-dasharray: 5 5; filter: none; opacity: 0.85; }
.mr-chart__point.is-alt.is-last .mr-chart__dot { fill: var(--bg-raised); }
.mr-chart__point.is-alt .mr-chart__amount { fill: var(--text-2); }
.mr-chart__halo { fill: var(--gold); opacity: 0; transition: opacity var(--t-fast); }
.mr-chart__point.is-last .mr-chart__halo { animation: mr-halo 2.8s ease-out infinite; }
.mr-chart__point.is-active .mr-chart__halo { opacity: 0.26; animation: none; }
.mr-chart__point.is-active .mr-chart__mark { transform: scale(1.22); }
.mr-chart__point:focus-visible .mr-chart__dot { stroke: var(--text); }
.mr-chart__amount { fill: var(--gold-bright); font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; }
.mr-chart__tag { pointer-events: none; }
.mr-chart__svg.is-dim .mr-chart__item:not(.is-active) { opacity: 0.3; }
.mr-chart__svg.is-dim-line .mr-chart__line { opacity: 0.35; }
@keyframes mr-halo { 0% { opacity: 0.3; } 70%, 100% { opacity: 0; } }

.mr-chart__tip {
  position: absolute; left: 0; top: 0; z-index: 3; min-width: 190px; max-width: min(280px, calc(100% - 8px));
  padding: 12px 14px; border-radius: var(--r-md); pointer-events: none;
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg-strong); background-image: var(--glass-sheen);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-inset), var(--shadow-2);
  font-size: var(--fs-sm); opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast), visibility 0s linear var(--t-fast);
}
.mr-chart__tip.is-visible { opacity: 1; visibility: visible; transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out); }
.mr-chart__tip.is-instant { transition: none; }
.mr-chart__stage.is-docked .mr-chart__tip {
  position: static; max-width: none; margin-top: var(--s-2); opacity: 1; visibility: visible;
  background: var(--glass-control); border-color: var(--glass-border); box-shadow: var(--mr-glass-shadow); transition: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.mr-tip__hint { color: var(--muted); font-size: var(--fs-xs); text-align: center; }
.mr-tip__title { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font: 650 var(--fs-md)/1.2 var(--font-display); }
.mr-tip__flag { font: 500 0.72rem/1 var(--font-varsity); letter-spacing: 0.01em; color: var(--muted); padding: 4px 6px; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--glass-control); }
.mr-tip__sub { margin: 2px 0 8px; font-size: var(--fs-xs); color: var(--muted); }
.mr-tip__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: 2px 0; }
.mr-tip__label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.mr-tip__swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--muted)); }
.mr-tip__value { font-weight: 600; white-space: nowrap; }
.mr-tip__note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--glass-border); font-size: var(--fs-xs); color: var(--muted); }

.mr-chart__data { border-top: 1px solid var(--glass-border); padding-top: var(--s-3); }
.mr-chart__data-toggle { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); border-radius: var(--r-sm); }
.mr-chart__data-toggle:hover { color: var(--text); }
.mr-chart__tables { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); }
.mr-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--glass-border); background: var(--glass-control); box-shadow: var(--mr-glass-shadow); }
.mr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); white-space: nowrap; }
.mr-table caption { caption-side: top; text-align: left; padding: 10px 12px; font-weight: 600; color: var(--text-2); }
.mr-table th, .mr-table td { padding: 8px 12px; text-align: left; border-top: 1px solid var(--line); }
.mr-table thead th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.mr-table tbody th { font-weight: 600; }
.mr-table td.num { text-align: right; }

@container mrbody (min-width: 560px) {
  .mr-chart__stage { min-height: 340px; }
}

/* ───── Cellules : étiquette visible en carte, masquée en tableau ───── */
.mr-cell { min-width: 0; }
.mr-cell__label { display: block; margin-bottom: 3px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.mr-cell__value { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.mr-cell__value .tag { white-space: normal; }

/* ───── 5. Les échéances ───── */
.mr-due__summary { display: flex; flex-wrap: wrap; gap: 6px var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.mr-stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--glass-sheen), var(--glass-control); border: 1px solid var(--glass-border); box-shadow: var(--mr-glass-shadow); white-space: nowrap; }
.mr-stat strong { color: var(--text); font-weight: 600; }
.mr-stat--ok { border-color: color-mix(in srgb, var(--ok) 30%, var(--glass-border)); background: var(--glass-sheen), color-mix(in srgb, var(--ok) 13%, var(--glass-control)); }
.mr-stat--ok strong { color: var(--ok); }
.mr-stat--warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--glass-border)); background: var(--glass-sheen), color-mix(in srgb, var(--warn) 13%, var(--glass-control)); }
.mr-stat--warn strong { color: var(--warn); }
.mr-stat--danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--glass-border)); background: var(--glass-sheen), color-mix(in srgb, var(--danger) 13%, var(--glass-control)); }
.mr-stat--danger strong { color: var(--danger); }
.mr-stat--money { display: inline-block; white-space: normal; }
.mr-progress { position: relative; height: 6px; border-radius: var(--r-pill); overflow: hidden; background: rgba(var(--overlay), 0.08); box-shadow: inset 0 1px 0 var(--glass-line), inset 0 -1px 0 var(--glass-edge-low); }
.mr-progress__fill { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 62%, transparent), var(--ok)); }

.mr-due__cols, .mr-sub__cols { display: none; }
.mr-due__list, .mr-sub__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.mr-due__row {
  --st: var(--muted);
  position: relative; display: grid; align-items: center; gap: var(--s-3) var(--s-3);
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: 'mark who who' 'date date amount' 'state state state' 'action action action';
  /* Une ligne par échéance : du petit verre (sans flou, elles sont nombreuses), le liseré, le filet du statut à gauche. */
  padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--glass-border);
  background: var(--glass-control); box-shadow: var(--mr-glass-shadow); outline: none;
  transition: border-color var(--t-med), background-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.mr-due__row::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--st); transition: background var(--t-med); }
.mr-due__row:hover { border-color: color-mix(in srgb, var(--st) 38%, var(--glass-border)); background-color: var(--glass-control-hover); }
.mr-due__row:focus-visible { border-color: var(--gold-bright); }
.mr-due__row[data-state='paid'] { --st: var(--ok); }
.mr-due__row[data-state='partial'] { --st: var(--warn); }
.mr-due__row[data-state='late'] { --st: var(--danger); }
.mr-due__row[data-state='upcoming'] { --st: var(--info); }
.mr-due__row[data-state='no_date'] { --st: var(--warn); }
.mr-due__mark {
  grid-area: mark; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--glass-sheen), color-mix(in srgb, var(--st) 15%, var(--glass-control)); color: var(--st);
  border: 1px solid color-mix(in srgb, var(--st) 34%, var(--glass-border)); box-shadow: var(--glass-inset);
  transition: background var(--t-med), color var(--t-med), border-color var(--t-med);
}
.mr-due__row[data-state='late'] .mr-due__mark { animation: pulse 2.4s ease-out infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 50%, transparent); }
.mr-due__who { grid-area: who; min-width: 0; }
.mr-due__client, .mr-sub__client { font: 600 var(--fs-md)/1.25 var(--font-display); color: var(--text); overflow-wrap: anywhere; }
.mr-due__meta, .mr-sub__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.mr-due__date { grid-area: date; }
.mr-due__amount { grid-area: amount; }
.mr-due__state { grid-area: state; }
.mr-due__action { grid-area: action; display: flex; }
.mr-due__action:empty { display: none; }
.mr-due__action .btn { flex: 1; }
.mr-pay { border-color: var(--gold-line); background: var(--glass-sheen), color-mix(in srgb, var(--gold) 14%, var(--glass-control)); color: var(--gold-bright); }
.mr-pay:hover { background: var(--fill-sheen), linear-gradient(180deg, var(--gold-fill-from), var(--gold-fill-to)); color: var(--on-gold); border-color: transparent; box-shadow: inset 0 0 0 1px var(--fill-edge), 0 8px 24px rgba(var(--gold-rgb), 0.24); }

/* À l'arrivée, les coches des échéances payées se dessinent l'une après l'autre */
.mr-due__row.is-drawing .mr-check path { animation: mr-draw 560ms var(--ease-out) var(--d, 0ms) both; }
/* Une échéance vient d'être payée : la pastille bascule au vert, la coche se dessine */
.mr-due__row.is-just-paid .mr-due__mark { animation: mr-paid 720ms var(--ease-out) both; }
.mr-due__row.is-just-paid .mr-check path { animation: mr-draw 520ms var(--ease-out) 180ms both; }
.mr-due__row.is-just-paid::before { animation: mr-edge 720ms var(--ease-out) both; }
@keyframes mr-paid {
  0% { transform: scale(0.5); background: color-mix(in srgb, var(--gold) 14%, var(--glass-control)); color: var(--gold-bright); border-color: var(--gold-line); }
  55% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes mr-edge { from { background: var(--gold); transform: scaleY(0.2); } }

.mr-next { border-top: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-line); padding-top: var(--s-3); }
.mr-next__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); cursor: pointer; list-style: none; padding: var(--s-2); margin: calc(var(--s-2) * -1); border-radius: var(--r-md); transition: background var(--t-fast); }
.mr-next__summary::-webkit-details-marker { display: none; }
.mr-next__summary:hover { background: var(--glass-control); box-shadow: var(--glass-inset); }
.mr-next__title { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.mr-next__title svg { color: var(--muted); transition: transform var(--t-med) var(--ease-out); }
details[open] > .mr-next__summary .mr-next__title svg { transform: rotate(90deg); }
.mr-next__month { color: var(--text-2); font-weight: 500; }
.mr-next__meta { font-size: var(--fs-sm); color: var(--text-2); }
.mr-next > .mr-due__table, .mr-ended > .mr-sub__list { margin-top: var(--s-4); animation: mr-unfold var(--t-med) var(--ease-out) both; }
@keyframes mr-unfold { from { opacity: 0; transform: translateY(-6px); } }

@container mrbody (min-width: 860px) {
  .mr-due__cols, .mr-due__row { grid-template-columns: 38px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) 204px; grid-template-areas: none; }
  .mr-due__cols { display: grid; gap: var(--s-4); padding: 0 var(--s-4) var(--s-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
  .mr-due__row { gap: var(--s-4); padding: var(--s-3) var(--s-4); }
  .mr-due__list { gap: var(--s-2); }
  .mr-due__row > * { grid-area: auto; }
  .mr-due__action { justify-content: flex-end; }
  .mr-due__action:empty { display: block; }
  .mr-due__action .btn { flex: none; }
  .mr-due .mr-cell__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ───── 6. Les abonnements ───── */
.mr-subs { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.mr-group, .mr-ended, .mr-subs__empty { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.mr-group { overflow: hidden; background-image: var(--glass-sheen), var(--glass-caustic); transition: border-color var(--t-med); }
.mr-group::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--c, var(--muted)), transparent 75%); }
.mr-group:hover { border-color: color-mix(in srgb, var(--c, var(--muted)) 36%, var(--line)); }
.mr-group__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.mr-group__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.mr-group__role { font: 500 var(--fs-xs)/1 var(--font-varsity); letter-spacing: 0.01em; color: var(--text-2); }
.mr-group__total { font-size: var(--fs-sm); color: var(--text-2); }
.mr-ended { display: block; }

.mr-sub {
  position: relative; display: grid; align-items: start; gap: var(--s-3) var(--s-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: 'who who' 'amount payout' 'day since' 'status action' 'notes notes';
  /* Une ligne par abonnement : du petit verre, sans flou, avec le liseré. */
  padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--glass-border);
  background: var(--glass-control); box-shadow: var(--mr-glass-shadow); outline: none;
  transition: border-color var(--t-med), background-color var(--t-med);
}
.mr-sub:hover { border-color: var(--glass-edge-low); background-color: var(--glass-control-hover); }
.mr-sub:focus-visible { border-color: var(--gold-bright); }
.mr-sub[data-status='paused'], .mr-sub[data-status='ended'] { background: var(--glass-bg-soft); }
.mr-sub[data-status='ended'] .mr-sub__client, .mr-sub[data-status='ended'] .mr-strong { color: var(--text-2); }
.mr-sub__who { grid-area: who; min-width: 0; }
.mr-sub__amount { grid-area: amount; }
.mr-sub__payout { grid-area: payout; }
.mr-sub__day { grid-area: day; }
.mr-sub__since { grid-area: since; }
.mr-sub__status { grid-area: status; }
.mr-sub__action { grid-area: action; display: flex; justify-content: flex-end; align-self: end; }
.mr-sub__notes { grid-area: notes; padding-top: var(--s-3); border-top: 1px dashed var(--glass-border); font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; white-space: pre-line; }

@container mrbody (min-width: 980px) {
  .mr-sub__cols, .mr-sub { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr) 112px; }
  .mr-sub__cols { display: grid; gap: var(--s-4); padding: 0 var(--s-4); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
  .mr-sub { grid-template-areas: none; align-items: center; padding: var(--s-3) var(--s-4); }
  .mr-sub > * { grid-area: auto; }
  .mr-sub > .mr-sub__notes { grid-column: 1 / -1; padding-top: var(--s-2); }
  .mr-sub__list { gap: var(--s-2); }
  .mr-sub__action { align-self: center; }
  .mr-subs .mr-cell__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ───── Les fenêtres de saisie ───── */
.mr-form { display: flex; flex-direction: column; gap: var(--s-4); }
.mr-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.mr-form__error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.mr-form__error:empty { display: none; }
.mr-field { min-width: 0; }
.mr-field__req { color: var(--gold); }
.mr-field__error { font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.mr-field__error:empty { display: none; }
.mr-form .select[aria-invalid='true'], .mr-form .textarea[aria-invalid='true'] { border-color: var(--danger); box-shadow: var(--glass-inset), 0 0 0 3px var(--danger-soft); }
.mr-month { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-2); }
@media (min-width: 600px) {
  .mr-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr-field--wide { grid-column: 1 / -1; }
}

.mr-dest { display: flex; flex-direction: column; gap: var(--s-3); }
.mr-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mr-chips:empty { display: none; }
.mr-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-border); background: var(--glass-sheen), var(--glass-control); color: var(--text-2);
  box-shadow: var(--mr-glass-shadow);
  font-size: var(--fs-sm); font-weight: 600;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.mr-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.6; transition: background var(--t-fast), opacity var(--t-fast); }
.mr-chip:hover { border-color: var(--glass-edge-low); background-color: var(--glass-control-hover); color: var(--text); }
.mr-chip:active { transform: scale(0.96); }
.mr-chip[aria-pressed='true'] { border-color: var(--gold-line); background: var(--glass-sheen), color-mix(in srgb, var(--gold) 14%, var(--glass-control)); color: var(--gold-bright); }
.mr-chip[aria-pressed='true']::before { background: currentColor; opacity: 1; }

.mr-pay__recap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--glass-border); background: var(--glass-sheen), var(--glass-control); box-shadow: var(--mr-glass-shadow); }
.mr-pay__client { font: 650 var(--fs-lg)/1.2 var(--font-display); overflow-wrap: anywhere; }
.mr-pay__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.mr-pay__amount { font: 650 var(--fs-xl)/1 var(--font-display); color: var(--gold-bright); white-space: nowrap; }