/* Refonte du 22/10/2026 (cahier §10.2, docs/note-cdc-design-noir-terminal.md §11, docs/inventaire-blocs-refonte.md),
   d'après la maquette docs/maquette-refonte/ (charte.css, reel.css, pages.css).
   Chargée après style.css :
   1. les deux thèmes de la charte, posés en attribut data-look sur <html> (noir par défaut, clair) ;
   2. les anciennes variables de style.css pointent sur celles de la charte : les pages pas encore refaites suivent
      les deux thèmes sans changer de contenu ;
   3. le gabarit commun (menu à libellés réductible, barre téléphone, en-tête, période, aides « ? ») ;
   4. les blocs des pages refaites, tous sous .rf (la <main> de ces pages) : un composant ne réutilise jamais une
      classe générique des anciennes pages (§11, règle 13). */

/* ---------- 1. thèmes ---------- */
/* Thème sombre « plus marqué » retenu par Maxime le 29/10/2026 (note de charte §13) : fond / bloc 1,24:1, bordure
   1,48:1, champs 3,49:1. Le thème clair est inchangé. */
:root, :root[data-look="noir"] {
  --ground: #08080a; --surface: #202027; --raised: #2c2c33; --active: #2a3c62;
  --border: #3c3c45; --rule: #2e2e35; --control: #62626b; --field-border: #74747c;
  --text: #ffffff; --muted: #b4b6bc; --faint: #9a9ca2;
  --brand: #4a8ad6; --brand-ink: #8bb6ea; --brand-tint: #1f2840; --brand-tint-2: #2a3c62;
  --primary: #326fbf; --primary-ink: #ffffff;
  --nav-active-bg: #ffffff; --nav-active-ink: #0e0e10;
  --chart-1: #f2f2f3; --chart-muted: #5f5f66; --grid: #383840; --axis-ink: #b4b6bc;
  --positive: #5fc39c; --negative: #e5566f; --warning: #d9a441; --neutral: #a0a2a8;
  --pill-positive-bg: #1f3330; --pill-positive-ink: #5fc39c;
  --pill-negative-bg: #3a2229; --pill-negative-ink: #ff8f9c;
  --pill-warning-bg: #352d1b; --pill-warning-ink: #d9a441;
  --pill-neutral-bg: #303038; --pill-neutral-ink: #c9c9cd;
  --cls-actions: #8fb4ef; --cls-obligations: #8fd6bf; --cls-structures: #b9a8ec; --cls-fonds-euro: #eaa9c2; --cls-liquidites: #a9b6c8;
  --cat-1: #8fb4ef; --cat-2: #8fd6bf; --cat-3: #b9a8ec; --cat-4: #eaa9c2; --cat-5: #d9c4a3; --cat-autres: #b8d4a0;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-card: 8px; --radius-control: 6px;
  --shadow-float: 0 18px 48px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
:root[data-look="clair"] {
  --ground: #f4f5f7; --surface: #ffffff; --raised: #f4f5f7; --active: #dde7f6;
  --border: #e2e5ea; --rule: #eceef2; --control: #cdd2d9; --field-border: #8a9099;
  --text: #121418; --muted: #575d67; --faint: #666c76;
  --brand: #1f5fbf; --brand-ink: #1f5fbf; --brand-tint: #e8eff9; --brand-tint-2: #dde7f6;
  --primary: #1f5fbf; --primary-ink: #ffffff;
  --nav-active-bg: #121418; --nav-active-ink: #ffffff;
  --chart-1: #121418; --chart-muted: #c4c9d0; --grid: #e6e8ec; --axis-ink: #575d67;
  --positive: #1d7a4c; --negative: #c0342b; --warning: #8a5600; --neutral: #575d67;
  --pill-positive-bg: #e4f3ea; --pill-positive-ink: #17663f;
  --pill-negative-bg: #fbe9e7; --pill-negative-ink: #a32d25;
  --pill-warning-bg: #fbf1dc; --pill-warning-ink: #8a5600;
  --pill-neutral-bg: #eceef2; --pill-neutral-ink: #3d434c;
  --cls-actions: #5b8ad6; --cls-obligations: #3fa98a; --cls-structures: #8a74d6; --cls-fonds-euro: #d0789a; --cls-liquidites: #7d8a9e;
  --cat-1: #5b8ad6; --cat-2: #3fa98a; --cat-3: #8a74d6; --cat-4: #d0789a; --cat-5: #b0915f; --cat-autres: #7fa85f;
  --shadow-float: 0 18px 48px rgba(18, 20, 24, .16);
  color-scheme: light;
}

/* Pastel lavande et Pastel menthe : options du thème Clair, validées par Maxime le 02/11/2026 (maquette Design v34,
   docs/maquette-theme/pastel-clair.css). Fond quasi blanc légèrement teinté, cartes blanches, texte ≥ 4,5:1. */
:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"] {
  --surface: #ffffff;
  --text: #1b1a2e; --muted: #55536c; --faint: #66647c;
  --nav-active-bg: #1b1a2e; --nav-active-ink: #ffffff;
  --positive: #1d7a4c; --negative: #c0342b; --warning: #8a5600; --neutral: #55536c;
  --pill-positive-bg: #e1f3e9; --pill-positive-ink: #17663f;
  --pill-negative-bg: #fbe7e5; --pill-negative-ink: #a32d25;
  --pill-warning-bg: #fbf0d9; --pill-warning-ink: #7d4e00;
  --pill-neutral-bg: #efedf8; --pill-neutral-ink: #3d3b55;
  --cls-actions: #5b8ad6; --cls-obligations: #3fa98a; --cls-structures: #8a74d6; --cls-fonds-euro: #d0789a; --cls-liquidites: #7d8a9e;
  --cat-1: #5b8ad6; --cat-2: #3fa98a; --cat-3: #8a74d6; --cat-4: #d0789a; --cat-5: #b0915f; --cat-autres: #7fa85f;
  --radius-card: 16px; --radius-control: 10px;
  --shadow-float: 0 18px 48px rgba(40, 30, 100, .16);
  --card-shadow: 0 6px 24px rgba(60, 50, 120, .07);
  color-scheme: light;
}
:root[data-look="pastel-lavande"] {
  --ground: #fafafd;
  --bg-image: linear-gradient(135deg, #f7f6fc 0%, #fafafd 60%, #fcfafc 100%);
  --raised: #f3f1fc; --active: #e2defa;
  --border: #e6e2f4; --rule: #efecf8; --control: #c9c4e2; --field-border: #8e89ad;
  --brand: #5b52c9; --brand-ink: #5046c9; --brand-tint: #f1effc; --brand-tint-2: #e9e6fa;
  --primary: #5b52c9; --primary-ink: #ffffff;
  --chart-1: #5046c9; --chart-muted: #c9c5df; --grid: #ece9f6; --axis-ink: #55536c;
  --tint-a: #f2effc; --tint-b: #edf3fc;
}
:root[data-look="pastel-menthe"] {
  --ground: #f9fcfb;
  --bg-image: linear-gradient(135deg, #f4faf8 0%, #f9fbfc 60%, #fbfafc 100%);
  --raised: #f1f8f6; --active: #d8eee8;
  --border: #dcebe7; --rule: #e8f2ef; --control: #bcd5cf; --field-border: #6f8f88;
  --brand: #12705f; --brand-ink: #12705f; --brand-tint: #e0f1ec; --brand-tint-2: #d8eee8;
  --primary: #12705f; --primary-ink: #ffffff;
  --chart-1: #12705f; --chart-muted: #c5dad5; --grid: #e4efec; --axis-ink: #55536c;
  --tint-a: #e8f5f1; --tint-b: #eef3fb;
}
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) body { background: var(--bg-image) fixed, var(--ground); }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .side { background: var(--surface); border-right-color: var(--border); }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .side .nav:not(.on) { color: var(--text); }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .side .nav:not(.on) svg { stroke: var(--muted); }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .card { border-color: transparent; box-shadow: var(--card-shadow); }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .rf .tile { border-radius: 22px; }
/* cartes de tête : rendement et crédit (ou apports) teintés, texte foncé */
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .rf .t-rdt { background: var(--tint-a); color: var(--text); }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .rf .t-rdt :is(.k, .s, .stat-val small) { color: #3d3b55; }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .rf .t-rdt .q { border-color: #55536c; color: #3d3b55; }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .rf .t-credit { background: var(--tint-b); }
:is(:root[data-look="pastel-lavande"], :root[data-look="pastel-menthe"]) .rf .t-credit :is(.k, .s) { color: #3d3b55; }

/* « Automatique » (Mon compte → Affichage) : le thème clair quand l'appareil est en clair, sinon Noir terminal. */
@media (prefers-color-scheme: light) {
  :root[data-look="auto"] {
    --ground: #f4f5f7; --surface: #ffffff; --raised: #f4f5f7; --active: #dde7f6;
    --border: #e2e5ea; --rule: #eceef2; --control: #cdd2d9; --field-border: #8a9099;
    --text: #121418; --muted: #575d67; --faint: #666c76;
    --brand: #1f5fbf; --brand-ink: #1f5fbf; --brand-tint: #e8eff9; --brand-tint-2: #dde7f6;
    --primary: #1f5fbf; --primary-ink: #ffffff;
    --nav-active-bg: #121418; --nav-active-ink: #ffffff;
    --chart-1: #121418; --chart-muted: #c4c9d0; --grid: #e6e8ec; --axis-ink: #575d67;
    --positive: #1d7a4c; --negative: #c0342b; --warning: #8a5600; --neutral: #575d67;
    --pill-positive-bg: #e4f3ea; --pill-positive-ink: #17663f;
    --pill-negative-bg: #fbe9e7; --pill-negative-ink: #a32d25;
    --pill-warning-bg: #fbf1dc; --pill-warning-ink: #8a5600;
    --pill-neutral-bg: #eceef2; --pill-neutral-ink: #3d434c;
    --cls-actions: #5b8ad6; --cls-obligations: #3fa98a; --cls-structures: #8a74d6; --cls-fonds-euro: #d0789a; --cls-liquidites: #7d8a9e;
    --cat-1: #5b8ad6; --cat-2: #3fa98a; --cat-3: #8a74d6; --cat-4: #d0789a; --cat-5: #b0915f; --cat-autres: #7fa85f;
    --shadow-float: 0 18px 48px rgba(18, 20, 24, .16);
    color-scheme: light;
  }
  :root[data-look="auto"] .side { background: var(--surface); }
  :root[data-look="auto"] .side .nav:not(.on) { color: var(--text); }
  :root[data-look="auto"] .side .nav:not(.on) svg { stroke: var(--muted); }
}

/* ---------- 2. anciennes variables (style.css) → charte ---------- */
:root, :root[data-look] {
  --bg: var(--ground); --surface-2: var(--raised); --surface-3: var(--raised);
  --ink: var(--text); --ink-2: var(--muted); --ink-3: var(--faint);
  --accent: var(--brand); --accent-ink: var(--primary-ink); --link: var(--brand-ink); --active-bg: var(--active);
  --good: var(--positive); --warn: var(--warning); --critical: var(--negative);
  --good-bg: var(--pill-positive-bg); --critical-bg: var(--pill-negative-bg); --critical-pill: var(--pill-negative-ink);
  --warn-bg: var(--pill-warning-bg); --neutral-bg: var(--pill-neutral-bg); --neutral-ink: var(--pill-neutral-ink);
  --font-body: var(--font); --font-display: var(--font); --font-mono: var(--font);
}
body { background: var(--ground); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- 3. gabarit commun ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
:root[data-nav="icons"] .app { grid-template-columns: 64px minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; background: var(--ground); border-right: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.side > * { flex-shrink: 0; }
.side a { text-decoration: none; color: inherit; }
.side .product { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 14px; }
.side .brand-mark { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; padding: 0; }
.side .brand-mark svg { width: 20px; height: 20px; fill: var(--text); flex: none; }
.side .brand-mark b { font-weight: 700; }
.side .switcher { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); text-align: left; font: inherit; }
.side a.switcher:hover, .side summary.switcher:hover { border-color: var(--control); }
.side .switcher .ini { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--radius-control); background: var(--raised); font-weight: 700; }
.side .switcher .lbl { min-width: 0; }
.side .switcher b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .switcher small { display: block; color: var(--muted); font-size: 12px; line-height: 16px; }
.side .nav { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--radius-control); color: var(--muted); }
.side .nav svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.side .nav:hover { background: var(--raised); color: var(--text); }
.side .nav.on { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 500; }
.side .nav .av { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 700; background: hsl(var(--h) 45% 82%); color: hsl(var(--h) 45% 22%); }
.side .nav.sub { min-height: 30px; padding-left: 40px; font-size: 13px; }
.side .nav.sub .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .group { margin: 18px 10px 6px; color: var(--faint); font-size: 12px; }
.side .spacer { flex: 1 0 12px; }
.side form { margin: 0; }
.side button.nav { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.side .collapse { margin-top: 4px; }
.side .close { display: none; }
:root[data-nav="icons"] .side .lbl, :root[data-nav="icons"] .side .switcher small { display: none; }
:root[data-nav="icons"] .side { padding: 18px 10px; align-items: center; }
:root[data-nav="icons"] .side .switcher { width: auto; padding: 6px; }
:root[data-nav="icons"] .side .nav { width: 40px; justify-content: center; padding: 0; }
:root[data-nav="icons"] .side .nav.sub, :root[data-nav="icons"] .side .group, :root[data-nav="icons"] .side .fam-pop { display: none; }
:root[data-nav="icons"] .side .product { margin: 0 0 14px; }
:root[data-nav="icons"] .side .collapse svg { transform: rotate(180deg); }
:root[data-look="clair"] .side { background: var(--surface); }
:root[data-look="clair"] .side .nav:not(.on) { color: var(--text); }
:root[data-look="clair"] .side .nav:not(.on) svg { stroke: var(--muted); }

/* famille ouverte (gestionnaire de plusieurs familles) : le sélecteur reprend la carte du menu */
.side .fam-pick { position: relative; margin-bottom: 12px; }
.side .fam-pick > summary { list-style: none; cursor: pointer; margin: 0; }
.side .fam-pick > summary::-webkit-details-marker { display: none; }
.side .fam-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 45; display: grid; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-float); }
.side .fam-pop input { height: 32px; padding: 0 8px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--ground); color: var(--text); font: inherit; }
.side .fam-pop ul { margin: 0; padding: 0; list-style: none; }
.side .fam-pop li a { display: block; padding: 5px 6px; border-radius: var(--radius-control); }
.side .fam-pop li a:hover, .side .fam-pop li a[aria-current] { background: var(--raised); }
.side .fam-pop-h { color: var(--faint); font-size: 12px; }
.side .fam-pop-more { color: var(--brand-ink); font-size: 13px; }
.side .fam-pop-none { color: var(--faint); font-size: 12px; margin: 0; }

/* page */
.main { min-width: 0; width: 100%; max-width: 1480px; margin-inline: auto; padding: 24px 32px 56px; }   /* centrée à droite du menu, 1480 px au plus (Maxime, 02/11) */
.main.rf { display: grid; gap: 16px; align-content: start; }
.phonebar { display: none; }
.demo-banner { padding: 6px 12px; background: var(--pill-warning-bg); color: var(--pill-warning-ink); font-size: 13px; text-align: center; }
.dev-note { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-control); background: var(--pill-negative-bg); color: var(--pill-negative-ink); font-size: 13px; }
/* Consentement à l'exploitant (recette du 30/10/2026) : bandeau neutre, lien et lignes touchables sur 44 px */
.consent-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 0 12px; padding: 4px 12px; border-radius: var(--radius-control); background: var(--brand-tint); color: var(--text); font-size: 13px; }
.consent-note a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--brand-ink); }
.consent-rows { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 0; }
.consent-rows > li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--rule); min-width: 0; overflow-wrap: anywhere; }
.consent-rows > li:first-child { border-top: 0; }
.consent-rows form { margin: 4px 0 0; }
#exploitant .check, #controles-exploitant .check, .check.exploitant-check { display: flex; align-items: center; gap: 8px; min-height: 44px; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  :is(.consent-rows, #exploitant, #consentement, #controles-exploitant, .exploitant-form) button:not(.fold):not(.q) { min-height: 44px; }
  #controles-exploitant summary { display: flex; align-items: center; min-height: 44px; }
  /* champ de l'établissement : 16 px (pas de zoom du téléphone, Recette T2) et 44 px ; « #_ » donne à :is() le poids d'un
     identifiant, au-dessus de la règle générale des champs (§12) */
  :is(.exploitant-form, #_) select { font-size: 16px; min-height: 44px; }
}

/* infobulle des icônes du menu réduit, bulle des aides « ? » */
.tip-nav { position: fixed; z-index: 50; padding: 5px 9px; border-radius: var(--radius-control); background: var(--nav-active-bg); color: var(--nav-active-ink); font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-float); }
.tip-nav[hidden], .pop[hidden] { display: none; }
.q { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0; border: 1px solid var(--control); border-radius: 50%; background: transparent; color: var(--muted); font: 700 11px/1 var(--font); vertical-align: 1px; cursor: pointer; }
.q:hover, .q[aria-expanded="true"] { border-color: var(--brand); color: var(--text); }
.pop { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); font-size: 13px; line-height: 19px; box-shadow: var(--shadow-float); }

/* en-tête : titre, recherche, actions ; puis le choix de la période */
.rf .top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rf .title { flex: 1 1 280px; min-width: 0; }
.rf .title h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.rf .title h1 .av { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; font-size: 12px; font-weight: 700; vertical-align: 2px; letter-spacing: 0; background: hsl(var(--h) 45% 82%); color: hsl(var(--h) 45% 22%); }
.rf .title p { margin: 0; color: var(--muted); }
.rf .crumbs { margin: 0 0 2px; color: var(--muted); font-size: 13px; }
.rf .crumbs a { color: inherit; text-decoration: none; }
.rf .crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rf .search { flex: 0 1 380px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 10px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); }
.rf .search:focus-within { border-color: var(--brand); }
.rf .search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.rf .search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: 0; }
.rf .search input::placeholder { color: var(--faint); }
.rf .search kbd { font: 11px var(--font); color: var(--faint); padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; white-space: nowrap; }
.rf .head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.period-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: -4px 0 0; }
.period-bar .pb-label { color: var(--muted); font-size: 13px; }
.period-bar .meta { color: var(--faint); font-size: 12px; }
.period-bar .warn-note { color: var(--pill-warning-ink); font-size: 12px; }
.period-bar details { position: relative; }
.period-bar details > summary { list-style: none; cursor: pointer; color: var(--brand-ink); font-size: 13px; }
.period-bar details > summary::-webkit-details-marker { display: none; }
.period-bar .pb-more { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; gap: 8px; min-width: 240px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-float); }
.period-bar .pb-more a { color: var(--text); text-decoration: none; font-size: 13px; }
.period-bar .pb-more a[aria-current] { font-weight: 700; }
.period-bar .pb-more form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: 13px; color: var(--muted); }
.period-bar .pb-more input { height: 30px; padding: 0 6px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--ground); color: var(--text); font: inherit; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 2px; border-radius: var(--radius-control); background: var(--raised); }
.seg > a, .seg > button { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 13px var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.seg > [aria-pressed="true"], .seg > [aria-current] { background: var(--active); color: var(--text); font-weight: 500; }

@media (max-width: 860px) {
  .app, :root[data-nav="icons"] .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; transform: translateX(-100%); transition: transform .25s; border-right: 0; }
  .side.open { transform: none; }
  :root[data-nav="icons"] .side .lbl, :root[data-nav="icons"] .side .switcher small { display: block; }
  :root[data-nav="icons"] .side { align-items: stretch; }
  :root[data-nav="icons"] .side .nav { width: auto; justify-content: flex-start; padding: 0 10px; }
  :root[data-nav="icons"] .side .nav.sub { display: flex; padding-left: 40px; }
  :root[data-nav="icons"] .side .group { display: block; }
  .side .close { display: inline-flex; }
  .side .collapse { display: none; }
  .main { padding: 0 16px 80px; }
  .phonebar { display: flex; align-items: center; gap: 8px; height: 48px; margin: 0 -16px 12px; padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--surface); font-weight: 500; }
  .main.rf .phonebar { margin-bottom: 0; }
  .phonebar button { height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
  .rf .search { flex-basis: 100%; order: 3; }
}
@media (max-width: 520px) { .rf .search kbd { display: none; } }
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* ---------- 4. blocs des pages refaites ---------- */
.rf :is(h1, h2, h3, p, ul) { margin: 0; }
.rf ul { padding: 0; list-style: none; }
.rf a { color: inherit; text-decoration: none; }
.rf button, .rf input, .rf select { font: inherit; color: inherit; }
.rf svg { display: block; }
.rf :is(.num, .stat-val, td) { font-variant-numeric: tabular-nums; }
.rf .meta { color: var(--faint); font-size: 12px; }
.rf .link { color: var(--brand-ink); font-size: 13px; font-weight: 500; }
.rf .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rf sup { font-size: .7em; line-height: 0; }
.rf .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
.rf .btn:hover { background: var(--raised); }
.rf .btn.primary { border-color: transparent; background: var(--primary); color: var(--primary-ink); }
.rf .btn.primary:hover { filter: brightness(1.08); }
.rf .btn.ghost { border-color: transparent; background: transparent; }
.rf .btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.rf .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; min-width: 0; container-type: inline-size; }
.rf .ch { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rf :is(.ch, .sec) h2 { font-size: 16px; line-height: 22px; font-weight: 500; }
.rf .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }
.rf .pill.pos { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.rf .pill.neg { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.rf .pill.warn { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.rf .pos-t { color: var(--positive); } .rf .neg-t { color: var(--negative); }
.rf .late { color: var(--pill-warning-ink); }
.rf .sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }

/* chiffres clés : le premier domine ; une seule carte sur l'accent (rendement) */
.rf .stats { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.rf .stats.n3 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.rf .stats.n5 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); }
.rf .stat { display: grid; gap: 4px; align-content: start; }
.rf .stat .k { color: var(--muted); font-size: 13px; }
.rf .stat .stat-val { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.rf .stat .stat-val small { font-size: .6em; font-weight: 500; color: var(--muted); margin-left: 3px; }
.rf .stat .s { color: var(--faint); font-size: 12px; line-height: 16px; }
.rf .stat .s.late { color: var(--pill-warning-ink); }
.rf .stat .link { margin-top: 2px; justify-self: start; font-size: 12.5px; }
.rf .stat.lead .stat-val { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -0.025em; margin: 2px 0; }
.rf .stat.lead .s { color: var(--muted); }
.rf .stat.accent { background: var(--primary); border-color: transparent; color: var(--primary-ink); }
.rf .stat.accent :is(.k, .s, .stat-val small, .link) { color: var(--primary-ink); }
.rf .stat.accent .stat-val { font-size: 30px; line-height: 36px; }
.rf .stat.accent .q { border-color: color-mix(in srgb, var(--primary-ink) 55%, transparent); color: var(--primary-ink); }

/* rangées de cartes */
.rf .row { display: grid; gap: 12px; align-content: start; }
.rf .r2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .9fr); }
.rf .r3 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .9fr); }
.rf .r2p { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.rf .r2e { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* évolution : trois repères puis la courbe */
.rf .marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.rf .marks > div { padding: 8px 10px; border-radius: var(--radius-control); background: var(--raised); min-width: 0; }
.rf .marks p { color: var(--muted); font-size: 12px; line-height: 16px; }
.rf .marks b { font-size: 16px; white-space: nowrap; }
.rf .marks .pill { margin-left: 4px; }
.rf .marks .mk-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 2px; }
.rf .marks .mk-v .pill { margin-left: 0; font-size: 14px; padding: 1px 8px; }
.rf .marks .mk-amt { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf .chart { min-width: 0; }
.rf .chart-note { margin-top: 8px; color: var(--faint); font-size: 12px; }

/* jauge d'objectif */
.rf .gauge { position: relative; max-width: 240px; margin: 2px auto 0; }
.rf .gauge svg { width: 100%; height: auto; }
.rf .gauge .c { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.rf .gauge .c b { display: block; font-size: 28px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rf .gauge .c span { color: var(--muted); font-size: 12px; }
.rf .gauge-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 12px 0 0; }
.rf .gauge-kv :is(dt, dd) { margin: 0; padding: 6px 0; border-top: 1px solid var(--rule); }
.rf .gauge-kv dt { color: var(--muted); }
.rf .gauge-kv dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* famille : montant et part de chaque titulaire */
.rf .fam-list { display: grid; gap: 2px; }
.rf .fam-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.rf .fam-list li + li { border-top: 1px solid var(--rule); }
.rf .fam-list li > a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.rf .fam-list li > a:hover span:not(.av) { text-decoration: underline; text-underline-offset: 3px; }
.rf .fam-list .av { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: hsl(var(--h) 45% 82%); color: hsl(var(--h) 45% 22%); }
.rf .fam-list small { display: block; color: var(--faint); font-size: 12px; line-height: 16px; }
.rf .fam-list b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rf .fam-list b small { font-weight: 400; }
.rf .fam-sum { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.rf .fam-sum p { color: var(--faint); font-size: 12px; }
.rf .fam-sum b { font-size: 18px; }

/* répartition : onglets, anneau, légende cliquable, lignes d'une part dessous */
.rf .tabs-row { margin: -4px 0 14px; }
.rf .mix-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; }
.rf .ring { position: relative; width: 132px; }
.rf .ring .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 22px; }
.rf .ring .c b { font-size: 20px; font-weight: 700; }
.rf .ring .c span { color: var(--muted); font-size: 12px; line-height: 15px; }
.rf .legend { display: grid; gap: 2px; }
.rf .legend li + li { border-top: 1px solid var(--rule); }
/* parts au-delà des cinq premières (zones, secteurs, établissements) : une ligne « Autres … (n) » dépliable (§14) */
.rf .fold-rest .leg-rest { display: none; }
.rf .fold-rest.show-rest .leg-rest { display: block; }
.rf .fold-rest .leg-rest .leg { padding-left: 18px; color: var(--muted); }
.rf .leg-other .leg span:first-of-type::after { content: " ▾"; color: var(--faint); }
.rf .leg-other .leg[aria-expanded="true"] span:first-of-type::after { content: " ▴"; }
.rf .leg { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 48px; gap: 10px; align-items: center; width: 100%; padding: 6px 4px; border: 0; border-radius: var(--radius-control); background: transparent; text-align: left; cursor: pointer; }
.rf .leg:hover { background: var(--raised); }
.rf .leg[aria-expanded="true"] { background: var(--active); }
.rf .leg i { width: 10px; height: 10px; border-radius: 2px; }
.rf .leg span:nth-of-type(2), .rf .leg span:nth-of-type(3) { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rf .leg span:nth-of-type(3) { color: var(--muted); }
.rf .mix-note { margin-top: 10px; color: var(--faint); font-size: 12px; line-height: 16px; }
.rf .drill { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.rf .drill[hidden] { display: none; }
.rf .drill header { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.rf .drill header span { flex: 1; color: var(--muted); font-size: 13px; }

/* tableaux de détail */
.rf :is(.drill-table, .perf-table, .pos-table, .ops-table, .bridge-table, .acc-table) { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rf :is(.drill-table, .perf-table, .ops-table) :is(th, td) { padding: 8px 6px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.rf :is(.drill-table, .perf-table, .ops-table) thead th { border-top: 0; color: var(--faint); font-size: 12px; font-weight: 400; white-space: nowrap; }
.rf :is(.drill-table, .perf-table, .ops-table) :is(th, td):first-child { padding-left: 0; }
.rf :is(.drill-table, .perf-table, .ops-table) :is(th, td):last-child { padding-right: 0; }
.rf :is(.drill-table, .perf-table, .ops-table, .pos-table) .n { text-align: right; white-space: nowrap; }
.rf :is(.drill-table, .ops-table, .pos-table) td small { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; line-height: 16px; white-space: normal; }
.rf :is(.drill-table, .pos-table, .ops-table) a { color: var(--text); }
.rf :is(.drill-table, .pos-table, .ops-table) a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rf :is(.perf-table, .pos-table) .sw { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 2px; }
.rf .perf-table tr.rest td { color: var(--muted); }
.rf .perf-table tfoot td { border-top: 1px solid var(--text); font-weight: 700; }
.rf .ops-table .tag { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); font-size: 12px; white-space: nowrap; }

/* blocs repliés */
.rf details.r-fold { margin-top: 14px; border-top: 1px solid var(--border); }
.rf details.r-fold > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0 2px; list-style: none; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--text); }
.rf details.r-fold > summary::-webkit-details-marker { display: none; }
.rf details.r-fold > summary::before { content: ""; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.rf details.r-fold[open] > summary::before { transform: rotate(45deg); }
.rf details.r-fold > summary:hover { color: var(--brand-ink); }
.rf details.r-fold > summary .meta { font-weight: 400; }
.rf details.r-fold > :not(summary) { margin-top: 10px; }
.rf .card.folded { padding-top: 4px; padding-bottom: 14px; }
.rf .card.folded > details.r-fold { margin-top: 0; border-top: 0; }
.rf .card.folded > details.r-fold > summary { font-size: 16px; line-height: 22px; padding-top: 12px; }

/* mouvements récents : flux de capitaux en neutre, frais en rouge */
.rf .moves li { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; }
.rf .moves li + li { border-top: 1px solid var(--rule); }
.rf .moves .bar { width: 3px; height: 30px; border-radius: 2px; background: var(--control); }
.rf .moves .bar.neg { background: var(--negative); }
.rf .moves b { font-weight: 500; }
.rf .moves small { display: block; color: var(--faint); font-size: 12px; line-height: 16px; }

/* à traiter : un point coloré, le texte, l'action */
.rf .todo-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 10px 0; }
.rf .todo-list li:first-child { padding-top: 0; }
.rf .todo-list li + li { border-top: 1px solid var(--rule); }
.rf .todo-list i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.rf .todo-list li.warn i { background: var(--warning); }
.rf .todo-list li.neg i { background: var(--negative); }
.rf .todo-list b { font-weight: 500; }
.rf .todo-list p { color: var(--muted); font-size: 13px; line-height: 18px; margin-top: 2px; }
.rf .todo-list .btn { grid-column: 2; justify-self: start; margin-top: 6px; }

/* liste des comptes groupée par titulaire */
.rf .card.accounts { display: block; padding: 4px 20px 8px; }
.rf .acc-table :is(th, td) { padding: 10px 8px; text-align: left; vertical-align: top; }
.rf .acc-table :is(th, td):first-child { padding-left: 0; }
.rf .acc-table :is(th, td):last-child { padding-right: 0; }
.rf .acc-table .n { text-align: right; white-space: nowrap; }
.rf .acc-table thead th { padding-top: 14px; color: var(--faint); font-size: 12px; font-weight: 400; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rf .acc-table thead .q { margin-left: 4px; }
.rf .acc-table tr.grp th { padding-top: 18px; padding-bottom: 6px; font-weight: 500; }
.rf .acc-table tr.grp a { color: var(--text); }
.rf .acc-table tr.grp a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rf .acc-table tr.grp .av { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; font-size: 10px; font-weight: 700; vertical-align: -5px; background: hsl(var(--h) 45% 82%); color: hsl(var(--h) 45% 22%); }
.rf .acc-table tr.grp small { margin-left: 8px; color: var(--faint); font-size: 12px; font-weight: 400; }
.rf .acc-table tr.line td { border-top: 1px solid var(--rule); cursor: pointer; }
.rf .acc-table tr.line:hover td { background: var(--raised); }
.rf .acc-table tr.line a { color: var(--muted); }
.rf .acc-table tr.line a b { color: var(--text); font-weight: 500; }
.rf .acc-table tr.line a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rf .acc-table td small { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; line-height: 16px; }
.rf .acc-table td small.late { color: var(--pill-warning-ink); }
.rf .acc-table tr.subtotal td { border-top: 1px solid var(--border); color: var(--muted); font-weight: 500; }
.rf .acc-table tr.subtotal td.n { color: var(--text); }
.rf .acc-table tfoot td { border-top: 1px solid var(--text); font-weight: 700; }
.rf .st { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; vertical-align: 1px; background: var(--positive); }
.rf .st.warn { background: var(--warning); }
.rf .st.neg { background: var(--negative); }
.rf .meta.pad { padding: 14px 0; }

/* tableau des positions */
.rf .pos-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin-bottom: 14px; }
.rf .ctl { display: grid; gap: 4px; min-width: 0; }
.rf .ctl[hidden] { display: none; }
.rf .ctl > span { color: var(--faint); font-size: 12px; }
.rf .ctl.filter { flex: 1 1 180px; max-width: 260px; }
.rf .ctl :is(input, select) { height: 32px; padding: 0 8px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: 13px var(--font); min-width: 0; }
.rf .ctl input { width: 100%; }
.rf .pair { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.rf .pair label { display: inline-flex; align-items: center; gap: 6px; }
.rf .pos-lead { margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius-control); background: var(--raised); font-size: 13.5px; line-height: 20px; }
.rf .pos-lead b { font-weight: 500; }
.rf .pos-note { margin-top: 12px; color: var(--faint); font-size: 12px; line-height: 17px; }
.rf .pos-note .pill { margin-right: 4px; }
.rf .pos-table :is(th, td) { padding: 9px 8px; text-align: left; vertical-align: top; }
.rf .pos-table :is(th, td):first-child { padding-left: 0; }
.rf .pos-table :is(th, td):last-child { padding-right: 0; }
.rf .pos-table thead th { color: var(--faint); font-size: 12px; font-weight: 400; white-space: nowrap; border-bottom: 1px solid var(--border); }
/* tri des positions (R21) : en-têtes cliquables au PC, boutons « Trier par » quand les lignes sont empilées */
.rf .pos-table .th-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.rf .pos-table .th-sort:hover, .rf .pos-table [aria-sort] .th-sort { color: var(--text); }
.rf .pos-sort { display: none; }
.rf .pos-table tr.p-grp :is(th, td) { padding-top: 16px; font-weight: 500; border-bottom: 1px solid var(--border); }
.rf .pos-table tr.p-grp th small { margin-left: 8px; color: var(--faint); font-size: 12px; font-weight: 400; }
.rf .pos-table tr.p-line td { border-top: 1px solid var(--rule); }
.rf .pos-table tr.p-grp + tr.p-line td { border-top: 0; }
.rf .pos-table tr.p-more td { padding-top: 4px; }
.rf .pos-table .link { border: 0; background: none; padding: 0; cursor: pointer; }
.rf .pos-table tfoot td { border-top: 1px solid var(--border); color: var(--muted); }
.rf .pos-table tfoot tr:last-child td { border-top: 1px solid var(--text); color: var(--text); font-weight: 700; }
.rf .pos-table tfoot tr.p-rest + tr.p-rest td { border-top: 1px solid var(--rule); }
.rf .fx { display: inline-flex; align-items: center; gap: 8px; }
.rf .fx .trk { position: relative; width: 84px; height: 8px; border-radius: 2px; background: var(--raised); }
.rf .fx .trk::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--control); }
.rf .fx .trk i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--positive); }
.rf .fx .trk i.neg { background: var(--negative); }
.rf .fx > span:last-child { min-width: 76px; text-align: right; }
.rf .cp { display: inline-flex; gap: 3px; margin-left: 6px; }
.rf .cp i { width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.rf .cp i.miss { background: transparent; border: 1.5px solid var(--negative); }

/* du brut au net */
.rf .bridge-table td { padding: 10px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.rf .bridge-table tr:first-child td { border-top: 0; }
.rf .bridge-table td.n { text-align: right; white-space: nowrap; padding-left: 12px; }
.rf .bridge-table td small { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; line-height: 16px; }
.rf .bridge-table tr.total td { border-top: 1px solid var(--text); font-weight: 700; }
.rf .bridge-table tr.total td:first-child { font-weight: 500; }
.rf .bridge-table tr.base td { color: var(--muted); }
.rf .bridge-table tr.sub td { color: var(--muted); border-top: 1px solid var(--border); }

/* effet du crédit */
.rf .lev-rows { display: grid; gap: 12px; }
.rf .lev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: baseline; }
.rf .lev-row .bar { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 2px; background: var(--raised); }
.rf .lev-row .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--chart-muted); }
.rf .lev-row .bar i.neg { background: var(--negative); }
.rf .lev-row.net .bar i { background: var(--chart-1); }
.rf .lev-row.net span:first-child { font-weight: 500; }
.rf .lev-row b { font-weight: 500; }
.rf .lev-row.net b { font-weight: 700; }
.rf .lev-sum { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.rf .lev-sum b { font-size: 20px; font-weight: 700; }
.rf .lev-sum p { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; line-height: 18px; }

/* crédit */
.rf .usage { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rf .usage span { color: var(--muted); font-size: 13px; }
.rf .usage b { font-size: 22px; font-weight: 700; }
.rf .kv { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(62%); margin: 10px 0 0; }   /* une valeur longue ne mange plus la colonne des libellés (Recette, 03/11) */
.rf .kv :is(dt, dd) { margin: 0; padding: 7px 0; border-top: 1px solid var(--rule); }
.rf .kv dt { color: var(--muted); }
.rf .kv dd { text-align: right; font-weight: 500; padding-left: 12px; overflow-wrap: break-word; min-width: 0; }

/* frais trimestre par trimestre : la barre est le prélèvement, le trait l'attendu selon les conditions */
.rf .q-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.rf .q-key span { display: inline-flex; align-items: center; gap: 6px; }
.rf .q-key .k-bar { width: 14px; height: 8px; border-radius: 2px; background: var(--text); }
.rf .q-key .k-over { width: 14px; height: 8px; border-radius: 2px; background: var(--negative); }
.rf .q-key .k-tick { width: 4px; height: 12px; background: var(--surface); border: 1px solid var(--text); }
.rf .q-rows { display: grid; gap: 12px; }
.rf .q-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rf .q-row .lbl { color: var(--muted); font-size: 13px; }
.rf .q-row .trk { position: relative; height: 10px; }
.rf .q-row .trk i { position: absolute; inset: 0 auto 0 0; background: var(--text); border-radius: 2px; }
.rf .q-row .trk i.over { background: var(--negative); border-radius: 0 2px 2px 0; }
.rf .q-row .trk s { position: absolute; top: -4px; bottom: -4px; width: 4px; background: var(--surface); border: 1px solid var(--text); }
.rf .q-row .v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf .q-row .v span { display: block; color: var(--muted); font-size: 12px; }
.rf .q-total { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.rf .q-total b { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; }
.rf .q-total b.over { color: var(--negative); }
.rf .q-total .sub { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.rf .terms { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 12px 0 0; }
.rf .terms :is(dt, dd) { margin: 0; padding: 7px 0; border-top: 1px solid var(--rule); }
.rf .terms dt { color: var(--muted); }
.rf .terms dd { text-align: right; padding-left: 12px; }
.rf .terms .src { grid-column: 1 / -1; border-top: 0; padding-top: 0; text-align: left; color: var(--faint); font-size: 12px; }

/* caractéristiques, poches, documents */
.rf .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; margin: 0; }
.rf .facts div { padding: 8px 0; border-top: 1px solid var(--rule); min-width: 0; }
.rf .facts dt { color: var(--faint); font-size: 12px; }
.rf .facts dd { margin: 0; overflow-wrap: anywhere; }
.rf .docs-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); }
.rf .docs-list li:first-child { border-top: 0; }
.rf .docs-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rf .docs-list small { color: var(--faint); font-size: 12px; white-space: nowrap; }
.rf .poche-bar { display: flex; height: 10px; gap: 2px; margin: 4px 0 12px; }
.rf .poche-bar span { border-radius: 2px; }
.rf .meta-text { color: var(--muted); font-size: 13.5px; line-height: 20px; }
.rf .ok-msg { padding: 8px 12px; border-radius: var(--radius-control); background: var(--pill-positive-bg); color: var(--pill-positive-ink); font-size: 13px; }

/* ---------- largeurs : jamais de défilement horizontal ---------- */
@media (max-width: 1320px) {
  .rf .r2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .rf .r2 > :last-child { grid-column: 1 / -1; }
  .rf .r3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rf .r3 > :last-child { grid-column: 1 / -1; }
  .rf .stats.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf .stats.n5 > :first-child { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .rf .stats, .rf .stats.n3, .rf .stats.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf .stats.n3 > :first-child, .rf .stats.n5 > :first-child { grid-column: 1 / -1; }
  .rf .r2p, .rf .r2e { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) { .rf .r2, .rf .r3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .rf .stats, .rf .stats.n3, .rf .stats.n5 { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 640px) {
  .rf .acc-table thead { display: none; }
  .rf .acc-table :is(tr.line, tr.subtotal, tfoot tr) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 4px; padding: 10px 0; border-top: 1px solid var(--rule); }
  .rf .acc-table :is(tr.line, tr.subtotal, tfoot tr) td { border: 0; padding: 0; }
  .rf .acc-table :is(tr.line, tr.subtotal, tfoot tr) td:first-child { grid-column: 1 / -1; margin-bottom: 2px; }
  .rf .acc-table td.n { text-align: left; }
  .rf .acc-table td.n::before { content: attr(data-l); display: block; color: var(--faint); font-size: 11.5px; font-weight: 400; }
  .rf .acc-table tr.grp th { display: block; }
  .rf .acc-table tfoot tr { border-top: 1px solid var(--text); }
  .rf .pos-table thead { display: none; }
  .rf .pos-sort { display: flex; }
  /* lignes empilées : nom, puis valeur et part, puis effet des cours, cours, achats / ventes (R21) */
  .rf .pos-table tr:not(.p-more) td:nth-child(5) { order: 1; }
  .rf .pos-table tr:not(.p-more) td:nth-child(6) { order: 2; }
  .rf .pos-table tr:not(.p-more) td:nth-child(3) { order: 3; }
  .rf .pos-table tr:not(.p-more) td:nth-child(2) { order: 4; }
  .rf .pos-table tr:not(.p-more) td:nth-child(4) { order: 5; }
  .rf .pos-table tr:not(.p-grp):not(.p-more) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 4px; padding: 9px 0; border-top: 1px solid var(--rule); }
  .rf .pos-table tr:not(.p-grp):not(.p-more) td { border: 0; padding: 0; }
  .rf .pos-table tr:not(.p-grp):not(.p-more) td:first-child { grid-column: 1 / -1; margin-bottom: 2px; }
  .rf .pos-table td:empty { display: none; }
  .rf .pos-table td.n { text-align: left; white-space: normal; }
  .rf .pos-table td.n::before { content: attr(data-l); display: block; color: var(--faint); font-size: 11.5px; font-weight: 400; }
  .rf .pos-table tr.p-grp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 4px; padding: 14px 0 8px; border-bottom: 1px solid var(--border); }
  .rf .pos-table tr.p-grp :is(th, td) { padding: 0; border: 0; }
  .rf .pos-table tr.p-grp th { grid-column: 1 / -1; }
  .rf .pos-table tfoot tr:last-child { border-top: 1px solid var(--text); }
  .rf .fx { display: flex; }
  .rf .fx .trk { width: 56px; }
  .rf .fx > span:last-child { min-width: 0; text-align: left; }
}
@container (max-width: 420px) {
  .rf .marks { grid-template-columns: minmax(0, 1fr); }
  .rf .mix-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rf .legend { width: 100%; }
  .rf :is(.drill-table, .perf-table, .ops-table) thead { display: none; }
  .rf :is(.drill-table, .perf-table, .ops-table) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 4px; padding: 9px 0; border-top: 1px solid var(--rule); }
  .rf :is(.drill-table, .perf-table, .ops-table) td { border: 0; padding: 0; }
  .rf :is(.drill-table, .perf-table, .ops-table) td:first-child { grid-column: 1 / -1; margin-bottom: 2px; }
  .rf :is(.drill-table, .perf-table, .ops-table) td:empty { display: none; }
  .rf :is(.drill-table, .perf-table, .ops-table) td.n { text-align: left; white-space: normal; }
  .rf :is(.drill-table, .perf-table, .ops-table) td.n::before { content: attr(data-l); display: block; color: var(--faint); font-size: 11.5px; font-weight: 400; }
  .rf .perf-table tfoot tr { border-top: 1px solid var(--text); }
  .rf .q-row { grid-template-columns: 56px minmax(0, 1fr); }
  .rf .q-row .v { grid-column: 2; text-align: left; }
}

/* Légende des graphiques (charts.js) : ici et non injectée par le script (CSP style-src 'self'). */
:where(.chart-legend){list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;line-height:16px;color:var(--muted,#5f6368)}
:where(.chart-legend li){display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
:where(.chart-legend svg){flex:none;overflow:visible}
@media (max-width:480px){:where(.chart-legend){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Bloc utilisateur en bas du menu (29/10/2026) : identifiant, famille ouverte, menu au clic ; thème en un clic à côté. */
.side .user-block { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.side .user-pick { position: relative; flex: 1 1 auto; min-width: 0; }
.side .user-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-radius: var(--radius-control); }
.side .user-sum::-webkit-details-marker { display: none; }
.side .user-sum:hover, .side .user-pick[open] > .user-sum { background: var(--raised); }
.side .user-av { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--raised); color: var(--text); border: 1px solid var(--border); }
.side .user-sum .lbl { min-width: 0; flex: 1 1 auto; }
.side .user-sum b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .user-sum small { display: block; color: var(--muted); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .user-sum .chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.side .user-pop { position: absolute; left: 0; right: -46px; bottom: calc(100% + 6px); z-index: 45; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.side .look-form { flex: none; }
.side .look-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--muted); cursor: pointer; }
.side .look-toggle:hover { background: var(--raised); color: var(--text); }
.side .look-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root[data-nav="icons"] .side .user-block { flex-direction: column; border-top: 0; }
:root[data-nav="icons"] .side .user-sum { padding: 4px; }
:root[data-nav="icons"] .side .user-sum .chev, :root[data-nav="icons"] .side .look-form { display: none; }
:root[data-nav="icons"] .side .user-pop { left: calc(100% + 8px); right: auto; bottom: 0; width: 220px; }
:root[data-nav="icons"] .side .user-pop .lbl { display: inline; }
:root[data-nav="icons"] .side .user-pop .nav { width: 100%; justify-content: flex-start; padding: 0 10px; }

/* Écran « Paramètres » (29/10/2026) : rubriques à gauche, contenu à droite ; une colonne sur téléphone. */
.set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.set-nav { position: sticky; top: 16px; display: grid; gap: 2px; min-width: 0; }
.set-nav .set-search { height: 34px; margin-bottom: 10px; padding: 0 10px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--ground); color: var(--text); font: inherit; min-width: 0; width: 100%; }
.set-nav .set-h { margin: 14px 8px 4px; color: var(--faint); font-size: 12px; }
.set-nav .set-h:first-of-type { margin-top: 0; }
.set-nav .set-i { display: block; padding: 6px 8px; border-radius: var(--radius-control); color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.set-nav .set-i.sub { padding-left: 16px; font-size: 13.5px; }
.set-nav .set-i:hover { background: var(--raised); color: var(--text); }
.set-nav .set-i.on { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 500; }
.set-body { min-width: 0; }
.set-body .param-tabs { display: none; }   /* les onglets du paramétrage sont les sous-rubriques « Famille » à gauche */
.set-soon p { margin: 0 0 6px; }
.set-glossaire dl { margin: 0; display: grid; gap: 12px; }
.set-glossaire dt { font-weight: 600; }
.set-glossaire dd { margin: 2px 0 0; color: var(--muted); }
@media (max-width: 860px) { .set-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } .set-nav { position: static; } }
.set-nav [hidden], .set-glossaire [hidden] { display: none; }

/* Champs de saisie et cases à cocher (note de charte §12, 29/10/2026) : un champ se voit sans y entrer (bordure
   --field-border, contraste ≥ 3:1), fond plus sombre que le bloc, focus marqué, erreur en couleur d'alerte. Toutes
   les pages, pas seulement celles de la refonte. */
body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]), select, textarea) {
  min-height: 38px; padding: 0 10px; border: 1px solid var(--field-border); border-radius: 6px; background: var(--ground); color: var(--text); font: inherit; max-width: 100%; }
body textarea { padding: 8px 10px; min-height: 76px; }
body :is(input, select, textarea)::placeholder { color: var(--faint); }
body :is(input, select, textarea):hover:not(:disabled) { border-color: var(--muted); }
body :is(input, select, textarea, button, a):focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); }
body :is(input, select, textarea):disabled { opacity: .55; }
body :is(input, select, textarea).is-invalid { border-color: var(--negative); }
body input:is([type=checkbox], [type=radio]) { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-height: 0; margin: 0 6px 0 0; padding: 0; flex: none; vertical-align: -3px;
  border: 1.5px solid var(--field-border); border-radius: 4px; background: var(--ground) center / 12px 12px no-repeat; cursor: pointer; }
body input[type=radio] { border-radius: 50%; }
body input:is([type=checkbox], [type=radio]):checked { background-color: var(--primary); border-color: var(--primary); }
body input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body input[type=radio]:checked { box-shadow: inset 0 0 0 3px var(--ground); }
/* Message de validation du site (forms.js) sous le champ, couleur d'alerte, ton neutre. */
.field-error { display: block; margin: 4px 0 0; color: var(--negative); font-size: 12.5px; line-height: 16px; }
p.hint { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 18px; }
.side .user-who { margin: 2px 8px 6px; display: grid; }
.side .user-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .user-who small { color: var(--muted); font-size: 12px; }
.side .user-pop .fam-pick { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.side .user-pop .fam-pop { position: static; padding: 0 2px; border: 0; background: none; box-shadow: none; }
:root[data-nav="icons"] .side .user-block .look-form { display: block; }
:root[data-nav="icons"] .side .user-pop .user-who small, :root[data-nav="icons"] .side .user-pop .fam-pop { display: grid; }
.set-tabs { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.set-tabs a { padding: 8px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.set-tabs a:hover { color: var(--text); }
.set-tabs a.on { color: var(--text); border-bottom-color: var(--brand); font-weight: 500; }
.set-line { margin: 0; color: var(--muted); }
details.param-manques { margin: 0 0 12px; color: var(--muted); }
.side .fam-noaccess { display: block; padding: 5px 6px; color: var(--faint); }
/* Cartes internes posées sur un bloc (chiffres de l'évolution, sélecteurs de période, onglets) : --raised et bordure
   intérieure 1 px --border (note de charte §13). */
.seg, .rf .marks > div, .rf .pos-lead { box-shadow: inset 0 0 0 1px var(--border); }
/* Premier écran (29/10/2026) : « À traiter » en une ligne discrète ; Répartition et Apports et retraits côte à côte,
   chaque carte à la hauteur de son contenu. */
.rf .todo-line { margin: -4px 0 14px; font-size: 13px; }
.rf .todo-line a { color: var(--muted); text-decoration: none; }
.rf .todo-line a:hover { color: var(--text); text-decoration: underline; }
.rf .r3m { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.rf .r2, .rf .r3, .rf .r2e { align-items: start; }
@media (max-width: 860px) { .rf .r3m { grid-template-columns: minmax(0, 1fr); } }
/* Apports et retraits : une ligne par mouvement sur écran large, deux en dessous de 768 px. */
@media (min-width: 768px) {
  .rf .moves li > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
  .rf .moves li > div small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Paramètres sur téléphone (écarts de la Recette, 30/10/2026) : la liste des rubriques se replie derrière la rubrique
   ouverte pour que le contenu arrive en haut ; lignes, onglets et champs touchables (44 px, texte des champs à 16 px :
   en dessous, l'iPhone agrandit la page à la saisie). */
.set-fold > summary { display: none; }
.set-list { display: grid; gap: 2px; min-width: 0; }
@media (max-width: 860px) {
  .set-fold > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--raised); cursor: pointer; list-style: none; }
  .set-fold > summary::-webkit-details-marker { display: none; }
  .set-fold > summary b { font-weight: 500; }
  .set-fold > summary::after { content: "▾"; margin-left: auto; color: var(--faint); }
  .set-fold[open] > summary::after { content: "▴"; }
  .set-fold[open] .set-list { margin-top: 8px; }
  .set-nav .set-i { display: flex; align-items: center; min-height: 44px; }
  .set-nav .set-search { height: 44px; }
  .set-tabs a { display: inline-flex; align-items: center; min-height: 44px; }
  /* même sélecteur que la règle des champs (§12), précédé de :root pour l'emporter */
  :root body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]), select, textarea) { font-size: 16px; min-height: 44px; }
}
/* Aides « ? » : toujours un rond de 18 px (dans une barre en flex, il s'étirait en rectangle : Recette T4) */
.q, .period-bar .q { flex: none; box-sizing: border-box; width: 18px; min-width: 18px; height: 18px; padding: 0; border: 1px solid var(--control); border-radius: 50%; background: transparent; }   /* .period-bar button (style.css) lui donnait 10 px de marge */
/* Gabarit sur téléphone (Recette du 30/10/2026, T2 et écarts mineurs) : tout ce qui se touche fait au moins 44 px de
   haut (choix de période, onglets, boutons, liens de menu, « Autres périodes », lignes des positions) ; les aides
   gardent leur rond de 18 px mais se touchent sur 44 px ; le menu ouvert passe au-dessus du bandeau de démonstration. */
@media (max-width: 860px) {
  .seg > a, .seg > button { height: 44px; }
  .period-bar details > summary { display: inline-flex; align-items: center; min-height: 44px; }
  .period-bar .pb-more a { display: flex; align-items: center; min-height: 44px; }
  .period-bar .pb-more input, .period-bar .pb-more select { height: 44px; }
  :is(.btn, .rf .btn, .rf .btn.sm) { height: auto; min-height: 44px; }
  .phonebar button { height: 44px; }
  .side { z-index: 60; }
  .side .nav, .side .nav.sub { min-height: 44px; }
  :root:has(.side.open) .demo-banner { display: none; }   /* menu ouvert : le bandeau collant ne recouvre plus sa tête */
  .main summary:not(.set-cur) { min-height: 44px; }
  .q { position: relative; }
  .q::after { content: ""; position: absolute; inset: -13px; }
  .rf :is(.pos-body, .drill-table) td a { display: inline-block; padding: 12px 0; }
  .rf .leg { min-height: 44px; }
  .main button:not(.q):not(.fold):not(.tip) { min-height: 44px; }
  .tip { position: relative; }
  .tip::after { content: ""; position: absolute; inset: -14px; }
  .main h3.foldable { display: flex; align-items: center; min-height: 44px; }   /* le titre entier replie le bloc ; la flèche est un repère */
  .rf a.link, .rf .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Choix à cocher sur téléphone : toute la ligne se touche (au moins 44 px), pas seulement la case de 16 px */
@media (max-width: 860px) {
  .main label:has(> input:is([type="radio"], [type="checkbox"])) { display: flex; align-items: center; gap: 8px; min-height: 44px; }
  .main .coffre-file { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
}
/* Tableaux à l'ancien style (Contrôles, Paramètres › Familles, Accès…) sur téléphone : lignes empilées, chaque valeur
   précédée du titre de sa colonne (refonte.js le recopie de l'en-tête) ; jamais de défilement horizontal. Derniers
   éléments touchables sous 44 px (bilan mobile de la Recette, 31/10/2026). */
@media (max-width: 600px) {
  .main :is(table.ledger, table.ledger > tbody, table.ledger > tbody > tr, table.ledger > tbody > tr > td) { display: block; width: auto; }
  .main table.ledger > thead { display: none; }
  .main table.ledger > tbody > tr { padding: 10px 0; border-top: 1px solid var(--rule); }
  .main table.ledger > tbody > tr > td { padding: 2px 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .main table.ledger > tbody > tr > td.hide-sm { display: none; }
  .main table.ledger > tbody > tr > td[data-l]:not(:first-child)::before { content: attr(data-l) " : "; color: var(--faint); font-size: 12px; }
  .main .table-wrap { overflow: visible; }
  .main .inline-form { flex-wrap: wrap; }
  .main :is(label, select, input:not([type="checkbox"]):not([type="radio"])) { max-width: 100%; min-width: 0; }
  .main select { width: 100%; }   /* une option longue ne doit plus élargir la page */
}
@media (max-width: 860px) {
  .main .sub a, .main .docs-list a, .chat-new, .cw-new { display: inline-flex; align-items: center; min-height: 44px; }
  input[type="file"] { min-height: 44px; font-size: 16px; }
  .st-modes label { display: inline-flex; align-items: center; min-height: 44px; }
  input[type="range"] { height: 44px; }
}
/* Liens dans un texte en petit (pièces citées, listes de comptes, liens d'aide) : touchables sur 44 px au téléphone */
@media (max-width: 860px) {
  .main :is(small, .note, .small, .meta, .hint) a, .main table.ledger td a { display: inline-block; padding: 14px 0; }
}
/* Paramètres en cartes (02/11/2026, à valider par Maxime) : l'accueil montre une carte par rubrique ; dans chaque
   rubrique, un bloc de réglage = une carte (coins et marges des pages en cartes), Mon compte compris depuis la fusion
   de la double authentification du canal 3 dans l'intégration (ff63ed1), sans toucher à son bloc. */
.set-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.set-card { display: grid; align-content: start; gap: 4px; min-height: 44px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.set-card:hover { border-color: var(--control); }
.set-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.set-card b { font-weight: 500; }
.set-card b::after { content: " ›"; color: var(--faint); }
.set-card span { color: var(--muted); font-size: 13px; line-height: 18px; }
.set-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.set-body .panel { margin: 0 0 14px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.set-body .panel > h3, .set-body .panel > summary h3 { margin-top: 0; font-size: 15px; font-weight: 500; }
@media (max-width: 560px) { .set-body .panel { padding: 16px; } }
/* « ? » dans un formulaire (Importer, Utilisateurs) : il reprenait le style des boutons de formulaire (pastille bleue) ;
   il reste le rond de 18 px à fond transparent des autres aides (Recette du 02/11) */
body form button.q { width: 18px; min-width: 18px; height: 18px; min-height: 0; padding: 0; border: 1px solid var(--control); border-radius: 50%; background: transparent; color: var(--muted); font: 700 11px/1 var(--font); }
/* « Autre période » sur téléphone : le volet des dates s'ouvre sur toute la largeur de la barre, jamais hors de l'écran
   (Recette du 02/11, 412 à 480 px) */
@media (max-width: 860px) {
  .period-bar { position: relative; }
  .period-bar details { position: static; }
  .period-bar .pb-more { left: 0; right: 0; min-width: 0; }
}
/* un champ masqué par un script (attribut hidden) reste masqué malgré l'affichage en grille des libellés (02/11/2026) */
.stack-form [hidden] { display: none !important; }
.societe-fields a.link { display: inline-flex; align-items: center; min-height: 44px; }   /* téléphone : 44 px (Recette du 02/11) */

/* infobulle des courbes (décision de Maxime du 03/11/2026) : repère vertical et point sur la courbe ; au téléphone,
   glisser le doigt sur une courbe la parcourt sans faire défiler la page de côté */
.tip-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.tip-dot { fill: var(--surface); stroke: var(--text); stroke-width: 2; pointer-events: none; }
.tip-zone, .linechart, .spark, .stk svg { touch-action: pan-y; }
/* volet « Autre période » (revalidation du 03/11/2026) : raccourcis, puis De et À en mois sur une ligne ; empilés au
   téléphone, sans débordement */
.period-bar .pb-more { min-width: 380px; }
.period-bar .pb-short { display: flex; gap: 6px; }
.period-bar .pb-short a.btn[aria-current] { border-color: var(--brand); color: var(--brand-ink); }
.period-bar .pb-more form.pb-free { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.period-bar .pb-free label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.period-bar .pb-free select { height: 32px; min-width: 110px; padding: 0 8px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--ground); color: var(--text); font: inherit; font-size: 13px; }
@media (max-width: 560px) {
  .period-bar .pb-more { min-width: 0; }
  .period-bar .pb-more form.pb-free { display: grid; grid-template-columns: 1fr; }
  .period-bar .pb-free select, .period-bar .pb-free .btn, .period-bar .pb-short a.btn { width: 100%; min-height: 44px; }
  .period-bar .pb-short a.btn { flex: 1; justify-content: center; }
}
/* Répartition : la base en ligne sous le titre, en gras, la fin en gris (revalidation du 03/11/2026) */
.mix-base { margin: -2px 0 10px; font-size: 14px; color: var(--text); }
/* vrai espace entre la ligne de base et la barre d'onglets, à toutes les largeurs (remarque sur le 8040, 03/11/2026) */
.rf .mix-base + .tabs-row { margin-top: 12px; }
.rf .t-mix .mix-base { margin-bottom: 12px; }   /* même espace avant le demi-cercle quand la barre d'onglets est masquée */
/* « Garder ou sortir » : pastilles dans le texte, lignes assez hautes pour qu'elles ne touchent pas les voisines */
.rf .st-card-syn { line-height: 28px; }
.rf .st-card-syn .pill { line-height: 18px; vertical-align: baseline; }
.rf .st-card-syn .syn-note { display: block; margin: 4px 0; line-height: 20px; }
.mix-base b { font-weight: 700; }
.mix-base span { font-weight: 400; color: var(--muted); }
/* Évolution : apport ou retrait important du mois sur la courbe (revalidation du 03/11/2026) */
.stk-flow { pointer-events: none; }
.stk-flow.up { fill: var(--positive); }
.stk-flow.down { fill: var(--negative); }
/* onglets de la Répartition : sur deux lignes au téléphone quand ils ne tiennent pas (revalidation du 03/11/2026) */
#mix-card .tabs-row .seg { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 560px) { #mix-card .tabs-row .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } #mix-card .tabs-row .seg > button { justify-content: center; } }
.rf .tabs-row[hidden] { display: none; }
/* « À faire » : toute la ligne mène au détail (R24, plus de bouton « Voir dans Contrôles ») ; un autre bouton reste au-dessus */
.rf .todo-list li.todo-link { position: relative; cursor: pointer; }
.rf .todo-list li.todo-link a.todo-detail::after { content: ""; position: absolute; inset: 0; }
.rf .todo-list li.todo-link .btn { position: relative; z-index: 1; }
.rf .fees-edit { margin: 4px 0 12px; }
/* N3 : lien vers la page de toute la famille, à droite du titre (passe dessous quand la place manque) */
.rf .top .top-link { margin-left: auto; align-self: flex-start; margin-top: 4px; white-space: nowrap; }
/* N4 : relevé attendu choisi depuis « À faire » : dit au-dessus du dépôt, sa ligne marquée dans « Relevés attendus » */
.rf .import-target { margin: 0 0 8px; padding: 8px 10px; border-radius: var(--radius-control); background: var(--raised); }
.rf .doc-rows li.is-target { box-shadow: inset 3px 0 0 var(--brand); padding-left: 8px; }