/* ═══════════════════════════════════════════════════════════════════════════
   Fynomia — identité visuelle

   Parti pris : un instrument de mesure, pas une brochure. Encre presque noire
   sur papier froid, un seul bleu électrique qui ne sert qu'au signal, des
   chiffres en caractères à chasse fixe pour qu'ils s'alignent au pixel, des
   filets épais plutôt que des ombres, et des titres en grotesque serrée qui
   assument le ton.

   La couleur ne décore jamais : vert et rouge veulent dire gagné et perdu,
   le bleu veut dire « ici », l'ambre veut dire « regardez ça ».
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Papier et encre.
     Le crème remplace le gris froid : il réchauffe la page sans la décorer,
     et fait tenir le noir profond sans le contraste violent d'un blanc pur. */
  --paper:      #F2F0E8;
  --surface:    #FFFFFF;
  --surface-2:  #FAF8F2;
  --ink:        #0E0F0C;
  --ink-2:      #24261F;
  --ink-3:      #4C4F45;
  --ink-4:      #7C7F72;
  --ink-5:      #A9ACA0;
  --rule:       #DCD9CD;
  --rule-strong:#0E0F0C;

  /* L'accent : un vert acide, emprunté au balisage de chantier.
     Il ne veut pas dire « bien », il veut dire « ici ». Il ne sert qu'à
     l'action en cours, au module ouvert et au bouton qui fait avancer. */
  --accent:     #D6F034;
  --accent-ink: #0E0F0C;
  --accent-dim: #B8CF2A;
  --accent-wash:#F2FAC9;

  /* Signal secondaire : le bleu ne décore plus, il relie les renvois. */
  --signal:     #1B3BFF;
  --signal-ink: #0F27C4;
  --signal-wash:#E6E9FF;

  /* Ce qui se travaille : le jaune, presque effacé.
     Une quatrième teinte avait été essayée — une prune — pour distinguer les
     réglages à affiner. Elle apportait un hue de plus à une palette qui en
     vivait très bien avec trois, et elle sortait du tableau. On garde donc les
     couleurs de la maison : le noir pour ce qui est actif, et le même jaune
     que partout ailleurs, dilué à quelques pour cent, pour teinter un fond
     sans jamais le colorer. */
  --tune:       var(--ink);
  --tune-ink:   var(--ink);
  --tune-wash:  rgba(214, 240, 52, .16);
  --tune-rule:  var(--rule);

  /* Sémantique : gagné, perdu, à surveiller */
  --gain:       #157A4A;
  --gain-wash:  #DCEFE2;
  --loss:       #C4142F;
  --loss-wash:  #FBE0E1;
  --warn:       #8A5A00;
  --warn-wash:  #F7EBCF;

  --display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* L'échelle des titres : un rôle, une valeur, partout.
     Il y en avait sept pour la même chose — un titre de bloc mesurait 15 px
     dans l'acquisition, 16 dans une carte, 17 dans la paie, 18 dans une liste,
     19 dans le tableau de bord, 21 dans l'analyse, 24 dans l'écran de
     validation. On lisait donc sept niveaux de hiérarchie là où il n'y a
     qu'une seule sorte de chose. Ces trois jetons sont désormais les seuls
     endroits où ces valeurs existent. */
  --t-block: 17px;      /* le titre d'un bloc : carte, panneau, section */
  --t-block-sub: 12.5px;/* la ligne qui l'explique, juste dessous */
  --t-row: 14.5px;      /* le titre d'une ligne à l'intérieur d'un bloc */

  /* Une application de travail, pas une affiche.
     L'interface avait été dessinée comme une page de présentation : un titre
     de module à 46 px, des onglets de 40 px, des cartes de 20 px de marge
     intérieure, des blocs séparés de 22 à 44 px. Sur un portable, on voyait
     un titre, trois onglets et le début d'une carte. Les tailles et les pas
     qui suivent sont les seuls à exister ; les composants les lisent. */
  --t-page: 36px;       /* le titre d'une page (H1) */
  --t-section: 22px;    /* le titre d'une section de page (H2) */
  --t-meta: 11.5px;     /* étiquettes, métadonnées, légendes */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --h-tab: 34px;        /* une barre d'onglets */
  --h-control: 36px;    /* un champ, un bouton courant */

  /* Largeurs : la page de travail d'abord. */
  --page-x: 28px;       /* marge latérale de la page */
  --page-top: 20px;     /* sous la barre du haut */
  --page-max: 1180px;   /* largeur utile */

  --rail-w: 204px;
  --live-w: 250px;
  --header-h: 48px;
  --impact-h: 62px;
  --space: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Pour ce qui prend de la place à l'écran : le mouvement s'amorce doucement,
     prend de la vitesse, puis se pose. C'est la courbe d'une porte lestée —
     rien ne jaillit, rien ne claque. */
  --ease-soft: cubic-bezier(.62, .02, .34, 1);
}

/* Trois paliers d'écran de bureau, pas un seul.
   Portable compact (jusqu'à 1440 px) : la barre latérale et les marges se
   resserrent, le titre de page descend d'un cran. Grand écran : la page
   s'élargit au lieu de flotter au milieu de deux bandes vides. */
@media (max-width: 1440px) {
  :root { --rail-w: 190px; --page-x: 24px; --page-top: 16px; --t-page: 32px; --space: 18px; }
}
@media (min-width: 1680px) {
  :root { --page-max: 1280px; --t-page: 38px; }
}
@media (min-width: 2200px) {
  :root { --page-max: 1440px; --page-x: 40px; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
  margin: 0; color: var(--ink);
  font-family: var(--display);
  font-weight: 700; letter-spacing: -.021em; line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: 30px; letter-spacing: -.028em; }
h2 { font-size: var(--t-block); }
h3 { font-size: 15px; }
h4 { font-size: 13px; }
p { margin: 0 0 10px; }
a { color: var(--signal-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 2px; }

/* Chiffres : chasse fixe partout où ils doivent s'aligner ou se comparer */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Étiquette d'instrument : petite, capitale, espacée */
.eyebrow, .rail-section, table.data thead th {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
}

.muted { color: var(--ink-4); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.pos { color: var(--gain); }
.neg { color: var(--loss); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }

/* ───────────────────────────── Charpente ─────────────────────────────── */
#app { min-height: 100dvh; }
/* Deux colonnes : la navigation, et la page. */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100dvh; }

.rail {
  color: var(--ink-5);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh;
  overflow-y: auto;
}
.rail-brand { align-items: center; }
.rail-section { color: #5D6871; padding: 14px 14px 4px; }
.rail-link .ico { width: 16px; text-align: center; flex: none; font-size: 13px; opacity: .8; }
.rail-link .badge-dot { margin-left: auto; flex: none; }
.rail-foot { padding-top: 14px; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--header-h); flex: none;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  display: flex; align-items: center; padding: 0 var(--space);
  position: sticky; top: 0; z-index: 40;
}
.topbar h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar > div { min-width: 0; }
.crumb {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.content {
  width: 100%; margin: 0 auto; flex: 1;
}
.page-head { margin-bottom: 22px; }
.page-head p { color: var(--ink-3); max-width: 66ch; margin: 8px 0 0; font-size: 14px; }

/* ───────────────────────────── Panneaux ──────────────────────────────── */
/* Pas d'ombre, pas de coin arrondi : un filet noir en tête suffit à dire
   « bloc ». La hiérarchie vient de l'épaisseur du filet, pas de la boîte. */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--rule-strong);
  min-width: 0;
}
.card-head, .panel-head {
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 10px;
}
.panel-head { display: block; }
.panel-sub { margin: 3px 0 0; }
.card-body, .panel-body { padding: 14px; }
.card-body.tight { padding: 12px 14px; }
.card.quiet, .panel.quiet { border-top-color: var(--rule); }

.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ───────────────────────────── Commandes ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--ink); background: var(--surface);
  color: var(--ink); font-weight: 500; font-size: 13.5px; cursor: pointer;
  transition: background .12s, color .12s, transform .06s;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--surface); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--accent-ink); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-3); }
.btn-ghost:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-quiet { border-color: var(--rule); color: var(--ink-3); background: var(--surface); font-size: 12px; }
.btn-quiet:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-danger { border-color: var(--loss); color: var(--loss); }
.btn-danger:hover { background: var(--loss); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-block { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .04em; background: var(--ink); color: #fff; text-transform: uppercase;
}
.chip-brand { background: var(--signal); }
.chip-pos { background: var(--gain); }
.chip-warn { background: var(--warn); }
.chip-neg { background: var(--loss); }
.chip-quiet { background: var(--rule); color: var(--ink-3); }

/* Segments (niveaux, onglets) */
.levels { display: inline-flex; border: 1px solid var(--ink); background: var(--surface); }
.level-btn {
  border: 0; background: none; padding: 6px 13px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; transition: background .12s, color .12s;
  border-right: 1px solid var(--rule);
}
.level-btn:last-child { border-right: 0; }
.level-btn:hover { background: var(--surface-2); color: var(--ink); }

/* ─────────────────────────────── Champs ──────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label {
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  display: flex; align-items: center; gap: 5px;
}
.field-hint { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
.control {
  display: flex; align-items: center;
  border: 1px solid var(--rule); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.control input, .control select, .control textarea {
  border: 0; outline: 0; background: none; padding: 8px 10px; width: 100%; min-width: 0;
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
}
.control input[type=text] { font-family: var(--sans); font-size: 13.5px; }
.control select { cursor: pointer; font-family: var(--sans); appearance: none; padding-right: 6px; }
.control .affix {
  padding: 0 9px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4);
  background: var(--surface-2); align-self: stretch; display: flex; align-items: center;
  flex: none; border-left: 1px solid var(--rule); text-transform: uppercase; letter-spacing: .05em;
}
.control .affix-pre { border-left: 0; border-right: 1px solid var(--rule); }
.control.invalid { border-color: var(--loss); }
input[type=checkbox] { accent-color: var(--signal); width: 15px; height: 15px; cursor: pointer; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track { width: 34px; height: 18px; background: var(--ink-5); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; transition: transform .15s var(--ease); }
.switch input:checked + .track { background: var(--signal); }
.switch input:checked + .track::after { transform: translateX(16px); }

.help {
  width: 14px; height: 14px; border: 1px solid var(--ink-5); flex: none;
  background: none; color: var(--ink-4); font-family: var(--mono);
  font-size: 9px; cursor: pointer; display: inline-grid; place-items: center; padding: 0; line-height: 1;
}
.help:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ─────────────────────────────── Tableaux ────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* ─── Un tableau financier qui ne ressemble pas à un tableur ─── */
/* Le quadrillage, les en-têtes gris et la ligne de total sur fond gris
   donnaient un export Excel. Ce qui fait lire un bilan, c'est la hiérarchie :
   des libellés qui respirent, des chiffres alignés à la virgule, un filet
   seulement là où une somme se ferme, et le total en gros, sans fond. */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td {
  text-align: right; white-space: nowrap; border-bottom: 0;
}
table.data tbody td { border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
table.data td:not(:first-child) {
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
table.data th:first-child, table.data td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1;
  font-family: var(--sans); color: var(--ink-3);
}
table.data thead th {
  color: var(--ink-5); background: var(--surface); border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; padding-bottom: 8px;
}
table.data tbody tr:hover td, table.data tbody tr:hover td:first-child { background: var(--surface-2); }
/* Un intertitre n'est pas une ligne de données : il ne prend pas de fond noir,
   il prend de l'air et de la capitale. */
table.data tr.section td, table.data tr.section td:first-child {
  background: none; color: var(--ink-4); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; border-bottom: 0;
  padding-top: 22px; padding-bottom: 4px;
}
table.data tr.total td, table.data tr.total td:first-child {
  font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 0;
  background: none; color: var(--ink); font-size: 15px; padding-top: 13px;
}
table.data tr.total td:first-child { font-family: var(--display); letter-spacing: -.01em; }
table.data tr.highlight td, table.data tr.highlight td:first-child {
  background: var(--tune-wash); font-weight: 600; color: var(--tune-ink);
}
table.data td.pct { color: var(--ink-5); font-size: 11.5px; }
table.data .rowlabel { display: flex; align-items: center; gap: 6px; }

/* ──────────────────────── Indicateurs et mesures ─────────────────────── */
.kpi {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 2px solid var(--rule-strong); padding: 13px 15px; min-width: 0;
}
.kpi-label { color: var(--ink-4); display: flex; align-items: center; gap: 5px; }
.kpi-value {
  font-family: var(--mono); font-weight: 600;
  letter-spacing: -.04em; margin-top: 7px; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.kpi-sub { margin-top: 4px; }
.kpi.pos { border-top-color: var(--gain); }
.kpi.neg { border-top-color: var(--loss); }
.kpi.warn { border-top-color: var(--warn); }
.kpi-accent { display: none; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }

/* Valeur qui vient de changer : brève surbrillance, jamais de mouvement */
@keyframes flash {
  0%   { background: var(--signal); color: #fff; }
  100% { background: transparent; color: inherit; }
}

/* ────────────────────────────── Leviers ──────────────────────────────── */
.levers { display: flex; flex-direction: column; }
.lever { padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.lever:last-child { border-bottom: 0; }

.lever-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; cursor: grab; }
.lever-range:active { cursor: grabbing; }
.lever-range::-webkit-slider-runnable-track { height: 3px; background: var(--rule); }
.lever-range::-moz-range-track { height: 3px; background: var(--rule); }
.lever-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; background: var(--ink); border: 0; margin-top: -6.5px;
  border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-wash);
  transition: transform .1s, box-shadow .12s;
}
.lever-range::-moz-range-thumb { width: 16px; height: 16px; background: var(--ink); border: 0; border-radius: 50%; }
.lever-range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.lever-range:active::-webkit-slider-thumb { transform: scale(1.3); box-shadow: 0 0 0 5px var(--accent); }

/* ─────────────────────────── Rail d'impact ───────────────────────────── */
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ────────────────────────────── Verdicts ─────────────────────────────── */
/* Le ton de l'outil : une phrase qui tranche, puis l'explication. */
.verdict {
  border-left: 3px solid var(--ink);
  padding: 14px 16px;
}

.verdict.good { border-left-color: var(--gain); }
.verdict.bad { border-left-color: var(--loss); }
.verdict.watch { border-left-color: var(--warn); }

.note {
  padding: 12px 14px; font-size: 13px; line-height: 1.55;
  background: var(--signal-wash); border: 1px solid #C9D1FF; color: var(--ink-2);
}
.note-title { font-weight: 600; color: var(--ink); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.note.warn { background: var(--warn-wash); border-color: #EBD3A8; }
.note.danger { background: var(--loss-wash); border-color: #F2BFC7; }
.note.ok { background: var(--gain-wash); border-color: #ABDCC7; }
.demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; }
.demo-banner > p { margin: 0; }
.demo-banner-acts { display: flex; gap: 8px; flex: none; }
.note.plain { background: var(--surface-2); border-color: var(--rule); }
.fin-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-2); padding: 8px 12px; border-radius: 10px; background: var(--surface-2);
  font-size: 13px; color: var(--ink-3);
}
.fin-total strong { font: 650 14px/1.2 var(--mono); color: var(--ink); }

/* ──────────────────────────── Listes d'objets ────────────────────────── */
.item {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 2px solid var(--rule-strong); margin-bottom: 10px;
}
.item:hover { border-color: var(--ink-5); }
.item-head { padding: 9px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.item-head:hover { background: var(--surface-2); }
.item-title { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: -.015em; }
.item-meta { font-size: 12px; color: var(--ink-4); }
/* Une seule ligne : le nom, ce qui le décrit, puis le chiffre et son libellé. */
.item-head > .spacer { display: flex; align-items: baseline; gap: 4px 12px; min-width: 0; }
.item-head > .spacer > .item-title { flex: none; white-space: nowrap; }
.item-head > .spacer > .item-meta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-head > .right { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.item-body { padding: 4px 14px 16px; border-top: 1px solid var(--rule); }
/* La ligne d'une liste plie comme tout le reste.
   Elle portait un chevron typographique nu — un « › » de onze pixels, sans
   rond, sans cadre — pendant que les volets voisins montraient le signe rond
   de l'application. Deux affordances pour un même geste sur le même écran.
   C'est le même signe partout, maintenant, et il tourne dans le même sens. */
.item.open .item-head > .foldsign {
  transform: rotate(180deg); border-color: var(--ink); color: var(--ink);
}
.item-head:hover > .foldsign { border-color: var(--ink-5); }

.empty { text-align: center; padding: 44px 20px; color: var(--ink-4); }
.empty-icon { font-size: 30px; margin-bottom: 10px; }

/* ──────────────────────── Tiroir, modale, alertes ────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(11,14,16,.55); z-index: 90; opacity: 0; animation: fade .16s forwards; }
@keyframes fade { to { opacity: 1 } }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(460px, 100vw);
  background: var(--surface); z-index: 91; border-left: 2px solid var(--ink);
  display: flex; flex-direction: column; transform: translateX(100%);
  animation: slide-in .24s var(--ease) forwards;
}
@keyframes slide-in { to { transform: translateX(0) } }
.drawer-head { padding: 16px 18px; border-bottom: 2px solid var(--ink); display: flex; align-items: flex-start; gap: 10px; }
.drawer-body { padding: 18px; overflow-y: auto; flex: 1; }
.drawer-body h4 { margin: 18px 0 5px; color: var(--ink-4); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
.drawer-body h4:first-child { margin-top: 0; }
.drawer-body p { line-height: 1.62; color: var(--ink-2); }

.formula { font-family: var(--mono); font-size: 12px; background: var(--ink); color: #E6EAED; padding: 11px 13px; line-height: 1.6; overflow-x: auto; }

.modal-wrap { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 18px; }
.modal {
  background: var(--surface); border: 2px solid var(--ink); width: min(600px, 100%);
  max-height: 88dvh; display: flex; flex-direction: column; opacity: 0; animation: pop .18s var(--ease) forwards;
}
@keyframes pop { to { opacity: 1 } }
.modal-head { padding: 20px 22px 0; }
.modal-body { padding: 16px 22px; overflow-y: auto; }
.modal-foot { padding: 14px 22px 20px; display: flex; gap: 9px; justify-content: flex-end; border-top: 1px solid var(--rule); margin-top: auto; }

.toasts { position: fixed; bottom: calc(var(--impact-h) + 16px); left: 50%; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 9px 16px; font-size: 13px; font-weight: 450; animation: rise .2s var(--ease); max-width: 90vw; border-left: 3px solid var(--signal); }
@keyframes rise { from { transform: translateY(10px); opacity: 0 } }
.toast.ok { border-left-color: var(--gain); }
.toast.err { border-left-color: var(--loss); }

/* ───────────────────────────── Graphiques ────────────────────────────── */
.chart { width: 100%; max-width: 100%; height: auto; display: block; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend .swatch { border-radius: 2px; }
.swatch { width: 9px; height: 9px; flex: none; }
.spark { flex: none; width: 120px; }
.meter { height: 4px; background: var(--rule); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--signal); transition: width .3s var(--ease); }

/* Barre d'onglets mobile */

.mobile-only { display: none; }

/* ────────────────────────────── Adaptatif ────────────────────────────── */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --space: 14px; --header-h: 54px; --impact-h: 56px; }
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .rail.open { display: flex; position: fixed; inset: 0 auto 0 0; width: 262px; z-index: 92; animation: slide-left .22s var(--ease); }
  @keyframes slide-left { from { transform: translateX(-100%) } }
  .mobile-only { display: inline-flex; }
      .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  h1 { font-size: 23px; }
    .grid.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid.kpis .kpi { padding: 11px 12px; }
  .grid.kpis .kpi-value { font-size: 18px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .topbar { padding: 0 12px; }
  .topbar .crumb { display: none; }
  .topbar h1 { font-size: 15px; }
  .desktop-only { display: none !important; }
  .topbar .levels { flex: none; }
  .topbar .level-btn { padding: 6px 9px; font-size: 10px; }

  
  
  
  
  

  .drawer { width: 100vw; top: 8vh; border-left: 0; border-top: 2px solid var(--ink); animation: slide-up .24s var(--ease) forwards; transform: translateY(100%); }
  @keyframes slide-up { to { transform: translateY(0) } }
  table.data th, table.data td { font-size: 12.5px; }
  .toasts { bottom: calc(var(--impact-h) + 66px); }
  }

@media (max-width: 420px) {
  .content .levels { width: 100%; }
  .content .level-btn { flex: 1; padding: 7px 6px; }
  .topbar .levels { width: auto; }
  .topbar .level-btn { flex: none; }
}

@media print {
  .rail, .topbar, .btn, .help { display: none !important; }
    .card, .panel { break-inside: avoid; }
  }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

/* ─────────────────── Revenu du dirigeant : le chiffre final ─────────────── */

/* Cascade : chaque marche est un prélèvement nommé */
.flow { display: flex; flex-direction: column; }
.flow-step { padding: 9px 16px; border-bottom: 1px solid var(--rule); }
.flow-step:last-child { border-bottom: 0; }
.flow-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.flow-label { font-size: 13px; color: var(--ink-2); }
.flow-value { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-note { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; }
.flow-start { background: var(--surface-2); }
.flow-start .flow-label, .flow-start .flow-value { font-weight: 600; }
.flow-info .flow-label, .flow-info .flow-value { color: var(--ink-4); font-size: 12.5px; }
.flow-cost .flow-value { color: var(--loss); }
.flow-gain .flow-value { color: var(--gain); }
.flow-subtotal { background: var(--surface-2); border-top: 1px solid var(--rule); }
.flow-subtotal .flow-label, .flow-subtotal .flow-value { font-weight: 600; }
.flow-total { background: var(--ink); }
.flow-total .flow-label { color: #fff; font-weight: 600; }
.flow-total .flow-value { color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }

/* ══════════════════════ Métier : choix, repères, pièges ══════════════════
   Le nudge a son propre registre visuel : pas une carte de plus, mais une
   marge d'annotation — comme une note portée à côté d'un chiffre par
   quelqu'un qui connaît le métier. */

/* ─── Choix du métier ─── */
.family { margin-bottom: 26px; }

/* ─── Alertes contextuelles ─── */
.nudges { border-top: 2px solid var(--rule-strong); background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong); }
.nudges-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--rule); color: var(--ink-4);
}
.nudge {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: start;
  padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--rule); position: relative;
}
.nudge:last-child { border-bottom: 0; }
/* Le trait de gauche porte la gravité : c'est la seule couleur du bloc. */
.nudge::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--ink-5); }
.nudge-bad::before { background: var(--loss); }
.nudge-watch::before { background: var(--warn); }
.nudge-info::before { background: var(--signal); }
.nudge-title { grid-column: 1; font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--ink); letter-spacing: -.014em; }
.nudge-body { grid-column: 1; margin: 0; font-size: 12.8px; color: var(--ink-3); line-height: 1.52; max-width: 78ch; }
/* La colonne doit être nommée : un élément placé par sa seule ligne bascule
   dans la passe d'auto-placement et vient se ranger devant le titre. */
.nudge .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ─── Pièges du métier ─── */
.traps { display: flex; flex-direction: column; }

/* Numérotation : il y a bien une séquence, du plus fréquent au plus subtil. */

/* ─── Cadre réglementaire ─── */
.regime { display: flex; flex-direction: column; }
.regime-row { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.regime-row:last-child { border-bottom: 0; }
.regime-row .eyebrow { color: var(--ink-4); padding-top: 3px; }
.regime-row strong { font-size: 13.5px; color: var(--ink); }
.regime-note { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 860px) {
      .nudge { grid-template-columns: 1fr; }
  .nudge .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .regime-row { grid-template-columns: 1fr; gap: 5px; }
}

/* ══════════════════════════ Tableau de bord ═══════════════════════════════
   Une seule chose domine l'écran : le verdict. Tout le reste lui est
   subordonné, et le détail chiffré se mérite — il est replié. */

.content-wide { display: flex; flex-direction: column; gap: var(--s-3); }
/* Dans une page en colonne, l'écart vient de la colonne : l'en-tête et la
   barre d'onglets n'y ajoutent pas leur propre marge. */
.content-wide > .module, .content-wide > .module-nav { margin-bottom: 0; }

/* ─── Verdict ─── */
.hero {
  display: grid; grid-template-columns: 1fr minmax(240px, 340px);
  background: var(--ink); color: #fff; border: 0;
}

/* ─── Le film ─── */

.story { padding: 4px 6px 0; }

/* ─── Actions chiffrées ─── */
.actions-panel { border-top-color: var(--rule-strong); }
.actions { display: flex; flex-direction: column; }
.action {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid var(--rule);
}
.action:last-child { border-bottom: 0; }
.action:hover { background: var(--surface-2); }
.action-rank {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--surface); border-radius: 50%;
  background: var(--ink); width: 22px; height: 22px; display: grid; place-items: center; flex: none;
}
.action-main { min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.action-label {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: -.015em; color: var(--ink); margin: 0;
}
.action-detail { font-family: var(--mono); font-size: 11.5px; color: var(--signal-ink); }
.action-gains { display: flex; gap: 14px; align-items: baseline; flex: none; }
.gain { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.gain-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
}
.gain-value { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: -.03em; text-align: right; }
.gain-good .gain-value { color: var(--gain); }
.gain-bad .gain-value { color: var(--loss); }

/* ─── Position dans le métier ─── */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.gauge { padding: 16px 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gauge:last-child { border-right: 0; }
.gauge-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.gauge-label { font-size: 12.5px; color: var(--ink-3); }
.gauge-value { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -.035em; color: var(--ink); }
.gauge-track { position: relative; height: 6px; background: #E6E9E6; }
/* La bande claire est la fourchette du métier ; l'aiguille, votre position. */
.gauge-band { position: absolute; top: 0; bottom: 0; background: var(--ink-5); opacity: .45; }
.gauge-needle { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); transform: translateX(-1.5px); }
.gauge-ok .gauge-needle { background: var(--gain); }
.gauge-low .gauge-needle { background: var(--warn); }
.gauge-high .gauge-needle { background: var(--loss); }
.gauge-foot {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-4);
}
.gauge-ok .gauge-verdict { color: var(--gain); }
.gauge-low .gauge-verdict { color: var(--warn); }
.gauge-high .gauge-verdict { color: var(--loss); }

/* ─── Le détail, replié ─── */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
        .action { grid-template-columns: auto 1fr; gap: 12px; }
  .action-gains { grid-column: 2; align-items: flex-start; margin-top: 8px; }
  .gain-value { min-width: 0; text-align: left; }
  .action .btn { grid-column: 2; justify-self: start; margin-top: 8px; }
  .gauges { grid-template-columns: 1fr; }
  .gauge { border-right: 0; }
  .content-wide { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE PARCOURS

   Le reste de Fynomia est un instrument de mesure : sobre, dense, sans effet.
   Cette page-ci a un autre travail — donner envie de continuer. Elle s'autorise
   donc ce que les autres refusent : une surface sombre, une lueur, un anneau
   qui se remplit, des ronds qui s'allument. L'audace est bornée à l'accueil ;
   les pages de saisie restent des pages de saisie.
   ═══════════════════════════════════════════════════════════════════════════ */

.journey { max-width: 1180px; }

/* ─── Les ronds reliés par des flèches ─── */

.node {
  position: relative; width: 100%; border: 0; background: none; cursor: pointer;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 11px 18px; text-align: left; font: inherit;
  transition: background .13s;
}
.node:hover { background: var(--surface-2); }

/* La flèche qui relie un rond au suivant.
   Un trait seul se lit comme une bordure ; une pointe se lit comme un sens de
   lecture. C'est ce qui transforme une liste en parcours. */
.node::before {
  content: ''; position: absolute; left: 34px; top: -11px; height: 13px; width: 2px;
  background: var(--ink-5); z-index: 0;
}
.node::after {
  content: ''; position: absolute; left: 30.5px; top: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--ink-5); z-index: 0;
}
.node.is-current::before { background: var(--signal); }
.node.is-current::after { border-top-color: var(--signal); }

/* L'étape courante : la seule chose qui bouge sur la page. */
.node.is-current { background: var(--signal-wash); }
@keyframes node-pulse {
  0%   { transform: scale(.85); opacity: .9 }
  70%  { transform: scale(1.35); opacity: 0 }
  100% { transform: scale(1.35); opacity: 0 }
}

/* ─── L'aperçu du verdict ─── */
.snapshot { margin-bottom: 14px; }

/* ─── Les trophées (grille, conservée pour d'autres usages) ─── */

/* ─── Les leviers rapides ─── */
.win {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
  padding: 14px 16px; border-bottom: 1px solid var(--rule);
}
.win:last-child { border-bottom: 0; }

/* ════════════════ L'avancement, au tout premier pixel de l'écran ═══════════
   Deux choses, au même endroit et à demeure : un trait qui court sur l'arête
   haute de la fenêtre, et dix-neuf encoches qui disent lesquelles des lignes
   du dossier sont posées. Une barre lisse aurait dit « 42 % » sans jamais
   dire de quoi ; les encoches montrent le chemin fait et celui qui reste,
   et chacune emmène au champ d'un clic.
   ═══════════════════════════════════════════════════════════════════════════ */
.topline {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--rule); overflow: hidden; pointer-events: none;
}
.topline > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ink) 0%, var(--accent-dim) 62%, var(--accent) 100%);
  transition: width .7s var(--ease-soft);
}

.topprog { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }

/* Les encoches : un palier par groupe, un cran par ligne. */
.topprog-steps { display: flex; align-items: center; gap: 6px; }
.topprog-tier { display: flex; align-items: center; gap: 3px; }
.topprog-step {
  width: 4px; height: 13px; padding: 0; border: 0; border-radius: 2px;
  background: var(--rule); cursor: pointer; flex: none;
  transition: background .3s var(--ease-soft), transform .2s var(--ease-soft), height .2s var(--ease-soft);
}
.topprog-step:hover { transform: scaleY(1.24); background: var(--ink-4); }
.topprog-step:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.topprog-tier.is-fondation .topprog-step.is-done { background: var(--ink); }
.topprog-tier.is-credibilite .topprog-step.is-done { background: var(--accent-dim); }
.topprog-tier.is-finition .topprog-step.is-done { background: var(--ink-5); }
/* Reporté : le cran reste, en creux. Il n'a pas disparu, il attend son tour. */
.topprog-step.is-later {
  background: repeating-linear-gradient(180deg, var(--ink-5) 0 2px, transparent 2px 4px);
  opacity: .75;
}

.topprog-score {
  display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 9px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  font: inherit; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: border-color .16s var(--ease-soft), background .16s;
}
.topprog-score:hover { border-color: var(--ink); background: var(--surface-2); }
.topprog-done { font-size: 13px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); }
.topprog-of { font-size: 11px; color: var(--ink-5); }
.topprog-pct {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  padding-left: 7px; margin-left: 4px; border-left: 1px solid var(--rule);
}
.topprog.is-full .topprog-done { color: var(--gain); }
.topprog.is-full .topprog-score { border-color: var(--gain); }

@media (max-width: 1080px) {
  .topprog-steps { gap: 5px; }
  .topprog-step { width: 4px; }
}
@media (max-width: 860px) {
  .topprog { gap: 8px; }
  .topprog-pct { display: none; }
}
/* Sur un téléphone, le fil d'ariane a déjà disparu : la place libérée revient
   aux encoches, qui sont justement ce qu'on vient chercher. */
@media (max-width: 520px) {
  .topprog-steps { gap: 5px; }
  .topprog-tier { gap: 2px; }
  .topprog-step { width: 4px; height: 14px; }
  .topprog-score { padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .topline > i, .topprog-step { transition: none; }
}

/* ═══════════════════ Bandeau d'étape et micro-tutos ═══════════════════════ */

/* Le bandeau d'étape : une seule ligne. Dire où l'on est, et rien d'autre.
   Il portait un encart « ça débloque » et deux boutons de navigation ; la barre
   de guidage fait déjà la navigation, et la promesse n'était jamais lue. */
.step-line {
  align-items: center; gap: 12px;
  margin-bottom: 18px;
  border-left: 3px solid var(--signal);
}
.step-line.done { border-left-color: var(--gain); }
.step-line-q { font-family: var(--display); letter-spacing: -.016em; }
.step-line-done {
  margin-left: auto;
}

/* ══════════════════════ La page « Mon modèle » ════════════════════════════ */

.engine {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 18px 18px 20px; border: 0; border-right: 1px solid var(--rule);
  background: var(--surface); cursor: pointer; font: inherit; text-align: left;
  transition: background .14s, box-shadow .14s;
}
.engine:last-child { border-right: 0; }
.engine:hover { background: var(--surface-2); }
.engine.active { background: var(--ink); box-shadow: inset 0 3px 0 var(--signal); }

/* ─────────────────────────────── Adaptatif ───────────────────────────────── */

@media (max-width: 860px) {
  .engine { border-right: 0; border-bottom: 1px solid var(--rule); }
  .engine:last-child { border-bottom: 0; }
  .win { grid-template-columns: 1fr; gap: 8px; }
    }

/* ═══════════════════════════════════════════════════════════════════════════
   LE COMPTE

   Un logiciel se reconnaît à ce qu'il dit de son propre état : qui vous êtes,
   où sont vos données, si elles sont à l'abri. Trois réponses, rien de plus.
   ═══════════════════════════════════════════════════════════════════════════ */

.content.narrow { max-width: 860px; }

/* Le pied du rail : l'état de sauvegarde, en permanence sous les yeux. */
.rail-account {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  border: 0; background: none; cursor: pointer; font: inherit; text-align: left;
  padding: 10px 10px 2px; color: #B9C1C7;
  transition: color .12s;
}
.rail-account:hover { color: #fff; }
.rail-account-name {
  font-size: 12.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-account-sync {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #5D6871;
}
.rail-account-sync.live { color: #4ADE9E; }
.sync-dot {
  width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor;
  animation: sync-breathe 3.2s ease-in-out infinite;
}
@keyframes sync-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.account-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 2px solid var(--rule-strong);
}
.account-card.is-online { border-top-color: var(--gain); }
.account-id {
  display: flex; align-items: center; gap: 14px;
  padding: 20px; border-bottom: 1px solid var(--rule);
}
.account-avatar {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 19px;
}
.account-card.is-online .account-avatar { background: var(--gain); }
.account-who { min-width: 0; }
.account-name {
  font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink);
  letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-mail {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-badge {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--rule); color: var(--ink-4);
}
.account-badge.ok { border-color: var(--gain); color: var(--gain); }

.account-rows { display: flex; flex-direction: column; }
.account-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 11px 20px; border-bottom: 1px solid var(--rule); font-size: 13px;
}
.account-row:last-child { border-bottom: 0; }
.account-row-label {
  flex: none; width: 128px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.account-row-value { color: var(--ink-2); }
.account-row-value.ok { color: var(--gain); }
.account-note {
  margin: 0; padding: 14px 20px; border-top: 1px solid var(--rule);
  background: var(--surface-2); font-size: 12.5px; color: var(--ink-3); line-height: 1.55;
}

/* La liste des plans : une ligne par plan, ouvrable d'un clic. */
.plan-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.plan-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  border-bottom: 1px solid var(--rule);
}
.plan-row.current { background: var(--signal-wash); }
.plan-open {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  border: 0; background: none; cursor: pointer; font: inherit; text-align: left; padding: 0;
}
.plan-name {
  font-size: 14px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-open:hover .plan-name { color: var(--signal-ink); }
.plan-meta { font-size: 11.5px; color: var(--ink-4); }
.plan-pct {
  font-size: 12px; color: var(--ink-3); font-weight: 600;
  padding: 2px 7px; border: 1px solid var(--rule); white-space: nowrap;
}

@media (max-width: 720px) {
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .plan-row .btn { grid-column: span 1; }
  .account-row { flex-direction: column; gap: 3px; }
  .account-row-label { width: auto; }
}

/* ─── Trois lecteurs, trois grilles ─── */
/* Le même prévisionnel n'est pas jugé de la même façon selon qui l'ouvre. */

.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; }

/* ═══════════════════════════════════════════════════════════════════════════
   L'ACCUEIL ET LE PARCOURS GUIDÉ

   Deux écrans qui n'appartiennent pas à l'application : ils la précèdent. Pas
   de rail, pas d'onglets, pas d'indicateurs. Une question, un champ, un bouton.
   Tout ce qui n'aide pas à répondre à la question en cours est retiré.
   ═══════════════════════════════════════════════════════════════════════════ */

.landing {
  min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--paper);
}

/* Le panneau noir : ce que fait l'outil. Un quart de cercle acide en signature,
   le même que le bloc de synthèse des modules. */
.landing-brand {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 6vw, 72px);
}
.landing-arc {
  position: absolute; right: -120px; bottom: -120px; width: 340px; height: 340px;
  border-radius: 50%; background: var(--accent); pointer-events: none;
}
.landing-mark {
  position: relative; width: 42px; height: 42px; margin-bottom: 28px;
  display: grid; place-items: center; background: var(--accent); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 22px;
}
.landing-title {
  position: relative; font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.045em;
  line-height: 1; margin: 0 0 16px; color: #fff; max-width: 14ch;
}
.landing-line {
  position: relative; font-size: 15px; color: #B7BAAE; line-height: 1.6;
  max-width: 44ch; margin: 0 0 30px;
}
.landing-facts {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.landing-facts li {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #8A8D82; padding-left: 16px; position: relative;
}
.landing-facts li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 7px; height: 1px; background: var(--accent);
}

/* Le panneau clair : ce qu'on peut faire, tout de suite. */
.landing-act { display: grid; place-items: center; padding: clamp(28px, 5vw, 56px); }
.landing-act-inner { width: 100%; max-width: 360px; }
.landing-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px;
}
.landing-sub { margin: 0 0 22px; font-size: 14px; color: var(--ink-3); line-height: 1.55; }
.landing-go { width: 100%; justify-content: center; }
/* L'exemple : présent, mais visiblement secondaire. */
.landing-example {
  display: block; margin-top: 14px; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 13px; color: var(--ink-4); text-decoration: underline;
  text-underline-offset: 3px; padding: 2px 0;
}
.landing-example:hover { color: var(--ink); }

.landing-resume { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); }
.landing-resume-tag {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px;
}
.landing-resume-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: none;
  cursor: pointer; font: inherit; text-align: left; padding: 8px 2px; color: var(--ink-2);
}
.landing-resume-item:last-child { border-bottom: 0; }
.landing-resume-item:hover { color: var(--signal-ink); }
.landing-resume-when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-5); flex: none; }
.landing-foot { margin: 26px 0 0; font-size: 11.5px; color: var(--ink-5); line-height: 1.5; }

@media (max-width: 860px) {
  .landing { grid-template-columns: 1fr; min-height: 0; }
  .landing-brand { padding: 30px 20px 34px; }
  /* Le quartier de cercle reste dans l'angle : à taille de bureau, il remontait
     jusqu'au texte et le rendait illisible. */
  .landing-arc { width: 190px; height: 190px; right: -108px; bottom: -108px; }
  .landing-title { font-size: clamp(30px, 8vw, 40px); max-width: none; }
  .landing-line { margin-bottom: 20px; }
  .landing-facts { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .landing-act { padding: 26px 20px 40px; justify-items: stretch; }
  .landing-act-inner { max-width: none; }
}

/* ───────────────────────────── Le parcours guidé ─────────────────────────── */

.setup { min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); }

.setup-bar { height: 2px; background: var(--rule); flex: none; }
.setup-bar-fill { height: 100%; background: var(--ink); transition: width .4s var(--ease); }

/* La charpente : les questions à gauche, la question en cours au centre. */
.setup-shell {
  flex: 1; display: grid; grid-template-columns: 252px minmax(0, 1fr);
  max-width: 1160px; width: 100%; margin: 0 auto; gap: 0;
}

.setup-steps {
  border-right: 1px solid var(--rule); padding: 26px 0 40px;
  display: flex; flex-direction: column; position: sticky; top: 0; align-self: start;
}
.setup-steps-head { padding: 0 20px 14px; }
.setup-steps-title {
  display: block; font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--ink); letter-spacing: -.015em;
}
.setup-steps-sub {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-5); margin-top: 3px;
}
.setup-step {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; cursor: pointer; font: inherit; text-align: left;
  padding: 7px 20px; color: var(--ink-4); transition: color .12s, background .12s;
}
.setup-step:hover { background: var(--surface-2); color: var(--ink-2); }
.setup-step-dot {
  width: 21px; height: 21px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  font-family: var(--mono); font-size: 10px; color: var(--ink-5); background: var(--surface);
}
.setup-step-label { font-size: 12.8px; line-height: 1.3; }
.setup-step.done .setup-step-dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.setup-step.done { color: var(--ink-3); }
.setup-step.current { background: var(--accent-wash); color: var(--ink); }
.setup-step.current .setup-step-dot { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.setup-step.current .setup-step-label { font-weight: 600; }
/* Ce qu'on n'a pas encore atteint ne se clique pas.
   Les numéros faisaient office de raccourci : on arrivait au résultat sans
   avoir répondu, avec un modèle entièrement fabriqué par le métier. Ils
   redeviennent ce qu'ils étaient — un repère, et un retour en arrière. */
.setup-step.is-shut { color: var(--ink-5); cursor: default; opacity: .5; }
.setup-step.is-shut:hover { background: none; color: var(--ink-5); }
.setup-step.is-shut .setup-step-dot { border-style: dashed; }
.setup-steps-exit {
  margin: 18px 20px 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--rule);
  background: none; cursor: pointer; font: inherit; text-align: left;
  font-size: 12px; color: var(--ink-4);
}
.setup-steps-exit:hover { color: var(--signal-ink); }

/* Une seule colonne : le récapitulatif de droite a été retiré, la place qu'il
   réservait aussi. Le parcours tient dans la hauteur de l'écran. */
/* L'écran de question occupait le coin haut-gauche d'une page vide.
   La carte faisait trois cent quarante pixels dans une fenêtre de neuf
   cents : quatre cent trente pixels de blanc dessous, sans raison lisible.
   Le contenu se centre donc dans la hauteur disponible et s'élargit : le vide
   se répartit au lieu de tomber d'un bloc, et les réponses se rangent sur
   deux colonnes au lieu d'une file. */
/* La question se pose en haut de l'écran.
   Centrer verticalement paraissait élégant : ça répartissait le vide au lieu
   de le laisser tomber d'un bloc. Mais sur l'écran du métier, qui est le plus
   haut du parcours, ça poussait la question deux cents pixels vers le bas — un
   trou franc au-dessus du titre, avant même d'avoir lu quoi que ce soit. Le
   contenu remonte donc, et le vide reste là où il ne gêne personne : dessous. */
.setup-main {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 34px 40px 60px;
}
.setup-card { max-width: 780px; width: 100%; }

/* Le compteur : même signature que l'en-tête des modules. */
.setup-tag { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.setup-tag-bar { width: 26px; height: 6px; background: var(--accent); border-radius: 2px; flex: none; }
.setup-tag > span:not(.setup-tag-bar) {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.setup-tag-opt {
  color: var(--ink-5) !important; border-left: 1px solid var(--rule); padding-left: 11px;
}
/* « Plus tard » est la façon d'aller vite, maintenant que les numéros ne
   sautent plus. Un lien souligné se lisait comme une note de bas de page : il
   prend la forme d'un bouton, à côté de celui qui avance. */
.setup-later {
  border: 1px dashed var(--rule-2, var(--rule)); background: none; cursor: pointer; font: inherit;
  font-size: 13.5px; color: var(--ink-4); border-radius: 999px; padding: 10px 18px;
  transition: color .16s var(--ease-soft), border-color .16s var(--ease-soft);
}
.setup-later:hover { color: var(--ink); border-color: var(--ink-4); }
/* En attente d'une réponse : le bouton doit se lire comme inerte, pas comme
   une action en attente de clic. */
.btn.is-waiting {
  background: var(--surface); border-color: var(--rule); color: var(--ink-5);
  font-weight: 500; cursor: not-allowed;
}

.setup-q {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 4.2vw, 46px); letter-spacing: -.045em; line-height: .98;
  margin-bottom: 10px; max-width: 18ch; text-wrap: balance;
}
.setup-help {
  font-size: 13.5px; color: var(--ink-3); line-height: 1.55; max-width: 62ch; margin-bottom: 20px;
}
.setup-body { margin-bottom: 20px; }
.setup-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-4); line-height: 1.5; max-width: 52ch; }

.setup-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.setup-reassure { margin: 12px 0 0; font-size: 12px; color: var(--ink-5); }

/* Le champ : grand, seul, déjà au focus. */
.setup-field { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); }
.setup-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 6px 0 10px;
  font-family: var(--display); font-size: clamp(28px, 5vw, 40px); font-weight: 700;
  letter-spacing: -.035em; color: var(--ink);
}
.setup-input::placeholder { color: var(--ink-5); font-weight: 600; }
.setup-suffix {
  flex: none; font-family: var(--mono); font-size: 13px; color: var(--ink-4); white-space: nowrap;
}

/* Les choix : deux ou trois cartes, jamais une liste déroulante. */
/* ─── Où en est le projet ───
   Chaque carte portait cinq éléments : titre, précision, étiquette en
   capitales, conséquence et paragraphe. Quatre cartes comme ça font un mur.
   Il reste ce qui fait choisir — le stade, et ce vers quoi il emmène — et le
   reste se lit au survol. */
.setup-stages {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-bottom: 18px; max-width: 620px;
}
@media (max-width: 560px) { .setup-stages { grid-template-columns: 1fr; } }
.stagepick {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface);
  padding: 15px 16px; font: inherit;
  transition: border-color .18s var(--ease-soft), background .18s var(--ease-soft);
}
.stagepick:hover { border-color: var(--ink-4); }
.stagepick-head { display: flex; align-items: flex-start; gap: 10px; }
.stagepick-label {
  font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2;
  letter-spacing: -.02em; color: var(--ink); flex: 1;
}
.stagepick-mark {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rule); font-size: 10px; color: transparent; background: var(--paper);
}
.stagepick-then { font-size: 13px; color: var(--ink-4); line-height: 1.45; }

.stagepick.active { background: var(--ink); border-color: var(--ink); }
.stagepick.active .stagepick-label { color: #fff; }
.stagepick.active .stagepick-then { color: var(--accent); }
.stagepick.active .stagepick-mark { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.setup-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 18px; }
.setup-choice {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--rule); background: var(--surface);
  cursor: pointer; font: inherit; text-align: left; transition: border-color .12s, background .12s;
}
.setup-choice:hover { border-color: var(--ink-5); }
.setup-choice-label { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
.setup-choice-note { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
.setup-choice.active { border-color: var(--ink); background: var(--ink); }
.setup-choice.active .setup-choice-label { color: #fff; }
.setup-choice.active .setup-choice-note { color: #A8B1B8; }

/* Le choix du métier : quinze pastilles, lisibles d'un coup d'œil. */
.setup-sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 7px; }
.setup-sector {
  gap: 9px;
  padding: 10px 12px; border: 1px solid var(--rule); background: var(--surface);
  cursor: pointer; font: inherit; text-align: left; transition: border-color .12s, background .12s;
  min-height: 44px;
}
.setup-sector:hover { border-color: var(--ink-5); }
.setup-sector-glyph { font-size: 15px; color: var(--ink-5); line-height: 1; flex: none; }
/* Un libellé tronqué oblige à deviner : ils passent à la ligne. */
.setup-sector-name {
  font-size: 12.8px; color: var(--ink-2); line-height: 1.3;
  overflow-wrap: anywhere; hyphens: auto;
}
.setup-sector.active { border-color: var(--ink); background: var(--ink); }
.setup-sector.active .setup-sector-name { color: #fff; }
.setup-sector.active .setup-sector-glyph { color: var(--accent); }

/* ─── Le choix du métier : une recherche, puis deux temps ─── */
/* La carte porte deux lignes : le métier, et d'où il vient. En boîte flexible
   les trois enfants se rangeaient côte à côte et le compte poussait le nom à
   la ligne ; une grille à deux colonnes remet le glyphe à gauche et empile le
   reste — sans créer de ligne vide quand il n'y a pas de seconde ligne. */
.setup-sector {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px; row-gap: 2px; align-items: start; align-content: start;
}
.setup-sector-glyph { margin-top: 2px; grid-column: 1; grid-row: 1; }
.setup-sector-name { grid-column: 2; grid-row: 1; }
.setup-sector-note {
  grid-column: 2; font-size: 10.5px; color: var(--ink-5); line-height: 1.3;
}
.setup-sector.active .setup-sector-note { color: #8A8D82; }

.setup-pick { display: flex; flex-direction: column; gap: 12px; }
.setup-trail:empty { display: none; }
.setup-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface);
  padding: 0 14px; transition: border-color .16s var(--ease-soft), box-shadow .16s var(--ease-soft);
}
.setup-search:focus-within { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.setup-search-icon { color: var(--ink-5); font-size: 16px; line-height: 1; flex: none; }
.setup-search-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  padding: 13px 0; font-size: 15px; color: var(--ink);
}
.setup-search-input::placeholder { color: var(--ink-5); font-style: italic; }
.setup-search-clear {
  border: 0; background: none; cursor: pointer; color: var(--ink-4);
  font-size: 13px; padding: 4px 2px; flex: none; transition: color .16s;
}
.setup-search-clear:hover { color: var(--ink); }
.setup-search-none {
  grid-column: 1 / -1; margin: 0 0 4px; font-size: 13px; color: var(--ink-4); line-height: 1.5;
}
/* Le retour aux familles : un fil, pas un bouton — on ne remonte pas d'un
   niveau avec la même insistance qu'on descend. */
.setup-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--ink-4); transition: color .16s var(--ease-soft);
}
.setup-back:hover { color: var(--ink); }
.setup-back b {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--accent); border-radius: 999px; padding: 3px 9px; font-weight: 600;
}

/* Les frais : une case, un libellé, un montant modifiable. */
.setup-costs { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.setup-cost {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--rule); padding: 3px 0;
}
.setup-cost-toggle {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
  border: 0; background: none; cursor: pointer; font: inherit; text-align: left; padding: 9px 2px;
}
.setup-cost-box {
  width: 19px; height: 19px; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--rule); color: #fff; font-size: 11px;
}
.setup-cost.on .setup-cost-box { background: var(--ink); border-color: var(--ink); }
.setup-cost-label { font-size: 14px; color: var(--ink-3); }
.setup-cost.on .setup-cost-label { color: var(--ink); font-weight: 500; }
.setup-cost-amount {
  width: 92px; flex: none; border: 1px solid var(--rule); background: var(--surface);
  padding: 6px 8px; text-align: right; font-size: 13px; outline: 0;
}
.setup-cost-amount:focus { border-color: var(--signal); }
.setup-cost-hint { flex: none; font-size: 11.5px; color: var(--ink-5); padding-right: 9px; }

/* L'écran final. */
.setup-card.is-last { max-width: 660px; }

/* Les prochaines étapes : trois gestes numérotés, pas une liste à puces de
   fonctionnalités. On dit quoi faire, dans l'ordre. */
.setup-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.setup-next-item { display: flex; align-items: flex-start; gap: 11px; }
.setup-next-no {
  flex: none; width: 21px; height: 21px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; background: var(--ink); color: var(--accent);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
}
.setup-next-title { font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.setup-next-body { margin: 2px 0 0; font-size: 12.8px; line-height: 1.55; color: var(--ink-3); max-width: 64ch; }

@media (max-width: 860px) {
  /* Sur téléphone, la liste des questions devient une frise horizontale :
     elle situe sans occuper la moitié de l'écran. */
  /* Les deux rangées étaient « auto » dans une grille plus haute que son
     contenu : le navigateur les étirait à parts égales, et la frise des
     questions poussait la question elle-même à deux cents pixels du haut.
     La première rangée prend sa hauteur, la seconde prend le reste. */
  .setup-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .setup-steps {
    position: static; border-right: 0; border-bottom: 1px solid var(--rule);
    flex-direction: row; align-items: center; gap: 2px; overflow-x: auto;
    padding: 10px 14px; scrollbar-width: none;
  }
  .setup-steps::-webkit-scrollbar { display: none; }
  .setup-steps-head, .setup-steps-exit { display: none; }
  .setup-step { width: auto; flex: none; padding: 5px 8px; }
  .setup-step-label { display: none; }
  .setup-step.current .setup-step-label { display: inline; }
  .setup-main { padding: 20px 18px 44px; min-height: 0; justify-content: flex-start; }
    }

/* La suggestion : présente, annoncée, remplaçable d'une touche. */
.setup-suggested {
  margin: 9px 0 0; font-size: 12px; color: var(--ink-4);
  display: flex; align-items: center; gap: 6px;
}
.setup-suggested::before {
  content: ''; width: 5px; height: 5px; flex: none; background: var(--signal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRE DE GUIDAGE

   Le logiciel complet reste le logiciel complet — c'est ce qui rassure sur la
   profondeur. Cette barre lui rend ce qu'un tableur n'a pas : un fil. Elle dit
   où l'on est, ce que la page sert à faire, et ce qui vient après. Elle se
   replie, et ce choix est retenu.
   ═══════════════════════════════════════════════════════════════════════════ */

.guide {
  position: sticky; top: 0; align-self: start; height: 100dvh;
  width: 252px; flex: none;
  border-left: 1px solid var(--rule); background: var(--surface);
  display: flex; transition: width .22s var(--ease);
}
.guide.is-closed { width: 34px; }

/* Sous 1240 px la barre mangerait la page : elle disparaît, le parcours et la
   barre d'onglets prennent le relais. La borne basse est indispensable — sans
   elle, cette règle écraserait la mise en page mobile déclarée plus haut. */
@media (min-width: 861px) and (max-width: 1240px) {
  .guide { display: none; }
  .shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .guide { display: none; }
}

/* ─────────────────────── « Votre plan », qui se remplit ──────────────────── */
/* Ce ne sont pas des indicateurs : ce sont les lignes du modèle. Elles
   commencent vides — un tiret, jamais un zéro, qui serait un mensonge — et
   chaque réponse en fait apparaître une. */

.plan {
  position: sticky; top: 24px;
  border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong);
  background: var(--surface);
}

.plan-row {
  display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
  font-size: 12.5px; color: var(--ink-2);
}
.plan-row.sub { color: var(--ink-4); }
.plan-row.is-empty { color: var(--ink-5); font-style: italic; font-weight: 400; }

@media (max-width: 1040px) {
  .plan { position: static; }
}

/* ─────────────────────── L'interrupteur d'une ligne ──────────────────────── */
/* Mettre en pause plutôt que supprimer : on teste une hypothèse sans rien
   perdre. Il vit dans l'en-tête et n'ouvre pas la ligne. */
.onoff {
  flex: none; width: 34px; height: 19px; padding: 0; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface-2);
  position: relative;
}
.onoff > i {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  background: var(--ink-5);
  display: block;
}
.onoff.on { background: var(--ink); border-color: var(--ink); }
.onoff.on > i { transform: translateX(15px); background: #fff; }
.onoff:hover { border-color: var(--ink); }
.item.is-off .item-title { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Le passage de main : ce que le logiciel complet ajoute, dit simplement. */
.setup-unlocked {
  border: 1px solid var(--rule); border-left: 3px solid var(--gain);
  padding: 14px 16px; margin: 20px 0;
}
.setup-unlocked-title {
  font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink);
  margin-bottom: 8px;
}

/* Le statut du dirigeant : rappelé, pas redemandé. */
.setup-status {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--ink); color: #fff; margin-bottom: 18px;
}
.setup-status-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8E99A2;
}
.setup-status-value { font-weight: 600; font-size: 13.5px; }
.setup-status-why { font-size: 11.5px; color: #8E99A2; margin-left: auto; }

/* L'échelle : coût employeur → brut → net. Trois marches, un seul coup d'œil. */
/* Trois montants sur trois lignes, pas neuf. Le libellé et sa précision
   partagent la ligne ; l'année est le chiffre qu'on lit, le mois l'accompagne. */
.ladder { margin-top: 14px; border-top: 1px solid var(--rule); }
.ladder-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-3);
}
.ladder-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ladder-label { font-weight: 500; color: var(--ink-2); }
.ladder-note { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
.ladder-figures { display: flex; align-items: baseline; gap: 9px; flex: none; }
.ladder-month { font-size: 18px; font-weight: 650; letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
.ladder-year { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.ladder-row.top .ladder-month { color: var(--loss); }
.ladder-row.bottom .ladder-label { color: var(--ink); font-weight: 600; }
.ladder-row.bottom .ladder-month { color: var(--gain); font-size: 22px; }
@media (max-width: 560px) {
  .ladder-row { flex-direction: column; gap: 6px; }
  .ladder-figures { align-items: flex-start; flex-direction: row; gap: 10px; align-items: baseline; }
}

/* ─────────────────────────── Les blocs de saisie ─────────────────────────── */
/* Quatre sujets dans une offre : l'identité, le prix, les volumes, les délais.
   Les enchaîner sous de simples titres en faisait un formulaire. Chacun a
   maintenant sa surface — on voit qu'il y en a quatre, et on peut n'en traiter
   qu'un. */

.slice { border-top: 1px solid var(--rule); }
.slice:first-child { border-top: 0; }

/* ────────────────────────── Les charges, sur une ligne ───────────────────── */
/* Une charge, c'est un nom et un montant. Le reste — mode de calcul, dates,
   R&D — se déplie à la demande : dix postes doivent tenir sur un écran. */

.cost-row { border-bottom: 1px solid var(--rule); background: var(--surface); }
.cost-row:first-of-type { border-top: 1px solid var(--rule); }
.cost-row.is-off { opacity: .5; }
.cost-line { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.cost-label {
  flex: 1; min-width: 0; border: 0; background: none; outline: 0; padding: 4px 2px;
  font: inherit; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid transparent;
}
.cost-label:focus { border-bottom-color: var(--signal); }
.cost-amount { display: flex; align-items: baseline; gap: 5px; flex: none; }
.cost-amount input {
  width: 86px; border: 1px solid var(--rule); background: var(--surface); outline: 0;
  padding: 5px 8px; text-align: right; font-size: 13px;
}
.cost-amount input:focus { border-color: var(--signal); }
/* L'unité est un bouton : un clic bascule entre saisie mensuelle et annuelle. */
.cost-unit {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4); background: none;
  border: 1px solid var(--rule); border-radius: 4px; padding: 3px 5px; cursor: pointer; flex: none;
}
.cost-unit:hover { border-color: var(--ink); color: var(--ink); }
.cost-unit.is-static { cursor: default; border-color: transparent; }
.cost-unit.is-static:hover { color: var(--ink-4); }
/* Le coût de revient d'une offre, en tête des charges par vente. */
.cost-row.is-revient { background: var(--surface-2); }
.cost-revient-tag {
  flex: none; font: 600 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 3px 7px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
}
.cost-label.is-fixe { display: block; padding: 4px 2px; overflow-wrap: anywhere; }
/* Une campagne marketing : lue avec les charges, réglée dans Acquisition. */
.cost-row.is-campagne { background: var(--surface-2); }
.cost-fige { font-size: 14px; color: var(--ink); padding: 0 4px; }
.cost-lien { flex: none; border: 0; background: none; padding: 0; cursor: pointer; font: 600 12.5px/1.3 var(--sans); color: var(--signal-ink); white-space: nowrap; }
.cost-lien:hover { text-decoration: underline; }
.cost-mode { flex: none; }
.cost-mode select {
  border: 1px solid var(--rule); background: var(--surface); border-radius: 6px;
  padding: 5px 6px; font-size: 11.5px; color: var(--ink-3); cursor: pointer; max-width: 128px;
}
.cost-mode select:focus { border-color: var(--signal); outline: 0; }
.cost-extra { display: flex; align-items: center; gap: 5px; flex: none; }
.cost-extra input {
  width: 58px; border: 1px solid var(--rule); background: var(--surface); outline: 0;
  padding: 5px 7px; text-align: right; font-size: 12.5px;
}
.cost-extra input:focus { border-color: var(--signal); }
.cost-extra > span { font-family: var(--mono); font-size: 10px; color: var(--ink-5); }
/* L'offre sur laquelle la charge est indexée. */
.cost-drop:hover { border-color: var(--loss); color: var(--loss); }
.cost-year {
  flex: none; width: 80px; text-align: right; font-size: 11.5px; color: var(--ink-4);
}
.cost-more {
  flex: none; width: 26px; height: 26px; border: 1px solid transparent; background: none;
  cursor: pointer; color: var(--ink-4); font-size: 14px; line-height: 1;
}
.cost-more:hover { border-color: var(--rule); color: var(--ink); }
.cost-row.open .cost-more { border-color: var(--ink); color: var(--ink); }
.cost-detail { padding: 4px 12px 14px 56px; border-top: 1px solid var(--rule); background: var(--surface-2); }

@media (max-width: 720px) {
  .cost-line { flex-wrap: wrap; }
  .cost-label { flex: 1 1 100%; order: -1; }
  .cost-year { display: none; }
  .cost-mode select { max-width: 106px; }
  .cost-detail { padding-left: 12px; }
}

/* ──────────── De ce que paie l'entreprise à ce que touche le dirigeant ───── */
/* Quatre marches, dans l'ordre où l'argent descend, chacune expliquant ce qui
   la sépare de la précédente. Le détail exhaustif vient après, pas avant. */

.pay { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--signal); }
.pay-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--rule);
}
.pay-year {
  margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.pay-steps { display: flex; flex-direction: column; }
.pay-step { padding: 13px 18px; border-bottom: 1px solid var(--rule); position: relative; }
.pay-step:last-child { border-bottom: 0; }
.pay-step::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rule);
}
.pay-step.cost::before { background: var(--loss); }
.pay-step.final { background: var(--ink); }
.pay-step.final::before { background: var(--gain); }
.pay-step-main { display: flex; align-items: baseline; gap: 14px; }
.pay-step-k { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.pay-step-v { margin-left: auto; font-size: 22px; font-weight: 600; letter-spacing: -.035em; color: var(--ink); }
.pay-step.cost .pay-step-v { color: var(--loss); }
.pay-step.final .pay-step-k { color: #fff; }
.pay-step.final .pay-step-v { color: #4ADE9E; font-size: 28px; }
.pay-step-note { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-4); line-height: 1.5; max-width: 74ch; }
.pay-step.final .pay-step-note { color: #AEB9C9; }
.pay-foot {
  margin: 0; padding: 12px 18px; border-top: 1px solid var(--rule); background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-3);
}

/* La liste des plans, repliée : on l'ouvre quand on en change. */
.plans-fold > summary { list-style: none; cursor: pointer; position: relative; padding-right: 40px; }
.plans-fold > summary::-webkit-details-marker { display: none; }
.plans-fold > summary:hover { background: var(--surface-2); }
.plans-chevron {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); font-size: 16px; transition: transform .18s var(--ease);
}
.plans-fold[open] .plans-chevron { transform: translateY(-50%) rotate(90deg); }

/* ────────────────── Les six chiffres qu'on vient chercher ────────────────── */
/* Ils étaient rangés dans un pli. Ce sont pourtant ceux qu'un fondateur cite
   quand on lui demande où il en est : ils vivent dehors, sur une ligne. */

.figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule);
  background: var(--surface); margin-bottom: 16px;
}
.figure {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 13px 14px; border-right: 1px solid var(--rule);
  border-bottom: 2px solid transparent;
  background: none; cursor: pointer; font: inherit; text-align: left; min-width: 0;
  transition: background .12s, border-color .12s;
}
.figure:last-child { border-right: 0; }
.figure:hover { background: var(--surface-2); border-bottom-color: var(--ink); }

@media (max-width: 1240px) { .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Le total du coût de revient, sous sa décomposition. */
.cost-sum { margin-top: 14px; border-top: 2px solid var(--rule-strong); }
.cost-sum-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-3);
}
.cost-sum-line:last-child { border-bottom: 0; }
.cost-sum-line .num { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.cost-sum-line.strong { color: var(--ink); }
.cost-sum-line.strong .num { color: var(--gain); font-size: 19px; }
.cost-sum-line.bad .num { color: var(--loss); }

/* Une page fusionnée dans une autre : elle perd ses marges de page. */
.merged { margin-top: 30px; padding-top: 26px; border-top: 2px solid var(--rule-strong); }
.merged .content { padding: 0; max-width: none; }

/* ───────────────────────── L'équipe, ce sont des gens ────────────────────── */
/* Une liste de lignes de texte fait oublier qu'embaucher est la décision la
   plus lourde d'un business plan. La couleur porte le statut. */
.who {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink-5);
  border: 1px solid var(--rule);
}
.who svg { display: block; margin-top: 2px; }
.who-cdi, .who-cdd { color: var(--signal); background: var(--signal-wash); border-color: transparent; }
.who-dirigeant { color: #fff; background: var(--ink); border-color: var(--ink); }
.who-tns { color: #fff; background: var(--gain); border-color: var(--gain); }
.who-alternance, .who-stage { color: var(--warn); background: var(--warn-wash); border-color: transparent; }
.who-freelance { color: var(--ink-4); background: var(--surface); border-style: dashed; }
.who-count {
  position: absolute; right: -4px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--ink); color: #fff; font-size: 9px; font-weight: 600;
}
.item.is-off .who { filter: grayscale(1); }

/* ─────────────────── Avantages salariés (mode expert) ─────────────────── */
.perks { margin-top: 18px; border: 1px solid var(--rule); }
.perk { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.perk:last-child { border-bottom: 0; }
.perk .onoff { flex: none; margin-top: 2px; }
.perk-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.perk-help { font-size: 11.5px; color: var(--ink-4); line-height: 1.5; margin-top: 3px; max-width: 62ch; }
.perk:not(.on) .perk-help { display: none; }
.perk:not(.on) { background: var(--surface-2); }
.perk.on { background: var(--surface); }
.perk.on.is-legal { box-shadow: inset 3px 0 0 var(--signal); }
.perk-amount { flex: none; }
.perk-box {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--rule-strong); border-radius: 8px; padding: 4px 8px; background: var(--surface);
}
.perk-box:focus-within { border-color: var(--ink); }
.perk-input { width: 62px; border: 0; background: none; text-align: right; font-size: 14px; font-weight: 600; color: var(--ink); }
.perk-input:focus { outline: none; }
.perk-input::-webkit-outer-spin-button, .perk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.perk-total {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; background: var(--surface-2); border-top: 1px solid var(--rule-strong); font-size: 13px;
}
.perk-total .num { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
@media (max-width: 720px) {
  .perk { flex-wrap: wrap; }
  .perk-amount { margin-left: 46px; }
}

/* ─────────── En-tête du tableau de bord et verdict de côté ─────────── */
/* Le verdict : une pastille, un mot, une ligne. Le raisonnement se déplie. */
.verdict {
  flex: 0 1 340px; min-width: 250px; align-self: flex-end;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); overflow: hidden;
}

.verdict .spacer { min-width: 0; }

/* Deux graphiques côte à côte. */
.board-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.board-pair > .panel { margin-bottom: 0; }
.chart-note {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
  border-left: 2px solid var(--signal); padding-left: 10px;
}
@media (max-width: 980px) { .board-pair { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .verdict { flex: 1 1 100%; }
}

/* ───────── Le niveau de détail, rendu visible par la couleur ───────── */
.shell { --level: var(--ink); --level-wash: var(--surface-2); }
.shell[data-level="easy"] { --level: var(--gain); --level-wash: var(--gain-wash); }
.shell[data-level="intermediate"] { --level: var(--signal); --level-wash: var(--signal-wash); }
.shell[data-level="advanced"] { --level: #7C3AED; --level-wash: #EEE5FF; }

.levels { border-color: var(--level); }
.level-btn.active { background: var(--level); color: #fff; }
.rail-link.active { border-left-color: var(--level); }

/* Un bloc débloqué par la profondeur choisie. */
.lv {
  position: relative; margin: 20px 0 0; padding-left: 15px;
  border-left: 3px solid var(--lv-color);
}
.lv .perks, .lv .card { margin-top: 0; }

.ueco-sum {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start;
  margin-top: 14px; padding: 13px 15px;
  background: var(--surface-2); border: 1px solid var(--rule);
}
.ueco-sum-label { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.ueco-sum-value { font-size: 20px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); margin-top: 2px; }
.ueco-sum-note { flex: 1 1 260px; margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

/* ───────────────── Offre : la frise des encaissements ───────────────── */
.tline { margin-top: 16px; }
.tline-track { position: relative; height: 66px; margin: 0 4px; }
.tline-rule { position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--rule); }
.tline-gap {
  position: absolute; top: 5px; height: 10px; border-radius: 5px;
  background: repeating-linear-gradient(45deg, var(--warn-wash), var(--warn-wash) 4px, transparent 4px, transparent 8px);
  border: 1px solid var(--warn-wash);
}
.tline-point { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.tline-point > i {
  display: block; width: 11px; height: 11px; margin: 4px auto 0; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink-5);
}
.tline-point.paid > i { background: var(--ink); border-color: var(--ink); }
.tline-label { display: block; margin-top: 6px; white-space: nowrap; font-size: 11px; color: var(--ink-4); }
.tline-label b { display: block; font-size: 13px; color: var(--ink); font-weight: 650; }
/* Les libellés des extrémités s'alignent sur le point plutôt que de déborder. */
.tline-point[data-side="start"] .tline-label { transform: translateX(50%); }
.tline-point[data-side="end"] .tline-label { transform: translateX(-50%); }
.tline-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.tline-split { display: block; font-weight: 600; color: var(--ink); margin-bottom: 3px; }

/* ───────────────── Offre : les volumes, en courbe et en barres ───────────── */
.vol { border: 1px solid var(--rule); background: var(--surface); margin-top: 16px; }
/* La saisonnalité : un profil, puis douze mois qui se règlent un à un. */
.saison { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.saison-titre { font: 700 15px/1.3 var(--display); color: var(--ink); }
.saison-sous { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.saison-profils { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.saison-profil { border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; padding: 6px 12px; cursor: pointer; font: 600 12.5px/1.2 var(--sans); color: var(--ink-2); }
.saison-profil:hover { border-color: var(--ink); color: var(--ink); }
.saison-profil.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.saison-dit { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.saison-mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.saison-m { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.saison-barre { display: flex; align-items: flex-end; width: 100%; height: 56px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.saison-barre i { display: block; width: 100%; background: var(--ink); border-radius: 4px 4px 0 0; transition: height .2s; }
.saison-m.is-debut .saison-nom { color: var(--ink); font-weight: 700; }
.saison-nom { font: 600 11px/1.2 var(--mono); color: var(--ink-4); }
.saison-champ { display: inline-flex; align-items: baseline; gap: 2px; }
.saison-champ input { width: 44px; padding: 3px 4px; border: 1px solid var(--rule); border-radius: 6px; text-align: right; font-size: 12px; background: var(--surface); color: var(--ink); }
.saison-champ small { font-size: 10.5px; color: var(--ink-4); }
@media (max-width: 640px) { .saison-mois { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vol-head {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--rule); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-3);
}
.vol .chart { padding: 8px 6px 0; }
.vol-years {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--rule); background: var(--surface-2);
}
.vol-year { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-right: 1px solid var(--rule); }
.vol-year:last-child { border-right: 0; }
.vol-year-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--ink-4); }
.vol-year-bar { width: 22px; height: 38px; display: flex; align-items: flex-end; background: var(--rule); border-radius: 2px; overflow: hidden; }
.vol-year-bar > i { display: block; width: 100%; background: var(--gain); }
.vol-year-units { font-size: 14px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.vol-year-rev { font-size: 11px; color: var(--ink-4); }
.vol-note { margin: 0; padding: 11px 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }
@media (max-width: 640px) {
  .ueco-sum { gap: 16px; }
  .tline-label { font-size: 10px; }
}

/* Pas de délai du tout : une ligne suffit, un axe de longueur nulle n'a rien à dire. */
.tline-flat {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 16px;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--gain-wash);
}
.tline-flat-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gain); flex: none; margin-top: 3px; }
.tline-flat-title { font-size: 13px; font-weight: 650; color: var(--ink); }
.tline-flat-note { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin-top: 2px; }

/* Sélecteur segmenté générique — distinct du sélecteur de profondeur. */
.seg { display: inline-flex; border: 1px solid var(--rule-strong); background: var(--surface); }
.seg-btn {
  border: 0; background: none; padding: 7px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); border-right: 1px solid var(--rule); transition: background .12s, color .12s;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--surface-2); color: var(--ink); }
.seg-btn.active { background: var(--ink); color: #fff; }

/* ─────────────── Acquisition en mode simple : deux nombres ─────────────── */
.acq-sum {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin-top: 18px; background: var(--rule); border: 1px solid var(--rule);
}
.acq-sum-cell { background: var(--surface-2); padding: 12px 14px; }
.acq-sum-label { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.acq-sum-value { font-size: 22px; font-weight: 650; letter-spacing: -.035em; color: var(--ink); margin-top: 3px; }

.acq-scale { margin-top: 20px; }
.acq-scale-head { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 10px; }
.acq-scale-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.acq-scale-tag {
  flex: none; width: 74px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4);
}
.acq-scale-bar { flex: 1; height: 16px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.acq-scale-bar > i { display: block; height: 100%; border-radius: 3px; }
.acq-scale-bar > i.gain { background: var(--gain); }
.acq-scale-bar > i.loss { background: var(--loss); }
.acq-scale-num { flex: none; width: 96px; text-align: right; font-size: 14px; font-weight: 650; color: var(--ink); }
.acq-scale-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 76ch; }
@media (max-width: 640px) {
  .acq-sum { grid-template-columns: 1fr; }
  .acq-scale-tag { width: 58px; }
  .acq-scale-num { width: 76px; }
}

/* ─────────── Listes : l'action d'ajout en tête, pas tout en bas ─────────── */
.item-act {
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-4);
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer; flex: none;
  font-size: 12px; margin-right: 8px; transition: border-color .12s, color .12s;
}
.item-act:hover { border-color: var(--ink); color: var(--ink); }

/* ─── Le cadre d'un mode de revenu ───
   « Vente à l'unité » et « Abonnement » étaient deux blocs qu'on ajoutait et
   retirait, avec leur en-tête et leur croix. Ce sont désormais trois modes
   exclusifs choisis en haut : il ne reste du bloc que son cadre. */
.part { border: 1px solid var(--rule); padding: 14px; margin-bottom: 12px; background: var(--surface); }

/* ─────────── Financement : une grille de sources, pas une pile ─────────── */
/* Des tuiles bordées, pas un damier : la grille tramée laissait des cases
   grises là où la dernière ligne n'était pas remplie. */
.sources {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 8px; background: none;
}
.source {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 13px; background: var(--surface); cursor: pointer;
  border: 1px solid var(--rule); border-radius: 11px;
  font: inherit; text-align: left; min-width: 0;
  transition: background .12s, border-color .12s;
}
.source:hover { background: var(--surface-2); border-color: var(--ink-5); }
.source.is-open { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
/* L'icône de la source, à côté de son titre : grise tant qu'elle ne sert pas. */
.source-tete { display: flex; align-items: center; gap: 8px; min-width: 0; }
.source-icone {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-2); color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--rule);
  transition: background .14s var(--ease-soft), color .14s var(--ease-soft);
}
.source-icone svg { display: block; }
.source.is-on .source-icone { background: var(--ink); color: var(--accent); box-shadow: none; }
.source-cash .source-icone { background: var(--surface); color: var(--ink); }
/* Sous la rangée des sources, de l'air avant ce que le banquier vérifie. */
.view > .sources { margin-bottom: var(--s-5); }
.source-name { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.source-value { font-size: 17px; font-weight: 650; letter-spacing: -.035em; color: var(--ink-5); margin-top: 2px; }
.source.is-on .source-value { color: var(--ink); }
.source-count { font-size: 10.5px; color: var(--ink-4); }
.source-cash { background: var(--surface-2); cursor: default; }
.source-money {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  border: 1px solid var(--rule-strong); border-radius: 6px; padding: 2px 7px; background: var(--surface);
}
.source-money:focus-within { border-color: var(--signal); }
.source-input { width: 78px; border: 0; background: none; outline: 0; font-size: 15px; font-weight: 650; color: var(--ink); }
.source-line { border: 1px solid var(--rule); padding: 12px; background: var(--surface-2); }
/* En grille, « repeat(auto-fit, …) auto » est une déclaration invalide : une
   piste intrinsèque ne peut pas voisiner une répétition automatique. Le
   navigateur jetait la règle entière et empilait les champs sur toute la
   largeur, un par ligne. En flex, ils tiennent sur une seule ligne. */
.source-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.source-fields > .field { flex: 1 1 150px; min-width: 132px; }
.source-fields > .btn { flex: none; }
/* Toutes les sources sur une ligne.
   La grille à remplissage automatique posait six tuiles puis renvoyait
   « Avance remboursable » seule à la ligne suivante : une rangée et demie
   pour sept choix de même rang. Sur un écran assez large, elles se
   partagent la largeur en parts égales ; en dessous, la grille reprend. */
@media (min-width: 1100px) {
  .sources { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .source { padding: 11px 11px; }
  .source-money { max-width: 100%; }
  .source-input { width: 100%; min-width: 0; }
}
@media (max-width: 720px) {
  .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-fields > .field { flex: 1 1 calc(50% - 5px); }
}

/* ═══════════════════ Le poste de pilotage du tableau de bord ═══════════════ */
.cockpit {
  display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 1.5fr) minmax(210px, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-top: 2px solid var(--level, var(--rule-strong));
}
.cockpit > * { background: var(--surface); padding: 14px 16px; min-width: 0; }
.cockpit-score { display: flex; align-items: center; gap: 14px; }
.cockpit-ring { position: relative; width: 64px; height: 64px; flex: none; }
.cockpit-ring svg { display: block; }
.cockpit-pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 17px; font-weight: 650; letter-spacing: -.04em; color: var(--ink);
}
.cockpit-rank { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--ink); }
.cockpit-sub { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; margin-top: 3px; }

.cockpit-badges { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px 3px 7px;
  font-size: 11.5px; color: var(--ink-5); background: var(--surface-2);
  transition: border-color .12s, color .12s, background .12s;
}
.badge-glyph { font-size: 11px; opacity: .55; }
.badge.is-won { color: var(--ink); background: var(--gain-wash); border-color: transparent; }
.badge.is-won .badge-glyph { color: var(--gain); opacity: 1; }
.badge-value { font-size: 10.5px; color: var(--gain); font-weight: 650; }

.cockpit-next { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.cockpit-next-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
}
.cockpit-next-label { font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.015em; }
.cockpit-next-hint { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
.cockpit-next .btn { align-self: flex-start; }

/* Les manettes */
.deck {
  border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong);
}
@media (max-width: 980px) {
  .cockpit { grid-template-columns: 1fr; }
    }

/* ─────────────── Les conseils, en onglets plutôt qu'empilés ─────────────── */
.advice { background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--rule-strong); }

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE DE FORME — 2027

   Le fond ne bouge pas : même encre, même bleu de signal, mêmes chiffres à
   chasse fixe. Ce qui change, c'est la matière. Les angles vifs et les filets
   pleins donnaient un outil juste mais sec ; un rayon constant, une ombre
   basse et des séparateurs plus clairs rendent la densité supportable sans
   rien retirer au sérieux. Rien ici ne modifie une valeur ni une hiérarchie.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;
  --lift: 0 1px 2px rgba(11, 14, 16, .04), 0 10px 30px -18px rgba(11, 14, 16, .22);
}

.card,
.panel,
.item,
.advice,
.deck,
.cockpit,
.figures,
.nudges,
.perks,
.vol,
.ueco-sum,
.sources {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift);
}
.kpi, .part, .source-line, .note, .gauge { border-radius: var(--r-md); }
.gauge { box-shadow: none; }
.btn { border-radius: var(--r-sm); }
.btn-lg { border-radius: var(--r-md); }
.control { border-radius: var(--r-sm); }
.levels, .seg { border-radius: var(--r-sm); overflow: hidden; }
.chip { border-radius: 999px; }
.help { border-radius: 5px; }
.modal { border-radius: var(--r-lg); }
.drawer { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.toast { border-radius: var(--r-sm); }
.setup-sector, .setup-choice, .setup-cost { border-radius: var(--r-md); }
.empty-icon { opacity: .2; }

/* Les filets internes s'allègent : la séparation suffit, l'insistance non. */
.card-head, .panel-head, .item-body, .cost-row, .lever, .gauge,
table.data th, table.data td { border-color: var(--rule); }
.card, .panel, .item, .advice, .deck, .figures, .nudges {
  border-top-width: 1px;
}
/* Sauf l'accent de tête, qui devient un liseré de couleur au lieu d'un trait noir. */
.card, .panel, .item, .advice, .deck, .figures, .nudges {
  border-top-color: var(--rule);
}
.figures { box-shadow: var(--lift), inset 0 2px 0 var(--level, var(--ink)); }
.cockpit { box-shadow: var(--lift), inset 0 2px 0 var(--level, var(--ink)); border-top-color: var(--rule); }

/* Le rail : moins de contraste brut, plus de profondeur. */
.rail-link { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* Les entrées de tableau respirent d'un point de plus. */
table.data th, table.data td { padding: 9px 12px; }

@media (max-width: 860px) {
  .card,
.panel,
.item,
.advice,
.deck,
.cockpit,
.figures,
.nudges,
.perks,
.vol,
.sources { border-radius: var(--r-md); }
  .drawer { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ═══════════════ Navigation horizontale et volets ═══════════════════════ */
/* Une page de saisie n'est plus une pile : ses sujets tiennent sur une ligne,
   et l'on n'affiche que celui qu'on regarde. Le défilement devient l'exception. */

/* Le bandeau de section n'est plus un titre : le module en porte déjà un, et
   deux titres empilés repoussaient les chiffres d'un demi-écran. Il reste une
   ligne — ce qu'on regarde, son ordre de grandeur, et l'action pour ajouter. */
.pagebar {
  display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap;
  margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
.pagebar-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.pagebar-title {
  font-family: var(--display); font-size: var(--t-block); font-weight: 700;
  letter-spacing: -.024em; color: var(--ink); margin: 0; line-height: 1.2;
}
.pagebar-sub { font-size: var(--t-block-sub); color: var(--ink-4); margin-top: 0; }

.hnav {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--rule); margin-bottom: var(--s-3);
}
.hnav::-webkit-scrollbar { display: none; }
.hnav-tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: var(--h-tab);
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink-4); padding: 6px 12px; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.hnav-tab:hover { color: var(--ink); background: var(--surface-2); }
.hnav-tab.active { font-weight: 600; }
.hnav-count {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  background: var(--surface-2); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.hnav-tab.active .hnav-count { background: var(--level, var(--ink)); color: #fff; }

/* Le panneau n'est plus animé à chaque rendu.
   Cette règle rejouait un fondu à chaque reconstruction de la vue — y compris
   quand on cochait une simple case : tout le bloc des charges clignotait pour
   un interrupteur. L'entrée appartient à un changement d'onglet délibéré,
   pas à un recalcul ; elle est portée par la transition de vue, plus bas. */
.view-intro {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 12.5px; color: var(--ink-4); line-height: 1.55;
}
.view-foot { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Un volet */
.volet { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); margin-top: 12px; }

/* Montant avec unité commutable */
.unit-control { padding-right: 4px; }
.unit-switch { display: inline-flex; gap: 2px; flex: none; padding: 3px; }
.unit-btn {
  border: 0; background: none; cursor: pointer; border-radius: 6px; padding: 4px 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--ink-5);
  transition: background .12s, color .12s;
}
.unit-btn:hover { color: var(--ink); }
.unit-btn.active { background: var(--ink); color: #fff; }

/* La carte de lecture d'un salaire */
.paycard-note { font-size: 11.5px; color: var(--ink-4); }

/* La politique d'avantages, au niveau de l'entreprise */
.policy-top {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 26px; align-items: start;
  padding: 16px 0 18px; border-bottom: 1px solid var(--rule); margin-bottom: 4px;
}
.policy-figure { font-size: 27px; font-weight: 650; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.policy-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); margin-top: 5px;
}
.policy-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 760px) {
  .policy-top { grid-template-columns: 1fr 1fr; gap: 16px; }
  .policy-note { grid-column: 1 / -1; }
}

/* Les charges qu'on oublie : des pastilles, pas une liste de boutons. */
.suggest {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule);
}
.suggest-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); margin-right: 3px;
}
.suggest-chip {
  border: 1px solid var(--rule); background: var(--surface); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; color: var(--ink-3); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.suggest-chip:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }

/* ─────── Changer de profondeur : une continuité, pas une rupture ───────── */
/* Le bouton dit ce qu'il ajoute avant qu'on clique. */
.levels { position: relative; }
.level-btn { position: relative; }
.level-btn::after {
  content: attr(data-preview);
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 60;
  width: max-content; max-width: 320px; text-align: left;
  background: var(--ink); color: #E6EAED; font-family: var(--sans);
  font-size: 11.5px; line-height: 1.5; letter-spacing: 0; text-transform: none;
  padding: 8px 11px; border-radius: var(--r-sm);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
  box-shadow: 0 12px 30px -14px rgba(11, 14, 16, .5);
}
.level-btn:hover::after, .level-btn:focus-visible::after { opacity: 1; transform: translateY(0); }
.level-btn.active::after { display: none; }

/* Les blocs qui viennent d'apparaître se posent, ils ne surgissent pas. */
.shell[data-shift="up"] .view,
.shell[data-shift="up"] .lv,
.shell[data-shift="up"] .hnav-tab,
.shell[data-shift="up"] .card,
.shell[data-shift="up"] .item { animation: settle .38s var(--ease) both; }
.shell[data-shift="up"] .hnav-tab:nth-child(2) { animation-delay: .04s; }
.shell[data-shift="up"] .hnav-tab:nth-child(3) { animation-delay: .08s; }
.shell[data-shift="up"] .hnav-tab:nth-child(4) { animation-delay: .12s; }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .shell[data-shift] * { animation: none !important; }
}

/* ═══════════════ Le seuil : combien de clients pour vivre ══════════════════ */
/* ─── Le seuil, écrit comme une division ─── */
.seuil {
  border: 1px solid var(--rule); border-radius: 14px; background: var(--surface);
  overflow: hidden;
}
.seuil-eq {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center; gap: 0;
}
.seuil-term { padding: 20px 22px; min-width: 0; }
.seuil-term-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
}
.seuil-term-value {
  font-size: 30px; font-weight: 650; letter-spacing: -.045em;
  color: var(--ink); margin-top: 8px; line-height: 1;
}
.seuil-term-note { margin-top: 9px; max-width: 30ch; }
/* Le résultat est le seul terme sur fond d'encre : c'est lui qu'on retient. */
.seuil-term.is-result { background: var(--ink); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.seuil-term.is-result .seuil-term-tag { color: var(--accent); }
.seuil-term.is-result .seuil-term-value { color: #fff; font-family: var(--display); font-weight: 800; font-size: 44px; }
.seuil-term.is-result .seuil-term-note { color: #8A8D82; }
.seuil-op {
  font-family: var(--mono); font-size: 20px; color: var(--ink-5);
  padding: 0 6px; align-self: center;
}
.seuil-where { padding: 0 22px 20px; }
.seuil-meter { height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.seuil-meter > i { display: block; height: 100%; background: var(--ink); transition: width .4s var(--ease); }
.seuil.is-ok .seuil-meter > i { background: var(--gain); }
.seuil-line { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 860px) {
  .seuil-eq { grid-template-columns: 1fr; }
  .seuil-op { padding: 0 22px 6px; }
  .seuil-term.is-result { padding: 18px 22px; }
}

/* Les curseurs du modèle */
.knobs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); box-shadow: var(--lift); margin-bottom: 18px;
}
.knob { border-right: 1px solid var(--rule); }
.knob:last-child { border-right: 0; }
.knob-range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: none; cursor: grab; }
.knob-range:active { cursor: grabbing; }
.knob-range::-webkit-slider-runnable-track { height: 3px; background: var(--rule); border-radius: 2px; }
.knob-range::-moz-range-track { height: 3px; background: var(--rule); border-radius: 2px; }
.knob-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--level, var(--signal)); border: 0; margin-top: -6.5px; transition: transform .1s;
}
.knob-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--level, var(--signal)); border: 0; }
.knob-range:hover::-webkit-slider-thumb { transform: scale(1.18); }

/* La sensibilité */
.sens { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--lift); }
.sens-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; gap: 14px; align-items: baseline;
  padding: 13px 16px; border-bottom: 1px solid var(--rule);
}
.sens-row:last-child { border-bottom: 0; }
.sens-label { font-size: 13.5px; color: var(--ink-2); }
.sens-value { font-size: 15px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); }
.sens-delta { text-align: right; font-size: 13px; color: var(--ink-4); }
.sens-row.is-good .sens-delta { color: var(--gain); font-weight: 650; }
.sens-row.is-bad .sens-delta { color: var(--loss); font-weight: 650; }

.model-sector {
  margin: 18px 0 0; font-size: 12px; color: var(--ink-4); line-height: 1.6;
  border-left: 2px solid var(--rule); padding-left: 12px;
}

@media (max-width: 900px) {
  .seuil { grid-template-columns: 1fr; }
    .knob { border-right: 0; }
  .sens-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sens-delta { grid-column: 2; text-align: right; }
}

/* Le rappel d'étape : une ligne, un chevron. */
.step-line { box-shadow: none; }
.step-line-head {
  align-items: center; cursor: pointer; list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule); user-select: none;
}
.step-line-head::-webkit-details-marker { display: none; }
.step-line-head:hover { border-color: var(--ink-5); }
.step-line-no {
  flex: none; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-4); border: 1px solid var(--rule);
}
.step-line.done .step-line-no { background: var(--gain); color: #fff; border-color: transparent; }
.step-line-q { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.step-line-done {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gain); flex: none;
}
.step-line-chev { color: var(--ink-5); font-size: 13px; flex: none; transition: transform .38s var(--ease-soft); }
.step-line[open] .step-line-chev { transform: rotate(90deg); }
.step-line-why {
  margin: 8px 0 0; padding: 0 12px 0 44px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 90ch;
}

/* ═══════════════════════ L'infobulle des graphiques ════════════════════════ */
/* Elle répond tout de suite, dans la langue du reste : un titre, une ligne par
   série, la pastille de couleur qui la relie au dessin. */
.ctip {
  position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none;
  min-width: 152px; max-width: 280px;
  background: var(--ink); color: #E6EAED; border-radius: var(--r-sm);
  padding: 9px 11px; box-shadow: 0 18px 40px -18px rgba(11, 14, 16, .65);
  opacity: 0; transition: opacity .1s var(--ease);
}
.ctip.is-on { opacity: 1; }
.ctip-head {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #8E99A2; margin-bottom: 7px;
}
.ctip-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.7; }
.ctip-row.is-strong { border-top: 1px solid #2A3238; margin-top: 4px; padding-top: 5px; }
.ctip-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ctip-label { color: #B9C1C7; flex: 1; min-width: 0; }
.ctip-row.is-strong .ctip-label { color: #fff; }
.ctip-value { color: #fff; font-weight: 600; white-space: nowrap; }
.chart-hot { cursor: crosshair; }
.donut .chart-hot, svg .chart-hot[stroke] { cursor: pointer; }

/* Le « i » d'une tuile : posé dans l'angle, discret jusqu'au survol. */
.figure { position: relative; }

/* ═════════ Le papier change de teinte avec la profondeur ═══════════════════ */
/* Trois univers, trois papiers. L'écart est volontairement faible — deux ou
   trois points de saturation — mais il suffit à faire sentir qu'on a changé
   d'espace, là où un simple bouton actif ne le disait qu'à qui le cherchait.
   L'encre, elle, ne bouge jamais : la lisibilité n'est pas négociable. */
.shell {
  background: var(--paper);
  transition: background .45s var(--ease);
}
.shell[data-level="easy"] { --paper: #F0F4F1; }
.shell[data-level="intermediate"] { --paper: #F0F2F7; }
.shell[data-level="advanced"] { --paper: #F3F0F7; }
.shell[data-level="easy"] { --surface-2: #F8FAF8; }
.shell[data-level="intermediate"] { --surface-2: #F8F9FC; }
.shell[data-level="advanced"] { --surface-2: #FAF8FC; }

/* La barre du haut suit le papier, sinon elle flotte au-dessus d'un autre fond. */
.topbar { background: color-mix(in srgb, var(--paper) 88%, transparent); transition: background .45s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .shell, .topbar { transition: none; }
}

/* Le guide d'une partie : trois colonnes courtes, dépliées à la demande. */
.step-guide .step-line-why { padding: 0; margin: 0 0 12px; }
.guide-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.guide-cell p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.guide-cell-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 5px;
}
.step-line.todo .step-line-no,
.step-line .step-line-no:not(.num) { font-family: var(--mono); font-style: italic; }

/* Le rappel « à quoi sert cette partie » n'est pas un panneau : c'est une
   pastille posée sous le chapô, qu'on ouvre si on en a besoin. Avant, un
   encadré blanc dans un encadré blanc occupait une bande entière pour une
   ligne de texte. */
.step-line {
  display: block; padding: 0; margin: -12px 0 20px;
  background: none; border: 0;
}
.step-line-head {
  display: inline-flex; width: auto; gap: 8px; padding: 5px 12px 5px 6px;
  border-radius: 999px; border-color: var(--rule); color: var(--ink-3);
}
.step-line-head .step-line-q { flex: none; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.step-line-head:hover .step-line-q { color: var(--ink); }
.step-line-no { width: 18px; height: 18px; font-size: 9.5px; border-radius: 999px; }
.step-line[open] .step-line-head { border-color: var(--ink); }
.step-guide { padding: 12px 0 0 2px; }
@media (max-width: 720px) {
  .step-guide { padding-left: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRUT — la couche éditoriale

   Le logiciel cesse de ressembler à un formulaire bien élevé. Titres de
   poster, libellés en capitales étroites, cartes blanches sur crème, un seul
   vert acide pour dire « ici ». La densité vient de la typographie, pas de
   l'accumulation de blocs. Ce qui précède reste en place : cette couche ne
   remplace pas le système, elle lui donne une voix.
   ═══════════════════════════════════════════════════════════════════════════ */

body { background: var(--paper); }

/* ─── Le rail : neuf modules numérotés, rien d'autre ─── */
.rail {
  background: var(--ink);
  padding: 14px 0 10px;
  gap: 0;
  --rail-dim: #83857A;
}
.rail-mark {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); border-radius: 5px; padding: 5px 9px;
  font-family: var(--display); font-weight: 800; font-size: 15.5px; letter-spacing: -.035em;
}
.rail-year {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  border: 1px solid #34362E; border-radius: 4px; padding: 3px 7px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--rail-dim);
}

.rail-link {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px;
  padding: 7px 14px; border: 0; background: none; width: 100%; text-align: left;
  color: #C3C5BA; font-weight: 500; font-size: 13px; cursor: pointer;
  border-left: 0; position: relative;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.rail-no {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--rail-dim);
}
.rail-link:hover { background: #191B15; color: #fff; }
.rail-link.active { background: var(--accent); color: var(--ink); font-weight: 700; }
.rail-link.active .rail-no { color: var(--ink); opacity: .6; }
.rail-link .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
.rail-tick { font-size: 11px; color: #5E6156; }
.rail-link.done .rail-tick { color: var(--accent); }
.rail-link.active .rail-tick { color: var(--ink); opacity: .55; }
.rail-foot { margin-top: auto; padding: 8px 14px 0; border-top: 1px solid #22241D; }
.rail-foot .rail-link { padding-left: 0; padding-right: 0; grid-template-columns: 20px 1fr; }

/* ─── La barre du haut : un fil d'ariane, deux actions ─── */
.topbar { border-bottom: 1px solid var(--rule); gap: 14px; }
.crumb {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.topbar h1 { display: none; }

/* ─── Le titre de module : un poster, pas un en-tête de formulaire ─── */
.module-bar { width: 22px; height: 5px; background: var(--accent); border-radius: 2px; flex: none; }
/* Le tiret jaune précède le titre, sur sa ligne. */
.module-title .module-bar { display: inline-block; vertical-align: middle; position: relative; top: -.1em; width: .6em; height: .14em; margin-right: .32em; border-radius: 2px; }
.module-title {
  text-wrap: balance;
}
/* ─── Les cartes de saisie ─── */
.slab {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 18px 16px; margin-bottom: var(--s-3);
}
.slab-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--s-3); }
.slab-title { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--ink); }
.slab-sub { font-size: 12.5px; color: var(--ink-4); margin-top: 3px; line-height: 1.5; }

/* Les choix en pavés : un intitulé, une glose */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; }
.pick {
  text-align: left; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface);
  padding: 11px 13px; cursor: pointer; font: inherit;
  transition: border-color .12s, background .12s, color .12s, transform .08s;
}
.pick:hover { border-color: var(--ink-4); }
.pick:active { transform: translateY(1px); }
.pick-name { font-size: 13px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.pick-note { font-size: 10.5px; color: var(--ink-4); margin-top: 3px; line-height: 1.4; }
.pick.active { background: var(--ink); border-color: var(--ink); }
.pick.active .pick-name { color: #fff; }
.pick.active .pick-note { color: #9EA196; }

/* Le bouton qui fait avancer */
.btn-go {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  border-radius: 999px; font-weight: 650; padding: 9px 18px;
}
.btn-go.btn-sm { padding: 6px 14px; font-size: 12.5px; }
.btn-go:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--accent-ink); }
.btn-pill { border-radius: 999px; }

/* ─── Le bandeau de droite a été retiré : ses styles restent pour l'export. ─── */
.live {
  width: var(--live-w); flex: none; padding: 26px 18px 26px 0;
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: var(--header-h); align-self: start;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto; scrollbar-width: thin;
}
@keyframes live-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

@media (max-width: 1180px) {
  .live { display: none; }
}

/* ─── « + Affiner » : la profondeur, là où elle sert ─── */
.refine { margin-top: 14px; border-top: 1px dashed var(--rule); }
.refine-head {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 11px 0 0; user-select: none; color: var(--ink-3);
  font-size: 12.5px; transition: color .12s;
}
.refine-head::-webkit-details-marker { display: none; }
.refine-head:hover { color: var(--ink); }
/* Un seul signe de pli dans toute l'application : un chevron dans un rond,
   qui se retourne. Il y en avait trois — un chevron, un « + » devenant croix,
   un bouton portant le mot « Déplier » — et la croix, qui veut dire
   « annuler » partout ailleurs, faisait craindre de perdre quelque chose. */
.foldsign {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-4);
  flex: none; line-height: 0; padding: 0;
  transition: transform .42s var(--ease-soft), background .2s var(--ease), color .2s, border-color .2s;
}
.foldsign svg { width: 13px; height: 13px; display: block; }
.refine-head:hover .foldsign { border-color: var(--ink); color: var(--ink); }
details[open] > .refine-head .foldsign {
  transform: rotate(180deg); border-color: var(--ink); color: var(--ink);
}
.refine-label { font-weight: 500; }
.refine[open] .refine-label { color: var(--ink); font-weight: 600; }
/* Aucune animation ici.
   Elle rejouait à chaque rendu, pour chaque volet ouvert de la page : ouvrir
   une famille de métiers refondait les trois volets du module. Le geste
   d'ouverture est déjà animé par `installMotion`, qui, lui, n'agit que sur un
   vrai clic. */
.refine-body { padding-top: 14px; }
.refine-body > .grid + .grid { margin-top: 12px; }
/* Le résumé, aligné à droite : ce que le volet contient sans l'ouvrir. */
.refine-sum { margin-left: auto; padding-left: 16px; font-size: 12px; color: var(--ink-4); }
.refine-head:has(.refine-sum) { display: flex; width: 100%; }
/* Un volet qui porte une section entière, et non trois champs de réglage,
   garde un peu plus d'air autour de lui. */
.refine-block { margin-top: 18px; }
.refine-block > .refine-body { padding-top: 16px; }

/* Le métier une fois choisi : un état, pas une grille de seize cartes. */
.picked {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; background: var(--surface-2);
}
.picked .btn { margin-left: auto; }

/* La complétude : des lignes cliquables, pas des boutons de formulaire. */
.item-act.is-drop:hover { border-color: var(--loss); color: var(--loss); }

/* ─── L'en-tête d'un module ─── */
.module-title {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-page); line-height: 1.04; letter-spacing: -.035em;
  color: var(--ink); margin: 0; max-width: 24ch; text-wrap: balance;
}

/* ═══════════ Ce qui manque, avant ce qu'on a trouvé ═════════════════════
   Au sortir du parcours, l'écran donne des chiffres nets, avec l'autorité
   d'un résultat — alors que la moitié des lignes vient encore des repères du
   métier. Ce bandeau le dit avant tout le reste. Il emprunte au bloc noir sa
   force : c'est la seule chose de la page qui parle plus fort que le verdict,
   et c'est voulu tant que le dossier n'est pas fini. */

/* ─── Le chiffre à retenir ─── */
.keystone {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff; border-radius: 14px;
  padding: 22px 24px; margin: 16px 0;
}
/* Un quart de cercle, pas une pastille : le disque est ancré dans l'angle et
   n'en laisse voir qu'un quartier. */
.keystone-arc {
  position: absolute; right: -96px; bottom: -96px; width: 250px; height: 250px;
  border-radius: 50%; background: var(--accent); pointer-events: none;
}
.keystone-tag {
  position: relative; font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.keystone-value {
  position: relative; font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.04em; line-height: 1.05; margin-top: 6px;
}
.keystone-note {
  position: relative; margin: 8px 0 0; font-size: 12.5px; line-height: 1.6;
  color: #B7BAAE; max-width: 58ch;
}

/* ─── Deux colonnes de cartes, quand elles se lisent ensemble ─── */
.slab-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Deux blocs côte à côte partent du même trait.
   La règle qui espace deux blocs empilés — « .slab + .slab » — s'appliquait
   aussi au second d'une paire, bien qu'il ne soit pas dessous mais à côté :
   il descendait de dix-huit pixels, et la grille, qui étire ses cases sur
   toute la hauteur, lui reprenait ces dix-huit pixels en bas. Les deux
   boîtes commençaient donc à des hauteurs différentes pour finir ensemble.
   Dans une paire, l'écart est celui de la grille, et rien d'autre. */
.slab-pair > .slab { margin-bottom: 0; }
.slab-pair > .slab + .slab { margin-top: 0; }

/* Chaque source de financement s'ajoute et se retire depuis sa tuile. */
.source { position: relative; padding-bottom: 34px; }
.source-acts { position: absolute; left: 12px; bottom: 9px; display: flex; gap: 5px; }
.source-act {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink-4); cursor: pointer;
  font-size: 13px;
  transition: border-color .12s, color .12s, background .12s;
}
.source-act.is-on { border-color: var(--ink); color: var(--ink); }
.source-act.is-on:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.source-act.is-off:hover { border-color: var(--loss); color: var(--loss); background: var(--loss-wash); }
.source-cash { padding-bottom: 14px; }

/* ─── Ce qui reste à affiner ─── */
/* Ce bloc ne demande rien : il propose.
   Un halo jaune autour faisait une tache et criait plus fort que la page. Ce
   qui le distingue maintenant, c'est sa matière : un fond prune très clair, un
   filet vertical plein à gauche, et un titre de la même couleur. Il se
   reconnaît d'un coup d'œil parmi les cartes blanches sans rien éclairer. */
.affine {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4);
  padding: 8px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), inset 3px 0 0 var(--ink);
}
.affine-title { margin-right: 4px; font: 600 12.5px/1.2 var(--sans); color: var(--ink-3); white-space: nowrap; }
.affine-item {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface-2);
  transition: border-color .14s var(--ease-soft), background .14s var(--ease-soft);
}
.affine-item:hover { border-color: var(--ink); background: var(--surface); }
.affine-item-label { font: 600 12.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.affine-item-go { font-size: 12px; color: var(--ink-4); }
.affine-item:hover .affine-item-go { color: var(--ink); }

/* ─── L'anneau qui dit « c'est ici » ─── */
/* Trois secondes, deux respirations, aucune secousse : l'attention se conduit,
   elle ne s'arrache pas. La couleur d'accent dit « ici » partout ailleurs dans
   l'interface ; elle le dit aussi ici. */
@keyframes spotlit-ring {
  0%   { box-shadow: 0 0 0 0 rgba(214, 240, 52, 0); }
  12%  { box-shadow: 0 0 0 5px rgba(214, 240, 52, .55); }
  46%  { box-shadow: 0 0 0 2px rgba(214, 240, 52, .28); }
  62%  { box-shadow: 0 0 0 5px rgba(214, 240, 52, .48); }
  100% { box-shadow: 0 0 0 0 rgba(214, 240, 52, 0); }
}
.spotlit {
  animation: spotlit-ring 3.2s var(--ease) 1;
  border-radius: 12px; scroll-margin-top: 90px;
}
/* Le reflet de l'arrivée : une lumière qui traverse la zone, de gauche à
   droite, en une seconde. Elle se pose par-dessus, sans rien déplacer. */
.is-shine { position: relative; }
.is-shine::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(100deg, transparent 0%, transparent 38%, rgba(214, 240, 52, .42) 50%, rgba(255, 255, 255, .5) 53%, transparent 64%, transparent 100%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: shine-sweep 1s cubic-bezier(.45, .05, .3, 1) both;
}
@keyframes shine-sweep {
  from { background-position: 120% 0; opacity: 1; }
  85%  { opacity: 1; }
  to   { background-position: -20% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .spotlit { animation: none; box-shadow: 0 0 0 3px rgba(214, 240, 52, .5); }
}

/* ─── Ce qu'il te reste, net de tout ─── */
.netsum {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  border-radius: 14px; padding: 22px 24px; margin-bottom: 18px;
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px; align-items: center;
}
/* Le quartier d'accent reste dans l'angle : plus large, il passait sous les
   chiffres de droite et les rendait illisibles. */
.netsum-arc {
  position: absolute; right: -150px; top: -150px; width: 260px; height: 260px;
  border-radius: 50%; background: var(--accent); pointer-events: none;
}
.netsum-main { position: relative; min-width: 0; }
.netsum-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.netsum-value {
  font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -.045em; line-height: 1.02; margin-top: 6px;
}
.netsum-month { font-size: 12.5px; color: #B7BAAE; margin-top: 4px; }
.netsum-what { margin: 14px 0 0; max-width: 34ch; font-size: 12.5px; line-height: 1.55; color: #B7BAAE; }
.netsum-split {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; border-left: 1px solid #2A3228;
}
.netsum-cell { padding: 2px 16px; border-right: 1px solid #2A3228; min-width: 0; }
.netsum-cell:last-child { border-right: 0; }
.netsum-cell-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: #8A8D82;
}
.netsum-cell-value { font-size: 19px; font-weight: 650; letter-spacing: -.03em; margin-top: 5px; color: #fff; }
.netsum-cell.is-out .netsum-cell-value { color: #FF8A9B; }
.netsum-cell-note { margin-top: 4px; }
.netsum.is-empty { grid-template-columns: 1fr; }
.netsum-note { position: relative; margin: 8px 0 0; font-size: 12.5px; color: #B7BAAE; max-width: 70ch; line-height: 1.6; }

@media (max-width: 900px) {
  .netsum { grid-template-columns: 1fr; gap: 16px; }
  .netsum-split { border-left: 0; border-top: 1px solid #2A3228; padding-top: 14px; grid-template-columns: 1fr; gap: 12px; }
  .netsum-cell { border-right: 0; padding: 0; }
}

/* ═══════════════════════ Le calme : hiérarchie et densité ══════════════════
   Trois reproches, un seul remède.

   « Trop chargé » : chaque carte portait un filet noir de deux pixels en tête.
   Six cartes sur une page, six barres noires, et l'œil ne sait plus laquelle
   compte. Le filet lourd est désormais réservé aux blocs qui décident.

   « Des textes plus gros que des titres » : les tailles s'étaient accumulées au
   fil des pages. Une seule échelle, appliquée partout, remet l'ordre.

   « Un chiffre énorme et dessous une note qu'on ne comprend pas » : la note
   sous un nombre est une phrase, pas une étiquette — elle a droit à la même
   lisibilité que le reste du texte.
   ═══════════════════════════════════════════════════════════════════════════ */

.card, .panel { border-top-color: var(--rule); }
/* Le filet d'encre ne reste que là où il désigne : le bloc qui porte la
   décision de la page. */
.panel.is-key, .card.is-key { border-top: 2px solid var(--rule-strong); }

/* L'échelle des titres. Un seul niveau par rôle, la même valeur partout. */
.card-head h2, .panel-head h2, .panel h2 {
  font-family: var(--display); font-size: var(--t-block); font-weight: 700;
  letter-spacing: -.024em; line-height: 1.2; color: var(--ink);
}
.card-head .tiny.muted, .panel-head .tiny.muted, .panel-sub {
  font-size: var(--t-block-sub); color: var(--ink-4); line-height: 1.5; margin-top: 3px;
}

/* L'échelle des nombres : trois marches, pas sept.
   22 px pour une cellule, 28 px pour un terme d'opération, 38 px et plus pour
   le seul chiffre que la page veut faire retenir. */
.kpi-value { font-size: 22px; }

/* La note sous un nombre se lit comme une phrase. */
.kpi-sub, .sim-fig-gap, .seuil-term-note, .netsum-cell-note {
  font-size: 11.5px; line-height: 1.5; color: var(--ink-4);
}

/* De l'air entre les blocs : la densité venait autant des marges que du
   contenu. */
.board-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.view > .card + .card, .view > .panel + .panel { margin-top: 14px; }

/* ═══════════════════════════════ La présentation ═══════════════════════════
   Quinze écrans plein cadre. Une idée par écran, un chiffre par idée, et rien
   autour : ni rail, ni fil d'Ariane, ni bouton qu'on n'utilisera pas pendant
   qu'on parle. Le fond d'encre marque les quatre moments qui décident.
   ═══════════════════════════════════════════════════════════════════════════ */
.deck {
  position: fixed; inset: 0; z-index: 70; background: var(--paper);
  display: flex; flex-direction: column; outline: 0;
}
.deck-bar {
  display: flex; align-items: center; gap: 20px; flex: none;
  padding: 14px 24px; border-bottom: 1px solid var(--rule);
}
.deck-exit {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink-4); padding: 4px 2px; transition: color .2s var(--ease-soft);
}
.deck-exit:hover { color: var(--ink); }
.deck-dots { display: flex; gap: 5px; flex: 1; justify-content: center; flex-wrap: wrap; }
.deck-dot {
  width: 22px; height: 4px; border: 0; border-radius: 3px; padding: 0;
  background: var(--rule); cursor: pointer;
  transition: background .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.deck-dot.seen { background: var(--ink-5); }
.deck-dot.active { background: var(--ink); transform: scaleY(1.8); }
.deck-dot:hover { background: var(--ink-4); }
.deck-count { font-size: 12px; color: var(--ink-4); flex: none; }

.deck-stage { flex: 1; display: grid; place-items: center; padding: 3vh 5vw; overflow-y: auto; min-height: 0; }

.slide {
  width: 100%; max-width: 1000px;
  animation: slide-in .5s var(--ease-soft) both;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.slide-inner {
  border: 1px solid var(--rule); border-radius: 22px; background: var(--surface);
  padding: clamp(26px, 4vw, 52px);
}
.slide.is-dark .slide-inner { background: var(--ink); border-color: var(--ink); color: #fff; }
.slide-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px;
}
.slide.is-dark .slide-kicker { color: var(--accent); }
.slide-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 4.4vw, 52px); line-height: .98; letter-spacing: -.045em;
  color: var(--ink); margin: 0; max-width: 20ch; text-wrap: balance;
}
.slide.is-dark .slide-title { color: #fff; }
.slide-lead {
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; color: var(--ink-3);
  margin: 16px 0 0; max-width: 62ch;
}
.slide.is-dark .slide-lead { color: #B7BAAE; }
.slide-body { margin-top: 28px; }
.slide-foot {
  margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.6; color: var(--ink-4); max-width: 76ch;
}
.slide.is-dark .slide-foot { border-top-color: #2A3228; color: #8A8D82; }

.slide-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; }
.slide-fact-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.slide.is-dark .slide-fact-tag { color: #8A8D82; }
.slide-fact-value {
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 650; letter-spacing: -.04em;
  color: var(--ink); margin-top: 8px; line-height: 1.1;
}
.slide.is-dark .slide-fact-value { color: #fff; }
.slide-fact-note { font-size: 12px; color: var(--ink-4); margin-top: 5px; line-height: 1.45; }
.slide.is-dark .slide-fact-note { color: #8A8D82; }

.slide-headline { margin-bottom: 24px; }
.slide-headline-value {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 7vw, 86px); line-height: .94; letter-spacing: -.05em; color: var(--ink);
}
.slide.is-dark .slide-headline-value { color: var(--accent); }
.slide-headline-note {
  margin: 12px 0 0; font-size: clamp(14px, 1.5vw, 17px); color: var(--ink-3);
  line-height: 1.5; max-width: 54ch;
}
.slide.is-dark .slide-headline-note { color: #B7BAAE; }

/* La barre prix / coût / marge, en une ligne. */
.slide-bar {
  display: flex; height: 26px; border-radius: 8px; overflow: hidden;
  background: var(--gain); margin-bottom: 26px;
}
.slide-bar-cost { background: var(--ink); }
.slide-bar-margin { flex: 1; }

.slide-table { overflow-x: auto; }
.slide-table table.data { font-size: 14px; }
.slide-table table.data td, .slide-table table.data th { padding: 11px 14px; }

.deck-nav {
  position: fixed; right: 24px; bottom: 26px; display: flex; gap: 8px; z-index: 72;
}
.deck-arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink); cursor: pointer; font-size: 17px;
  box-shadow: var(--lift); transition: background .24s var(--ease-soft), transform .24s var(--ease-soft), opacity .2s;
}
.deck-arrow:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.deck-arrow:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.deck-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rule); z-index: 72; }
.deck-progress > i { display: block; height: 100%; background: var(--accent); transition: width .5s var(--ease-soft); }

@media (max-width: 760px) {
  .deck-bar { padding: 10px 14px; gap: 12px; }
  .deck-dots { display: none; }
  .deck-stage { padding: 2vh 14px 70px; }
  .slide-inner { padding: 22px 18px; border-radius: 16px; }
  .deck-nav { right: 14px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .slide { animation: none; } }

/* ════════════════════════ Affiner : ce qu'il reste à poser ══════════════════
   Dix-neuf lignes rangées par ce qu'elles apportent, pas par l'ordre des
   menus. La barre est pondérée : cocher « mutuelle » ne vaut pas cocher
   « prix de vente », et l'afficher autrement serait mentir sur l'avancement.
   ═══════════════════════════════════════════════════════════════════════════ */
.refinery {
  border: 1px solid var(--rule); border-radius: 14px; background: var(--surface);
  padding: 16px 18px;
}
.refinery-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 14px; flex-wrap: wrap;
}
.refinery-tag {
  font-family: var(--display); font-weight: 700; font-size: var(--t-block);
  letter-spacing: -.024em; line-height: 1.2; color: var(--ink);
}
.refinery-sub { font-size: var(--t-block-sub); color: var(--ink-4); margin-top: 3px; }
/* Le rappel du stade : une phrase, pas un réglage. */
.refinery-stage {
  margin: 8px 0 0; font-size: 12px; color: var(--ink-4); line-height: 1.55; max-width: 78ch;
}
.refinery-stage b { color: var(--ink); font-weight: 600; }
.refinery-score { display: flex; align-items: baseline; gap: 10px; flex: none; }
.refinery-pct { font-size: 24px; font-weight: 650; letter-spacing: -.04em; color: var(--ink); }
.refinery-count { font-size: 12px; color: var(--ink-5); }

/* La barre, en trois segments proportionnels au poids de chaque palier. */
.refinery-bar { display: flex; gap: 4px; margin-bottom: var(--s-3); }
.refinery-bar-seg {
  height: 7px; border-radius: 4px; background: var(--rule); overflow: hidden; min-width: 0;
}
.refinery-bar-seg > i {
  display: block; height: 100%; border-radius: 4px;
  transition: width .6s var(--ease-soft);
}
.refinery-bar-seg.is-fondation > i { background: var(--ink); }
.refinery-bar-seg.is-credibilite > i { background: var(--accent-dim); }
.refinery-bar-seg.is-finition > i { background: var(--ink-5); }

.refinery-groups { display: flex; flex-direction: column; }
.refinery-group-head {
  display: flex; flex-wrap: wrap;
  padding-bottom: 8px;
}
.refinery-chip {
  flex: none;
}
.refinery-chip.is-fondation { background: var(--ink); color: var(--accent); }
.refinery-chip.is-credibilite { background: var(--accent); color: var(--accent-ink); }
.refinery-chip.is-finition { background: var(--surface-2); color: var(--ink-4); border: 1px solid var(--rule); }
.refinery-group-note { flex: 1; min-width: 0; }
.refinery-group-count { flex: none; }
.refinery-group.is-full .refinery-group-note { color: var(--ink-5); }

.refinery-items { display: flex; flex-direction: column; }
.refinery-item {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  border: 0; border-bottom: 1px solid var(--rule); background: none;
  padding: 11px 4px; cursor: pointer; font: inherit; text-align: left;
  transition: background .2s var(--ease-soft), padding-left .2s var(--ease-soft);
}
.refinery-item:last-child { border-bottom: 0; }
.refinery-item:hover { background: var(--surface-2); padding-left: 9px; }
.refinery-mark {
  width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--rule); display: grid; place-items: center;
  font-size: 10px; color: #fff; transition: background .24s var(--ease-soft), border-color .24s;
}
.refinery-item.is-done .refinery-mark { background: var(--ink); border-color: var(--ink); }
.refinery-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.refinery-label { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.refinery-item.is-done .refinery-label { font-weight: 450; color: var(--ink-4); }
.refinery-why { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
.refinery-go {
  flex: none; color: var(--ink-5); font-size: 14px; align-self: center;
  transition: transform .24s var(--ease-soft), color .2s;
}
.refinery-item:hover .refinery-go { transform: translateX(4px); color: var(--ink); }
/* Ce qui est fait se tasse : on n'a pas besoin de relire ce qu'on a posé. */
.refinery-item.is-done { padding: 7px 4px; }
/* Reporté depuis le guide : la ligne reste à sa place, marquée. */
.refinery-item.is-later .refinery-label { color: var(--ink-3); }
.refinery-latertag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.refinery-resume {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 11.5px; color: var(--ink-4); transition: color .18s var(--ease-soft);
}
.refinery-resume:hover { color: var(--ink); }
.refinery-resume > span { text-decoration: underline; text-underline-offset: 2px; color: var(--signal-ink); }

@media (max-width: 700px) {
  .refinery { padding: 16px 15px; }
  .refinery-group-note { display: none; }
}

/* ══════════════════════════════ La conversation ════════════════════════════
   Les mêmes questions que le parcours, posées autrement. Une colonne étroite,
   des bulles, et une seule chose à faire en bas de l'écran.
   ═══════════════════════════════════════════════════════════════════════════ */
.chat {
  min-height: 100dvh; background: var(--paper);
  max-width: 660px; margin: 0 auto; padding: 26px 22px 40px;
  display: flex; flex-direction: column;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 22px;
}
.chat-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.chat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.chat-exit {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--ink-4); text-decoration: underline; text-underline-offset: 3px;
}
.chat-exit:hover { color: var(--ink); }

.chat-thread { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.chat-line { display: flex; animation: chat-in .42s var(--ease-soft) both; }
@keyframes chat-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.chat-line.is-me { justify-content: flex-end; }
.chat-bubble {
  max-width: 86%; padding: 12px 15px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.55; background: var(--surface);
  border: 1px solid var(--rule); color: var(--ink-2);
}
.chat-line.is-me .chat-bubble {
  background: var(--ink); border-color: var(--ink); color: #fff; border-bottom-right-radius: 5px;
}
.chat-line.is-app .chat-bubble { border-bottom-left-radius: 5px; }

.chat-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chat-choice {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface);
  padding: 10px 14px; cursor: pointer; font: inherit; text-align: left;
  transition: border-color .2s var(--ease-soft), background .2s var(--ease-soft), transform .2s var(--ease-soft);
}
.chat-choice:hover { border-color: var(--ink); transform: translateY(-1px); }
.chat-choice-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.chat-choice-note { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }

.chat-composer { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.chat-field {
  display: flex; align-items: baseline; gap: 10px; flex: 1 1 240px; min-width: 0;
  border: 1px solid var(--ink); border-radius: 14px; background: var(--surface); padding: 10px 15px;
  transition: box-shadow .2s var(--ease-soft);
}
.chat-field:focus-within { box-shadow: 0 0 0 3px var(--accent-wash); }
.chat-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.chat-suffix { font-family: var(--mono); font-size: 12px; color: var(--ink-4); flex: none; }
.chat-send { flex: none; border-radius: 999px; }
.chat-skip {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--ink-4); text-decoration: underline; text-underline-offset: 3px;
}
.chat-skip:hover { color: var(--ink); }
.chat-end { margin-top: 10px; }
.chat-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.chat-foot { margin: 26px 0 0; font-size: 11.5px; color: var(--ink-5); line-height: 1.5; }
.landing-talk { width: 100%; justify-content: center; margin-top: 10px; }

/* ═════════════════════════════════ Le guide ════════════════════════════════
   Une seule chose à faire, posée en bas à droite, à demeure. Pas une fenêtre
   qu'on ferme pour continuer : un repère qu'on regarde quand on ne sait plus.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le guide se posait au-dessus d'une barre qui n'existe plus.
   `--impact-h` reserve soixante-deux pixels pour un bandeau d'impact retire
   depuis : la carte flottait donc a mi-hauteur du champ qu'on remplissait.
   Elle descend au ras du bas de fenetre. La pastille fermee, elle, garde sa
   hauteur : c'est la qu'on la cherche du regard. */
.nextstep {
  position: fixed; right: 18px; bottom: 14px; z-index: 60;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ink); color: #fff; border-radius: 14px;
  padding: 10px 12px 10px 10px; max-width: min(360px, calc(100vw - 32px));
  box-shadow: 0 2px 6px rgba(11, 14, 16, .12), 0 18px 46px -18px rgba(11, 14, 16, .5);
}
/* L'entrée n'appartient qu'à une nouvelle ligne à poser. Sans cette condition,
   le guide remontait et se refondait à chaque rendu — donc à chaque case
   cochée — pour dire exactement la même chose. */
.nextstep.is-fresh { animation: nextstep-in .52s var(--ease-soft) both; }
.nextstep-tab.is-fresh { animation: nextstep-in .4s var(--ease-soft) both; }
@keyframes nextstep-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
/* L'anneau : la part posée, sans chiffre à lire si on n'en veut pas. */
.nextstep-ring {
  position: relative; width: 34px; height: 34px; flex: none; margin-top: 2px;
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--part, 0) * 360deg), #2A3228 0);
}
.nextstep-ring-fill { position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.nextstep-ring-num {
  position: relative; font-family: var(--mono); font-size: 9.5px; color: #fff; letter-spacing: -.02em;
}
.nextstep-body { min-width: 0; flex: 1; }
.nextstep-tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.nextstep-do { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.35; margin-top: 2px; }
.nextstep-unlock { font-size: 11.5px; color: #8A8D82; margin-top: 2px; line-height: 1.4; }
.nextstep-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.nextstep-go { flex: none; border-radius: 999px; padding: 5px 14px; font-size: 12.5px; }
/* « Plus tard » ne se déguise pas en bouton principal : c'est une porte de
   sortie, pas une proposition concurrente. */
.nextstep-later {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12px; color: #8A8D82; padding: 5px 10px; border-radius: 999px;
  transition: color .18s var(--ease-soft), background .18s var(--ease-soft);
}
.nextstep-later:hover { color: #fff; background: rgba(255, 255, 255, .08); }
/* Le rappel de ce qui attend : il ne culpabilise pas, il propose de reprendre. */
.nextstep-back {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 7px 0 0; border: 0; border-top: 1px solid #2A3228;
  background: none; cursor: pointer; font: inherit;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #6D7268; transition: color .18s var(--ease-soft);
}
.nextstep-back:hover { color: var(--accent); }
.nextstep-back-do { margin-left: auto; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.nextstep-tag.is-again { color: #8A8D82; }
.nextstep-close {
  position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer;
  color: #6D7268; font-size: 15px; line-height: 1; padding: 2px 4px;
  transition: color .16s var(--ease-soft);
}
.nextstep-close:hover { color: #fff; }
/* Refermé : une pastille discrète, qu'on rouvre d'un clic. */
.nextstep-tab {
  position: fixed; right: 22px; bottom: calc(var(--impact-h) + 18px); z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-3);
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
  font-family: var(--mono); font-size: 11px;
  box-shadow: var(--lift); transition: border-color .18s var(--ease-soft), color .18s;
}
.nextstep-tab:hover { border-color: var(--ink); color: var(--ink); }
.nextstep-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

@media (max-width: 860px) {
  .nextstep-tab { right: 12px; bottom: calc(var(--impact-h) + 66px); }
  .nextstep { right: 12px; left: 12px; bottom: 66px; }
  .nextstep { max-width: none; }
  .nextstep-tab { left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nextstep, .nextstep-tab { animation: none; }
}

/* ═══════════════════════════ L'air entre les blocs ═════════════════════════
   Sur un écran d'ordinateur portable, tout se touchait. Les marges sont
   reprises en une seule échelle : 14 px entre deux blocs d'un même sujet,
   34 px quand le sujet change. Le bandeau de droite retiré, la page a la
   largeur qu'il faut pour que cet air se voie.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le guide flotte a dix-huit pixels du bas et mesure cent vingt-huit de haut.
   Avec quatre-vingt-seize pixels de marge basse, il recouvrait le dernier
   bouton de la page — « Continuer », « Aller voir ». La page lui laisse sa
   place : cent soixante pixels, mesures a l'appui. */
.content { padding: var(--page-top) var(--page-x) 128px; max-width: calc(var(--page-max) + 2 * var(--page-x)); }
.slab + .slab, .slab-pair + .slab, .slab + .slab-pair { margin-top: 18px; }
.slab-pair { gap: 18px; }
.view > .card, .view > .panel { margin-bottom: 14px; }

@media (max-width: 1080px) {
  .content { padding: 24px 22px calc(var(--impact-h) + 30px); }
}

/* ─── Le prix des années suivantes ─── */
/* Une case vide n'est pas une case sans valeur : elle reconduit l'année
   précédente. Le gris le dit, le noir dit qu'on a forcé. */
.control.is-inherited input { color: var(--ink-5); }
.control.is-inherited { background: var(--surface-2); }
.control.is-inherited:focus-within { background: var(--surface); }
.control.is-inherited:focus-within input { color: var(--ink); }

.byyear { margin-top: 16px; }
.byyear-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--rule); margin-bottom: 12px;
}
.byyear-title { font-size: 13px; font-weight: 650; color: var(--ink); }
.byyear-base { font-size: 12px; color: var(--ink-4); }
.byyear-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.byyear-cell { position: relative; min-width: 0; }
.byyear-cell.is-forced .control { border-color: var(--ink); }
.byyear-clear {
  position: absolute; top: 0; right: 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; color: var(--ink-5);
}
.byyear-clear:hover { color: var(--loss); }
@media (max-width: 760px) { .byyear-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ─── Les cinq exercices ─── */
.years { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.year {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface); font: inherit; text-align: left;
}

.year.active { background: var(--ink); border-color: var(--ink); }

/* ─── L'opération : ce qui entre, ce qui sort, ce qui reste ─── */
.eq { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); overflow: hidden; }

@media (max-width: 980px) {
  .years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  
}

/* ─── Le bac à sable ─── */
.sim { display: flex; flex-direction: column; gap: 16px; }
.sim-flag {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px dashed var(--ink-5); border-radius: 12px; background: var(--surface-2);
  padding: 12px 15px; font-size: 13px; color: var(--ink-3); line-height: 1.5;
}
.sim-flag strong { color: var(--ink); }
.sim-flag-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  flex: none; margin-top: 5px; box-shadow: 0 0 0 3px var(--accent-wash);
}
.sim-body { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sim-knobs { display: flex; flex-direction: column; gap: 8px; position: sticky; top: calc(var(--header-h) + 14px); }
.sim-knobs .refine { margin-top: 0; }
.sim-levers { flex-direction: column; }
.knob { border-bottom: 1px solid var(--rule); }
.knob:last-child { border-bottom: 0; padding-bottom: 0; }
.knob-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.knob-label { color: var(--ink-2); }
.knob-readout { display: flex; align-items: baseline; gap: 7px; flex: none; }
.knob-value { font-weight: 650; letter-spacing: -.03em; color: var(--ink); }
.knob-shift { font-size: 11px; }
.knob-shift.up { color: var(--gain); }
.knob-shift.down { color: var(--loss); }

.sim-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sim-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sim-fig {
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface);
  padding: 12px 13px; min-width: 0;
}
.sim-fig-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); line-height: 1.35;
}
.sim-fig-value { font-size: 21px; font-weight: 650; letter-spacing: -.04em; color: var(--ink); margin-top: 7px; }
.sim-fig-gap { font-size: 11.5px; color: var(--ink-5); margin-top: 3px; }
.sim-fig.up { border-color: var(--gain); }
.sim-fig.up .sim-fig-gap { color: var(--gain); }
.sim-fig.down { border-color: var(--loss); }
.sim-fig.down .sim-fig-gap { color: var(--loss); }

.sim-pending { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sim-pending-note { font-size: 12px; color: var(--ink-4); flex: 1 1 260px; min-width: 0; }

@media (max-width: 1080px) {
  .sim-body { grid-template-columns: 1fr; }
  .sim-knobs { position: static; }
  .sim-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── L'écran de validation ─── */
.apply { max-width: 720px; }
.apply-head p { margin: 6px 0 20px; color: var(--ink-3); font-size: 13.5px; }
.apply-mod { margin-bottom: 20px; }
.apply-mod-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: 2px; flex-wrap: wrap;
}
.apply-mod-name { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
.apply-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--rule);
  cursor: pointer; font-size: 13.5px;
}
.apply-row:hover { background: var(--surface-2); }
.apply-row-label { color: var(--ink-2); }
.apply-row-before { color: var(--ink-5); text-decoration: line-through; }
.apply-row-arrow, .apply-effect-arrow { color: var(--ink-5); }
.apply-row-after { font-weight: 650; color: var(--ink); }
.apply-effects-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 8px;
}
.apply-effects {
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); margin-bottom: 22px;
}
.apply-effect {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: baseline; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.apply-effect:last-child { border-bottom: 0; }
.apply-effect-label { color: var(--ink-3); }
.apply-effect-before { color: var(--ink-5); }
.apply-effect-after { font-weight: 650; color: var(--ink); }
.apply-effect-after.pos { color: var(--gain); }
.apply-effect-after.neg { color: var(--loss); }
.apply-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
      .apply-row { grid-template-columns: auto minmax(0, 1fr); }
  .apply-row-before, .apply-row-arrow, .apply-row-after { grid-column: 2; }
}

/* ─── Le changement d'onglet ─── */
/* La vue ne glisse que lorsqu'on vient de cliquer un onglet : la même animation
   posée sans condition rejouerait à chaque frappe, puisque la page se
   reconstruit à chaque touche. */
/* Changer d'onglet : le contenu se découvre, il ne se fond pas.
   Le fondu était doublé d'un fondu de toute la page, et les deux se
   superposaient : rien n'avait de contour, tout tremblait un peu — c'est ce
   qui donnait la nausée. Un seul mouvement le remplace, et sans opacité : un
   masque descend sur chaque bloc, qui monte de huit pixels en arrivant. Le
   bord est net, la direction est lisible, et ça dure un tiers de seconde. */
/* Rien ne bouge du tout à l'entrée d'une vue.
   Trois tentatives successives ont été retirées ici : l'entrée en cascade des
   blocs, l'animation de hauteur du cadre, puis le glissement latéral de toute
   l'image. Chacune corrigeait la précédente et produisait la même plainte —
   ça bouge. Changer d'onglet n'est pas un déplacement : on ne quitte pas la
   page, on remplace le contenu d'un panneau. Le remplacement est donc sec, et
   la structure autour ne bronche pas. */

/* ─── La ligne qu'on est en train de remplir ─── */
/* Aucune classe à poser, aucun état à retenir : le navigateur sait déjà où est
   le curseur. La ligne s'éclaire, son filet gauche s'épaissit, et tout revient
   en place dès qu'on la quitte. */
.cost-row, .source-line, .item, .part, .setup-cost, .affine-item, .slab {
  transition: background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.cost-row:focus-within, .source-line:focus-within, .part:focus-within {
  background: var(--accent-wash); border-color: var(--ink);
}
.item:focus-within, .slab:focus-within {
  border-color: var(--ink); box-shadow: -3px 0 0 0 var(--accent);
}
.setup-cost:focus-within { background: var(--accent-wash); }
/* Le champ actif lui-même : un trait d'accent sous le contrôle, rien de plus. */
.control:focus-within { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* ═══════════════════ Les suggestions du métier ═════════════════════════════
   Ce bloc ne montre pas des données : il propose. Il ne doit donc pas
   ressembler à une carte de saisie de plus — un filet tireté, un fond à peine
   teinté, et le glyphe du métier en tête pour dire d'où ça vient. Il disparaît
   quand il n'a plus rien à proposer.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ─── Les suggestions du métier : une rangée de pastilles ─── */
/* Un titre, un compteur, trois pastilles blanches — puis « +3 ». Le « + »
   est un rond jaune : c'est le geste, et la seule couleur du bloc. Le montant
   est dans l'infobulle ; la pastille ne porte que le nom. */
/* Une seule ligne : le titre, le compteur, puis les pastilles ; « Voir
   toutes les suggestions » au bout. */
.tradetip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) 10px; margin: 0 0 var(--s-4); }
.tradetip-head { display: contents; }
.tradetip-items { order: 2; min-width: 0; }
.tradetip-all { order: 3; }
.tradetip-title { margin: 0; font-family: var(--display); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.tradetip-all {
  margin-left: auto; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: 600 13px/1.3 var(--sans); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  transition: color .14s var(--ease-soft), text-decoration-color .14s var(--ease-soft);
}
.tradetip-all:hover { color: var(--ink); text-decoration-color: var(--ink); }
.tradetip-items { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: 4px; }
.tradetip-item {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  max-width: 100%; min-width: 0; text-align: left;
  padding: 4px 14px 4px 4px; border-radius: 999px; font: inherit;
  border: 1px solid var(--rule); background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 14, 16, .05);
  transition: border-color .14s var(--ease-soft), transform .14s var(--ease-soft), box-shadow .14s var(--ease-soft);
}
.tradetip-item:hover {
  border-color: var(--ink); transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(11, 14, 16, .5);
}
.tradetip-item:active { transform: translateY(0); }
.tradetip-item.is-extra { display: none; }
.tradetip.is-all .tradetip-item.is-extra { display: inline-flex; animation: pop .18s var(--ease) both; }
.tradetip.is-all .tradetip-more { display: none; }
.tradetip-plus {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(14, 15, 12, .06);
  transition: background .14s var(--ease-soft), color .14s var(--ease-soft), transform .2s var(--ease-soft);
}
.tradetip-item:hover .tradetip-plus { background: var(--ink); color: var(--accent); transform: rotate(90deg); }
.tradetip-label {
  font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
  /* Une pastille ne doit jamais pousser la page : « Assurance responsabilité
     civile professionnelle » mesure cinq cents pixels et le téléphone en fait
     trois cent quatre-vingt-dix. Elle se rétrécit, et sur mobile elle revient
     à la ligne plutôt que de couper le mot. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tradetip-more {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; cursor: pointer;
  padding: 5px 12px; border-radius: 999px; border: 1px dashed var(--ink-5); background: transparent;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-3);
  transition: border-color .14s var(--ease-soft), color .14s var(--ease-soft);
}
.tradetip-more:hover { border-color: var(--ink); border-style: solid; color: var(--ink); }
@media (max-width: 760px) {
  .tradetip-all { margin-left: 0; flex-basis: 100%; text-align: left; }
  .tradetip-label { white-space: normal; }
  .tradetip-item { border-radius: 16px; }
}

/* ═════════════════ La tête de module : une seule, pas cinq ════════════════
   Il y avait le titre, une question repliée, une barre qui répétait le sujet
   avec un chiffre, les onglets, puis le bouton d'ajout. Sur un portable, la
   première donnée commençait sous la ligne de flottaison. Tout tient en trois
   lignes : le titre, le lede avec son chiffre, la barre de navigation.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le titre, la note et le chiffre sur une seule ligne.
   Le lede vivait dans un cadre à lui, sous le titre, avec un « + » qui le
   dépliait en poussant la page. Il tient maintenant au bout du titre, en
   gris, et son contenu part dans le tiroir latéral. */
.module {
  margin-bottom: var(--s-3);
}
.module-top {
  display: flex; gap: 6px 14px;
  flex-wrap: wrap; margin-top: 2px;
}
.module-top .module-title { margin: 0; }

/* Le chiffre du module : au bout de la ligne, poussé à droite quand il y a la
   place — c'est là qu'on comprend à quoi il se rapporte. */
.module-figure {
  flex: none; margin-left: auto; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 3px 11px; border-radius: 999px; background: var(--ink); max-width: 100%;
}
.module-figure-value {
  font-size: 15px; font-weight: 650; letter-spacing: -.03em; color: #fff; white-space: nowrap;
}
.module-figure-note { font-size: 11px; color: #A9ACA0; line-height: 1.35; }

/* La barre de navigation porte aussi l'action : elle appartient à l'onglet
   ouvert, pas à un bandeau séparé au-dessus. */
.module-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.module-nav .hnav { border-bottom: 0; margin-bottom: -1px; flex: 1; min-width: 0; }
.module-acts { display: flex; gap: 8px; flex: none; align-self: center; }

@media (max-width: 760px) {
  .module-top { gap: 5px 10px; }
    .module-figure { margin-left: 0; padding: 3px 9px; }
  .module-figure-value { font-size: 14px; }
  .module-nav { gap: 8px; }
  .module-acts { width: 100%; padding-bottom: 10px; }
  .module-acts .btn { width: 100%; justify-content: center; }
}

/* ─── L'encoche dit ce qu'elle est, au survol ─── */
/* L'infobulle du système arrive après une seconde et se pose n'importe où.
   Celle-ci suit l'encoche, apparaît en deux dixièmes et n'attend personne. */
.topprog-steps { position: relative; }
.topprog-step::after {
  content: attr(data-label);
  position: absolute; top: calc(100% + 9px); left: 50%;
  transform: translate(-50%, -4px);
  background: var(--ink); color: #fff; border-radius: 8px;
  padding: 6px 10px; font-size: 11.5px; line-height: 1.3; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 60;
  box-shadow: 0 8px 24px -12px rgba(11, 14, 16, .6);
  transition: opacity .18s var(--ease-soft), transform .18s var(--ease-soft);
}
.topprog-step:hover::after, .topprog-step:focus-visible::after {
  opacity: 1; transform: translate(-50%, 0);
}
/* Près du bord, l'étiquette se recale pour ne pas sortir de l'écran. */
.topprog-tier:first-child .topprog-step:first-child::after { left: 0; transform: translate(0, -4px); }
.topprog-tier:first-child .topprog-step:first-child:hover::after { transform: translate(0, 0); }
.topprog-tier:last-child .topprog-step:last-child::after { left: auto; right: 0; transform: translate(0, -4px); }
.topprog-tier:last-child .topprog-step:last-child:hover::after { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  .topprog-step::after { transition: none; }
}

/* ══════════════════ Le voyage d'un espace à l'autre ════════════════════════
   Trois distances, trois mouvements.

   PAGE   on quitte un module pour un autre. L'ancienne page s'éloigne vers le
          fond et se voile ; la nouvelle monte du bas, encore floue, et se pose.
          C'est un changement de lieu, pas un remplacement d'image.

   VUE    on passe d'un onglet au suivant dans le même module. On ne bouge pas
          de place : le contenu coulisse latéralement, plus court, plus sec.

   MUET   un interrupteur, une case. Le fondu n'a aucune expression — son seul
          rôle est d'empêcher la page de sauter d'une image à l'autre pendant
          que le modèle se recalcule.

   Le rail et la barre du haut sont nommés : ils gardent leur identité d'une
   page à l'autre, donc ils ne bougent jamais. On ne déménage pas la
   navigation à chaque pas.
   ═══════════════════════════════════════════════════════════════════════════ */
.rail { view-transition-name: rail; }
.topbar { view-transition-name: topbar; }

.nextstep, .nextstep-tab { view-transition-name: guide; }
/* La charpente ne voyage pas : elle bascule.
   « animation: none » sur les deux images ne suffisait pas. L'ancienne reste
   alors posée sur la nouvelle pendant toute la transition, et le rail gardait
   son surlignage précédent une seconde entière : on cliquait sur « Équipe »,
   le menu continuait d'indiquer « Projet ». On efface l'ancienne dès la
   première image et on montre la nouvelle : le menu répond au clic comme
   avant, pendant que le contenu, lui, fait le voyage. */
::view-transition-group(rail), ::view-transition-group(topbar),
::view-transition-group(tabbar), ::view-transition-group(guide) { animation: none; }
::view-transition-old(rail), ::view-transition-old(topbar),
::view-transition-old(tabbar), ::view-transition-old(guide) {
  animation: none; opacity: 0; mix-blend-mode: normal;
}
::view-transition-new(rail), ::view-transition-new(topbar),
::view-transition-new(tabbar), ::view-transition-new(guide) {
  animation: none; opacity: 1; mix-blend-mode: normal;
}

/* ─── Changer de module ─── */
/* Un changement de module doit se sentir. À quatre dixièmes de seconde on ne
   voyait rien passer : l'écran était déjà l'autre avant que l'œil n'ait noté
   qu'il avait changé, et on se demandait si le clic avait pris. La sortie
   s'éloigne et se floute, l'arrivée revient de plus loin et prend son temps :
   c'est la durée qui fait le voyage, pas l'effet. */
.is-move-page::view-transition-old(root) { animation: page-out .58s cubic-bezier(.5, 0, .9, .3) both; }
.is-move-page::view-transition-new(root) { animation: page-in 1.05s var(--ease-soft) both; }
/* Ce qu'on quitte s'éloigne : il recule, monte un peu et perd sa netteté. */
@keyframes page-out {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: translateY(-5%) scale(.88); filter: blur(16px); }
}
/* Ce qu'on rejoint vient de plus loin, et met une seconde à se poser : c'est
   la durée qui fait le voyage. En dessous d'une demi-seconde on ne voit rien
   passer et on doute d'avoir cliqué. */
@keyframes page-in {
  0%   { opacity: 0; transform: translateY(8%) scale(.93); filter: blur(14px); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* ─── Basculer un interrupteur ─── */
.is-move-quiet::view-transition-old(root) { animation: quiet-out .16s linear both; }
.is-move-quiet::view-transition-new(root) { animation: quiet-in .22s linear both; }
@keyframes quiet-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes quiet-in { from { opacity: 0 } to { opacity: 1 } }

/* Pendant le voyage, le curseur dit qu'on est en route. Rien de plus : bloquer
   les clics laisserait l'outil inutilisable si la classe restait accrochée. */
.is-move-page { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ─── L'interrupteur : une vraie bascule, pas un rechargement ─── */
/* La pastille glisse, la piste change de couleur, la ligne s'éteint — le tout
   sur la même durée, pour que ce soit un seul mouvement et pas trois.
   Trois dixièmes : le mouvement se voit sans se faire attendre. Ce n'est plus
   lui qui retardait le chiffre — la valeur est validée au clic, et c'est le
   glissement qui traverse le rendu, pas l'inverse. */
.onoff { transition: background .3s var(--ease-soft), border-color .3s var(--ease-soft); }
.onoff > i { transition: transform .3s var(--ease-soft), background .3s var(--ease-soft); }
.onoff.is-switching { box-shadow: 0 0 0 4px var(--accent-wash); }
.onoff:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Ce qui est mis en pause s'estompe au lieu de clignoter. */
.item, .card, .opex-line { transition: opacity .2s var(--ease-soft); }
.item.is-off, .card.is-off, .opex-line.is-off { opacity: .48; }

@media (prefers-reduced-motion: reduce) {
  .onoff, .onoff > i, .item, .card, .opex-line { transition: none; }
}

/* ─── Le verdict prend toute la largeur, en tête du pilotage ─── */
/* Coincé à droite d'un titre, il valait une carte de 340 pixels pour un vide
   de mille. C'est la seule phrase qui compte sur cette page. */
.board-stack > .verdict {
  /* La règle d'origine donnait `flex: 0 1 340px` pour une carte posée dans une
     ligne. Dans cette pile verticale, 340 px devient une hauteur : le verdict
     réservait une bande vide sous ses deux lignes de texte. */
  flex: none; align-self: stretch; min-width: 0; height: auto;
  width: 100%; border: 1px solid var(--rule); border-left: 4px solid var(--ink);
  border-radius: 16px; background: var(--surface); padding: 0; overflow: hidden;
}

/* ─── Le reste de la liste, à la demande ─── */
.refinery-more {
  display: block; width: 100%; margin-top: 14px; padding: 11px 0;
  border: 1px dashed var(--rule); border-radius: 10px; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-4);
  transition: border-color .2s var(--ease-soft), color .2s, background .2s;
}
.refinery-more:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }

/* Ne rien se verser est un choix — il a donc un bouton, pas un champ vide. */
.setup-skip {
  display: block; margin-top: 18px; border: 0; background: none; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-4);
  border-bottom: 1px solid var(--rule); transition: color .18s var(--ease-soft), border-color .18s;
}
.setup-skip:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ═══════════════════ La page d'avant la première question ══════════════
   Une ouverture, pas une question. Le titre porte la seule chose qui débloque
   un fondateur — il n'a pas à savoir —, le rendu 3D lui donne l'échelle d'une
   page d'accueil, et les trois lignes du bas répondent aux trois objections.

   Le `ch` se mesure sur la police de l'élément : posé sur le conteneur, qui
   hérite du corps de texte, il donnait une colonne de cent cinquante pixels et
   cassait le titre mot par mot. La largeur se borne sur le titre lui-même.
   ════════════════════════════════════════════════════════════════════════ */
.setup-card.is-bare { background: transparent; border: 0; box-shadow: none; padding: 0; }

.welcome { display: flex; flex-direction: column; gap: clamp(26px, 5vh, 48px); padding: 2vh 0 1vh; }
.welcome-hero { display: flex; align-items: center; gap: 28px; }
.welcome-say { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

.welcome-kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-4);
  display: inline-flex; align-items: center; gap: 9px;
  animation: welcome-rise .66s var(--ease-soft) both;
}
.welcome-kicker::before { content: ''; width: 26px; height: 2px; background: var(--accent); display: block; }
.welcome-big {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3.1vw, 40px); line-height: 1.1; letter-spacing: -.032em;
  color: var(--ink-4); max-width: 26ch; text-wrap: balance;
  animation: welcome-rise .7s .06s var(--ease-soft) both;
}
.welcome-big b { color: var(--ink); font-weight: 800; }
.welcome-lede {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 56ch;
  animation: welcome-rise .7s .14s var(--ease-soft) both;
}
/* La petite note : la dernière objection levée juste avant le bouton. Elle se
   lit après la promesse, pas avec elle — d'où le corps plus petit et le filet
   qui la détache. */
.welcome-note {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-4); max-width: 52ch;
  padding-left: 13px; border-left: 2px solid var(--rule);
  animation: welcome-rise .7s .18s var(--ease-soft) both;
}
.welcome-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  animation: welcome-rise .7s .22s var(--ease-soft) both;
}
.welcome-go { border-radius: 999px; padding: 15px 38px; font-size: 16px; }
.welcome-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-5);
}
.welcome-livrable {
  margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 56ch;
  animation: welcome-rise .7s .26s var(--ease-soft) both;
}

/* Le rendu 3D donne l'échelle. Il ne dit rien que le texte ne dise — c'est
   exactement son rôle : occuper l'œil pendant que la phrase se lit. */
.welcome-art {
  flex: 0 0 auto; width: clamp(110px, 16vw, 180px); line-height: 0;
  animation: welcome-float 6s ease-in-out .9s infinite, welcome-pop .9s .18s var(--ease-soft) both;
}
.welcome-art-img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 22px 34px rgba(11, 14, 16, .22));
}
@keyframes welcome-pop {
  from { opacity: 0; transform: translateY(24px) scale(.88); }
  to   { opacity: 1; transform: none; }
}
@keyframes welcome-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* Les trois objections, et leur réponse. Une ligne chacune : ce n'est pas un
   choix à faire, donc ça ne doit pas ressembler à des cartes cliquables. */
.welcome-points {
  list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--rule);
  display: grid; gap: 20px 26px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .welcome-points { grid-template-columns: 1fr; gap: 18px; }
    }
/* L'icône au-dessus du titre, pas à côté : posée à gauche, elle poussait le
   titre à la ligne et la colonne se lisait en escalier. Au-dessus, chaque
   réponse tient en un bloc — un objet, une affirmation, une explication. */
.welcome-point {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0;
  animation: welcome-rise .7s var(--d, .3s) var(--ease-soft) both;
}
.welcome-point-ico { width: 38px; height: 38px; flex: none; line-height: 0; }
.welcome-point b {
  display: block; font-family: var(--display); font-size: 14px; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); margin-bottom: 2px;
}
.welcome-point span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }

@keyframes welcome-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 680px) {
  .welcome-hero { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .welcome-art { width: 96px; align-self: flex-start; }
  .welcome-big, .welcome-lede, .welcome-note, .welcome-livrable { max-width: none; }
}
@media (max-width: 700px) {
  .welcome-go { width: 100%; justify-content: center; }
  .welcome-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-kicker, .welcome-big, .welcome-lede, .welcome-note, .welcome-cta, .welcome-livrable, .welcome-art, .welcome-point { animation: none; }
}

/* ═══════════════ La simulation : chaque ligne du plan a son curseur ════════
   Un fondateur qui a trois offres et onze charges ne cherche pas « le prix » :
   il cherche le prix du menu du midi. Chaque ligne porte donc son nom, et la
   valeur de son plan reste écrite en gris à côté de la valeur simulée.
   ═══════════════════════════════════════════════════════════════════════════ */
.sim-lines { display: flex; flex-direction: column; gap: 4px; }
.sim-line { border-bottom: 1px solid var(--rule); }
.sim-line:last-child { border-bottom: 0; }
.sim-line-name {
  font-family: var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px;
}
.sim-levers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* La valeur du plan, posée sur la piste plutôt qu'écrite dessous.
   Un trait pointillé à sa place exacte, le chiffre en dessous : on voit
   l'écart au lieu de le calculer. Cliquable, pour y revenir d'un geste. */
.knob-track { position: relative; padding-bottom: 15px; }
.knob-track .lever-range { position: relative; z-index: 1; }
.knob-mark {
  position: absolute; top: 0; bottom: 0; transform: translateX(-50%);
  border: 0; background: none; padding: 0 5px; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.knob-mark i {
  display: block; width: 0; height: 13px; margin-top: 3px;
  border-left: 1px dashed var(--ink-5); transition: border-color .18s;
}
.knob-mark b {
  font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--ink-5);
  white-space: nowrap; transition: color .18s;
}
.knob-mark:hover i { border-left-color: var(--ink); }
.knob-mark:hover b { color: var(--ink); }
.knob-why { font-size: 11px; color: var(--ink-5); line-height: 1.45; display: block; margin-top: 2px; }
/* Ce qui a bougé se voit sans lire le chiffre d'origine. */
.knob-value.is-moved { color: var(--signal-ink); }

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

/* ─── Un onglet dit s'il se remplit ou s'il se lit ─── */
/* On cliquait sur « Masse salariale » en croyant y saisir quelque chose, on
   n'y trouvait qu'un tableau, et on repartait. Le point plein dit qu'on écrit
   ici ; le cercle creux dit qu'on y lit ce que le modèle a calculé. */
.hnav-tab { position: relative; }

/* ─── « Affiner mon dossier » se referme ─── */
/* Le même rond que partout ailleurs, et rien d'écrit dedans : un bouton qui
   dit « Déplier » explique ce qu'un chevron montre déjà. */
.refinery-toggle {
  width: 28px; height: 28px; border-radius: 50%; flex: none; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0; line-height: 0;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-4);
  transition: transform .42s var(--ease-soft), border-color .2s, color .2s, background .2s;
}
.refinery-toggle:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }
.refinery-toggle svg { width: 15px; height: 15px; display: block; }
.refinery.is-shut .refinery-toggle { transform: rotate(-90deg); }
.refinery-fold { overflow: hidden; transition: max-height .52s var(--ease-soft), opacity .34s var(--ease-soft); max-height: 4000px; opacity: 1; }
.refinery.is-shut .refinery-fold { max-height: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .foldsign, .refine-body, .refinery-toggle, .refinery-fold { transition: none; animation: none; }
}

/* ─── Les charges, en deux natures ─── */
/* Le loyer tombe qu'on vende ou non ; une commission n'existe que s'il y a une
   vente. La première fixe le seuil, la seconde rogne la marge — deux questions
   différentes, donc deux blocs. */
.costblock { margin-bottom: 18px; }
.costblock-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 0 2px 9px; border-bottom: 1px solid var(--rule); margin-bottom: 10px;
}
.costblock-title {
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  letter-spacing: -.018em; color: var(--ink); flex: none;
}
.costblock-note { font-size: 11.5px; color: var(--ink-4); line-height: 1.5; flex: 1 1 320px; min-width: 0; }
.costblock-count {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4); flex: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px;
}
.costblock.is-variable .costblock-title { color: var(--signal-ink); }
.costblock.is-variable .costblock-note { color: var(--ink-3); }

@media (max-width: 700px) { .costblock-note { flex-basis: 100%; } }

/* ═══════════════════ Les icônes de métier ══════════════════════════════════
   Dessinées en SVG, pas prises dans une police : un registre isométrique, une
   plaque au sol, une face claire et une face d'ombre, et toujours la même
   lumière venue d'en haut à gauche. Elles prennent les couleurs du thème, donc
   elles suivent la charte sans qu'on les retouche.
   ═══════════════════════════════════════════════════════════════════════════ */
.ico3 {
  width: 100%; height: 100%; display: block;
  --ico-hi: #2C3128;
  --ico-lo: #0E0F0C;
  --ico-face: var(--accent);
  --ico-hole: #F2F0E8;
  --ico-line: var(--accent-dim);
  --ico-base: #0E0F0C;
  transition: transform .42s var(--ease-soft), filter .42s var(--ease-soft);
}
.setup-sector-icon {
  width: 34px; height: 34px; flex: none; display: block;
}
.setup-sector-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
/* Le relief se réveille au survol : l'objet se soulève d'un demi-pixel. */
.setup-sector:hover .ico3 { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 6px 10px rgba(11, 14, 16, .18)); }
.setup-sector.active .ico3 { --ico-hi: #FFFFFF; --ico-lo: #D6D3C6; --ico-face: var(--accent); --ico-hole: #0E0F0C; --ico-line: var(--accent); --ico-base: #FFFFFF; }

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

/* ─── Les vrais rendus, quand il en existe un ───
   Une image, pas un tracé : la matière et la lumière d'un moteur 3D, qu'un
   vectoriel ne sait pas produire. Le dessin ci-dessus reste le repli. */
.ico3d {
  width: 100%; height: 100%; display: block; object-fit: contain;
  transition: transform .42s var(--ease-soft), filter .42s var(--ease-soft);
}
.setup-sector:hover .ico3d { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 8px 14px rgba(11, 14, 16, .22)); }
.setup-sector.active .ico3d { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: reduce) { .ico3d { transition: none; } }

/* ═══════════════════════════════ La synthèse ════════════════════════════
   Trois cartes, trois réponses. C'est la seule page de l'outil où la phrase
   passe avant le chiffre : le graphique n'y est qu'une silhouette, sans axe
   ni graduation, parce qu'il ne sert qu'à confirmer d'un coup d'œil ce que
   la phrase vient de dire. Le ton — vert, ambre, rouge — est porté par un
   filet haut, jamais par un fond : un fond coloré crie, un filet informe. */
.plain { display: flex; flex-direction: column; gap: 18px; }

.plaincard {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--ink-5);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.plaincard.is-good  { border-top-color: var(--gain); }
.plaincard.is-watch { border-top-color: var(--warn); }
.plaincard.is-bad   { border-top-color: var(--loss); }

.plaincard-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.plaincard-ico { width: 44px; height: 44px; flex: none; display: block; }
.plaincard-kicker {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px;
}
.plaincard-title {
  margin: 0; font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.024em; line-height: 1.2; color: var(--ink); text-wrap: balance;
}
.plaincard-body {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); flex: 1 1 auto;
}

/* Le chiffre de la carte : une seule ligne, l'étiquette à gauche, la valeur
   au bout. Un seul nombre par carte — tout le reste est dans la phrase. */
.plaincard-figure {
  display: flex; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--rule); padding-top: 10px; margin-top: auto;
}
.plaincard-figure-label { font-size: 12px; color: var(--ink-4); flex: 1 1 auto; min-width: 0; }
.plaincard-figure-value { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.plaincard-figure-value.pos { color: var(--gain); }
.plaincard-figure-value.neg { color: var(--loss); }

/* Cinq barres, une par année : ça part du rouge, ça passe au vert. */
.plainbars { display: flex; align-items: flex-end; gap: 8px; }
.plainbar { flex: 1 1 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.plainbar-track { height: 48px; position: relative; }
.plainbar-track i {
  position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: 1px;
  transform-origin: bottom;
}
.plainbars.is-fresh .plainbar-track i { animation: plainbar-rise .52s var(--ease-soft) both; }
.plainbar-track i.is-pos { background: var(--gain); }
.plainbar-track i.is-neg { background: var(--loss); }
.plainbar-label {
  font-family: var(--mono); font-size: 9px; color: var(--ink-5);
  text-align: center; letter-spacing: .04em;
}
@keyframes plainbar-rise { from { transform: scaleY(.04); transform-origin: bottom; } to { transform: scaleY(1); } }

/* La courbe de trésorerie, réduite à sa forme et à son passage sous zéro. */
.plainline { display: flex; flex-direction: column; gap: 5px; }
.plainline svg { width: 100%; height: 56px; display: block; overflow: visible; }
.plainline-zero { stroke: var(--ink-5); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.plainline-path {
  fill: none; stroke: var(--signal); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.plainline-note { font-size: 11px; color: var(--ink-5); }

/* ─── Acquisition : une campagne naît à zéro, les repères se demandent ─── */
.seed-row {
  border: 1px dashed var(--rule-strong);
}

/* La commission, lue à voix haute : montant × part = ce qui entre. */
.pmode-read { margin-top: 14px; padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--rule); }
.pmode-read.is-empty { font-size: 12.5px; color: var(--ink-4); line-height: 1.55; }
.pmode-read p { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; max-width: 78ch; }
.pmode-read-line {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 16px; color: var(--ink-3);
}
.pmode-read-line strong { font-size: 19px; color: var(--gain); letter-spacing: -.02em; }
.pmode-read-op { color: var(--ink-5); }

/* ═══════════ Un seul jeu de signes, centré par construction ═══════════════
   Les « ＋ », « − » et « × » typographiques ne se centrent pas : leur boîte
   dépend de la police, et dans un bouton rond ou carré ils flottent toujours
   d'un pixel ou deux — visible dès qu'on en aligne plusieurs. Les mêmes
   signes dessinés en SVG sont au milieu à toutes les tailles. */
.item-act, .source-act, .byyear-clear, .tradetip-plus, .btn-sign {
  display: inline-grid; place-items: center; line-height: 0;
  /* Le dessin était juste, la boîte ne l'était pas. Un bouton garde le
     remplissage que le navigateur lui donne — 1px sur 6px — et la largeur
     fixée de 22 pixels ne laissait alors que 8 pixels utiles pour un signe
     qui en fait 14. Ce qui déborde d'une grille part vers la droite : le
     « + » se posait trois pixels trop loin. On remet la boîte à zéro. */
  padding: 0;
}
.item-act svg, .source-act svg, .byyear-clear svg, .tradetip-plus svg, .btn-sign svg {
  width: 14px; height: 14px; display: block;
}
.tradetip-plus svg { width: 12px; height: 12px; }
.byyear-clear { width: 18px; height: 18px; padding: 0; }
.btn-sign { padding-left: 10px; padding-right: 10px; }

/* ═══════════ Ce qui s'écrit, et ce qui se lit ══════════════════════════════
   « Équipe » se remplit ; « Masse salariale » se lit. Les deux étaient des
   onglets identiques, et on cliquait sur le second en cherchant un champ à
   modifier. Un « i » d'infobulle aurait ajouté une chose à survoler ; ici le
   signe est dans l'onglet lui-même : un filet vert vif sur ce qui se modifie,
   un filet gris et le mot « lecture » sur ce qui ne fait que montrer. Ça se
   voit sans qu'on ait rien à faire. */
/* Un crayon sur ce qui se remplit, un œil sur ce qui se lit. Le mot
   « lecture » demandait d'être lu ; ces deux-là se reconnaissent. */
.hnav-sign {
  display: inline-grid; place-items: center; width: 15px; height: 15px; flex: none;
  color: var(--ink-5); transition: color .2s var(--ease-soft);
}
.hnav-sign svg { width: 13px; height: 13px; display: block; }
.hnav-tab.is-read { font-weight: 450; color: var(--ink-4); }
.hnav-tab:not(.is-read) { font-weight: 600; }

/* L'onglet ouvert porte un fond clair : le trait seul, sous la ligne, se
   perdait dès qu'il y avait plus de trois onglets. */
.hnav-tab.active {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 -1px 0 var(--surface);
}
.hnav-tab.is-read.active { background: var(--surface-2); }
.hnav-tab.active:hover { background: var(--surface); }

/* ════════════ Le seuil et la courbe, dans un seul cadre ═══════════════════
   Séparés, on lisait « il t'en faut 294 par mois », puis, après une
   respiration, un graphique intitulé « Glaces par mois » qu'on prenait pour
   un autre sujet. C'est la même phrase, en deux temps : le nombre, puis où
   l'on en est. Un filet les sépare, pas un blanc. */

/* Le tableau de bord n'a plus de rattrapage local.
   Il en avait un — une règle qui ramenait ses titres à dix-neuf pixels — parce
   que le reste de l'application en affichait cinq autres valeurs. C'est
   maintenant l'échelle de tout le monde, posée en jetons plus haut ; le
   rattrapage a disparu avec la raison qui l'avait fait naître. */

/* ─── Une offre ajoutée : une ligne qui emmène à ses coûts ───
   Le coût d'une vente ne se lit plus sur la carte. Seule l'offre qu'on vient
   d'ajouter y garde une ligne : elle emmène à la question posée dans les
   charges par vente. */
.costlink {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: var(--s-3);
  padding: 8px 12px; font: inherit; text-align: left;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 12px;
}
.costlink-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.costlink-go {
  border: 0; background: none; cursor: pointer; padding: 4px 2px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal-ink); flex: none;
}
.costlink-go:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Les charges par vente : achats et charges, sur la même ligne ─── */
/* Un achat se lit comme une commission : la place du « ⋯ » reste vide. */
.cost-more.is-vide { visibility: hidden; }
/* Une offre ajoutée : quelles lignes la concernent ? Une question, une rangée de cases. */
.cost-question {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px;
  border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.cost-question-titre { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.cost-question-titre b { color: var(--ink); font-weight: 700; }
.cost-question-lignes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cost-q-ligne {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface); font: 600 12.5px/1.2 var(--sans); color: var(--ink-3);
  transition: border-color .14s var(--ease-soft), color .14s var(--ease-soft), background .14s var(--ease-soft);
}
.cost-q-ligne:hover { border-color: var(--ink); color: var(--ink); }
.cost-q-case { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--ink-5); font-size: 10px; color: var(--accent); }
.cost-q-ligne.is-on { border-color: var(--ink); color: var(--ink); }
.cost-q-ligne.is-on .cost-q-case { background: var(--ink); border-color: var(--ink); }
.cost-q-ajout, .cost-ajout-ligne { border: 0; background: none; cursor: pointer; padding: 4px 2px; font: 600 12.5px/1.3 var(--sans); color: var(--signal-ink); }
.cost-q-ajout:hover, .cost-ajout-ligne:hover { text-decoration: underline; text-underline-offset: 3px; }
.cost-q-fin { margin-left: 4px; padding: 5px 13px; border-radius: 999px; border: 0; cursor: pointer; background: var(--ink); color: #fff; font: 650 12.5px/1.2 var(--sans); }
.cost-q-fin:hover { background: var(--ink-2); }
.cost-ajout-ligne { display: block; margin: 8px 12px 2px; }

/* ═══════════ Les familles de métiers, en grille ═══════════════════════════
   Douze volets empilés faisaient une colonne de trois écrans qu'on parcourait
   au pouce pour trouver la sienne. En grille elles tiennent toutes à l'œil ;
   on en ouvre une, et les métiers prennent la place. */
.famgrid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.famcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 13px 14px; cursor: pointer; font: inherit; text-align: left; min-width: 0;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  transition: border-color .18s, transform .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
}
.famcard:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 14, 16, .07); }
.famcard.is-here { border-color: var(--ink); border-width: 2px; padding: 12px 13px; }
.famcard-icon { width: 32px; height: 32px; flex: none; line-height: 0; }
.famcard-name {
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); line-height: 1.25;
}
.famcard-note { font-size: 11.5px; color: var(--ink-4); }

/* Une famille ouverte : son nom en tête, ses métiers dessous. L'icône ne se
   répète pas sur chaque ligne — douze fois le même objet ne distingue rien. */
.famopen { display: flex; flex-direction: column; gap: 12px; }
.famopen-back {
  align-self: flex-start; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--ink-4); padding: 0;
  border-bottom: 1px solid transparent; transition: color .14s, border-color .14s;
}
.famopen-back:hover { color: var(--ink); border-bottom-color: var(--ink); }
.famopen-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: -.018em; color: var(--ink);
}
.famopen-icon { width: 30px; height: 30px; flex: none; line-height: 0; }

/* Une carte sans icône : dans une famille ouverte, le même objet répété seize
   fois ne distingue rien — il prend seulement la place du nom. */
.setup-sector.is-bare { grid-template-columns: minmax(0, 1fr); }
.setup-sector.is-bare .setup-sector-name,
.setup-sector.is-bare .setup-sector-note { grid-column: 1; }

/* ═══════════ La barre d'onglets : un trait qui glisse, deux groupes ═══════
   Le trait actif renaissait sous l'onglet d'arrivée sans l'avoir traversé :
   le changement se lisait comme un saut. Il se déplace maintenant, et c'est
   lui seul qui bouge — plus de soulignement par onglet. */
.hnav { position: relative; }
.hnav-tab.active { border-bottom-color: transparent; }
.hnav-ink {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--ink); border-radius: 2px; pointer-events: none;
  transition: transform .34s var(--ease-soft), width .34s var(--ease-soft), background .2s;
}
.hnav-tab.is-read.active ~ .hnav-ink { background: var(--ink-5); }
/* Repositionné sans transition le temps d'une image : c'est ce qui permet de
   partir d'où il était avant que la barre ne soit refabriquée. */
.hnav-ink.is-jumping { transition: none; }

/* Ce qui se remplit, et ce qui se lit : deux groupes, un filet entre eux.
   Un mot sous le libellé ne suffisait pas — on cliquait sur « Masse
   salariale » en cherchant un champ. La coupure se voit avant la lecture. */
.hnav-split {
  width: 1px; align-self: center; height: 18px; margin: 0 10px;
  background: var(--rule); flex: none;
}
.hnav-label { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .hnav-ink { transition: none; }
}

/* ═══════════ La présentation, dans le tableau de bord ═════════════════════
   Elle vivait derrière un bouton, en plein écran, dans un autre module :
   la plupart ne savaient pas qu'elle existait. C'est pourtant la même
   lecture que l'analyse, faite pour être montrée à quelqu'un d'autre. */

/* Les flèches ne bougent pas d'un écran à l'autre.
   Centrées sur la diapositive, elles montaient et descendaient à chaque
   changement puisque les quinze écrans n'ont pas la même hauteur : on visait
   « suivant » et le bouton s'était déplacé. Elles se posent donc en haut, à
   distance fixe du cadre, et la scène garde une hauteur minimale pour que le
   cadre lui-même cesse de respirer. */

/* Le même écran que le plein écran, en plus sobre : pas de rebond à l'entrée
   ni de marge de scène, il est déjà dans un cadre. */

@keyframes deckin-slide {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════ Les six chiffres, chacun repliable sur ce qu'il veut dire ════
   C'étaient des tuiles qui emmenaient ailleurs d'un clic : on quittait la
   page sans savoir ce qu'on allait y faire, et qui ne connaît pas le mot
   « EBITDA » n'avait qu'un « ? » à survoler. Un clic déplie la définition ;
   le déplacement vient après, par un bouton qui dit où il mène. */

/* Les cases ne s'étirent pas sur la hauteur de la plus haute : un chiffre
   déplié fait quatre cents pixels, et ses deux voisines devenaient deux
   grandes cartes blanches vides. Chacune prend sa taille ; le vide qui reste
   est du fond, pas une carte. */

/* ═══════════ Ce qui se clique, et ce qui se lit ═══════════════════════════
   Les cinq exercices sont des boutons ; l'opération juste dessous ne l'est
   pas, et les deux avaient la même carte blanche. On soulève ce qui répond
   au clic, et on pose l'autre à plat sur le papier. */
.year { cursor: pointer; transition: transform .2s var(--ease-soft), border-color .16s, box-shadow .2s var(--ease-soft); }
.year:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 6px 16px rgba(11, 14, 16, .08); }
.years::before {
  content: 'Choisis l’exercice';
  grid-column: 1 / -1; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-5); margin-bottom: 2px;
}
.eq { box-shadow: none; }

/* ─── Sur 100 € facturés : une barre en parts, pas un camembert ─── */
.plainsplit { display: flex; flex-direction: column; gap: 8px; }
.plainsplit-bar { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--rule); }
.plainsplit-bar i { display: block; min-width: 2px; }
.plainsplit-bar i.is-buys { background: var(--ink-3); }
.plainsplit-bar i.is-team { background: var(--ink-5); }
.plainsplit-bar i.is-other { background: var(--rule-strong); opacity: .35; }
.plainsplit-bar i.is-left { background: var(--gain); }
.plainsplit-bar i.is-bad { background: var(--loss); }
.plainsplit-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.plainsplit-key { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-4); }
.plainsplit-key i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.plainsplit-key.is-buys i { background: var(--ink-3); }
.plainsplit-key.is-team i { background: var(--ink-5); }
.plainsplit-key.is-other i { background: var(--rule-strong); opacity: .35; }
.plainsplit-key.is-left i { background: var(--gain); }
.plainsplit-key.is-bad i { background: var(--loss); }

/* ─── Une jauge : où l'on en est d'un seuil ─── */
.plainmeter { display: flex; flex-direction: column; gap: 6px; }
.plainmeter-track { position: relative; height: 8px; background: var(--rule); border-radius: 4px; }
.plainmeter-track > i {
  display: block; height: 100%; background: var(--warn); border-radius: 4px;
  transition: width .5s var(--ease-soft);
}
.plainmeter-track > i.is-ok { background: var(--gain); }
/* Le trait du seuil : à cent pour cent, quoi qu'il arrive. */
.plainmeter-mark {
  position: absolute; left: calc(100% / 1.4); top: -3px; bottom: -3px;
  width: 2px; background: var(--ink); border-radius: 1px;
}
.plainmeter-label { font-size: 11px; color: var(--ink-5); }

/* ─── La simulation tient dans moins de place ───
   Trente curseurs déroulés d'emblée, chacun dans un pavé de cent pixels :
   on cherchait le sien au pouce avant d'avoir décidé de quoi parler. Tout
   est replié, et ce qui s'ouvre est plus serré. */
.sim-knobs .refine-block { margin-top: 10px; }
.sim-line { padding: 10px 0; }
.sim-line-name { font-size: 11.5px; }
.knob { padding: 9px 0; }
.knob-top { margin-bottom: 3px; }
.knob-label { font-size: 12px; }
.knob-value { font-size: 14px; }
.sim-levers { gap: 4px 18px; }

/* ═══════════ Le socle de l'analyse détaillée ═════════════════════════════
   Un volet ordinaire — un chevron et six mots en gris — se lisait comme une
   note de bas de page. Ce qu'il ouvre est la moitié du tableau de bord : il
   lui faut la taille de ce qu'il contient. */

/* Le signe d'un volet a deux tailles, et deux seulement : vingt-deux quand il
   plie quelque chose à l'intérieur d'un bloc, vingt-huit quand il plie le bloc
   entier. Au-delà, on lisait des signes différents pour un geste identique. */

/* ═══════════ Ce qui reste à l'écran : la barre d'onglets ════════════════
   L'en-tête entier se collait sous la barre du haut et se resserrait en
   route. Mesurée, la bascule se faisait à trente pixels de défilement et
   revenait à vingt-neuf : aucune zone morte. Un geste de trackpad près du
   haut de la page faisait claquer le titre de quarante-six à vingt-deux
   pixels, plusieurs fois par seconde — le clignotement.

   On ne règle pas une bascule qui clignote, on la supprime. L'affiche du
   module défile comme le reste et ne change jamais de taille. Seule la barre
   d'onglets reste : elle a une hauteur fixe, donc rien à resserrer, rien à
   compenser, rien qui puisse clignoter. Le nom du module est déjà dans le fil
   d'Ariane de la barre du haut, qui ne quitte jamais l'écran. */
.module-nav {
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--paper); margin-bottom: var(--s-4); padding-top: var(--s-1);
}
@media (max-width: 760px) { .module-nav { margin-bottom: var(--s-3); } }

/* ═══════════ Le pas d'une question à l'autre ═════════════════════════════
   Douze écrans se succédaient sans qu'on sente avancer : la question changeait
   au même endroit, sans mouvement. Elle glisse maintenant dans le sens du
   pas — de la droite quand on avance, de la gauche quand on revient. Le
   mouvement est court : il dit la direction, il ne fait pas attendre. */
.setup-card.is-in-fwd { animation: setup-step-fwd .38s var(--ease-soft) both; }
.setup-card.is-in-back { animation: setup-step-back .38s var(--ease-soft) both; }
@keyframes setup-step-fwd {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes setup-step-back {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}
/* La frise des questions suit le même pas : la pastille courante se pose. */
.setup-step.current { transition: background .3s var(--ease-soft), color .3s var(--ease-soft); }
@media (prefers-reduced-motion: reduce) {
  .setup-card.is-in-fwd, .setup-card.is-in-back { animation: none; }
}

/* ─── Un montant ne se coupe pas à deux pixels près ───
   « 90 168 € » dépassait de deux pixels sa cellule sur un téléphone : le
   bloc d'indicateurs, autrefois derrière un volet, est désormais toujours
   visible dans l'analyse, et le défaut s'est vu. Le chiffre se réduit
   plutôt que de perdre son dernier caractère. */
@media (max-width: 760px) {
  .kpi-value { font-size: clamp(15px, 5.2vw, 20px); letter-spacing: -.045em; }
  
}

/* ═══════════ La page d'accueil du site ═══════════════════════════════════
   L'adresse racine tombait dans la première question du parcours : efficace
   pour qui sait ce qu'il vient chercher, muet pour tous les autres. Cette
   page dit à qui ça s'adresse, ce que ça produit et ce que ça coûte en
   temps — puis elle laisse entrer. Le logo ramène toujours dans l'outil. */
.home { min-height: 100dvh; background: var(--paper); }
.home > * { max-width: 1180px; margin: 0 auto; padding-inline: clamp(18px, 5vw, 48px); }

.home-bar { display: flex; align-items: center; gap: 12px; padding-block: 18px 0; }
.home-logo {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 0; background: none; padding: 6px 8px 6px 6px; margin-left: -6px; border-radius: 10px;
  transition: background .16s var(--ease-soft);
}
.home-logo:hover { background: rgba(14,15,12,.05); }
.home-logo-mark {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: var(--ink); color: var(--accent);
  font-family: var(--display); font-weight: 800; font-size: 17px;
}
.home-logo-name { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; color: var(--ink); font-weight: 600; }
.home-logo-year {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--ink-5);
  border-left: 1px solid var(--rule); padding-left: 9px;
}
.home-enter { border-radius: 999px; }

.home-hero { display: flex; align-items: center; gap: 36px; padding-block: clamp(34px, 7vw, 76px) clamp(28px, 5vw, 56px); }
.home-say { flex: 1 1 auto; min-width: 0; }
.home-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
}
.home-kicker::before { content: ''; width: 26px; height: 2px; background: var(--accent); }
.home-big {
  margin: 0 0 16px; font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.038em;
  color: var(--ink-4); max-width: 20ch; text-wrap: balance;
}
.home-big b { color: var(--ink); font-weight: 800; }
.home-lede { margin: 0 0 24px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--ink-3); max-width: 58ch; }
.home-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.home-go { border-radius: 999px; padding: 15px 32px; font-size: 16px; }
.home-demo { border-radius: 999px; padding: 15px 28px; }
.home-meta { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-5); }
.home-art { flex: none; width: clamp(150px, 20vw, 250px); }
.home-art-img { width: 100%; height: auto; display: block; }

.home-proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  padding-block: clamp(28px, 5vw, 48px); border-top: 1px solid var(--rule);
}
.home-proof-item { min-width: 0; }
.home-proof-no { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-5); display: block; }
.home-proof-ico { display: block; width: 44px; margin: 10px 0 12px; }
.home-proof-ico img { width: 100%; height: auto; display: block; }
.home-proof-item h2 { font-size: 17px; letter-spacing: -.022em; margin-bottom: 7px; }
.home-proof-item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

.home-out {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px;
  background: var(--ink); color: #fff; border-radius: var(--r-lg, 16px);
  padding: clamp(26px, 4vw, 40px); margin-block: clamp(20px, 4vw, 36px);
  max-width: min(1180px, calc(100% - 2 * clamp(18px, 5vw, 48px)));
}
.home-out-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.home-out-say h2 { color: #fff; font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -.028em; line-height: 1.16; margin-bottom: 10px; }
.home-out-say p { margin: 0; font-size: 13.5px; line-height: 1.62; color: #B9C1C7; }
.home-out-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-self: center; }
.home-out-list li {
  font-size: 14px; color: #E6EAED; padding-left: 26px; position: relative; line-height: 1.45;
}
.home-out-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 13px; font-weight: 700;
}

.home-foot { text-align: center; padding-block: clamp(28px, 5vw, 56px); border-top: 1px solid var(--rule); }
.home-foot .btn { border-radius: 999px; padding: 15px 34px; font-size: 16px; }
.home-foot p { margin: 16px auto 0; font-size: 12px; color: var(--ink-5); line-height: 1.6; max-width: 66ch; }

@media (max-width: 860px) {
  .home-hero { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
  .home-art { width: 120px; }
  .home-proof { grid-template-columns: 1fr; gap: 26px; }
  .home-out { grid-template-columns: 1fr; gap: 20px; }
  .home-cta { width: 100%; }
  .home-cta .btn { flex: 1 1 100%; justify-content: center; }
  .home-bar .home-enter { display: none; }
}

/* Le logo du rail est devenu un bouton : il doit s'en tenir aux styles du
   rail, pas à ceux des boutons. */
.rail-brand {
  border: 0; background: none; padding: 2px 14px 12px; width: 100%; text-align: left;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit;
  border-radius: 8px; transition: background .16s var(--ease-soft);
}
.rail-brand:hover { background: rgba(255,255,255,.05); }

/* ═══════════ La synthèse se lit en trois actes ═══════════════════════════
   Les six cartes disaient quatre fois la même chose : le résultat net, le
   seuil non atteint, les dépenses pour cent euros facturés et la rémunération
   incluse dans la perte énoncent tous « tu perds de l'argent ». Un tableau de
   bord doit répondre à « qu'est-ce que je dois traiter ». L'ordre porte donc
   la question de chaque groupe — est-ce que ça tient, d'où ça vient, où agir
   — et le titre d'acte est la seule chose à lire pour s'orienter. */

/* ═══════════ La fiche d'un poste : une ligne, puis ce qu'il coûte ════════
   L'intitulé, le contrat, le statut et le salaire décrivent le poste : ils
   tiennent sur une ligne. Ce qu'il coûte à l'entreprise en découle, et se lit
   dessous — c'est une conséquence, pas une quatrième saisie. */
/* Cinq cellules, larges comme ce qu'elles portent.
   « Type de contrat » et « Statut » affichent deux mots : ils n'ont pas à
   occuper un quart de ligne. La place rendue accueille le résultat, qui
   cesse d'être un bandeau séparé. */
.postline {
  display: grid; gap: 14px; align-items: end;
  grid-template-columns: 1.45fr .82fr .82fr 1.05fr 1.15fr;
}
.postline.is-short { grid-template-columns: 1.55fr .9fr 1.15fr 1.25fr; }
@media (max-width: 1240px) {
  .postline, .postline.is-short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .postline, .postline.is-short { grid-template-columns: 1fr; }
}
.postresult {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 6px 14px; border-left: 2px solid var(--ink); min-width: 0;
}
.postresult-label {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-5);
}
.postresult > .num {
  font-size: 20px; font-weight: 650; letter-spacing: -.03em; color: var(--ink);
  white-space: nowrap;
}
/* Le net passe à la ligne plutôt que de déborder : sur un portable, la
   cellule fait deux cents pixels et « Net avant impôt 29 952 € / an » en
   demande davantage. */
.postresult-net { font-size: 11.5px; color: var(--ink-5); line-height: 1.4; }
.postresult-net .num { font-size: 11.5px; font-weight: 650; color: var(--gain); }
@media (max-width: 1240px) {
  .postresult { border-left: 0; border-top: 1px solid var(--rule); padding: 10px 0 0; }
}
.postline + .field-hint { margin-top: 8px; }

/* ═══════════ Un choix fait tient sur une ligne ═══════════════════════════
   Trois cartes de type de client et sept formes juridiques restaient
   dépliées longtemps après qu'on avait tranché : la moitié de l'écran pour
   répéter une décision prise. Le choix posé se résume, et « Modifier »
   rouvre la grille. */
.pickdone {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface-2);
}
.pickdone-mark {
  flex: none; width: 19px; height: 19px; border-radius: 50%; align-self: center;
  display: grid; place-items: center; background: var(--ink); color: var(--accent); font-size: 10px;
}
.pickdone-name {
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  letter-spacing: -.018em; color: var(--ink);
}
.pickdone-note { font-size: 12.8px; color: var(--ink-4); line-height: 1.45; min-width: 0; }
.pickdone-edit {
  flex: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--signal-ink); padding: 3px 0;
  border-bottom: 1px solid currentColor; align-self: center;
}
.pickdone-edit:hover { color: var(--ink); }
@media (max-width: 560px) {
  .pickdone { gap: 6px 10px; }
  .pickdone-note { flex: 1 1 100%; }
}

/* ─── Le calcul a échoué : on ne laisse pas croire que les chiffres suivent ─── */
/* Un écran qui ne bouge plus pendant qu'on saisit est le pire signal qu'un
   outil de calcul puisse donner. S'il ne calcule plus, il le dit. */
.calcfail {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 18px;
  background: var(--loss-wash); border: 1px solid var(--loss);
  border-left: 4px solid var(--loss);
}
.calcfail strong {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--loss); letter-spacing: -0.01em;
}
.calcfail span { flex: 1 1 380px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.calcfail .btn { flex: none; }

/* ─── Le cadre juridique : une ligne, à côté du nom et de la date ─── */
/* Sept cartes dépliées en bas de page pour une réponse qui tient en quatre
   lettres. La réponse remonte ; la grille attend qu'on la demande. */
.control-bare { padding: 0; border: 0; background: none; }
.legalline {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 4px 11px 5px; min-height: 43px; cursor: pointer; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface);
  font: inherit; color: var(--ink);
  transition: border-color .16s var(--ease-soft), background .16s var(--ease-soft);
}
/* Le libellé dans le cadre, comme les champs voisins ; la réponse dessous. */
.legalline-corps { display: grid; gap: 1px; min-width: 0; flex: 0 1 auto; }
.legalline-label { margin: 0; font: 500 10.5px/1.25 var(--sans); color: var(--ink-4); letter-spacing: .005em; cursor: pointer; }
.legalline-valeur { display: flex; align-items: center; gap: 10px; min-width: 0; }
.legalline .valider-chip { flex: none; }
.legalline:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.legalline:hover { border-color: var(--ink); }
.legalline.is-open { border-color: var(--ink); background: var(--surface-2); }
.legalline-name {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em; flex: none;
}
.legalline-note {
  font-size: 11.5px; color: var(--ink-5); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.legalline-edit {
  flex: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-5); border-bottom: 1px solid var(--rule); padding-bottom: 1px;
}
.legalline:hover .legalline-edit { color: var(--ink); border-color: var(--ink); }
.legalline.is-empty .legalline-name { color: var(--ink-5); font-weight: 400; }
.legalopen { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
/* Le métier, lu comme la forme juridique : l'icône de sa famille, le métier
   en clair, ce qu'il implique. Un nom de métier peut être long : c'est la
   note qui cède la place la première, jamais le métier. */
.legalline-icon { width: 22px; height: 22px; flex: none; line-height: 0; }
.legalline-icon svg, .legalline-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.legalline.is-activity .legalline-name {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.legalline.is-activity .legalline-note { flex: 0 100 auto; }

/* ─── Acquisition : le gros trait avant l'entonnoir ─── */
/* La carte porte les deux nombres qui décident ; le détail par campagne vit
   dans un volet, sous elle. Les quatre tuiles qui coiffaient la page disaient
   la même chose sans la commenter. */
.acq-macro { margin-bottom: 18px; }
.seed-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 2px 0 4px; padding: 10px 14px;
  background: var(--surface-2); border-left: 2px solid var(--rule);
}
.seed-row p { margin: 0; flex: 1 1 260px; font-size: 12.5px; line-height: 1.5; color: var(--ink-5); }
.seed-row .btn { flex: none; }

/* ─── Une rangée de champs aligne ses cadres, pas ses cellules ─── */
/* Un champ qui porte une aide sous son cadre est plus haut que ses voisins.
   Aligné par le bas, c'est son cadre qui remontait ; aligné par le haut, un
   libellé sur deux lignes le ferait descendre. Les cellules s'étirent donc à
   la même hauteur et le champ devient une grille de trois rangées — libellé,
   cadre, aide — dont la dernière absorbe ce qui dépasse. Les cadres se posent
   alors sur la même ligne, avec ou sans aide. */
.grid-fields > .field {
  display: grid; grid-template-rows: auto auto 1fr; gap: 5px; align-self: stretch;
}

/* L'interrupteur prend la forme d'un champ : libellé au-dessus, bascule à la
   place du cadre, état écrit à côté. */
.field-switch .switch-name {
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  display: flex; align-items: center; gap: 5px;
}
/* Trente-huit pixels : la hauteur exacte d'un cadre de saisie. C'est ce qui
   met la bascule et le champ voisin sur le même axe, au pixel. */
.field-switch .switch { display: flex; align-items: center; gap: 9px; min-height: 38px; }
.switch-state {
  font-size: 12.5px; color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.field-switch input:checked ~ .switch-state { color: var(--ink); font-weight: 600; }
/* Un bouton rangé comme un champ prend la hauteur d'un cadre : sans quoi il
   flotte quatre pixels au-dessus de ses voisins. */
.grid-fields > .field > .btn { min-height: 38px; }
/* Ce que les campagnes détaillées ajoutent, dit sans qu'on ait à les ouvrir. */
.acq-plus {
  margin: 12px 0 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-3); background: var(--surface-2); border-left: 2px solid var(--ink);
}
.acq-plus .num { color: var(--ink); font-weight: 650; }
/* La ligne d'impôt ferme l'échelle : même grille, dernier barreau. */
.ladder-row.is-tax { border-bottom: 0; color: var(--ink-4); }
.ladder-row.is-tax .ladder-month { font-size: 15px; color: var(--ink-3); }

/* ─── La fin du parcours : un moment, pas un bulletin ─── */
/* Les chiffres rejoignent le bloc noir, sur une ligne : ils restent exacts
   mais cessent d'être le sujet. Le sujet, c'est qu'un modèle complet existe
   et qu'il y a trois gestes à faire ensuite. */
.done-hero { padding: 24px 26px 20px; }
.done-hero .keystone-value { font-size: clamp(24px, 2.8vw, 32px); }
.done-strip {
  position: relative; display: grid; gap: 1px; margin-top: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14);
}
.done-fig { background: var(--ink); padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.done-fig-label {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8E9184;
  line-height: 1.35;
}
.done-fig-value {
  font-size: 17px; font-weight: 650; letter-spacing: -.03em; color: #fff; white-space: nowrap;
}
.done-next { margin-top: 18px; }
.done-next .setup-next { gap: 10px; }
@media (max-width: 720px) {
  .done-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .done-strip { grid-template-columns: 1fr; }
}
/* « Je ne sais pas encore » : une issue, pas une réponse. Elle se distingue
   des choix — trait interrompu — pour qu'on ne la coche pas par erreur. */
.setup-choice.is-unsure {
  border-style: dashed; background: none;
}
.setup-choice.is-unsure .setup-choice-label { color: var(--ink-3); font-weight: 600; }
.setup-choice.is-unsure:hover { border-color: var(--ink-3); background: var(--surface-2); }

/* ─── Un réglage d'offre qu'on allume ─── */
/* Replié, un volet gardait ses valeurs actives sans le dire. L'interrupteur
   tranche : éteint, le bloc ne compte pas et le corps disparaît. */
.tuneblock { border: 1px solid var(--rule); margin-bottom: 10px; background: var(--surface); }
.tuneblock.is-on { border-color: var(--ink); }
.tuneblock-head { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; }
.tuneblock-title {
  font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink);
  letter-spacing: -.01em;
}
.tuneblock-sub { font-size: 12px; color: var(--ink-4); line-height: 1.45; margin-top: 2px; }
.tuneblock-off { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 4px; font-weight: 500; }
.tuneblock-body { padding: 0 16px 16px; border-top: 1px solid var(--rule); padding-top: 14px; }
.grid.grid-4.offerline { grid-template-columns: 1.3fr .9fr 1fr 1.1fr; gap: 14px; }
@media (max-width: 1100px) { .grid.grid-4.offerline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid.grid-4.offerline { grid-template-columns: 1fr; } }

/* ─── Le « + » qui éclate au clic ─── */
/* Un clic qui change de page sans rien confirmer laisse douter qu'il a été
   pris. Ce signe monte de l'élément cliqué et s'efface en un tiers de seconde,
   là où le doigt était. Il vit sur la page, hors de tout parent, pour qu'aucun
   bloc à débordement caché ne le tronque. */
.gappop {
  position: fixed; z-index: 200; pointer-events: none;
  transform: translate(-50%, -50%);
  font-family: var(--display); font-weight: 800; font-size: 20px;
  color: var(--tune); text-shadow: 0 1px 0 #fff, 0 0 10px var(--tune-wash);
  animation: gappop .62s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes gappop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  22%  { opacity: 1; transform: translate(-50%, -132%) scale(1.25); }
  55%  { opacity: 1; transform: translate(-50%, -178%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -240%) scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .gappop { display: none; } }

/* ─── Une suggestion acceptée : l'éclat, le trajet, l'arrivée ─── */
/* Des icônes jaillissent de la pastille dans les couleurs de la maison, une
   copie cochée de la pastille vole jusqu'à la ligne créée, et la ligne entre
   en glissant sous la même lumière que la carte qu'on travaille. */
.burst-bit {
  position: fixed; z-index: 260; pointer-events: none; line-height: 0;
  transform: translate(-50%, -50%);
  animation: burst-bit .82s cubic-bezier(.16, .84, .3, 1) both;
}
.burst-bit svg { width: 100%; height: 100%; display: block; overflow: visible; }
.burst-bit.is-lime { color: var(--accent); filter: drop-shadow(0 0 0.6px var(--ink)) drop-shadow(0 2px 6px rgba(184, 207, 42, .6)); }
.burst-bit.is-dim { color: var(--accent-dim); }
.burst-bit.is-ink { color: var(--ink); }
.burst-bit.is-blue { color: var(--signal); }
@keyframes burst-bit {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  18%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.15), calc(-50% + var(--dy) * 1.15 + 18px)) scale(.6) rotate(var(--rot)); }
}
.burst-wave {
  position: fixed; z-index: 259; pointer-events: none; width: 20px; height: 20px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid var(--accent-dim);
  box-shadow: 0 0 0 4px rgba(214, 240, 52, .35);
  animation: burst-wave .7s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes burst-wave {
  from { opacity: 1; width: 20px; height: 20px; }
  to   { opacity: 0; width: 150px; height: 150px; border-width: 1px; }
}
.burst-ghost {
  position: fixed; z-index: 258; pointer-events: none; transform-origin: 16px 50%;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--ink); max-width: 340px;
  font: 700 13px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--ink), 0 14px 30px -12px rgba(14, 15, 12, .55), 0 0 24px rgba(214, 240, 52, .7);
}
.burst-ghost > i {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent);
  display: grid; place-items: center; flex: none;
}
.burst-ghost > i svg { width: 14px; height: 14px; }
.burst-ghost > b { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }

.is-just-added { position: relative; z-index: 2; animation: just-added 2.1s cubic-bezier(.2, .8, .3, 1) both !important; }
@keyframes just-added {
  0%   { transform: translateX(-18px); opacity: .2; box-shadow: 0 0 0 0 rgba(214, 240, 52, 0); }
  14%  { transform: none; opacity: 1; box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px rgba(214, 240, 52, .85), 0 16px 40px -14px rgba(27, 59, 255, .45); }
  60%  { box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px rgba(214, 240, 52, .55), 0 16px 40px -18px rgba(27, 59, 255, .3); }
  100% { transform: none; opacity: 1; box-shadow: 0 0 0 0 rgba(214, 240, 52, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .burst-bit, .burst-wave, .burst-ghost { display: none; }
  .is-just-added { animation: none !important; box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px rgba(214, 240, 52, .7); }
}

/* ─── La ligne ouverte se voit : on sait où l'on travaille ─── */
/* Elle se soulève. Le fond jaune salissait les champs et se lisait comme une
   alerte ; les ombres colorées qui tournaient autour faisaient halo, pas
   relief. La carte qu'on travaille garde son blanc, prend un trait d'encre
   net et monte de quelques pixels au-dessus des autres, portée par trois
   ombres neutres : une serrée qui dessine le bord, une moyenne qui la
   décolle, une large et douce qui la pose loin du fond. Le mouvement se joue
   une fois, à l'ouverture — rien ne bouge pendant qu'on saisit. */
.item.open {
  position: relative; z-index: 1;
  border-color: var(--ink); border-top-color: var(--ink);
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(14, 15, 12, .12),
    0 14px 28px -12px rgba(14, 15, 12, .30),
    0 44px 80px -34px rgba(14, 15, 12, .50);
  animation: card-lift .42s cubic-bezier(.2, .8, .25, 1) both;
}
.item.open > .item-head:hover { background: var(--surface-2); }
.item.open .foldsign { border-color: var(--ink); color: var(--ink); }
@keyframes card-lift {
  from {
    transform: none;
    box-shadow: 0 0 0 rgba(14, 15, 12, 0), 0 0 0 rgba(14, 15, 12, 0), 0 0 0 rgba(14, 15, 12, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .item.open { animation: none; }
}

/* ─── Sur quelles offres porte une charge indexée ─── */
/* Une pastille par offre mangeait la ligne dès qu'il y en avait trois. Un
   bouton dit l'état en trois mots et ouvre la liste à cocher ; le menu ne se
   referme pas entre deux cases, puisque c'est tout l'intérêt. */
.scopepick { position: relative; min-width: 0; }
.scopepick-sum {
  display: flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
  padding: 4px 8px; border-radius: 999px; max-width: 168px;
  border: 1px solid var(--rule); background: var(--surface);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  transition: border-color .12s, color .12s;
}
.scopepick-sum::-webkit-details-marker { display: none; }
.scopepick-sum:hover { border-color: var(--tune); color: var(--tune-ink); }
.scopepick[open] .scopepick-sum { border-color: var(--tune); color: var(--tune-ink); }
.scopepick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scopepick-chev { flex: none; transition: transform .16s var(--ease-soft); }
.scopepick[open] .scopepick-chev { transform: rotate(90deg); }
.scopepick-menu {
  position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; min-width: 210px;
  background: var(--surface); border: 1px solid var(--tune-rule); border-radius: 10px;
  padding: 5px; box-shadow: 0 14px 34px -16px rgba(11, 14, 16, .5);
}
.scopepick-row {
  display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer;
  padding: 6px 8px; border: 0; border-radius: 7px; background: none; font: inherit;
  font-size: 12.5px; color: var(--ink-3); text-align: left;
}
.scopepick-row:hover { background: var(--tune-wash); color: var(--tune-ink); }
.scopepick-row.on { color: var(--tune-ink); font-weight: 600; }
.scopepick-box {
  width: 15px; height: 15px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 4px; font-size: 10px; line-height: 1;
}
.scopepick-row.on .scopepick-box { background: var(--tune); border-color: var(--tune); color: #fff; }
.scopepick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════ Synthèse — essai : le même récit, dans plus d'air ═══════════
   Le fond est celui de la synthèse — avancement, verdict, trois actes, six
   chiffres, analyse — et la forme change : une seule surface noire, pas de
   cartes encadrées, des colonnes séparées par un filet, la chasse fixe pour
   tout ce qui se compte, et beaucoup d'espace entre les idées. */

.sy { display: flex; flex-direction: column; gap: var(--s-7); padding-bottom: var(--s-5); }

/* Commun : surtitres, boutons, liens. */
.sy-kicker {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-5);
}
.sy-kicker.is-accent { color: var(--accent); }
.sy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13.5px/1 var(--sans); letter-spacing: -.005em; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .18s var(--ease-soft), box-shadow .18s var(--ease-soft), background .18s var(--ease-soft), border-color .18s;
}
.sy-btn:hover { transform: translateY(-1px); }
.sy-btn:active { transform: translateY(0); }
.sy-btn.is-sm { padding: 8px 14px; font-size: 12.5px; }
.sy-btn.is-accent { background: var(--accent); color: var(--ink); }
.sy-btn.is-accent:hover { box-shadow: 0 10px 24px -14px rgba(184, 207, 42, .9); }
.sy-btn.is-ghost { background: transparent; color: #E9EBE3; border-color: rgba(255, 255, 255, .22); }
.sy-btn.is-ghost:hover { border-color: rgba(255, 255, 255, .5); }
.sy-btn.is-ink { background: var(--ink); color: var(--paper); }
.sy-btn.is-line { background: transparent; color: var(--ink); border-color: var(--rule); }
.sy-btn.is-line:hover { border-color: var(--ink); }
.sy-link {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: 600 12.5px/1.4 var(--sans); color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 4px;
  transition: text-decoration-color .16s;
}
.sy-link:hover { text-decoration-color: var(--ink); }

/* Le dépliage sur place : une rangée de grille qui passe de 0 à sa hauteur.
   Le contenu glisse au lieu d'apparaître, sans mesurer quoi que ce soit. */
.sy-unfold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease-soft); }
.sy-unfold > div { overflow: hidden; min-height: 0; }
.is-open > .sy-unfold { grid-template-rows: 1fr; }

/* ─── 1. Le dossier : deux tiers de noir, un tiers de file ─── */
.sy-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.sy-ink {
  position: relative; overflow: hidden; background: var(--ink); color: #E9EBE3;
  border-radius: 16px; padding: 20px 24px 20px; display: flex; flex-direction: column;
}
.sy-ink::after {
  content: ''; position: absolute; right: -120px; top: -140px; width: 360px; height: 360px;
  border-radius: 50%; background: radial-gradient(circle, rgba(214, 240, 52, .16), transparent 65%);
  pointer-events: none;
}
.sy-ink-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sy-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #C9CCC1; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 5px 10px;
}
.sy-live > i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: sy-pulse 2.4s ease-in-out infinite; }
@keyframes sy-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 240, 52, .55); } 60% { box-shadow: 0 0 0 6px rgba(214, 240, 52, 0); } }
.sy-ink-title {
  margin: 0; font-family: var(--display); font-weight: 750; color: #fff;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -.025em; max-width: 30ch;
}
.sy-ink-title.is-small { font-size: clamp(17px, 1.5vw, 21px); max-width: 40ch; }
.sy-ink-word {
  font-family: var(--display); font-weight: 800; color: #fff; line-height: .95;
  font-size: clamp(32px, 3.2vw, 44px); letter-spacing: -.04em; margin-bottom: 8px;
}
.sy-ink.is-good .sy-ink-word { color: var(--accent); }
.sy-ink-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #B9BCB1; max-width: 68ch; }

/* Une case par ligne du dossier — et chaque case est un bouton : elle se
   survole (ce qu'elle est, pourquoi elle compte) et se clique (on y va). La
   zone cliquable est plus haute que le trait, pour que le doigt la trouve. */
.sy-cells { display: flex; gap: 12px; margin-top: 16px; }
.sy-cells-axe { flex: 1 1 0; min-width: 104px; display: flex; flex-direction: column; gap: 6px; }
.sy-cells-row { display: flex; gap: 3px; }
.sy-cells-cap {
  display: block; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--mono); font-size: 10.5px; color: #8E9186;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sy-cells-cap b { color: #E9EBE3; font-weight: 600; }
.sy-cell {
  flex: 1; min-width: 0; height: 22px; padding: 7px 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center;
}
.sy-cell > i {
  display: block; width: 100%; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .12);
  transition: transform .16s var(--ease-soft), background .16s, box-shadow .16s;
}
.sy-cell.is-done > i { background: var(--accent); }
.sy-cell.is-next > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); animation: sy-next 1.8s ease-in-out infinite; }
.sy-cell:hover > i, .sy-cell:focus-visible > i { transform: scaleY(1.9); background: rgba(255, 255, 255, .42); }
.sy-cell.is-done:hover > i, .sy-cell.is-done:focus-visible > i { background: #EDFF7A; box-shadow: 0 0 12px rgba(214, 240, 52, .7); }
.sy-cell:focus-visible { outline: none; }
@keyframes sy-next { 50% { box-shadow: inset 0 0 0 1.5px rgba(214, 240, 52, .35); } }
.sy-ink-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sy-ink-meter { display: none; }

/* La file : ce qui vient d'être posé, puis ce qui vient. */
.sy-next {
  background: var(--surface); border-radius: 16px; padding: 18px 20px 16px;
  display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--rule), 0 24px 48px -36px rgba(14, 15, 12, .35);
}
.sy-nextstep {
  margin-top: 8px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px 11px;
  box-shadow: 0 1px 0 rgba(14, 15, 12, .04);
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft), border-color .2s;
}
.sy-nextstep:hover, .sy-nextstep:focus-visible {
  outline: none; transform: translateY(-2px); border-color: var(--ink);
  box-shadow: 0 2px 0 rgba(14, 15, 12, .06), 0 18px 34px -22px rgba(14, 15, 12, .5);
}
.sy-nextstep-label { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.sy-nextstep-where {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.45; color: var(--ink-3);
  background: var(--surface-2); border-radius: 6px; padding: 4px 8px;
}
.sy-nextstep-why { font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }
.sy-nextstep-go { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sy-nextstep:hover .sy-nextstep-go { text-decoration: underline; text-underline-offset: 4px; }
.sy-axe-bar { display: block; height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.sy-axe-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .5s var(--ease-soft); }
.sy-dossier-col.is-complete .sy-axe-bar > i { background: var(--gain); }
.sy-next > .sy-link { margin-top: 14px; padding-left: 10px; }
.sy-side-num {
  margin-top: 14px; font-family: var(--mono); font-weight: 600; font-size: 40px;
  letter-spacing: -.03em; color: var(--ink); line-height: 1;
}
.sy-side-when { margin-top: 10px; font-size: 12.5px; color: var(--ink-4); line-height: 1.5; }
.sy-next > .spacer { flex: 1; min-height: 18px; }

.sy-fig-chev {
  width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform .28s var(--ease-soft); flex: none;
}
.is-open > .sy-fig-head .sy-fig-chev, .sy-deep.is-open .sy-deep-head .sy-fig-chev {
  transform: rotate(-135deg) translate(-2px, -1px);
}

/* ─── 2 bis. Ce qui est fait, ce qui reste — une colonne par page ─── */
.sy-dossier-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); align-items: start; }
/* Replié : une ligne qui s'ouvre sur les colonnes, page par page. */
.sy-dossier:not(.is-open) .sy-dossier-grid { display: none; }
.sy-dossier-toggle {
  width: 100%; display: flex; align-items: baseline; gap: 12px; cursor: pointer; text-align: left; font: inherit;
  padding: 11px 16px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
}
.sy-dossier-toggle:hover { box-shadow: inset 0 0 0 1px var(--ink-5); }
.sy-dossier-toggle-titre { font: 700 var(--t-block)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.sy-dossier-toggle-say { font-size: 12.5px; color: var(--ink-4); }
.sy-dossier-toggle .sy-fig-chev { margin-left: auto; align-self: center; }
.sy-dossier.is-open .sy-dossier-toggle .sy-fig-chev { transform: rotate(-135deg) translate(-2px, -1px); }
.sy-dossier-col {
  background: var(--surface); border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 1px 0 var(--rule), 0 22px 44px -38px rgba(14, 15, 12, .45);
}
.sy-dossier-head { display: flex; justify-content: space-between; gap: 10px; }
.sy-dossier-nom { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.sy-dossier-num { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-4); }
.sy-dossier-col.is-complete .sy-dossier-num { color: var(--gain); }
.sy-dossier-col > .sy-axe-bar { margin: 12px 0 14px; }
.sy-dossier-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 4px;
}
.sy-dossier-bloc.is-done { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.sy-todo {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  width: calc(100% + 16px); margin: 0 -8px; padding: 7px 8px; background: none; border: 0; border-radius: 9px;
  transition: background .16s var(--ease-soft), box-shadow .16s var(--ease-soft);
}
.sy-todo:hover, .sy-todo:focus-visible { outline: none; background: var(--surface-2); }
.sy-todo-label { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.sy-todo-where { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
.sy-todo:hover .sy-todo-where { color: var(--ink-3); }
.sy-todo.is-next { box-shadow: inset 2px 0 0 var(--ink); border-radius: 0 9px 9px 0; }
.sy-todo.is-next .sy-todo-label::after {
  content: 'Prochaine'; margin-left: 8px; vertical-align: 1px;
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--ink); border-radius: 999px; padding: 2px 7px;
}
.sy-done {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 12.5px; line-height: 1.4; color: var(--ink-4);
  background: none; border: 0; padding: 4px 0;
  transition: color .16s;
}
.sy-done:hover, .sy-done:focus-visible { outline: none; color: var(--ink); }
.sy-done > i {
  flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 9px; font-weight: 700; background: var(--accent); color: var(--ink);
}
.sy-done.is-na { color: var(--ink-5); }
.sy-done.is-na > i { background: var(--surface-2); color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--rule); }
.sy-done em { display: block; font-style: normal; font-size: 11px; color: var(--ink-5); }
.sy-dossier-more {
  text-decoration-color: var(--rule); text-underline-offset: 4px;
}
.sy-dossier-more:hover { text-decoration-color: var(--ink); }
.sy-dossier-ok { margin: 0; font-size: 13px; color: var(--gain); font-weight: 600; }
.sy-watch:not(.is-seen) .sy-dossier-col { opacity: 0; }
.is-play .sy-dossier-col { animation: sy-rise .55s var(--ease-soft) both; animation-delay: calc(.08s + var(--i) * .07s); }
.sy-watch:not(.is-seen) .sy-dossier-col > .sy-axe-bar > i { transform: scaleX(0); }
.is-play .sy-dossier-col > .sy-axe-bar > i { animation: sy-widen .7s var(--ease-soft) both; animation-delay: calc(.35s + var(--i) * .07s); transform-origin: left; }

/* ─── 3. Les actes : trois formes, une même hiérarchie ─── */
/* Ce que l'on mesure, combien, ce qu'il faut en retenir, le détail. Chaque
   acte prend la forme de ce qu'il dit : des cartes de mesure, une image au
   centre avec des faits à côté, une bande en travers de la page. */
.sy-act-head { max-width: none; }
.sy-act-no {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-4);
}
.sy-act-no > b {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--accent); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}
.sy-act-no > span { font-weight: 600; }
.sy-act-no > em { font-style: normal; color: var(--ink-5); margin-left: auto; }
.sy-act-no::after { content: none; }
.sy-act { padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.sy-act-title {
  margin: 10px 0 0; font-family: var(--display); font-weight: 750; color: var(--ink);
  font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; line-height: 1.12; max-width: 34ch;
}
.sy-act-say { margin: 8px 0 0; line-height: 1.5; color: var(--ink-3); }

/* Forme 1 — des cartes de mesure, sur surface blanche. */
.sy-cards { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.sy-cards.is-1 { grid-template-columns: minmax(0, 1fr); }
.sy-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sy-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sy-card {
  display: flex; flex-direction: column; padding: 16px 18px 18px; background: var(--surface);
  border-radius: 14px; box-shadow: 0 1px 0 var(--rule), 0 26px 50px -40px rgba(14, 15, 12, .45);
  transition: transform .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
}
.sy-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--rule), 0 30px 56px -38px rgba(14, 15, 12, .55); }
.sy-card-kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px;
}
.sy-card-kicker > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-5); flex: none; }
.is-good > .sy-card-kicker > i, .is-good > .sy-band-say > .sy-card-kicker > i { background: var(--gain); }
.is-watch > .sy-card-kicker > i, .is-watch > .sy-band-say > .sy-card-kicker > i { background: #D09A2A; }
.is-bad > .sy-card-kicker > i, .is-bad > .sy-band-say > .sy-card-kicker > i { background: var(--loss); }

.sy-big { display: flex; flex-direction: column; gap: 4px; }
.sy-big-val {
  font-family: var(--mono);
  color: var(--ink); justify-self: start; align-self: flex-start;
  padding: 0 3px; margin-left: -3px;
}
.sy-big-val.is-pos { color: var(--gain); }
.sy-big-val.is-neg { color: var(--loss); }
.sy-big-cap { font-size: 12px; color: var(--ink-4); }
.sy-card-title {
  margin: 20px 0 0; font-family: var(--display); font-weight: 700;
  line-height: 1.28; letter-spacing: -.015em; color: var(--ink);
}
.sy-card-body { margin: 8px 0 0; font-size: 13px; line-height: 1.62; color: var(--ink-4); }

/* Forme 2 — une image au centre, des faits à côté, sans carte. */
.sy-feature { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; margin-top: 30px; align-items: start; }
.sy-feature-main {
  padding: 28px 30px 30px; border-radius: 20px; background: var(--surface);
  box-shadow: 0 1px 0 var(--rule), 0 30px 60px -44px rgba(14, 15, 12, .5);
}
.sy-feature-title {
  margin: 14px 0 0; font-family: var(--display); font-weight: 750; font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.12; letter-spacing: -.03em; color: var(--ink); max-width: 22ch;
}
.sy-feature-fig {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-4);
}
.sy-feature-fig b { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.sy-feature-fig b.is-pos { color: var(--gain); }
.sy-feature-fig b.is-neg { color: var(--loss); }
.sy-facts { display: flex; flex-direction: column; }
.sy-fact { padding: 20px 0 22px; border-top: 1px solid var(--ink); }
.sy-fact + .sy-fact { border-top-color: var(--rule); }
.sy-fact-val { margin-top: 10px; font-family: var(--mono); font-weight: 600; font-size: 26px; letter-spacing: -.03em; line-height: 1; }
.sy-fact-val.is-pos { color: var(--gain); }
.sy-fact-val.is-neg { color: var(--loss); }
.sy-fact-title { margin: 10px 0 0; font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.sy-fact .sy-split { margin-top: 14px; }

.sy-hundred { margin-top: 24px; }
.sy-hundred-bar { display: flex; height: 48px; border-radius: 12px; overflow: hidden; background: var(--rule); cursor: default; }
.sy-hundred-bar > i {
  display: flex; align-items: center; justify-content: center; min-width: 3px;
  border-right: 2px solid var(--surface); font-style: normal;
}
.sy-hundred-bar > i:last-child { border-right: 0; }
.sy-hundred-bar > i > span { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.sy-hundred-bar > i.is-left > span, .sy-hundred-bar > i.is-other > span { color: var(--ink); }
.sy-hundred-bar > i.is-team, .sy-hundred-key.is-team > i { background: var(--ink); }
.sy-hundred-bar > i.is-buys, .sy-hundred-key.is-buys > i { background: #6E7166; }
.sy-hundred-bar > i.is-other, .sy-hundred-key.is-other > i { background: #C9CBC1; }
.sy-hundred-bar > i.is-left, .sy-hundred-key.is-left > i { background: var(--accent); }
.sy-hundred-bar > i.is-bad, .sy-hundred-key.is-bad > i { background: var(--loss); }
.sy-hundred-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 14px; }
.sy-hundred-key {
  display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-3);
}
.sy-hundred-key > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sy-hundred-key > b { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--ink); }
.sy-hundred-key.is-left > b { color: var(--gain); }

/* Forme 3 — une bande en travers, le seuil sur une règle. */
.sy-bandwrap { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.sy-band-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.sy-band-row > .sy-levers { margin-top: 0; padding: 24px 26px; border-top: 0; border-radius: 18px; background: var(--ink); color: #E9EBE3; }
.sy-band-row > .sy-levers .sy-kicker { color: var(--accent); }
.sy-band-row > .sy-levers .sy-levers-title { color: #fff; }
.sy-band-row > .sy-levers .sy-levers-rows { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sy-band-row > .sy-levers .sy-lever { background: rgba(255, 255, 255, .06); box-shadow: none; }
.sy-band-row > .sy-levers .sy-lever:hover { background: rgba(255, 255, 255, .1); transform: none; }
.sy-band-row > .sy-levers .sy-lever-no { background: var(--accent); color: var(--ink); }
.sy-band-row > .sy-levers .sy-lever-label { color: #fff; }
.sy-band-row > .sy-levers .sy-lever-detail { color: #9EA196; }
.sy-band-row > .sy-levers .sy-lever-gain b { color: var(--accent); }
.sy-band-row > .sy-levers .sy-lever-gain span { color: #9EA196; }
.sy-levers-head { display: flex; flex-direction: column; gap: 6px; }
.sy-levers-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.sy-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 44px; align-items: center;
  padding: 30px 32px; border-radius: 20px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.sy-band-viz { min-width: 0; }
.sy-rule { padding-top: 6px; }
.sy-rule-track { position: relative; height: 18px; border-radius: 9px; background: var(--rule); }
.sy-rule-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: var(--ink); transition: width .5s var(--ease-soft); }
.sy-rule.is-ok .sy-rule-fill { background: var(--gain); }
.sy-rule-mark { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface-2); }
.sy-rule-labels { position: relative; height: 44px; margin-top: 10px; }
.sy-rule-labels > span {
  position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.sy-rule-labels > span > b { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.sy-rule-prevu { top: 0; }
.sy-rule-seuil { top: 0; }
.sy-rule-labels > span:last-child:nth-child(2) { top: 0; }
.sy-rule .sy-gauge-label { margin-top: 4px; }
.sy-mini.is-grand { height: 150px; margin-top: 0; }
.sy-mini-val {
  position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.sy-mini-track > i.is-neg .sy-mini-val { bottom: auto; top: calc(100% + 5px); color: var(--loss); }
.sy-mini.is-grand .sy-mini-track > i { left: 22%; right: 22%; }

/* Un chiffre qui vient de changer bat une fois : l'œil sait où regarder. */
.sy .is-fresh { animation: sy-fresh 1.1s var(--ease-soft); border-radius: 4px; }
@keyframes sy-fresh { 0% { background: rgba(214, 240, 52, .7); } 100% { background: transparent; } }

/* Les petites images des lectures. */
.sy-mini { position: relative; display: flex; gap: 10px; height: 86px; margin-top: 22px; }
.sy-mini-zero {
  position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); opacity: .22;
  top: calc((100% - 18px) * var(--zero)); pointer-events: none;
}
.sy-mini-col { position: relative; flex: 1; display: flex; flex-direction: column; cursor: default; }
.sy-mini-track { position: relative; flex: 1; border-radius: 3px; transition: background .14s; }
.sy-mini-col:hover .sy-mini-track { background: rgba(14, 15, 12, .04); }
.sy-mini-track > i { position: absolute; left: 18%; right: 18%; min-height: 2px; border-radius: 2px; }
.sy-mini-track > i.is-pos { background: var(--ink); }
.sy-mini-track > i.is-neg { background: var(--loss); opacity: .85; }
.sy-mini-label { height: 18px; padding-top: 5px; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--ink-5); }

.sy-split { margin-top: 22px; }
.sy-split-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--rule); cursor: default; }
.sy-split-bar > i { display: block; min-width: 2px; border-right: 2px solid var(--paper); }
.sy-split-bar > i:last-child { border-right: 0; }
.sy-split-bar > i.is-team, .sy-split-key.is-team > i { background: var(--ink); }
.sy-split-bar > i.is-buys, .sy-split-key.is-buys > i { background: #6E7166; }
.sy-split-bar > i.is-other, .sy-split-key.is-other > i { background: #B4B7AC; }
.sy-split-bar > i.is-left, .sy-split-key.is-left > i { background: var(--accent); }
.sy-split-bar > i.is-bad, .sy-split-key.is-bad > i { background: var(--loss); }
.sy-split-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.sy-split-key { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); background: none; }
.sy-split-key > i { width: 8px; height: 8px; border-radius: 2px; }
.sy-split-key b { color: var(--ink); font-weight: 600; }

.sy-gauge { margin-top: 22px; }
.sy-gauge-track { position: relative; height: 8px; background: var(--rule); border-radius: 4px; }
.sy-gauge-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--ink); transition: width .5s var(--ease-soft); }
.sy-gauge-track > i.is-ok { background: var(--gain); }
.sy-gauge-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.sy-gauge-label { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }

.sy-curve { margin-top: 22px; }
.sy-curve-wrap { position: relative; }
.sy-curve-svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sy-curve-zero { stroke: rgba(14, 15, 12, .28); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.sy-curve-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sy-curve-hit { position: absolute; inset: 0; cursor: crosshair; }
.sy-curve-rule { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--ink); opacity: 0; transition: opacity .12s; pointer-events: none; }
.sy-curve-dot {
  position: absolute; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--ink); opacity: 0; transition: opacity .12s; pointer-events: none;
}
.sy-curve-dot.is-neg { background: var(--loss); }
.sy-curve-hit.is-on .sy-curve-rule, .sy-curve-hit.is-on .sy-curve-dot { opacity: 1; }
.sy-curve-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-5); }
.sy-curve-legend { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-5); }

/* Les trois gestes chiffrés, qui ferment le dernier acte. */
.sy-levers { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); }
.sy-levers-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.sy-lever {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 12px;
  padding: 16px 18px; background: var(--surface); border-radius: 14px;
  box-shadow: 0 1px 0 var(--rule); transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.sy-lever:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--rule), 0 18px 34px -26px rgba(14, 15, 12, .45); }
.sy-lever-no {
  grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--accent);
  display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.sy-lever-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sy-lever-label { font-size: 13.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; }
.sy-lever-detail { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); line-height: 1.45; }
.sy-lever-gain { display: flex; align-items: baseline; gap: 6px; }
.sy-lever-gain b { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--gain); }
.sy-lever-gain span { font-size: 11.5px; color: var(--ink-4); }

.sy-foot {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 22px 0 0; border-top: 1px solid var(--rule); margin-top: -24px;
}
.sy-foot p { flex: 1; min-width: 280px; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-4); max-width: 72ch; }
.sy-foot-go { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── 4. Les six chiffres ─── */
.sy-sec-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sy-sec-head > div:first-child { flex: 1; min-width: 260px; }
/* Les hypothèses du plan : ce qui est retenu, et ce qui le fonde. */
.sy-hyp .table-wrap { margin-top: 18px; }
table.data.sy-hyp-table th, table.data.sy-hyp-table td { text-align: left; }
table.data.sy-hyp-table td { vertical-align: top; line-height: 1.5; font-family: var(--sans); font-size: 13.5px; }
table.data.sy-hyp-table td.num { font-family: var(--mono); font-size: 13px; }
.sy-hyp-table td:first-child { min-width: 180px; white-space: normal; }
.sy-hyp-table td:nth-child(2) { white-space: nowrap; }
.sy-hyp-table td:last-child { white-space: normal; min-width: 280px; color: var(--ink-2); }
.sy-hyp-etat { display: inline-block; margin-right: 4px; padding: 2px 7px; border-radius: 999px; font: 600 10.5px/1.4 var(--sans); background: var(--surface-2); color: var(--ink-3); }
.sy-hyp-etat.is-ok { background: var(--gain-wash); color: var(--gain); }
.sy-hyp-etat.is-watch { background: var(--warn-wash, #FFF3D6); color: var(--warn, #8A6100); }
.sy-hyp .sy-btn { margin-top: 14px; }
.sy-sec-title {
  display: block; margin: 0; font-family: var(--display); font-weight: 750; font-size: 24px;
  letter-spacing: -.03em; color: var(--ink);
}
.sy-sec-say { display: block; margin: 6px 0 0; font-size: 13.5px; color: var(--ink-4); line-height: 1.5; }
.sy-years { flex: none; display: inline-flex; gap: 3px; padding: 3px; background: var(--surface); border-radius: 999px; box-shadow: 0 1px 0 var(--rule); }
.sy-year {
  font-family: var(--mono); font-size: 11px; padding: 7px 12px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-4); cursor: pointer; transition: background .18s var(--ease-soft), color .18s;
}
.sy-year:hover { color: var(--ink); }
.sy-year.is-on { background: var(--ink); color: var(--accent); font-weight: 600; }

.sy-figs-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; margin-top: 26px;
  align-items: start; border-top: 1px solid var(--ink);
}
.sy-figs-col { display: flex; flex-direction: column; }
.sy-fig { border-bottom: 1px solid var(--rule); }
.sy-fig-head {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'label chev' 'val spark' 'note spark';
  align-items: center; gap: 4px 12px; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: inherit; transition: background .16s var(--ease-soft);
}
.sy-fig-head:hover .sy-fig-label { color: var(--ink); }
.sy-fig-head:hover .sy-fig-chev { color: var(--ink); }
.sy-fig-label { grid-area: label; font-family: var(--mono); font-size: 10px; }
.sy-fig-val { grid-area: val; font-family: var(--mono); color: var(--ink); justify-self: start; padding: 0 2px; margin-left: -2px; }
.sy-fig.is-pos .sy-fig-val { color: var(--gain); }
.sy-fig.is-neg .sy-fig-val { color: var(--loss); }
.sy-fig.is-warn .sy-fig-val { color: var(--warn); }
.sy-fig-note { grid-area: note; font-size: 12px; color: var(--ink-4); }
.sy-fig-chev { grid-area: chev; justify-self: end; color: var(--ink-5); }
.sy-spark { grid-area: spark; justify-self: end; align-self: end; line-height: 0; }
.sy-fig-body { padding: 0 0 22px; }
.sy-fig-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.sy-fig-body .sy-fig-what { color: var(--ink-2); }
.sy-fig-body b { color: var(--ink); }

/* ─── 5. L'analyse détaillée ─── */
.sy-deep { border-top: 1px solid var(--ink); }
.sy-deep-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0 22px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink-4);
}
.sy-deep-head:hover { color: var(--ink); }
.sy-deep-body { display: flex; flex-direction: column; gap: 56px; padding-top: 12px; animation: sy-rise .4s var(--ease-soft) both; }
.sy-deep-go { display: flex; gap: 10px; flex-wrap: wrap; }

.sy-ex { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sy-ex-year {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid transparent; border-radius: 14px; box-shadow: 0 1px 0 var(--rule);
  font: inherit; color: inherit; transition: border-color .18s, transform .18s var(--ease-soft);
}
.sy-ex-year:hover { transform: translateY(-1px); }
.sy-ex-year.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sy-ex-no { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.sy-ex-ca { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--ink); }
.sy-ex-net { font-family: var(--mono); font-size: 11px; }
.sy-ex-net.is-pos { color: var(--gain); }
.sy-ex-net.is-neg { color: var(--loss); }

.sy-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; }
.sy-eq-term { display: flex; flex-direction: column; gap: 6px; }
.sy-eq-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.sy-eq-val { font-family: var(--mono); font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.sy-eq-note { font-size: 12px; color: var(--ink-4); }
.sy-eq-term.is-result .sy-eq-val { color: var(--gain); }
.sy-eq-term.is-result.is-loss .sy-eq-val { color: var(--loss); }
.sy-eq-op { font-family: var(--mono); font-size: 28px; color: var(--ink-5); }

.sy-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 56px; }
.sy-block-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sy-block-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.sy-block-meta { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-5); }
.sy-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.sy-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; }
.sy-keys.is-below { margin: 12px 0 0; }
.sy-key { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.sy-key > i { width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.sy-key.is-ebitda > i { background: #6E7166; }
.sy-key.is-net > i { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-dim); }
.sy-key.is-seuil > i { height: 0; border-top: 2px dashed var(--loss); background: none; border-radius: 0; }

.sy-perf { position: relative; height: 240px; display: flex; gap: 4px; }
.sy-perf-zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); opacity: .28; top: calc((100% - 24px) * var(--zero)); pointer-events: none; z-index: 1; }
.sy-perf-col { position: relative; flex: 1; cursor: pointer; border-radius: 6px; transition: background .16s var(--ease-soft); }
.sy-perf-col:hover { background: rgba(14, 15, 12, .04); }
.sy-perf-col.is-on { background: rgba(214, 240, 52, .22); }
.sy-perf-col:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sy-perf-bars { position: absolute; top: 0; left: 0; right: 0; bottom: 24px; display: flex; padding: 0 8%; }
.sy-perf-slot { position: relative; flex: 1; }
.sy-perf-bar { position: absolute; left: 12%; right: 12%; min-height: 1px; display: block; border-radius: 2px 2px 0 0; }
.sy-perf-bar.is-down { border-radius: 0 0 2px 2px; }
.sy-perf-bar.is-ca { background: var(--ink); }
.sy-perf-bar.is-ebitda { background: #6E7166; }
.sy-perf-bar.is-net { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-dim); }
.sy-perf-bar.is-down { background: var(--loss); box-shadow: none; opacity: .88; }
.sy-perf-seuil { position: absolute; left: 4%; right: 4%; height: 0; border-top: 2px dashed var(--loss); opacity: .75; pointer-events: none; }
.sy-perf-year {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px; padding-top: 7px; text-align: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-5); border-top: 1px solid var(--rule);
}
.is-on > .sy-perf-year { color: var(--ink); font-weight: 600; border-top-color: var(--ink); }

.sy-ladder { display: flex; flex-direction: column; }
.sy-rung {
  display: grid; grid-template-columns: minmax(110px, 1fr) minmax(80px, 1.6fr) 76px; align-items: center; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--rule); cursor: default; transition: background .14s;
}
.sy-rung:hover { background: rgba(255, 255, 255, .5); }
.sy-rung:last-child { border-bottom: 0; }
.sy-rung-nom { font-size: 12.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-rung.is-out .sy-rung-nom::before { content: '\2212\00a0'; font-family: var(--mono); color: var(--ink-5); }
.sy-rung.is-solde .sy-rung-nom, .sy-rung.is-lead .sy-rung-nom { font-weight: 700; color: var(--ink); }
.sy-rung-bar { display: block; height: 7px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.sy-rung-bar > i { display: block; height: 100%; border-radius: 4px; background: #A2A598; transition: width .4s var(--ease-soft); }
.sy-rung.is-solde .sy-rung-bar > i, .sy-rung.is-lead .sy-rung-bar > i { background: var(--ink); }
.sy-rung.is-out .sy-rung-bar > i { background: #D5A9A6; }
.sy-rung.is-last .sy-rung-bar > i { background: var(--accent); }
.sy-rung-val { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink); }
.sy-rung.is-solde .sy-rung-val { font-weight: 700; }

.sy-stack { display: flex; gap: 14px; height: 200px; }
.sy-stack-col { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 24px; border-radius: 6px; cursor: default; }
.sy-stack-col:hover { background: rgba(14, 15, 12, .04); }
.sy-stack-bar { display: flex; flex-direction: column-reverse; margin: 0 18%; border-radius: 3px 3px 0 0; overflow: hidden; }
.sy-stack-bar > i { display: block; min-height: 1px; border-top: 1px solid var(--paper); }
.sy-stack-bar > i.is-a, .sy-key.is-st-a > i { background: #B4B7AC; }
.sy-stack-bar > i.is-b, .sy-key.is-st-b > i { background: #8E9186; }
.sy-stack-bar > i.is-c, .sy-key.is-st-c > i { background: var(--ink); }
.sy-stack-bar > i.is-d, .sy-key.is-st-d > i { background: #62655A; }
.sy-stack-bar > i.is-e, .sy-key.is-st-e > i { background: #D8DACF; }

.sy-ratios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.sy-ratio { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 15px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.sy-ratio:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.sy-ratio-nom { font-size: 12px; font-weight: 600; color: var(--ink); }
.sy-ratio-val { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.sy-ratio-dit { font-size: 11px; color: var(--ink-5); line-height: 1.4; }

/* ─── Ce qui bouge ─── */
/* L'écran se monte en séquence à l'arrivée ; les images se tracent — barres
   qui poussent depuis leur zéro, répartitions qui se déroulent, courbes qui
   se dessinent. Rien de cela ne se rejoue pendant qu'on travaille. */
@keyframes sy-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sy-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sy-widen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sy-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes sy-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes sy-fade { from { opacity: 0; } to { opacity: 1; } }

/* Tout se joue au défilement : un bloc guetté se trace la première fois
   qu'il entre dans la fenêtre (.is-play), puis reste tel quel (.is-seen).
   Tant qu'il n'a pas été vu, ses images attendent à leur point de départ —
   sans quoi on les verrait posées, puis disparaître, puis se tracer. */
.sy-watch:not(.is-seen) { opacity: 0; transform: translateY(18px); }
.sy-watch.is-play { animation: sy-rise .6s var(--ease-soft) both; }

.sy-watch:not(.is-seen) .sy-cell > i { opacity: 0; }
.is-play .sy-cell > i { animation: sy-fade .3s var(--ease-soft) both; animation-delay: calc(.15s + var(--i) * .02s); }
.is-play .sy-cell.is-next > i { animation: sy-fade .3s var(--ease-soft) both, sy-next 1.8s ease-in-out infinite; animation-delay: calc(.15s + var(--i) * .02s), 1s; }

.sy-watch:not(.is-seen) .sy-card, .sy-watch:not(.is-seen) .sy-fact,
.sy-watch:not(.is-seen) .sy-feature-main, .sy-watch:not(.is-seen) .sy-band,
.sy-watch:not(.is-seen) .sy-lever, .sy-watch:not(.is-seen) .sy-fig,
.sy-watch:not(.is-seen) .sy-ratio { opacity: 0; }
.is-play .sy-card, .is-play .sy-fact, .is-play .sy-lever, .is-play .sy-fig, .is-play .sy-ratio {
  animation: sy-rise .55s var(--ease-soft) both; animation-delay: calc(.12s + var(--i, 0) * .09s);
}
.is-play .sy-feature-main, .is-play .sy-band { animation: sy-rise .6s var(--ease-soft) both; animation-delay: .1s; }

.sy-vis:not(.is-seen) .sy-mini-track > i, .sy-vis:not(.is-seen) .sy-perf-bar,
.sy-vis:not(.is-seen) .sy-stack-bar { transform: scaleY(0); }
.sy-vis.is-play .sy-mini-track > i.is-pos, .sy-vis.is-play .sy-perf-bar { animation: sy-grow .7s var(--ease-soft) both; animation-delay: calc(.35s + var(--i) * .06s); transform-origin: bottom; }
.sy-vis.is-play .sy-mini-track > i.is-neg, .sy-vis.is-play .sy-perf-bar.is-down { animation: sy-grow .7s var(--ease-soft) both; animation-delay: calc(.35s + var(--i) * .06s); transform-origin: top; }
.sy-vis.is-play .sy-stack-bar { animation: sy-grow .7s var(--ease-soft) both; animation-delay: calc(.25s + var(--i) * .07s); transform-origin: bottom; }
.sy-vis.is-play .sy-mini-val { animation: sy-fade .4s var(--ease-soft) both; animation-delay: calc(.9s + var(--i) * .06s); }

.sy-vis:not(.is-seen) .sy-split-bar, .sy-vis:not(.is-seen) .sy-gauge-track,
.sy-vis:not(.is-seen) .sy-hundred-bar, .sy-vis:not(.is-seen) .sy-rule-fill { clip-path: inset(0 100% 0 0); }
.sy-vis.is-play .sy-split-bar, .sy-vis.is-play .sy-gauge-track, .sy-vis.is-play .sy-hundred-bar, .sy-vis.is-play .sy-rule-fill {
  animation: sy-wipe .9s var(--ease-soft) both; animation-delay: .35s;
}
.sy-vis.is-play .sy-rule-mark, .sy-vis.is-play .sy-rule-labels { animation: sy-fade .5s var(--ease-soft) both; animation-delay: .9s; }

.sy-vis:not(.is-seen) .sy-rung-bar > i { transform: scaleX(0); }
.sy-vis.is-play .sy-rung-bar > i { animation: sy-widen .7s var(--ease-soft) both; animation-delay: calc(.2s + var(--i) * .045s); transform-origin: left; }

.sy-vis:not(.is-seen) .sy-curve-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sy-vis.is-play .sy-curve-line { animation: sy-draw 1.3s var(--ease-soft) both; animation-delay: .3s; }
.sy-vis:not(.is-seen) .sy-curve-fill { opacity: 0; }
.sy-vis.is-play .sy-curve-fill { animation: sy-fade .7s var(--ease-soft) both; animation-delay: 1.1s; }
.sy-vis.is-play .sy-spark polyline, .sy-vis.is-play.sy-spark polyline { animation: sy-draw 1s var(--ease-soft) both; animation-delay: .5s; }

/* ─── Petits écrans ─── */
@media (max-width: 1240px) {
  .sy-dossier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .sy-hero { grid-template-columns: minmax(0, 1fr); }
  .sy-dossier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-cards.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-cards.is-3 > .sy-card:nth-child(3) { grid-column: 1 / -1; }
  .sy-feature, .sy-band, .sy-band-row { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sy-levers-rows { grid-template-columns: minmax(0, 1fr); }
  .sy-figs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-figs-col { display: contents; }
  .sy-ratios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-ratio:nth-child(4n + 1) { border-left: 1px solid var(--rule); padding-left: 16px; }
  .sy-ratio:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .sy { gap: var(--s-6); }
  .sy-ink { padding: 18px 16px 16px; }
  .sy-ink-acts .sy-btn { width: 100%; }
  .sy-cells { flex-wrap: wrap; gap: 12px 10px; }
  .sy-cells-axe { flex-basis: calc(50% - 5px); }
  .sy-dossier-grid { grid-template-columns: minmax(0, 1fr); }
  .sy-cards.is-2, .sy-cards.is-3 { grid-template-columns: minmax(0, 1fr); }
  .sy-cards.is-3 > .sy-card:nth-child(3) { grid-column: auto; }
  .sy-card, .sy-feature-main { padding: 20px 18px 22px; }
  .sy-band { padding: 22px 18px; }
  .sy-hundred-bar { height: 40px; }
  .sy-hundred-keys { grid-template-columns: minmax(0, 1fr); }
  .sy-hundred-bar > i > span { font-size: 11px; }
  .sy-figs-grid { grid-template-columns: minmax(0, 1fr); }
  .sy-ex { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .sy-eq { grid-template-columns: 1fr; gap: 10px; }
  .sy-eq-op { display: none; }
  .sy-pair { grid-template-columns: minmax(0, 1fr); }
  .sy-rung { grid-template-columns: minmax(90px, 1fr) minmax(50px, 1fr) 68px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sy *, .sy.is-enter > * { animation: none !important; transition: none !important; }
}

/* ─── Le dépliage d'une carte : posé, pas claqué ─── */
/* En deux temps. La carte s'agrandit en douceur jusqu'à sa hauteur, puis son
   contenu se pose, rangée après rangée, en montant de quelques pixels. Une
   demi-seconde en tout : l'œil suit le geste sans l'attendre. */
:root { interpolate-size: allow-keywords; }
.item.open > .item-body { overflow: clip; animation: item-grandit .46s cubic-bezier(.22, .9, .24, 1) both; }
.item.open > .item-body > * { animation: item-pose .42s cubic-bezier(.22, .9, .24, 1) both; animation-delay: .1s; }
.item.open > .item-body > * + * { animation-delay: .16s; }
.item.open > .item-body > * + * + * { animation-delay: .22s; }
@keyframes item-grandit { from { height: 0; padding-top: 0; padding-bottom: 0; opacity: .4; } to { opacity: 1; } }
@keyframes item-pose { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes item-unfold {
  from { opacity: 0; transform: translateY(-8px) scaleY(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .item.open > .item-body, .item.open > .item-body > * { animation: none; } }
/* Déjà ouverte au rendu précédent : la carte reste posée, rien ne rejoue. */
.is-deja, .is-deja > .item-body, .is-deja > .item-body > *, .is-deja > .card-body, .is-deja > .cost-detail { animation: none !important; }

/* ─── Un investissement qu'on retient, ou qu'on écarte ─── */
/* Une liste de matériel déjà cochée engage la trésorerie de quelqu'un qui n'a
   rien décidé. Éteint, l'investissement tient sur une ligne et ne compte pas. */
.capexcard { transition: border-color .16s var(--ease-soft), opacity .16s var(--ease-soft); }
.capexcard:not(.is-on) { opacity: .62; }
.capexcard.is-on { border-top: 2px solid var(--ink); }
.capexcard-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.capexcard-name {
  font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink);
  letter-spacing: -.01em;
}
.capexcard-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.capexcard.is-on > .card-body { border-top: 1px solid var(--rule); animation: item-unfold .26s var(--ease-soft) both; }

/* ═══════════════════ Le bilan, remis en ordre hiérarchique ═══════════════ */
/* Dix-sept lignes de même poids ne forment pas un bilan : elles forment une
   liste. Le bilan a une structure — deux côtés, trois masses par côté, des
   postes sous chaque masse — et cette structure est la moitié de l'information.
   Elle est rendue ici par la taille, par le retrait et par la part occupée,
   jamais par la couleur seule. */

.bil-years { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.bil-year {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 5px 11px; border: 1px solid var(--rule); background: none; color: var(--ink-4);
  border-radius: 999px; cursor: pointer; transition: all .16s var(--ease-soft);
}
.bil-year:hover { border-color: var(--ink-4); color: var(--ink); }
.bil-year.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.bil-years-dit { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-5); }

.bil-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .bil-cols { grid-template-columns: 1fr; gap: 32px; } }

/* Le total du côté, d'abord : c'est le chiffre qu'on cherche en premier. */
.bil-side-head { padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.bil-side-kicker {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-5);
}
.bil-side-total {
  margin-top: 5px; font-family: var(--mono); font-size: 30px; font-weight: 600;
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.bil-side-dit { margin-top: 3px; font-size: 11.5px; color: var(--ink-4); }

/* Une masse : son nom, son total, sa part du bilan, puis ses postes. */
.bil-mass { padding: 14px 0 13px; border-bottom: 1px solid var(--rule); }
.bil-mass:last-child { border-bottom: 0; }
.bil-mass-head { display: flex; align-items: flex-start; gap: 14px; }
.bil-mass-nom {
  font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em;
}
.bil-mass-dit { margin-top: 2px; font-size: 10.5px; color: var(--ink-5); line-height: 1.35; }
.bil-mass-fig { flex: none; text-align: right; }
.bil-mass-val {
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bil-mass-val.is-neg { color: #A8231C; }
.bil-mass-pct { font-family: var(--mono); font-size: 10px; color: var(--ink-5); margin-top: 1px; }
.bil-mass-bar {
  height: 4px; margin-top: 9px; background: var(--rule); border-radius: 2px; overflow: hidden;
}
.bil-mass-bar > i { display: block; height: 100%; background: #9B9E93; transition: width .4s var(--ease-soft); }
.bil-mass.is-key .bil-mass-bar > i { background: var(--ink); }
.bil-mass.is-key .bil-mass-nom { border-left: 3px solid var(--accent); padding-left: 8px; margin-left: -11px; }

/* Les postes : en retrait, plus petits, jamais confondus avec leur masse. */
.bil-lines { margin-top: 10px; padding-left: 14px; border-left: 1px solid var(--rule); }
.bil-line {
  display: flex; align-items: baseline; gap: 10px; padding: 3px 0;
}
.bil-line-nom { font-size: 11.5px; color: var(--ink-4); }
.bil-line-val {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.bil-line.is-neg .bil-line-val { color: #8A8D82; }

.bil-check {
  margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; color: var(--ink-5);
}

/* Le tableau complet ne disparaît pas : il attend d'être demandé. */
.bil-full { border-top: 1px solid var(--rule); }
.bil-full > summary {
  cursor: pointer; padding: 13px 20px; font-size: 12.5px; font-weight: 600; color: var(--ink-4);
  list-style: none;
}
.bil-full > summary::-webkit-details-marker { display: none; }
.bil-full > summary::before { content: '+ '; font-family: var(--mono); color: var(--ink-5); }
.bil-full[open] > summary::before { content: '− '; }
.bil-full > summary:hover { color: var(--ink); }
.bil-mass.is-empty { opacity: .5; }
.bil-mass.is-empty .bil-mass-bar { background: transparent; border-top: 1px dashed var(--rule); height: 0; margin-top: 12px; }

/* ─── Les garde-fous : un chiffre hors de proportion avec le métier ─── */
/* Une pastille sur une ligne, qui se déplie. Le ton d'un associé qui relit :
   un signe, le nombre de chiffres qui étonnent, et au clic l'écart dit en
   toutes lettres avec le bouton qui mène au champ. */
.garde { margin: 0; }
.garde.is-page { margin: 0 0 16px; }
.garde.sy-garde, .garde.is-act { margin: 14px 0 0; }
.garde-pill {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; user-select: none;
  padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--warn-wash), 0 1px 0 var(--rule);
  font-size: 13px; font-weight: 600; color: var(--ink);
  transition: box-shadow .16s var(--ease-soft);
}
.garde-pill::-webkit-details-marker { display: none; }
.garde.is-alerte .garde-pill { box-shadow: inset 0 0 0 1px var(--loss-wash), 0 1px 0 var(--rule); }
.garde-pill:hover { box-shadow: inset 0 0 0 1px var(--warn), 0 4px 12px -8px rgba(14, 15, 12, .4); }
.garde.is-alerte .garde-pill:hover { box-shadow: inset 0 0 0 1px var(--loss), 0 4px 12px -8px rgba(14, 15, 12, .4); }
.garde-pill-more { font-weight: 500; font-size: 12px; color: var(--ink-4); }
.garde-pill-more::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease-soft); }
.garde[open] .garde-pill-more::after { transform: rotate(-135deg) translate(-1px, -1px); }
.garde[open] .garde-pill-more { font-size: 0; }
.garde[open] .garde-pill-more::after { margin-left: 0; }
.garde-sign {
  flex: none; position: relative; width: 20px; height: 20px; border-radius: 50%;
  background: var(--warn); color: #fff;
}
.garde.is-alerte .garde-sign { background: var(--loss); }
.garde-sign::before, .garde-sign::after { content: ''; position: absolute; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; }
.garde-sign::before { top: 4.5px; height: 7px; }
.garde-sign::after { top: 13px; height: 2px; }
.garde-body {
  margin-top: 10px; background: var(--surface); border-radius: 14px; padding: 14px 18px 4px;
  box-shadow: inset 3px 0 0 var(--warn), 0 1px 0 var(--rule), 0 18px 36px -30px rgba(14, 15, 12, .45);
  animation: item-unfold .24s var(--ease-soft) both;
}
.garde.is-alerte .garde-body { box-shadow: inset 3px 0 0 var(--loss), 0 1px 0 var(--rule), 0 18px 36px -30px rgba(14, 15, 12, .45); }
.garde-say { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.garde-list { list-style: none; margin: 10px 0 0; padding: 0; }
.garde-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--rule);
}
.garde-item-txt b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.garde-item-txt b::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.garde-item.is-alerte .garde-item-txt b::before { background: var(--loss); }
.garde-item-txt span { display: block; margin-top: 3px; padding-left: 15px; font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 86ch; }
.garde-go {
  white-space: nowrap; cursor: pointer; border: 0; border-radius: 999px; padding: 7px 13px;
  background: var(--ink); color: #fff; font: 600 12px/1 var(--sans);
  transition: transform .16s var(--ease-soft), box-shadow .16s var(--ease-soft);
}
.garde-go:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(14, 15, 12, .6); }
@media (max-width: 720px) {
  .garde-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .garde-go { justify-self: start; margin-left: 15px; }
  .garde-pill-more { display: none; }
}

/* Sous le champ : la même lecture, pendant qu'on tape. */
.field-garde {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 7px;
  font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
.field-garde[hidden] { display: none; }
.field-garde > i {
  flex: none; position: relative; width: 15px; height: 15px; border-radius: 50%; margin-top: 1px;
  background: var(--warn);
}
.field-garde.is-alerte > i { background: var(--loss); }
.field-garde > i::before, .field-garde > i::after { content: ''; position: absolute; left: 50%; width: 2px; margin-left: -1px; background: #fff; border-radius: 1px; }
.field-garde > i::before { top: 3.5px; height: 5px; }
.field-garde > i::after { top: 9.5px; height: 2px; }
.control.is-odd { border-color: var(--warn); }
.control.is-odd-alerte { border-color: var(--loss); }

/* ─── Les graphiques entrent en scène, comme dans la synthèse ─── */
/* Les barres poussent depuis leur ligne de base, les courbes se tracent, les
   anneaux se remplissent ; les valeurs arrivent en dernier. Une fois par
   visite de page (voir charts.js), et jamais pour qui a demandé moins de
   mouvement. Au survol, l'exercice interrogé reste allumé, les autres
   s'effacent derrière lui. */
.chart .ch-num { font-family: var(--mono); letter-spacing: -.01em; }
.ch-bar, .ch-col { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .18s var(--ease-soft); }
.ch-bar.is-neg { transform-origin: 50% 0; }
.ch-val, .ch-dot, .ch-leg { transition: opacity .18s var(--ease-soft); }
.ch-arc { transition: opacity .18s var(--ease-soft); }
.ch .is-dim { opacity: .26; }
.ch-hl { fill: #0E0F0C; opacity: 0; transition: opacity .18s var(--ease-soft); pointer-events: none; }
.ch-hl.is-on { opacity: .045; }

.ch-watch:not(.is-seen) .ch-bar, .ch-watch:not(.is-seen) .ch-col { transform: scaleY(0); }
.ch-watch:not(.is-seen) .ch-line, .ch-watch:not(.is-seen) .ch-arc,
.ch-watch.ch-line:not(.is-seen) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ch-watch:not(.is-seen) .ch-fill, .ch-watch:not(.is-seen) .ch-val, .ch-watch:not(.is-seen) .ch-dot,
.ch-watch:not(.is-seen) .ch-ref, .ch-watch:not(.is-seen) .ch-fade, .ch-watch:not(.is-seen) .ch-leg { opacity: 0; }

.ch.is-play .ch-bar, .ch.is-play .ch-col { animation: ch-grow .72s var(--ease-soft) both; animation-delay: calc(.08s + var(--i, 0) * .05s); }
.ch.is-play .ch-line { stroke-dasharray: 1; animation: ch-draw 1.2s var(--ease-soft) both; animation-delay: .12s; }
.ch.is-play .ch-arc { stroke-dasharray: 1; animation: ch-draw .8s var(--ease-soft) both; animation-delay: calc(.08s + var(--i, 0) * .11s); }
.ch.is-play .ch-fill, .ch.is-play .ch-ref { animation: ch-fade .8s var(--ease-soft) both; animation-delay: .7s; }
.ch.is-play .ch-val, .ch.is-play .ch-dot, .ch.is-play .ch-fade { animation: ch-fade .45s var(--ease-soft) both; animation-delay: calc(.55s + var(--i, 0) * .05s); }
.ch.is-play .ch-leg { animation: ch-fade .4s var(--ease-soft) both; animation-delay: calc(.2s + var(--i, 0) * .08s); }
@keyframes ch-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ch-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ch-fade { from { opacity: 0; } to { opacity: 1; } }
.ch-donut .ch-leg { cursor: default; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .ch *, .ch { animation: none !important; }
}

@media print {
  .ch-watch:not(.is-seen) .ch-bar, .ch-watch:not(.is-seen) .ch-col { transform: none !important; }
  .ch-watch:not(.is-seen) * { opacity: 1 !important; stroke-dashoffset: 0 !important; }
}

/* ─── Le style de la synthèse essai, pour tout le logiciel (sections.js) ─── */
/* Des parties numérotées dont le nom dit la question ; des cartes où le
   montant s'écrit en grand, sa valeur exacte dessous ; des barres qui
   poussent quand on arrive. Les mêmes briques aux états financiers et dans
   les pages de saisie. */
.sx { margin-top: var(--s-6); }
.sx:first-of-type { margin-top: var(--s-4); }
.sx-no {
  padding-top: var(--s-3); border-top: 1px solid var(--rule);
}
.sx-no > b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--accent); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}
.sx-no > span { color: var(--ink); font-weight: 600; }
.sx-right { margin-left: auto; text-transform: none; letter-spacing: 0; }
.sx-title {
  margin: var(--s-2) 0 0; font-family: var(--display); font-weight: 750; color: var(--ink);
  letter-spacing: -.03em; line-height: 1.1; max-width: 30ch;
}
.sx-say { margin: 6px 0 0; line-height: 1.5; color: var(--ink-3); }
.sx.rv-watch:not(.is-seen) > :not(.sx-head) { opacity: 0; transform: translateY(14px); }
.sx.rv.is-play > :not(.sx-head) { animation: sy-rise .6s var(--ease-soft) both; animation-delay: .08s; }

.sx-years { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.sx-year {
  border: 0; background: none; cursor: pointer; border-radius: 999px; padding: 4px 9px;
  font: 600 11px/1 var(--mono); color: var(--ink-4); transition: background .16s, color .16s;
}
.sx-year:hover { color: var(--ink); }
.sx-year.is-on { background: var(--ink); color: var(--accent); }

.sx-cards { display: grid; gap: var(--s-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-cards.is-1 { grid-template-columns: minmax(0, 1fr); }
.sx-card {
  display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 14px; background: var(--surface);
  border-radius: 14px; box-shadow: 0 1px 0 var(--rule), 0 26px 50px -40px rgba(14, 15, 12, .45);
  transition: transform .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
}
.sx-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--rule), 0 30px 56px -38px rgba(14, 15, 12, .55); }
.sx-card-kicker {
  display: flex; gap: 8px;
  font-family: var(--mono); font-size: 10px;
}
.sx-card-kicker > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-5); flex: none; }
.sx-card.is-good .sx-card-kicker > i { background: var(--gain); }
.sx-card.is-bad .sx-card-kicker > i { background: var(--loss); }
.sx-card.is-watch .sx-card-kicker > i { background: #D09A2A; }
.sx-big { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sx-big-val {
  font-family: var(--mono);
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sx-card.is-good .sx-big-val { color: var(--gain); }
.sx-card.is-bad .sx-big-val { color: var(--loss); }
.sx-big-val.is-fresh { animation: sy-fresh .9s var(--ease-soft); }
.sx-big-cap { color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-delta { margin-top: 8px; align-self: flex-start; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-4); background: var(--surface-2); border-radius: 6px; padding: 3px 7px; }
.sx-delta.is-up { color: var(--gain); }
.sx-delta.is-down { color: var(--loss); }
.sx-bars { position: relative; display: flex; gap: 6px; height: 64px; margin-top: var(--s-3); padding-bottom: 18px; }
.sx-bars-zero { position: absolute; left: 0; right: 0; top: calc((100% - 18px) * var(--zero)); height: 1px; background: var(--ink); opacity: .22; pointer-events: none; }
.sx-bar { position: relative; flex: 1; min-width: 0; border: 0; background: none; padding: 0; cursor: pointer; height: 100%; }
.sx-bar > i { position: absolute; left: 12%; right: 12%; border-radius: 3px; background: var(--ink-5); opacity: .5; transition: opacity .16s, background .16s; }
.sx-bar > i[style*="top"] { border-radius: 0 0 3px 3px; }
.sx-bar:hover > i { opacity: .85; }
.sx-bar.is-on > i { background: var(--ink); opacity: 1; }
.sx-card.is-good .sx-bar.is-on > i { background: var(--gain); }
.sx-card.is-bad .sx-bar.is-on > i { background: var(--loss); }
.sx-bar-year { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font: 500 9.5px/1 var(--mono); color: var(--ink-5); }
.sx-bar.is-on .sx-bar-year { color: var(--ink); font-weight: 600; }
.sx-card-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }

/* L'exercice lu se retrouve dans les colonnes des tableaux. */
.fin-an table.data:not(.is-monthly) tr > :is(td, th) { transition: background .2s; }
.fin-an-0 table.data:not(.is-monthly) tr > :nth-child(2),
.fin-an-1 table.data:not(.is-monthly) tr > :nth-child(3),
.fin-an-2 table.data:not(.is-monthly) tr > :nth-child(4),
.fin-an-3 table.data:not(.is-monthly) tr > :nth-child(5),
.fin-an-4 table.data:not(.is-monthly) tr > :nth-child(6) { background: rgba(214, 240, 52, .16); }
.fin table.data tbody tr:hover > td { background: var(--surface-2); }

@media (max-width: 1100px) {
  .sx-cards, .sx-cards.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sx { margin-top: 34px; }
  .sx-no { row-gap: 10px; }
  .sx-right { margin-left: 0; width: 100%; }
  .sx-cards, .sx-cards.is-3, .sx-cards.is-2 { grid-template-columns: minmax(0, 1fr); }
}

/* La tête seule d'une partie, posée au-dessus d'une zone de travail. */
.sx-solo { margin: var(--s-6) 0 var(--s-3); }
.sx-solo:first-child { margin-top: var(--s-4); }

/* Mon projet : ses blocs sont numérotés, comme les parties de la synthèse. */
.content:has(.slab) { counter-reset: slab; }
.slab-title::before {
  counter-increment: slab; content: counter(slab, decimal-leading-zero);
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; vertical-align: 1px;
  border-radius: 50%; background: var(--ink); color: var(--accent);
  font: 600 10.5px/1 var(--mono); letter-spacing: 0;
}

/* ─── Cartes de chiffres : pied, zoom mois par mois, pourquoi ─── */
.sx-bars-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 16px; margin-top: 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-5);
}
.sx-unzoom {
  border: 0; background: var(--surface-2); border-radius: 999px; padding: 3px 8px; cursor: pointer;
  font: 600 10px/1 var(--mono); color: var(--ink-3);
}
.sx-unzoom:hover { background: var(--ink); color: var(--accent); }
.sx-bars.is-zoom { gap: 3px; }
.sx-bars.is-zoom .sx-bar { cursor: default; }
.sx-bars.is-zoom .sx-bar > i { background: var(--ink); opacity: .82; }
.sx-card.is-good .sx-bars.is-zoom .sx-bar > i { background: var(--gain); }
.sx-card.is-bad .sx-bars.is-zoom .sx-bar > i { background: var(--loss); }
.sx-bars.is-zoom { animation: sx-zoom .38s var(--ease-soft) both; transform-origin: var(--ox) 100%; }
@keyframes sx-zoom { from { transform: scaleX(.22); opacity: .2; } to { transform: none; opacity: 1; } }
.sx-bars:not(.is-zoom) .sx-bar:hover .sx-bar-year { color: var(--ink); }
.sx-why {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: auto; border-radius: 50%;
  border: 1px solid var(--rule); font: 600 9px/1 var(--mono); color: var(--ink-4); text-transform: none; cursor: help;
}
.sx-why:hover { border-color: var(--ink); color: var(--ink); }

/* La version des pages de saisie : les chiffres sont là, la place reste aux champs. */
.sx.is-compact { margin-top: 26px; }
.sx.is-compact .sx-head { margin-bottom: 12px; }
.sx.is-compact .sx-say { font-size: 13.5px; }
.sx-cards.is-compact { gap: 10px; }
.sx-card.is-compact { padding: 13px 15px 11px; border-radius: 14px; }
.sx-card.is-compact .sx-big { margin-top: 8px; }
.sx-card.is-compact .sx-big-cap { font-size: 11px; }
.sx-card.is-compact .sx-delta { margin-top: 6px; font-size: 10px; padding: 2px 6px; }
.sx-card.is-compact .sx-bars { height: 46px; margin-top: 10px; padding-bottom: 14px; gap: 4px; }
.sx-card.is-compact .sx-bars-zero { top: calc((100% - 14px) * var(--zero)); }
.sx-card.is-compact .sx-bar-year { bottom: -14px; font-size: 8.5px; }
.sx-card.is-compact .sx-bars-foot { margin-top: 3px; }

/* Les chiffres clés et le détail des comptes : numérotés comme les actes, et
   ce qu'on peut ouvrir le dit en toutes lettres. */
.sy-figs.sy-act .sy-sec-head { margin-top: 0; align-items: flex-end; }
.sy-fig-more {
  grid-area: chev; display: inline-flex; align-items: center; gap: 8px; justify-self: end;
  font-size: 12px; font-weight: 600; color: var(--ink-4); white-space: nowrap;
}
.sy-fig-more-c { display: none; }
.sy-fig.is-open .sy-fig-more-o { display: none; }
.sy-fig.is-open .sy-fig-more-c { display: inline; }
.sy-fig-head:hover .sy-fig-more { color: var(--ink); }
.sy-deep.sy-act { border-top: 1px solid var(--rule); }
.sy-deep .sy-deep-head {
  margin-top: 20px; padding: 16px 20px; border-radius: 16px; background: var(--surface);
  box-shadow: 0 1px 0 var(--rule), 0 20px 40px -34px rgba(14, 15, 12, .45); color: var(--ink-3);
  transition: box-shadow .2s var(--ease-soft), transform .2s var(--ease-soft);
}
.sy-deep .sy-deep-head:hover { transform: translateY(-1px); box-shadow: 0 1px 0 var(--rule), 0 24px 46px -32px rgba(14, 15, 12, .55); }
.sy-deep-list { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.sy-deep-list > span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); background: var(--surface-2); border-radius: 999px; padding: 4px 9px; }
.sy-deep-open {
  flex: none; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 9px 16px;
  background: var(--ink); color: var(--accent); font-size: 13px; font-weight: 600;
}

/* ─── Pitch investisseur ─── */
.pitch { display: flex; flex-direction: column; }
.pitch-cover { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 40px; align-items: end; }
.pitch-cover > .sy-ink-top, .pitch-cover > .sy-ink-title, .pitch-cover > .pitch-phrase, .pitch-cover > .pitch-manque, .pitch-cover > .pitch-meta { grid-column: 1; }
.pitch-phrase { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #E9EBE3; }
.pitch-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pitch-meta > span { font-family: var(--mono); font-size: 10.5px; color: #C9CCC1; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 4px 10px; }
.pitch-ask { grid-column: 2; grid-row: 1 / span 5; align-self: center; display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 16px; background: rgba(255, 255, 255, .06); min-width: 220px; }
.pitch-ask > span { font-family: var(--mono); color: var(--accent); }
.pitch-ask > b { font-family: var(--mono); font-weight: 600; letter-spacing: -.04em; color: #fff; line-height: 1; }
.pitch-ask > small { font-size: 12.5px; color: #B9BCB1; line-height: 1.45; max-width: 26ch; }
.pitch-manque {
  margin-top: 14px; justify-self: start; text-align: left; cursor: pointer; border: 0; border-radius: 12px; padding: 10px 14px;
  background: rgba(214, 240, 52, .12); color: var(--accent); font: 600 13px/1.45 var(--sans); max-width: 60ch;
}
.pitch .pitch-manque:not(.pitch-cover .pitch-manque) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.pitch > .garde.is-page { margin: 16px 0 0; }
.pitch-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pitch-client, .pitch-offre { background: var(--surface); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 0 var(--rule), 0 20px 40px -36px rgba(14, 15, 12, .45); }
.pitch-client { background: var(--ink); color: #E9EBE3; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.pitch-client > span { font-family: var(--mono); font-size: 10px; }
.pitch-client > b { font-family: var(--display); font-size: 18px; font-weight: 700; color: #fff; line-height: 1.25; }
.pitch-offre-nom { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.pitch-offre-prix { margin-top: 6px; font-family: var(--mono); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.pitch-offre-prix > span { font-size: 11px; color: var(--ink-4); }
.pitch-offre-part { margin-top: 12px; height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.pitch-offre-part > i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.pitch-offre-note { margin-top: 6px; font-size: 12px; color: var(--ink-4); }
.pitch-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pitch-fait { background: var(--surface); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 0 var(--rule), 0 20px 40px -36px rgba(14, 15, 12, .45); display: flex; flex-direction: column; gap: 6px; }
.pitch-fait-label { font-family: var(--mono); font-size: 10px; }
.pitch-fait-val { font-family: var(--mono); color: var(--ink); line-height: 1.1; }
.pitch-fait.is-good .pitch-fait-val { color: var(--gain); }
.pitch-fait.is-bad .pitch-fait-val { color: var(--loss); }
.pitch-fait-dit { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.pitch-usage { margin-top: 16px; background: var(--surface); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 0 var(--rule); }
.pitch-usage-head { font-family: var(--mono); font-size: 10px; }
.pitch-usage-bar { display: flex; gap: 3px; height: 14px; margin-top: 12px; }
.pitch-usage-bar > i { border-radius: 4px; min-width: 4px; }
.pitch-usage-bar > .is-0, .pitch-usage-keys > .is-0 > i { background: var(--ink); }
.pitch-usage-bar > .is-1, .pitch-usage-keys > .is-1 > i { background: #6E7166; }
.pitch-usage-bar > .is-2, .pitch-usage-keys > .is-2 > i { background: var(--ink-5); }
.pitch-usage-bar > .is-3, .pitch-usage-keys > .is-3 > i { background: var(--accent); }
.pitch-usage-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.pitch-usage-keys > span { display: inline-flex; align-items: center; gap: 7px; }
.pitch-usage-keys > span > i { width: 9px; height: 9px; border-radius: 2px; }
.pitch-equipe { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border-radius: 14px; overflow: hidden; }
.pitch-poste { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 16px; background: var(--surface); }
.pitch-poste > b { font-weight: 600; color: var(--ink); }
.pitch-poste > span { font-size: 12.5px; color: var(--ink-4); }
.pitch-poste-cout { font-family: var(--mono); color: var(--ink-3) !important; }
.pitch-equipe-total { margin: 0; padding: 12px 16px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-3); }
.pitch-risques { margin: 0; padding: 0; list-style: none; counter-reset: risque; display: flex; flex-direction: column; gap: 10px; }
.pitch-risques > li { counter-increment: risque; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 0 var(--rule); }
.pitch-risques > li::before { content: counter(risque, decimal-leading-zero); grid-row: span 2; font: 600 11px/26px var(--mono); color: var(--ink-4); }
.pitch-risques b { font-weight: 600; color: var(--ink); }
.pitch-risques span { font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.pitch-ratios { display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: 0 1px 0 var(--rule); overflow: hidden; }
.pitch-ratio { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1.4fr); gap: 20px; align-items: baseline; padding: 12px 18px; border-top: 1px solid var(--rule); }
.pitch-ratio:first-child { border-top: 0; }
.pitch-ratio-l { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pitch-ratio-v { font-family: var(--mono); font-weight: 600; color: var(--ink); text-align: right; }
.pitch-ratio-d { font-size: 12.5px; color: var(--ink-4); }
.pitch-vide { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.pitch-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.pitch-foot p { margin: 0; font-size: 13px; color: var(--ink-4); }
.pitch-foot-go { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 820px) {
  .pitch-cover { grid-template-columns: minmax(0, 1fr); }
  .pitch-ask { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .pitch-poste { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pitch-ratio { grid-template-columns: minmax(0, 1fr) auto; }
  .pitch-ratio-d { grid-column: 1 / -1; }
}
/* L'avis de Fynomia : la note d'un consultant, sous chaque partie du pitch. */
.pitch-avis {
  align-items: start;
}
.pitch-avis-sign {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--ink); font: 800 16px/1 var(--display);
}
.pitch-avis b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.pitch-avis p { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: #E9EBE3; }
.rv-watch:not(.is-seen) .pitch-avis { opacity: 0; transform: translateY(8px); }
.rv.is-play .pitch-avis { animation: sy-rise .55s var(--ease-soft) both; animation-delay: .45s; }
.pitch-dossier { display: flex; flex-direction: column; gap: 28px; margin-bottom: 34px; }

/* Les phrases d'une partie courent sur toute la largeur : une phrase coupée
   en trois lignes étroites faisait défiler pour rien. */
.sx-say, .sy-act-say, .sy-sec-say, .sy-note, .garde-say, .view-intro, .pitch-foot p, .pitch-phrase { max-width: none; }
.sx-say { font-size: 14.5px; }
.sy-act-say { font-size: 15.5px; }

/* ─── Les chiffres d'une page de saisie, sans repousser les champs ─── */
/* L'avertissement se pose sur la ligne de l'exercice et s'ouvre par-dessus. */
.sx-right-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.sx-right-row .garde { position: relative; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.sx-right-row .garde-pill { padding: 4px 10px 4px 5px; font-size: 12px; }
.sx-right-row .garde-sign { width: 18px; height: 18px; }
.sx-right-row .garde-sign::before { top: 4px; height: 6px; }
.sx-right-row .garde-sign::after { top: 11.5px; }
.sx-right-row .garde-body {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(680px, 88vw); margin: 0;
  box-shadow: inset 3px 0 0 var(--warn), 0 1px 0 var(--rule), 0 26px 50px -20px rgba(14, 15, 12, .45);
}
.sx-right-row .garde.is-alerte .garde-body { box-shadow: inset 3px 0 0 var(--loss), 0 1px 0 var(--rule), 0 26px 50px -20px rgba(14, 15, 12, .45); }
.sy-act-no .sx-right-row { margin-left: auto; }
.sy-act-no .sx-right-row + em { margin-left: 12px; }
.sy-act-no .garde.sy-garde { margin: 0; }
.sy-act-no .garde-pill-more { display: none; }

/* Sous le champ : une ligne ; le texte entier au survol, déplié au clic. */
.field-garde { cursor: pointer; min-width: 0; }
.field-garde > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-garde.is-open > span { white-space: normal; }

/* Les chiffres d'une page de saisie : une ligne, le titre à gauche.
   Grille à trois colonnes — le nom, les chiffres, les commandes — pour que
   tout s'aligne d'une page à l'autre et que rien ne s'empile. */
.sx.is-bandeau, .sx.is-bandeau:first-of-type { margin: 0 0 var(--s-4); }
.sx-ribbon {
  display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; background: var(--surface); border-radius: 12px; padding: 8px 10px 8px 16px;
  box-shadow: 0 1px 0 var(--rule), 0 18px 36px -32px rgba(14, 15, 12, .45);
}
.sx-ribbon-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-ribbon-head .info-point { width: 20px; height: 20px; font-size: 12px; }
.sx-ribbon-title { flex: 0 1 auto; margin: 0; font: 700 14.5px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.sx-ribbon-items { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 0; }
.sx-ribbon-item { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 2px 12px; border-left: 1px solid var(--rule); min-width: 0; cursor: help; align-self: stretch; }
.sx-ribbon-label { font: 500 11.5px/1.3 var(--sans); color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-ribbon-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.sx-ribbon-val { font: 650 14px/1.25 var(--mono); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.sx-ribbon-val.is-good { color: var(--gain); }
.sx-ribbon-val.is-bad { color: var(--loss); }
.sx-ribbon-delta { font: 600 10.5px/1 var(--mono); color: var(--ink-4); white-space: nowrap; }
.sx-ribbon-delta.is-up { color: var(--gain); }
.sx-ribbon-delta.is-down { color: var(--loss); }
.sx-ribbon-ctrl { display: flex; align-items: center; gap: 8px; }
.sx-ribbon-ctrl .sx-year { padding: 4px 8px; }
.sx-ribbon-ctrl .garde { position: relative; }
.sx-ribbon-ctrl .garde-body {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(680px, 88vw); margin: 0;
  box-shadow: inset 3px 0 0 var(--warn), 0 1px 0 var(--rule), 0 26px 50px -20px rgba(14, 15, 12, .45);
}
.sx-ribbon-ctrl .garde.is-alerte .garde-body { box-shadow: inset 3px 0 0 var(--loss), 0 1px 0 var(--rule), 0 26px 50px -20px rgba(14, 15, 12, .45); }
.sx-ribbon-more {
  border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
  background: var(--surface-2); font: 600 12px/1 var(--sans); color: var(--ink-3);
}
.sx-ribbon-more::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease-soft); }
.sx-ribbon-more[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-1px, -1px); }
.sx-ribbon-more:hover { background: var(--ink); color: var(--accent); }
.sx.is-bandeau.is-open .sx-cards { margin-top: 10px; }
@media (max-width: 1180px) {
  .sx-ribbon { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .sx-ribbon-items { grid-column: 1 / -1; grid-row: 2; }
  .sx-ribbon-item:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .sx-ribbon { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .sx-ribbon-ctrl { flex-wrap: wrap; }
  .sx-ribbon-items { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; grid-row: auto; }
  .sx-ribbon-item { border-left: 0; padding: 0; }
}

/* L'avertissement court : un signe et un nombre, sur la ligne des chiffres. */
.garde.is-court .garde-pill { padding: 4px 10px 4px 5px; font-size: 12px; gap: 7px; }
.garde.is-court .garde-sign { width: 18px; height: 18px; }
.garde.is-court .garde-sign::before { top: 4px; height: 6px; }
.garde.is-court .garde-sign::after { top: 11.5px; }
.garde.is-court.is-page { margin: 0; }

/* « Je valide » : le chiffre est voulu, on n'en parle plus. */
.garde-acts { display: flex; align-items: center; gap: 8px; justify-self: end; }
.garde-ok {
  border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer; white-space: nowrap;
  background: none; box-shadow: inset 0 0 0 1px var(--rule-strong, var(--ink)); font: 600 12px/1 var(--sans); color: var(--ink);
  transition: background .16s, color .16s;
}
.garde-ok:hover { background: var(--ink); color: var(--accent); }
.garde-ligne {
  display: flex; align-items: center; gap: 10px; margin: 0 14px 10px 50px; padding: 8px 10px 8px 8px;
  border-radius: 10px; background: var(--warn-wash, #FBF3DF); font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
.garde-ligne.is-alerte { background: var(--loss-wash); }
.garde-ligne .garde-sign { flex: none; width: 18px; height: 18px; }
.garde-ligne .garde-sign::before { top: 4px; height: 6px; }
.garde-ligne .garde-sign::after { top: 11.5px; }
.garde-ligne.is-alerte .garde-sign { background: var(--loss); }
.garde-ligne-txt { flex: 1; min-width: 0; }
@media (max-width: 720px) { .garde-ligne { margin-left: 14px; flex-wrap: wrap; } }

/* Le « i » : un point bleu qui se voit, la phrase en bulle au survol. */
.info-point {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: var(--signal-wash); color: var(--signal-ink);
  font: italic 700 13px/1 Georgia, 'Times New Roman', serif; transition: background .16s, color .16s, transform .16s;
}
.info-point:hover, .info-point:focus-visible, .info-point.is-open { background: var(--signal); color: #fff; }
.info-point:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.info-point::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 9px); z-index: 60;
  width: max-content; max-width: min(340px, 80vw); padding: 9px 12px; border-radius: 10px;
  background: var(--ink); color: #F2F0E8; font: 400 12.5px/1.5 var(--sans); font-style: normal; text-align: left; white-space: normal;
  box-shadow: 0 18px 40px -18px rgba(14, 15, 12, .6);
  opacity: 0; transform: translate(-50%, -4px); pointer-events: none; transition: opacity .16s, transform .16s;
}
.info-point:hover::after, .info-point:focus-visible::after, .info-point.is-open::after { opacity: 1; transform: translate(-50%, 0); }
.module-top { align-items: center; }

/* ═══════════ Une seule typographie : celle du tableau de bord ═══════════
   Les titres de partie étaient en petites capitales à chasse fixe, les
   libellés des cartes aussi, sous des chiffres trois fois plus grands. Les
   titres reprennent la Bricolage des blocs du tableau de bord, en minuscules,
   et un libellé n'est jamais plus petit que le chiffre qu'il nomme. */
.sx-no {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--ink-4);
}
.sx-no > .sx-name, .sx-no > span:not([class]) {
  flex: none; font: 700 var(--t-block)/1.2 var(--display); letter-spacing: -.024em; color: var(--ink);
}
.sx-no > .sx-say { flex: 1 1 320px; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-4); }
.sx-no > .sx-right { flex: none; margin-left: auto; }
.sx-head { margin-bottom: var(--s-3); }
.sx-title { margin-top: var(--s-2); font-size: var(--t-section); }

.sx-card-kicker {
  font: 700 17px/1.2 var(--display); letter-spacing: -.02em; text-transform: none; color: var(--ink);
  align-items: baseline;
}
.sx-card-kicker > i { align-self: center; }
.sx-big { margin-top: 6px; }
.sx-big-val { font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.sx-big-cap { font-size: 12px; }
.sx-card.is-compact .sx-card-kicker { font-size: 15px; }
.sx-card.is-compact .sx-big-val { font-size: 15px; }

.sy-act-no { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.sy-act-no > span { font: 700 var(--t-block)/1.2 var(--display); letter-spacing: -.024em; color: var(--ink); }
.sy-card-kicker, .sy-fig-label {
  font: 700 18px/1.2 var(--display); letter-spacing: -.02em; text-transform: none; color: var(--ink);
}
.sy-big { margin-top: 8px; }
.sy-big-val { font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.sy-card-title { margin-top: 12px; font-size: 15px; }
.sy-fig-val { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.sy-fig-head { padding: 16px 0; }
@media (max-width: 760px) {
  .sx-no > .sx-say { flex-basis: 100%; }
}

/* Le dossier par page : les cinq colonnes partagent leurs lignes (grille
   imbriquée), si bien que « À faire » et « Fait » commencent à la même
   hauteur partout, même quand un nom de page tient sur deux lignes. */
@supports (grid-template-rows: subgrid) {
  .sy-dossier-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .sy-dossier-col > .sy-dossier-bloc.is-done { align-self: start; }
}
.sy-dossier-head { align-items: flex-start; }
.sy-dossier-more {
  margin-top: 4px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 0; cursor: pointer;
  font: 600 11.5px/1.2 var(--sans); color: var(--ink-3); text-decoration: none;
}
.sy-dossier-more:hover { background: var(--ink); color: var(--accent); }
.sy-todo-where > b { font-weight: 600; color: var(--signal-ink); }
.sy-todo.is-option .sy-todo-label { color: var(--ink-3); font-weight: 500; }
.sy-todo.is-option .sy-todo-where > b { color: var(--ink-4); }
.nextstep-tag.is-relire { color: #AFC0FF; }
.refinery-item.is-relire .refinery-mark { background: var(--signal-wash); color: var(--signal-ink); }

/* ═══════════ Ton business prend forme — vue une seule fois ═══════════ */
.rvl {
  position: relative; min-height: 100vh; overflow: hidden; background: var(--ink); color: #F2F0E8;
  font-family: var(--sans);
}
.rvl-glow {
  position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 240, 52, .16), rgba(214, 240, 52, 0) 70%);
  animation: rvl-glow 6s ease-in-out infinite alternate;
}
@keyframes rvl-glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6vw, 4vw) scale(1.08); } }
.rvl-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(16px, 4vw, 48px); }
.rvl-brand { font: 800 18px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.rvl-skip { border: 0; background: none; cursor: pointer; font: 600 13px/1 var(--sans); color: #A9ACA0; }
.rvl-skip:hover { color: var(--accent); }
.rvl-main { position: relative; max-width: 1080px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 48px) 56px; }
.rvl-kicker, .rvl-name > span, .rvl-phrase, .rvl-chart, .rvl-fig, .rvl-dossier-t, .rvl-piece, .rvl-go {
  opacity: 0; animation: rvl-rise .7s var(--ease-soft) both; animation-delay: var(--d, 0s);
}
@keyframes rvl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rvl-kicker { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.rvl-name { margin: 14px 0 0; font: 800 clamp(44px, 8vw, 96px)/.95 var(--display); letter-spacing: -.045em; color: #fff; }
.rvl-name > span { display: inline-block; margin-right: .22em; }
.rvl-name > span:last-child { margin-right: 0; }
.rvl-phrase { margin: 16px 0 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.45; color: #D9DBD2; }
.rvl-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.rvl-chart { margin: 0; padding: 18px 18px 10px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rvl-chart figcaption { font-size: 14px; color: #A9ACA0; }
.rvl-chart figcaption b { font: 700 16px/1.2 var(--display); color: #fff; letter-spacing: -.02em; }
.rvl-svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.rvl-axis { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.rvl-bar { fill: var(--accent); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0);
  animation: rvl-grow .8s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(1.5s + var(--i) * .16s); }
@keyframes rvl-grow { to { transform: scaleY(1); } }
.rvl-bar-v { fill: #fff; font: 600 12px var(--mono); opacity: 0; animation: rvl-fade .4s ease both; animation-delay: calc(2s + var(--i) * .16s); }
.rvl-bar-y { fill: #7C7F72; font: 500 11px var(--mono); }
@keyframes rvl-fade { to { opacity: 1; } }
.rvl-line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rvl-draw 1.8s ease-in-out 1.9s both; }
@keyframes rvl-draw { to { stroke-dashoffset: 0; } }
.rvl-area { fill: rgba(214, 240, 52, .12); opacity: 0; animation: rvl-fade .8s ease 3s both; }
.rvl-low { opacity: 0; animation: rvl-fade .5s ease 3.3s both; }
.rvl-low circle { fill: var(--loss); stroke: var(--ink); stroke-width: 3; }
.rvl-low-t { fill: #F4B9BB; font: 600 11.5px var(--sans); }
.rvl-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.rvl-fig { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rvl-fig-l { font: 700 16px/1.25 var(--display); letter-spacing: -.02em; color: #fff; }
.rvl-fig-v { font: 650 16px/1.25 var(--mono); color: var(--accent); letter-spacing: -.02em; }
.rvl-dossier { margin-top: 30px; }
.rvl-dossier-t { margin: 0 0 12px; font: 700 18px/1.2 var(--display); color: #fff; letter-spacing: -.02em; }
.rvl-pieces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rvl-piece { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.rvl-piece-ring { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--part) * 360deg), rgba(255, 255, 255, .12) 0); display: grid; place-items: center; }
.rvl-piece-ring > i { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
.rvl-piece.is-full .rvl-piece-ring > i::after { content: '✓'; display: grid; place-items: center; height: 100%; font-style: normal; font-weight: 700; color: var(--accent); }
.rvl-piece-nom { font: 700 15px/1.2 var(--display); color: #fff; }
.rvl-piece-num { font: 600 12px/1.2 var(--mono); color: #A9ACA0; }
.rvl-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.rvl-cta {
  border: 0; border-radius: 999px; padding: 16px 26px; cursor: pointer; background: var(--accent); color: var(--ink);
  font: 700 16px/1 var(--sans); box-shadow: 0 0 0 0 rgba(214, 240, 52, .5); animation: rvl-pulse 2.2s ease-in-out 5s infinite;
  transition: transform .16s var(--ease-soft);
}
.rvl-cta:hover { transform: translateY(-2px); }
@keyframes rvl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 240, 52, .45); } 60% { box-shadow: 0 0 0 14px rgba(214, 240, 52, 0); } }
@media (max-width: 900px) {
  .rvl-charts { grid-template-columns: minmax(0, 1fr); }
  .rvl-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rvl-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .rvl *, .rvl *::after { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}

/* ═══════════ Pitch investisseur : trois mises en page à l'essai ═══════════ */
.pitch-mises { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--s-3); }
.pitch-mises-l { font: 600 12px/1.2 var(--sans); color: var(--ink-4); }
.pitch-mises-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); flex-wrap: wrap; }
.pitch-mise {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; cursor: pointer; text-align: left;
  padding: 5px 12px; border-radius: 7px; background: none; font: inherit; color: var(--ink-3); transition: background .16s, color .16s;
}
.pitch-mise > b { font: 650 13px/1.2 var(--sans); color: inherit; }
.pitch-mise > span { font-size: 11.5px; color: var(--ink-4); }
.pitch-mise:hover { background: var(--surface-2); color: var(--ink); }
.pitch-mise.is-on { background: var(--ink); color: #fff; }
.pitch-mise.is-on > span { color: #B9BCB1; }
/* Le PowerPoint, juste après les diapos qu'il emporte. */
.pitch-pptx {
  display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; text-align: left; font: inherit;
  padding: 3px 12px 3px 3px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink); transition: box-shadow .16s, transform .16s var(--ease-soft);
}
.pitch-pptx:hover { box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(-1px); }
.pitch-pptx-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); font: 700 16px/1 var(--sans); }
.pitch-pptx > span:last-child { display: flex; align-items: baseline; gap: 5px; }
.pitch-pptx > span:last-child > b { font: 650 13px/1.2 var(--sans); }
.pitch-pptx > span:last-child > span { font: 500 11px/1 var(--mono); color: var(--ink-4); }
.pitch-pptx.is-busy { opacity: .6; cursor: progress; }

/* Les faits et les ratios : le libellé au moins aussi grand que le chiffre. */
.pitch-fait-label { font: 700 15px/1.25 var(--display); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.pitch-fait-val { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.pitch-usage-head { font: 700 15px/1.25 var(--display); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.pitch-ratio-l { font: 700 14.5px/1.3 var(--display); letter-spacing: -.015em; }
.pitch-ratio-v { font-size: 14.5px; }
.pitch-client > span { font: 700 14px/1.2 var(--display); letter-spacing: -.01em; text-transform: none; color: var(--accent); }
.pitch-offre-prix { font-size: 16px; }
.pitch-ask > span { font: 700 15px/1.2 var(--display); letter-spacing: -.01em; text-transform: none; }
.pitch-chart { background: var(--surface); border-radius: 16px; padding: 14px 16px 8px; box-shadow: 0 1px 0 var(--rule), 0 20px 40px -36px rgba(14, 15, 12, .45); }
.pitch-chart .chart, .pitch-chart svg { width: 100%; height: auto; display: block; }
.pitch-traj { display: flex; flex-direction: column; gap: 12px; }
.pitch-traj-dit { margin: 0; padding: 12px 16px; border-left: 3px solid var(--signal); background: var(--surface); border-radius: 0 12px 12px 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.pitch-croiss { display: flex; flex-direction: column; gap: 12px; }

/* L'avis : à côté (bloc final d'une ligne) ou en pied de tuile. */
.pitch-avis.is-cote { align-self: stretch; flex-direction: column; justify-content: flex-start; }
.pitch-avis.is-cote .pitch-avis-sign { margin-bottom: 6px; }
.pitch-avis.is-court { margin: 12px 0 0; border-radius: 12px; }
.pitch-avis.is-court p { font-size: 12.5px; }
.pitch-avis.is-court .pitch-avis-sign { width: 22px; height: 22px; font-size: 11px; }

/* A · Récit — le titre et sa phrase sur une ligne, l'avis à droite. */
.pitch-recit .sx.pitch-ligne { margin-top: 34px; }
.pitch-ligne-corps { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.pitch-ligne-corps > .pitch-avis { position: sticky; top: calc(var(--header-h) + 64px); }
@media (max-width: 1100px) { .pitch-ligne-corps { grid-template-columns: minmax(0, 1fr); } .pitch-ligne-corps > .pitch-avis { position: static; } }

/* B · Tableau — douze colonnes, chaque tuile choisit sa place. */

.pitch-tuile-droite { margin-left: auto; }

/* C · Diapos — une idée par diapositive, qu'on fait défiler de côté. */
.pitch-deck { margin-top: 22px; }
.pitch-piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; border-radius: 22px; scrollbar-width: none; outline: none;
}
.pitch-piste::-webkit-scrollbar { display: none; }
.pitch-piste:focus-visible { box-shadow: 0 0 0 2px var(--signal); }
.pitch-diapo {
  scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; min-height: 520px;
  padding: 28px 30px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 22px;
}
.pitch-diapo-main { min-width: 0; display: flex; flex-direction: column; }
.pitch-diapo-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pitch-diapo-no { font: 600 12px/1 var(--mono); color: var(--ink-4); }
.pitch-diapo-head > h3 { margin: 0; font: 800 clamp(24px, 2.6vw, 32px)/1.08 var(--display); letter-spacing: -.035em; color: var(--ink); }
.pitch-diapo-dit { margin: 8px 0 18px; font-size: 14.5px; color: var(--ink-3); }
.pitch-diapo-corps { flex: 1; min-width: 0; }
.pitch-diapo > .pitch-avis { margin: 0; }
.pitch-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.pitch-fleche { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--ink); color: var(--accent); font-size: 17px; transition: transform .16s; }
.pitch-fleche:hover { transform: scale(1.06); }
.pitch-points { display: flex; gap: 6px; }
.pitch-point { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--rule); transition: width .2s, background .2s; }
.pitch-point.is-on { width: 26px; border-radius: 5px; background: var(--ink); }
.pitch-compteur { font: 600 12px/1 var(--mono); color: var(--ink-4); min-width: 44px; text-align: center; }
@media (max-width: 900px) { .pitch-diapo { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 20px; } }
.pitch-ligne-corps > .pitch-avis { align-self: start; }
.pitch-ask > span { font-size: 18px; }
.pitch-ask > b { font-size: 18px; }
/* La bulle du « i » n'existe que lorsqu'on la demande : cachée, elle
   élargissait la page sur un téléphone. Sur petit écran, elle se pose en
   bas, sur toute la largeur. */
.info-point:not(:hover):not(:focus-visible):not(.is-open)::after { display: none; }
@media (max-width: 720px) {
  .info-point::after {
    position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-width: none; transform: none !important;
  }
}

/* « Valider » : une valeur posée par défaut, confirmée d'un clic. */
.valider-chip {
  margin-left: 10px; padding: 3px 9px; border: 0; border-radius: 999px; cursor: pointer; vertical-align: 1px;
  background: var(--signal-wash); color: var(--signal-ink); font: 600 11.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none;
  transition: background .16s, color .16s;
}
.valider-chip:hover { background: var(--signal); color: #fff; }
.setup-libelle { margin: 14px 0 6px; font: 600 14px/1.3 var(--sans); color: var(--ink-2); }

/* ═══════════ Pitch : la synthèse sur fond noir ═══════════
   L'identité du projet, le chiffre d'affaires année par année, la
   trésorerie mois par mois, le montant demandé, quatre repères. Première
   scène du récit : elle tient dans un écran de portable. */
.pitch-cover.pitch-hero {
  display: block; position: relative; overflow: hidden; margin-top: 0; padding: var(--s-4) var(--s-5) var(--s-4);
  border-radius: 18px; background: var(--ink); color: #F2F0E8;
}
.pitch-hero > * { position: relative; }
.pitch-hero .rvl-glow { position: absolute; inset: -40% -20% auto auto; width: 60%; height: 140%; }
.pitch-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pitch-hero .rvl-kicker { font-size: 10.5px; }
.pitch-hero .sy-live { padding: 3px 8px; font-size: 9px; }
.pitch-hero .rvl-name { margin-top: 6px; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.02; }
.pitch-hero .pitch-phrase { max-width: none; margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
.pitch-hero .pitch-manque { display: block; width: fit-content; max-width: 100%; text-align: left; font: 600 13px/1.4 var(--sans); padding: 7px 12px; margin-top: 10px; border-radius: 10px; }
.pitch-hero .pitch-meta { margin-top: 10px; gap: 6px; }
.pitch-hero .pitch-meta > span { font-size: 10px; padding: 3px 9px; }
.pitch-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 240px); gap: var(--s-3); margin-top: var(--s-4); align-items: stretch; }
.pitch-hero .rvl-chart { padding: 12px 14px 6px; border-radius: 14px; }
.pitch-hero .rvl-chart figcaption { font-size: 12.5px; }
.pitch-hero .rvl-chart figcaption b { font-size: 14px; }
.pitch-hero .rvl-svg { max-height: 170px; }
.pitch-hero .pitch-ask {
  grid-column: auto; grid-row: auto; align-self: stretch; justify-content: center; min-width: 0; gap: 4px; padding: 14px 18px; border-radius: 14px;
  background: rgba(214, 240, 52, .08); box-shadow: inset 0 0 0 1px rgba(214, 240, 52, .28);
}
.pitch-hero .pitch-ask > span { color: var(--accent); font-size: 14px; }
.pitch-hero .pitch-ask > b { font-size: 22px; }
.pitch-hero .pitch-ask > small { font-size: 12.5px; max-width: none; }
.pitch-hero .rvl-figs { margin-top: var(--s-3); gap: var(--s-3); }
.pitch-hero .rvl-fig { gap: 4px; padding: 10px 14px; border-radius: 12px; }
.pitch-hero .rvl-fig-l { font-size: 13.5px; }
.pitch-hero .rvl-fig-v { font-size: 15px; }
@media (max-width: 1100px) { .pitch-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pitch-hero .pitch-ask { grid-column: 1 / -1; } }
@media (max-width: 760px) { .pitch-hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .pitch-hero .rvl-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Dans le récit, la synthèse est une scène : une colonne, pas deux. */
.as-scene.as-ouverture { grid-template-columns: minmax(0, 1fr); }

/* Hors de la page de révélation, la couverture ne se joue qu'à l'arrivée :
   figée tant qu'on ne l'a pas vue, jouée une fois, puis immobile. */
.pitch-hero .rvl-kicker, .pitch-hero .rvl-name > span, .pitch-hero .rvl-phrase, .pitch-hero .rvl-chart, .pitch-hero .rvl-fig,
.pitch-hero .rvl-bar, .pitch-hero .rvl-bar-v, .pitch-hero .rvl-line, .pitch-hero .rvl-area, .pitch-hero .rvl-low {
  animation: none; opacity: 1; transform: none; stroke-dashoffset: 0;
}
.pitch-hero.rv-watch:not(.is-seen) :is(.rvl-kicker, .rvl-name > span, .rvl-phrase, .rvl-chart, .rvl-fig, .rvl-bar-v, .rvl-area, .rvl-low) { opacity: 0; }
.pitch-hero.rv-watch:not(.is-seen) .rvl-bar { transform: scaleY(0); }
.pitch-hero.rv-watch:not(.is-seen) .rvl-line { stroke-dashoffset: 1; }
.pitch-hero.is-play :is(.rvl-kicker, .rvl-name > span, .rvl-phrase, .rvl-chart, .rvl-fig) { opacity: 0; animation: rvl-rise .65s var(--ease-soft) both; animation-delay: var(--d, 0s); }
.pitch-hero.is-play .rvl-bar { transform: scaleY(0); animation: rvl-grow .8s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(.8s + var(--i) * .12s); }
.pitch-hero.is-play .rvl-bar-v { opacity: 0; animation: rvl-fade .4s ease both; animation-delay: calc(1.2s + var(--i) * .12s); }
.pitch-hero.is-play .rvl-line { stroke-dashoffset: 1; animation: rvl-draw 1.6s ease-in-out 1s both; }
.pitch-hero.is-play .rvl-area { opacity: 0; animation: rvl-fade .8s ease 2s both; }
.pitch-hero.is-play .rvl-low { opacity: 0; animation: rvl-fade .5s ease 2.3s both; }

/* ═══════════ L'avis de Fynomia : une note d'associé ═══════════ */
.pitch-avis {
  display: flex; flex-direction: column; gap: 0; margin-top: 16px; padding: 16px 18px 16px; border-radius: 16px;
  background: var(--surface); color: var(--ink-2); grid-template-columns: none;
  box-shadow: 0 1px 0 var(--rule), 0 24px 48px -36px rgba(14, 15, 12, .5), inset 0 3px 0 var(--avis-ton, var(--gain));
}
.pitch-avis.is-good { --avis-ton: var(--gain); }
.pitch-avis.is-watch { --avis-ton: #D09A2A; }
.pitch-avis.is-bad { --avis-ton: var(--loss); }
.avis-tete { display: flex; align-items: center; gap: 9px; }
.avis-mono {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--ink); color: var(--accent); font: 800 13px/1 var(--display);
}
.avis-qui { font: 600 12px/1.2 var(--sans); color: var(--ink-3); white-space: nowrap; }
.avis-ton {
  margin-left: auto; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.3 var(--sans); white-space: nowrap;
  color: var(--avis-ton); background: color-mix(in srgb, var(--avis-ton) 12%, transparent);
}
.pitch-avis .avis-titre { margin: 12px 0 0; font: 700 17px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.avis-points { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.avis-points li { position: relative; padding-left: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.avis-points li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--avis-ton); }
.avis-points li > b { display: inline; font: 650 13px/1.5 var(--mono); letter-spacing: -.02em; color: var(--ink); text-transform: none; white-space: nowrap; }
.avis-question { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, #F4F3EE); }
.avis-question > span { display: block; font: 600 11.5px/1.2 var(--sans); color: var(--ink-4); }
.pitch-avis .avis-question > p { margin: 5px 0 0; font: italic 500 14px/1.5 Georgia, 'Times New Roman', serif; color: var(--ink); }
.avis-action {
  align-self: flex-start; margin-top: 12px; padding: 8px 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--accent); font: 600 12.5px/1 var(--sans); transition: transform .16s var(--ease-soft);
}
.avis-action:hover { transform: translateY(-1px); }
.pitch-avis.is-court { padding: 12px 14px; margin-top: 12px; }
.pitch-avis.is-court .avis-titre { font-size: 15px; margin-top: 9px; }
.pitch-avis.is-court .avis-points { margin-top: 8px; gap: 6px; }
.pitch-avis.is-court .avis-question { margin-top: 10px; }
.pitch-avis.is-court .avis-question > p { font-size: 13px; }
.pitch-avis.is-cote { margin: 0; }
.pitch-diapo > .pitch-avis { align-self: start; }

/* Pilotage : chaque palier s'ouvre seul. */
button.refinery-group-head { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; }
button.refinery-group-head:hover { background: var(--surface-2); }
.refinery-group-chev { flex: none; width: 7px; height: 7px; margin: 0 4px 0 6px; border-right: 1.5px solid var(--ink-4); border-bottom: 1.5px solid var(--ink-4); transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease-soft); }
.refinery-group.is-open .refinery-group-chev { transform: rotate(-135deg) translate(-1px, -1px); }

/* ═══════════ « En clair » : ce que l'acte veut dire, sans un mot de compta ═══════════ */
.sy-clair {
  margin-top: 16px; padding: 14px 18px 14px; border-radius: 14px; background: var(--surface);
  box-shadow: inset 3px 0 0 var(--signal), 0 1px 0 var(--rule); max-width: 900px;
}
.sy-clair-tag { display: inline-block; font: 700 12px/1 var(--sans); color: var(--signal-ink); background: var(--signal-wash); padding: 4px 9px; border-radius: 999px; }
.sy-clair ul { margin: 10px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.sy-clair li { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sy-clair-gestes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sy-clair-go { border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; background: var(--ink); color: var(--accent); font: 600 12.5px/1 var(--sans); transition: transform .16s var(--ease-soft); }
.sy-clair-go:hover { transform: translateY(-1px); }

/* ═══════════ Le sélecteur : quatre façons de lire le même pitch ═══════════ */
.pitch-mises { position: sticky; top: calc(var(--header-h) + var(--h-tab) + 5px); z-index: 15; padding: 6px 0; background: var(--paper); }
/* Au téléphone, le sélecteur tient sur une ligne et ne colle plus : il
   occupait un tiers de l'écran au-dessus de chaque scène du récit. Le
   PowerPoint s'y réduit à sa flèche. */
/* L'avertissement du plan, à côté du PowerPoint : une pastille ; ouvert, il
   se pose sous la ligne, aligné sur le contenu, par-dessus la page. */
.garde.is-mises { margin: 0; min-width: 0; }
.garde.is-mises .garde-pill { max-width: 100%; padding: 4px 10px 4px 5px; font-size: 12.5px; }
.garde.is-mises .garde-pill-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.garde.is-mises .garde-sign { width: 18px; height: 18px; }
.garde.is-mises .garde-sign::before { top: 4px; height: 6px; }
.garde.is-mises .garde-sign::after { top: 11.5px; }
.garde.is-mises .garde-body {
  position: absolute; left: 0; top: calc(100% + 4px); width: min(680px, 100%); margin: 0; z-index: 20;
  box-shadow: inset 3px 0 0 var(--warn), 0 1px 0 var(--rule), 0 26px 50px -20px rgba(14, 15, 12, .45);
}
.garde.is-mises.is-alerte .garde-body { box-shadow: inset 3px 0 0 var(--loss), 0 1px 0 var(--rule), 0 26px 50px -20px rgba(14, 15, 12, .45); }
@media (max-width: 760px) {
  .pitch-mises { position: relative; flex-wrap: nowrap; gap: 8px; }
  .garde.is-mises { flex: 0 1 auto; }
  .garde.is-mises .garde-pill-more { display: none; }
  .pitch-mises-l, .pitch-mise > span, .pitch-pptx > span:last-child { display: none; }
  .pitch-mises-seg { flex: 1; flex-wrap: nowrap; min-width: 0; }
  .pitch-mise { flex: 1; align-items: center; padding: 9px 6px; }
  .pitch-pptx { padding: 5px; flex: none; }
}
.pitch.is-detail > .sy { margin-top: 8px; }
html.is-bascule::view-transition-old(root) { animation: pz-sort .22s ease both; }
html.is-bascule::view-transition-new(root) { animation: pz-entre .32s var(--ease-soft) both; }
@keyframes pz-sort { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pz-entre { from { opacity: 0; transform: translateY(10px); } }

/* ═══════════ A · Récit — un texte qu'on lit ═══════════ */
.pitch-chapeau {
  margin: 0 0 16px; font: 500 clamp(18px, 1.7vw, 21px)/1.5 var(--display); letter-spacing: -.012em; color: var(--ink);
  max-width: 62ch; text-wrap: pretty;
}
.pitch.is-recit .sx.pitch-ligne .sx-no > b { width: 36px; height: 36px; font-size: 13px; }

/* ═══════════ B · Tableau — un cockpit, tout sur un écran ═══════════ */

  

 

.pz-mini { display: block; width: 100%; height: 56px; }
.pz-mini rect { fill: var(--accent); opacity: .85; transform-box: fill-box; transform-origin: 50% 100%; animation: rvl-grow .7s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * .07s); }
.pz-mini rect.is-neg { fill: #FF9CA2; }
.pz-mini .pz-zero { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.pz-mini .pz-trait { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rvl-draw 1.2s ease-in-out .2s forwards; }
  
.pz-jauge { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 18px; }
.pz-jauge > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--accent); animation: sy-widen .8s var(--ease-soft) both; transform-origin: left; }
.pz-jauge-rep { position: absolute; top: -2px; bottom: -2px; background: rgba(255, 255, 255, .22); border-radius: 3px; }
.pz-parts { display: flex; gap: 3px; height: 12px; margin-top: 18px; }
.pz-parts > i { border-radius: 4px; min-width: 6px; background: var(--accent); }
.pz-parts > i.is-1 { background: #9FB42A; } .pz-parts > i.is-2 { background: #6E7B1F; } .pz-parts > i.is-3 { background: #454D17; }
.pz-points { display: flex; gap: 6px; margin-top: 18px; }
.pz-points > i { width: 12px; height: 12px; border-radius: 50%; background: #F2C46B; }

/* La fiche d'une tuile : métrique, valeur exacte, période ou base de calcul. */
.pz-fiche { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 7px; }
.pz-fiche-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.pz-fiche dt { font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.pz-fiche dd { margin: 0; text-align: right; min-width: 0; }
.pz-fiche dd b { font: 600 13px/1.3 var(--mono); color: var(--ink); white-space: nowrap; }
.pz-fiche dd small { display: block; font-size: 11px; line-height: 1.35; color: var(--ink-4); }

/* ═══════════ C · Diapos — le deck qu'on présentera ═══════════ */
.pitch-deck { position: relative; }
.pz-progres { height: 4px; border-radius: 2px; background: var(--rule); margin-bottom: 10px; overflow: hidden; }
.pz-progres > i { display: block; height: 100%; background: var(--ink); transition: width .35s var(--ease-soft); }
.pitch-deck .pitch-diapo {
  display: flex; flex-direction: column; aspect-ratio: 16 / 9; min-height: 0; padding: clamp(18px, 3vw, 40px);
  border-radius: 22px; overflow: hidden; gap: 14px;
}
.pitch-diapo.is-sombre { background: var(--ink); color: #F2F0E8; box-shadow: none; }
.pitch-diapo.is-clair { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.pz-diapo-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pitch-diapo.is-sombre .pitch-diapo-no { color: var(--accent); }
.pz-diapo-grille { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 36px); align-items: center; }
.pz-diapo-texte h3 { margin: 0; font: 800 clamp(26px, 3.2vw, 44px)/1.04 var(--display); letter-spacing: -.04em; color: inherit; text-wrap: balance; }
.pz-diapo-recit { margin: 14px 0 0; font: 500 clamp(15px, 1.4vw, 19px)/1.5 var(--display); letter-spacing: -.01em; opacity: .88; }
.pz-diapo-chiffre { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.pz-diapo-chiffre > b { font: 700 clamp(26px, 3.2vw, 44px)/1.04 var(--mono); letter-spacing: -.04em; }
.pitch-diapo.is-sombre .pz-diapo-chiffre > b { color: var(--accent); }
.pz-diapo-chiffre > b.is-bad { color: var(--loss) !important; }
.pz-diapo-chiffre > span { font-size: 13px; opacity: .7; }
.pz-diapo-visuel { min-width: 0; max-height: 100%; overflow: auto; scrollbar-width: none; border-radius: 16px; }
.pz-diapo-visuel::-webkit-scrollbar { display: none; }
.pitch-diapo.is-sombre .pz-diapo-visuel { background: var(--paper); color: var(--ink); padding: 12px; }
.pz-note { display: flex; align-items: flex-start; gap: 10px; padding-top: 12px; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 18%, transparent); }
.pz-note b { display: block; font: 600 11.5px/1.3 var(--sans); opacity: .7; }
.pz-note p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; }
.pz-note p.pz-note-q { font-size: 12.5px; opacity: .8; }
.pitch-diapo.is-sombre .pz-note .avis-mono { background: var(--accent); color: var(--ink); }
.pz-plein { margin-left: 8px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer; background: var(--surface-2); font: 600 12px/1 var(--sans); color: var(--ink-3); }
.pz-plein:hover { background: var(--ink); color: var(--accent); }
.pitch-deck:fullscreen { background: var(--ink); padding: 3vh 3vw; display: flex; flex-direction: column; justify-content: center; }
.pitch-deck:fullscreen .pitch-piste { flex: none; }
@media (max-width: 900px) {
  .pitch-deck .pitch-diapo { aspect-ratio: auto; }
  .pz-diapo-grille { grid-template-columns: minmax(0, 1fr); }
  .pz-diapo-visuel { max-height: none; }
}

.pz-barres { display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.pz-barres > i { flex: 1; max-width: 64px; border-radius: 5px 5px 2px 2px; background: var(--accent); opacity: .9; transform-origin: 50% 100%; animation: rvl-grow .7s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * .07s); }
.pz-barres > i.is-neg { background: #FF9CA2; }

/* ═══════════════════ Ce que ton banquier va vérifier ═══════════════════
   Cinq lignes, un état chacune. L'état se lit d'abord — une étiquette à
   gauche, dans la couleur de la maison : vert validé, ambre juste, rouge à
   revoir —, puis le chiffre, puis ce qu'on attend et quoi faire. */
.bk { display: grid; gap: 14px; }
.bk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-titre { margin: 0; font-family: var(--display); font-size: var(--t-block); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.bk-bilan { font-size: 12.5px; font-weight: 650; padding: 3px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink-3); }
.bk-bilan.is-ok { color: var(--gain); background: var(--gain-wash); border-color: transparent; }
.bk-bilan.is-juste { color: var(--warn); background: var(--warn-wash); border-color: transparent; }
.bk-bilan.is-revoir { color: var(--loss); background: var(--loss-wash); border-color: transparent; }
.bk-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.bk-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.bk-etat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 8px; border-radius: 6px; text-align: center; background: var(--surface-2); color: var(--ink-4); }
.bk-ligne.is-ok .bk-etat { background: var(--gain-wash); color: var(--gain); }
.bk-ligne.is-juste .bk-etat { background: var(--warn-wash); color: var(--warn); }
.bk-ligne.is-revoir .bk-etat { background: var(--loss-wash); color: var(--loss); }
.bk-ligne.is-na { opacity: .72; }
.bk-ligne-tete { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.bk-ligne-titre { font-size: var(--t-row); font-weight: 650; color: var(--ink); }
.bk-valeur { font-family: var(--mono); font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.bk-ligne.is-revoir .bk-valeur { color: var(--loss); }
.bk-lu, .bk-attendu, .bk-faire { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 78ch; }
.bk-attendu span { font-weight: 700; color: var(--ink-4); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; margin-right: 4px; }
.bk-faire { color: var(--ink-2); font-weight: 500; }
.bk-faire::before { content: '\2192\00a0'; color: var(--ink-4); }
.bk.is-court .bk-ligne { padding: 9px 0; }
.bk-table td:first-child { white-space: normal; min-width: 220px; }
@media (max-width: 640px) {
  .bk-ligne { grid-template-columns: 1fr; gap: 6px; }
  .bk-etat { justify-self: start; }
}

/* ═══════════════════ L'effet d'une saisie, sous le champ ═══════════════════
   Une pastille discrète, posée juste sous la case qu'on vient de toucher :
   ce que le chiffre a déplacé, en euros, dans la couleur du sens. */
.effet {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 650; line-height: 1.35; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: effet-in .28s cubic-bezier(.2, .8, .2, 1);
}
.effet::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.effet.is-bon { background: var(--gain-wash); color: var(--gain); }
.effet.is-mauvais { background: var(--loss-wash); color: var(--loss); }
/* Dans une tuile étroite — la trésorerie de départ —, la pastille passe à la ligne. */
.source .effet { white-space: normal; max-width: 100%; border-radius: 8px; align-items: baseline; }
@keyframes effet-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .effet { animation: none; } }

/* ═══════════════════════════════ Méthode ═══════════════════════════════
   Une page de lecture : des blocs numérotés, chacun avec son titre et sa
   phrase, puis le contenu. Pas de carte sur carte : des filets. */
.mt-lede { margin: 10px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.mt-bloc { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; padding: 26px 0; border-top: 1px solid var(--rule); }
.mt-bloc-tete { display: contents; }
.mt-no { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-4); padding-top: 5px; }
.mt-bloc-titre { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.mt-bloc-dit { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }
.mt-bloc-corps { grid-column: 2; margin-top: 14px; }
.mt-table { width: 100%; border-collapse: collapse; }
.mt-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; padding: 0 16px 9px 0; border-bottom: 1.5px solid var(--ink); }
.mt-table td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; white-space: normal; }
.mt-table td b { display: block; font-size: 14.5px; color: var(--ink); }
.mt-lecture { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-4); max-width: 46ch; }
.mt-range { font-family: var(--mono); font-size: 14px; font-weight: 650; color: var(--ink); white-space: nowrap !important; }
.mt-calcul { font-size: 13px; color: var(--ink-3); max-width: 40ch; }
.mt-etapes, .mt-liste { margin: 0; padding-left: 20px; display: grid; gap: 10px; max-width: 76ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.mt-p { margin: 0 0 12px; max-width: 76ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.mt-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mt-sources li { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.mt-source-tete { font-size: 14.5px; color: var(--ink); }
.mt-annee { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.mt-source-apporte { margin: 4px 0; font-size: 13px; color: var(--ink-3); max-width: 76ch; }
.mt-lien { font-size: 12.5px; color: var(--signal-ink); word-break: break-all; }
@media (max-width: 640px) {
  .mt-bloc { grid-template-columns: 1fr; }
  .mt-bloc-corps { grid-column: 1; }
}

/* La source d'un repère, à côté du repère. */
.repere-src { font-size: 11.5px; color: var(--ink-4); text-decoration: none; border-bottom: 1px dotted var(--ink-5); white-space: nowrap; }
.repere-src:hover { color: var(--signal-ink); border-bottom-color: currentColor; }

/* ═══════════ Pilotage : trois paliers, titres en grand, ouverts en entier ═══════════
   Le titre du palier n'est plus une étiquette en capitales de neuf pixels :
   c'est un titre, dans la police des titres, précédé de sa couleur. Fermé,
   le palier ne montre que ce titre, sa phrase et son compte ; ouvert, toutes
   ses lignes. */
.refinery-groups { gap: var(--s-1); }
.refinery-group-head { align-items: center; gap: var(--s-3); padding: 9px 12px; margin-bottom: 0; border-bottom: 1px solid var(--rule); }
button.refinery-group-head { padding-top: 9px; padding-bottom: 9px; border-radius: 10px; }
.refinery-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 0; border-radius: 0;
  font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.015em; text-transform: none; line-height: 1.15;
  background: none !important; border: 0 !important; color: var(--ink) !important;
}
.refinery-chip::before { content: ''; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.refinery-chip.is-fondation::before { background: var(--ink); }
.refinery-chip.is-credibilite::before { background: var(--accent-dim); }
.refinery-chip.is-finition::before { background: var(--ink-5); }
.refinery-group-note { font-size: 13px; color: var(--ink-3); }
.refinery-group-count { font-family: var(--mono); font-size: 14px; font-weight: 650; color: var(--ink); }
.refinery-group.is-full .refinery-group-count { color: var(--gain); }
.refinery-group.is-open .refinery-group-head { border-bottom-color: transparent; background: var(--surface-2); }
.refinery-group.is-open .refinery-items { padding: 4px 0 10px; border-bottom: 1px solid var(--rule); animation: palier-in .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes palier-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .refinery-group.is-open .refinery-items { animation: none; } }
@media (max-width: 640px) { .refinery-chip { font-size: 16px; } }
.pilote-dossier { margin-bottom: 0; gap: var(--s-3); }

/* ═══════════════════ Pitch · Récit : neuf scènes ═══════════════════
   Une scène à la fois, comme une présentation. En haut, la barre des neuf
   étapes ; à gauche, sur un panneau blanc, la question, le grand chiffre,
   la conclusion, trois repères et les deux gestes ; à droite, le dessin sur
   un panneau sombre, où seul le vert acide de la maison porte les données.
   « Comprendre ce chiffre » ouvre un tiroir sur le côté ; « Voir les
   données » pose l'état financier par-dessus la page, fond flouté. */
.as-recit { display: grid; gap: var(--s-3); margin-top: var(--s-3); min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--h-tab) + 52px); }

/* Les étapes : la forme du sommaire d'« En détail ». Collées sous « Lire le
   pitch » une fois atteintes, pour ne pas perdre le fil ; en remontant, elles
   reprennent leur place. */
.as-progres {
  position: sticky; top: calc(var(--header-h) + var(--h-tab) + 48px); z-index: 14;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0;
  padding: 7px 8px; border-radius: 14px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule), 0 10px 30px -24px rgba(14, 15, 12, .5);
}
.as-progres::-webkit-scrollbar { display: none; }
.as-etape {
  flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
  padding: 5px 11px 5px 5px; border: 0; border-radius: 999px; background: var(--surface-2);
  font: 600 12.5px/1.2 var(--sans); color: var(--ink-2); transition: background .16s var(--ease-soft), color .16s var(--ease-soft);
}
.as-etape-no { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 700 10px/1 var(--mono); }
.as-etape.is-ouverture .as-etape-no::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.as-etape.is-fait { color: var(--ink-3); }
.as-etape:hover, .as-etape.is-on { background: var(--ink); color: #fff; }

.as-piste { min-width: 0; }
.as-scene { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s-3); min-width: 0; }
.as-scene.is-on { display: grid; }
.as-scene.is-entree .as-scene-texte { animation: as-scene-in .42s var(--ease-soft) both; }
.as-scene.is-entree .as-scene-dessin { animation: as-scene-in .42s var(--ease-soft) .06s both; }
@keyframes as-scene-in { from { opacity: 0; transform: translateY(10px); } }

.as-scene-texte {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 18px 22px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 22px 44px -34px rgba(14, 15, 12, .4);
}
/* Le chapitre : son numéro et son terme, en tête, discrets — l'accroche porte la scène. */
.as-tete { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 650 13.5px/1.2 var(--sans); letter-spacing: .005em; color: var(--ink-3); }
.as-tete .as-no { font: 600 11.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-4); }
.as-tete .as-no::after { content: ' \2014'; }
/* L'accroche : une phrase, son chiffre en gras — ce qu'on retient de la scène. */
.as-accroche {
  margin: 2px 0 0; max-width: 40ch; font-family: var(--display); font-size: 25px; font-weight: 750; line-height: 1.18;
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.as-accroche b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-accroche b.is-bad { color: var(--loss); }
.as-accroche b.is-good { color: var(--gain); }
.as-conclusion { margin: 0; max-width: 64ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
/* La suite : deux lignes, puis un fondu ; elle se lit en entier dans le tiroir. */
.as-suite {
  position: relative; margin: -4px 0 0; max-width: 64ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); cursor: pointer;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.as-suite::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 45%; height: 1.6em; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface) 85%);
}
.as-suite:hover { color: var(--ink-2); }

/* Le lexique : le terme surligné une fois dans le texte, rappelé en puce. */
.as-lex { cursor: help; }
.as-lex.is-texte {
  color: inherit; border-radius: 2px; outline-offset: 2px;
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 55%, transparent) 36%, transparent 36%);
  transition: background-color .15s var(--ease-soft);
}
.as-lex.is-texte:hover, .as-lex.is-texte:focus-visible { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.as-lexique { display: flex; flex-wrap: wrap; gap: 6px; }
.as-lex.is-puce {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface-2); font: 600 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  transition: border-color .15s var(--ease-soft), color .15s var(--ease-soft);
}
.as-lex.is-puce::after { content: '?'; color: var(--ink-4); }
.as-lex.is-puce:hover, .as-lex.is-puce:focus-visible { border-color: var(--ink); color: var(--ink); }
.as-bulle {
  position: fixed; z-index: 1000; left: 0; top: 0; max-width: 300px; padding: 11px 13px 12px; border-radius: 12px;
  background: #0E0F0C; color: rgba(242, 240, 232, .88); font-size: 13px; line-height: 1.5;
  box-shadow: 0 18px 40px -18px rgba(14, 15, 12, .6); opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s var(--ease-soft), transform .14s var(--ease-soft), visibility 0s linear .14s;
}
.as-bulle.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .14s var(--ease-soft), transform .14s var(--ease-soft); }
.as-bulle b { display: block; margin-bottom: 4px; font: 700 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
/* Dans le tiroir : les mots du chapitre, définis. */
.as-mots { margin: 0; display: grid; gap: 10px; }
.as-mot { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.as-mot dt { font: 700 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.as-mot dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.as-scene-gestes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: 4px; }
.as-geste {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font: 650 12.5px/1 var(--sans);
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
  transition: background .15s var(--ease-soft), border-color .15s var(--ease-soft), color .15s var(--ease-soft);
}
.as-geste:hover { border-color: var(--ink); }
.as-geste:first-child { background: var(--ink); border-color: var(--ink); color: #fff; }
.as-geste:first-child:hover { background: var(--ink-2); }

.as-scene-dessin {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; min-height: 300px;
  padding: 18px 20px; border-radius: 16px; background: #0E0F0C; color: #F2F0E8; overflow: hidden;
}
.as-scene-dessin > * { min-width: 0; }
.as-scene-vide { margin: 0; text-align: center; font-size: 14px; color: rgba(242, 240, 232, .6); }

/* Les dessins, sur le panneau sombre : l'encre devient clarté, le vert reste. */
.as-scene-dessin .chart text { fill: rgba(242, 240, 232, .55); }
.as-scene-dessin .chart .ch-val { fill: #F2F0E8; }
.as-scene-dessin .chart line { stroke: rgba(242, 240, 232, .12); }
.as-scene-dessin .ch-hl { fill: #F2F0E8; }
.as-scene-dessin .ch-hl.is-on { opacity: .07; }
.as-scene-dessin .chart-legend { color: rgba(242, 240, 232, .7); }
.as-scene-dessin .as-barres, .as-scene-dessin .as-cascade, .as-scene-dessin .as-equation { max-width: none; }
.as-scene-dessin .as-barre-nom { color: #F2F0E8; }
.as-scene-dessin .as-barre-val, .as-scene-dessin .as-barre-sous { color: rgba(242, 240, 232, .6); }
.as-scene-dessin .as-barre-piste { background: rgba(242, 240, 232, .08); box-shadow: none; }
.as-scene-dessin .as-barre-piste i { background: var(--accent); }
.as-scene-dessin .as-barre.is-neg .as-barre-piste i { background: rgba(242, 240, 232, .45); }
.as-scene-dessin .as-barre:hover { background: rgba(242, 240, 232, .06); box-shadow: 0 0 0 5px rgba(242, 240, 232, .06); }
.as-scene-dessin .as-barre.is-alerte .as-barre-piste i { background: #FF6B6B; }
.as-scene-dessin .as-barre.is-alerte .as-barre-val, .as-scene-dessin .as-barre.is-alerte .as-barre-nom { color: #FF8A8A; }
.as-scene-dessin .as-cascade-nom { color: rgba(242, 240, 232, .85); }
.as-scene-dessin .as-cascade-val { color: #F2F0E8; }
.as-scene-dessin .as-cascade-l:hover { background: rgba(242, 240, 232, .06); }
.as-scene-dessin .as-cascade-zero { background: rgba(242, 240, 232, .3); }
.as-scene-dessin .as-cascade-l.is-total i { background: var(--accent); }
.as-scene-dessin .as-cascade-l.is-sous i { background: rgba(242, 240, 232, .55); }
.as-scene-dessin .as-cascade-l.is-moins i { background: #FF6B6B; opacity: .8; }
.as-scene-dessin .as-cascade-l.is-plus i, .as-scene-dessin .as-cascade-l.is-couvre i { background: #5FD39A; }
.as-scene-dessin .as-cascade-l.is-manque i { background: #FF6B6B; }
.as-scene-dessin .as-cascade-l.is-manque .as-cascade-val, .as-scene-dessin .as-cascade-l.is-manque .as-cascade-nom { color: #FF8A8A; }
.as-scene-dessin .as-cascade-l.is-total .as-cascade-nom, .as-scene-dessin .as-cascade-l.is-sous .as-cascade-nom { color: #fff; }
.as-scene-dessin .as-cascade-l.is-sous, .as-scene-dessin .as-cascade-l:last-child:not(:first-child) { box-shadow: inset 0 1px 0 rgba(242, 240, 232, .14); }
.as-scene-dessin .as-eq-bloc { background: rgba(242, 240, 232, .05); border-color: rgba(242, 240, 232, .14); }
.as-scene-dessin .as-eq-bloc span, .as-scene-dessin .as-eq-bloc small { color: rgba(242, 240, 232, .6); }
.as-scene-dessin .as-eq-bloc b { color: #fff; }
.as-scene-dessin .as-eq-bloc.is-cout b { color: #FF8A8A; }
.as-scene-dessin .as-eq-bloc.is-marge { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.as-scene-dessin .as-eq-op { color: rgba(242, 240, 232, .45); }
.as-scene-dessin .as-eq-barre { background: rgba(242, 240, 232, .08); }
.as-scene-dessin .as-eq-barre i.is-cout { background: #FF6B6B; opacity: .7; }
.as-scene-dessin .as-eq-barre i.is-marge { background: var(--accent); }
.as-scene-dessin .as-j-zero { stroke: rgba(242, 240, 232, .3); }
.as-scene-dessin .as-j-aire { opacity: .32; }
.as-scene-dessin .as-j-neg { opacity: .35; }
.as-scene-dessin .as-j-trait { stroke: var(--accent); }
.as-scene-dessin .as-j-y, .as-scene-dessin .as-j-x { fill: rgba(242, 240, 232, .55); }
.as-scene-dessin .as-j-bas text, .as-scene-dessin .as-j-haut text { fill: #F2F0E8; }
.as-scene-dessin .as-j-bas circle, .as-scene-dessin .as-j-haut circle { stroke: #0E0F0C; }
.as-scene-dessin .as-j-repere { fill: #0E0F0C; stroke: var(--accent); }
.as-scene-dessin .as-figure figcaption { color: rgba(242, 240, 232, .55); }

.as-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.as-nav-btn {
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font: 650 13px/1 var(--sans);
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  transition: background .15s var(--ease-soft), border-color .15s var(--ease-soft), color .15s var(--ease-soft), opacity .15s;
}
.as-nav-btn:hover:not(:disabled) { border-color: var(--ink); }
.as-nav-btn.is-suiv { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.as-nav-btn.is-suiv:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.as-nav-btn:disabled { opacity: .35; cursor: default; }
.as-nav-compteur { font: 600 12px/1 var(--mono); letter-spacing: .12em; color: var(--ink-4); }

/* Le tiroir et la surimpression. */
.as-voile { position: fixed; inset: 0; z-index: 90; background: rgba(14, 15, 12, .3); opacity: 0; transition: opacity .22s var(--ease-soft); }
.as-voile.is-donnees { background: rgba(242, 240, 232, .42); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
.as-voile.is-on { opacity: 1; }
.as-couche {
  position: fixed; z-index: 91; display: flex; flex-direction: column; outline: none; background: var(--surface);
  box-shadow: 0 30px 80px -30px rgba(14, 15, 12, .55), 0 0 0 1px rgba(14, 15, 12, .06);
}
.as-couche.is-tiroir { top: 0; right: 0; bottom: 0; width: min(540px, 100vw); border-radius: 22px 0 0 22px; transform: translateX(104%); transition: transform .32s var(--ease); }
.as-couche.is-tiroir.is-on { transform: none; }
.as-couche.is-donnees {
  top: 50%; left: 50%; width: min(1000px, calc(100vw - 32px)); max-height: min(86dvh, 900px); border-radius: 22px;
  opacity: 0; transform: translate(-50%, -48%) scale(.98); transition: transform .26s var(--ease), opacity .2s var(--ease-soft);
}
.as-couche.is-donnees.is-on { opacity: 1; transform: translate(-50%, -50%); }
.as-couche-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 26px 0; }
.as-couche-kicker { margin: 0; font: 600 10.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.as-couche-fermer {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-3); font-size: 13px;
}
.as-couche-fermer:hover { border-color: var(--ink); color: var(--ink); }
.as-couche-corps { flex: 1; display: grid; gap: 22px; align-content: start; min-height: 0; padding: 10px 26px 26px; overflow-y: auto; overscroll-behavior: contain; }
.as-couche-titre { margin: 4px 0 0; font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -.018em; color: var(--ink); }
.as-couche.is-donnees .as-couche-titre { font-size: 22px; }
.as-couche-lede { margin: -12px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.as-couche-bloc { display: grid; gap: 10px; min-width: 0; }
.as-couche-bloc > h3 {
  margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
  font: 600 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
}
.as-couche-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 26px 22px; border-top: 1px solid var(--rule); }
.as-couche-btn {
  padding: 12px 18px; border-radius: 999px; cursor: pointer; font: 650 13.5px/1 var(--sans);
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  transition: background .15s var(--ease-soft), border-color .15s var(--ease-soft), color .15s var(--ease-soft);
}
.as-couche-btn.is-ghost:hover { border-color: var(--ink); }
.as-couche-btn.is-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.as-couche-btn.is-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.as-couche-bloc .as-table { font-size: 12.5px; }
.as-couche-bloc .as-table th, .as-couche-bloc .as-table td { padding-left: 6px; padding-right: 6px; }
.as-couche-bloc .as-table td:not(:first-child) { white-space: nowrap; }
.as-tuiles { display: grid; gap: 8px; }
.as-tuiles .as-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 0; }
.as-tuiles .as-chiffre, .as-tuiles .as-chiffre:last-child { margin: 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface-2); }
.as-tuiles .as-chiffre-v { font-size: 22px; }
.as-etat tr.is-fort td { font-weight: 650; }
.as-etat tr.is-total td { font-weight: 750; border-top: 1.5px solid var(--ink); }
.as-etat tr.is-vise td { background: var(--accent-wash); }
.as-etat tr.is-vise td:first-child { box-shadow: inset 3px 0 0 var(--accent-dim); }

/* Les pièces communes au récit et au détail. */
.as-repere { font: 600 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.as-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); border-top: 1.5px solid var(--ink); }
.as-chiffre { display: grid; gap: 5px; align-content: start; padding: 12px 18px 2px 0; margin-right: 18px; border-right: 1px solid var(--rule); min-width: 0; }
.as-chiffre:last-child { border-right: 0; margin-right: 0; }
.as-chiffre-l { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.as-chiffre-v { font-family: var(--display); font-size: 26px; font-weight: 750; line-height: 1.12; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.as-chiffre-v.is-bad { color: var(--loss); }
.as-chiffre-v.is-good { color: var(--gain); }
.as-chiffre-n { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.as-clair { margin: 0; max-width: 74ch; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.as-clair .repere-src { margin-left: 2px; }
.as-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 80ch; }
.as-detail-corps { display: grid; gap: 16px; min-width: 0; }
.as-table-wrap { overflow-x: auto; min-width: 0; }
.as-table { width: 100%; font-size: 13px; }
.as-table th { white-space: nowrap; }

/* Les barres : une par poste, sa part, et sa ligne de calcul. */
.as-barres { display: grid; gap: 12px; max-width: 780px; }
.as-barre-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.as-barre-nom { color: var(--ink-2); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.as-barre-val { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.as-barre-sous { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); overflow-wrap: anywhere; }
.as-barre-piste { height: 8px; margin-top: 5px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.as-barre-piste i { display: block; height: 100%; border-radius: 999px; background: var(--ink); transform-origin: left; animation: as-pousse .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.as-barre.is-neg .as-barre-piste i { background: var(--ink-3); }
.as-barre.is-alerte .as-barre-piste i { background: var(--loss); }
.as-barre.is-alerte .as-barre-val, .as-barre.is-alerte .as-barre-nom { color: var(--loss); }
@keyframes as-pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.as-barre { cursor: default; border-radius: 6px; transition: background .12s; }
.as-barre:hover { background: var(--surface-2); box-shadow: 0 0 0 5px var(--surface-2); }

/* La cascade : du chiffre d'affaires au résultat, poste par poste. */
.as-cascade { display: grid; gap: 4px; max-width: 780px; }
.as-cascade-l {
  display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) minmax(92px, auto); gap: 14px; align-items: center;
  padding: 4px 6px; border-radius: 6px; font-size: 13.5px; transition: background .12s;
}
.as-cascade-l:hover { background: var(--surface-2); }
.as-cascade-nom { color: var(--ink-2); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.as-cascade-piste { position: relative; height: 14px; }
.as-cascade-piste i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--ink-4); transform-origin: left; animation: as-pousse .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.as-cascade-zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--ink-5); }
.as-cascade-val { font-family: var(--mono); font-size: 12.5px; color: var(--ink); text-align: right; white-space: nowrap; }
.as-cascade-l.is-moins i { background: var(--loss); opacity: .72; }
.as-cascade-l.is-plus i { background: var(--gain); }
.as-cascade-l.is-total i { background: var(--ink); }
.as-cascade-l.is-sous i { background: var(--ink-3); }
.as-cascade-l.is-couvre i { background: var(--gain); }
.as-cascade-l.is-manque i { background: var(--loss); }
.as-cascade-l.is-manque .as-cascade-val, .as-cascade-l.is-manque .as-cascade-nom { color: var(--loss); }
.as-cascade-l.is-total, .as-cascade-l.is-sous, .as-cascade-l.is-manque { font-weight: 700; }
.as-cascade-l.is-total .as-cascade-nom, .as-cascade-l.is-sous .as-cascade-nom { color: var(--ink); }
.as-cascade-l.is-sous, .as-cascade-l:last-child:not(:first-child) { margin-top: 4px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--rule); }
.as-figure { margin: 0; display: grid; gap: 6px; }
.as-figure figcaption { font-size: 12.5px; color: var(--ink-4); }

/* Prix − coût direct = marge. */
.as-equation { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 12px; max-width: 780px; }
.as-eq-bloc { display: grid; gap: 3px; min-width: 132px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); cursor: default; }
.as-eq-bloc span { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.as-eq-bloc b { font-family: var(--display); font-size: 26px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.as-eq-bloc small { font-size: 12px; color: var(--ink-4); }
.as-eq-bloc.is-cout b { color: var(--loss); }
.as-eq-bloc.is-marge { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.as-eq-op { align-self: center; font: 700 24px/1 var(--mono); color: var(--ink-4); }
.as-eq-barre { flex-basis: 100%; display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.as-eq-barre i.is-cout { background: var(--loss); opacity: .6; }
.as-eq-barre i.is-marge { background: var(--ink); }

/* La trésorerie mois par mois : l'aire au-dessus de zéro, le rouge dessous. */
.as-j-zero { stroke: var(--ink-5); stroke-width: 1; stroke-dasharray: 3 4; }
.as-j-aire { fill: var(--accent); opacity: .55; }
.as-j-neg { fill: var(--loss); opacity: .2; }
.as-j-trait { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.as-j-y, .as-j-x { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-4); }
.as-j-bas circle { fill: var(--loss); stroke: #fff; stroke-width: 2; }
.as-j-haut circle { fill: var(--gain); stroke: #fff; stroke-width: 2; }
.as-j-bas text, .as-j-haut text { font-family: var(--mono); font-size: 10.5px; font-weight: 700; fill: var(--ink-2); }
/* Le mois survolé, posé sur le trait. */
.as-j-repere, .rvl-repere { opacity: 0; pointer-events: none; transition: opacity .1s; }
.as-j-repere { fill: #fff; stroke: var(--ink); stroke-width: 2.2; }
.rvl-repere { fill: var(--accent); stroke: var(--ink); stroke-width: 2.5; }
.as-j-repere.is-on, .rvl-repere.is-on { opacity: 1; }
.rvl-bar { transition: opacity .15s; }
.rvl-bar.is-dim { opacity: .35; }

.as-bk { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 780px; }
.as-bk-ligne { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.as-bk-ligne:last-child { border-bottom: 0; }
.as-bk-etat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px; border-radius: 6px; text-align: center; background: var(--surface-2); color: var(--ink-4); }
.as-bk-ligne.is-ok .as-bk-etat { background: var(--gain-wash); color: var(--gain); }
.as-bk-ligne.is-juste .as-bk-etat { background: var(--warn-wash); color: var(--warn); }
.as-bk-ligne.is-revoir .as-bk-etat { background: var(--loss-wash); color: var(--loss); }
.as-bk-titre { color: var(--ink-2); font-weight: 600; }
.as-bk-val { font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }

@media (max-width: 760px) {
  .as-recit { scroll-margin-top: calc(var(--header-h) + 64px); }
  .as-progres { position: static; gap: 4px; }
  .as-etape { padding: 4px; }
  .as-etape span { display: none; }
  .as-scene { grid-template-columns: minmax(0, 1fr); }
  .as-scene-texte { padding: 22px 18px 20px; border-radius: 18px; }
  .as-tete { font-size: 13px; }
  .as-accroche { font-size: 22px; }
  .as-mot { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .as-geste { flex: 1 1 auto; text-align: center; }
  .as-scene-dessin { min-height: 0; padding: 22px 16px; border-radius: 18px; }
  .as-nav-btn { padding: 12px 16px; }
  .as-couche.is-tiroir { top: 6dvh; width: 100vw; border-radius: 22px 22px 0 0; transform: translateY(104%); }
  .as-couche.is-tiroir.is-on { transform: none; }
  .as-couche.is-donnees { width: calc(100vw - 16px); max-height: 90dvh; }
  .as-couche-tete, .as-couche-corps, .as-couche-pied { padding-left: 18px; padding-right: 18px; }
  .as-couche-titre { font-size: 23px; }
}
@media (max-width: 640px) {
  .as-cascade-l { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .as-cascade-piste { grid-column: 1 / -1; grid-row: 2; }
  .as-eq-bloc { min-width: 0; flex: 1 1 110px; }
  .as-eq-bloc b { font-size: 21px; }
  .as-bk-ligne { grid-template-columns: 70px minmax(0, 1fr); }
  .as-bk-val { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .as-scene.is-entree .as-scene-texte, .as-scene.is-entree .as-scene-dessin { animation: none; }
  .as-etape, .as-couche, .as-voile { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .as-barre-piste i, .as-cascade-piste i { animation: none; } }

/* ═══════════ Pitch · Diapos : des diapositives blanches ═══════════
   Passer du noir au blanc à chaque diapositive fatiguait l'œil. Toutes les
   diapositives de contenu sont blanches ; le noir ne sert plus qu'aux
   intercalaires, qui annoncent qu'on change de partie. */
.pitch-diapo.is-intercalaire { background: var(--ink); color: #F2F0E8; box-shadow: none; justify-content: center; }
.pz-inter { display: grid; gap: 14px; max-width: 760px; }
.pz-inter-no { font: 700 clamp(56px, 8vw, 110px)/.9 var(--mono); letter-spacing: -.05em; color: var(--accent); }
.pz-inter-titre { margin: 0; font: 800 clamp(30px, 4vw, 56px)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; color: #fff !important; }
.pz-inter-dit { margin: 0; font: 500 clamp(15px, 1.4vw, 19px)/1.5 var(--display); opacity: .75; }
.pz-inter-liste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pz-inter-liste span { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 600 12.5px/1.2 var(--sans); color: #E9EBE3; }
.pitch-point.is-inter { width: 14px; border-radius: 3px; background: var(--ink-5); }
.pitch-point.is-inter.is-on { background: var(--ink); }

/* ═══════════ Pitch · En détail : des chapitres, pas un wiki ═══════════
   Chaque partie devient un panneau blanc détaché du papier, avec son numéro
   en pastille, sa question, sa réponse en grand. Un sommaire ouvre la page.
   Le texte long se coupe à trois lignes, « pourquoi c'est important » se
   replie : on lit les chiffres d'abord, l'explication si on la veut. */
.pitch.is-detail .sy { display: grid; gap: 26px; }
.sy-sommaire {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: inset 0 0 0 1px var(--rule), 0 10px 30px -24px rgba(14, 15, 12, .5); backdrop-filter: blur(8px);
}
.sy-sommaire ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.sy-sommaire button { display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer; padding: 6px 11px 6px 6px; border-radius: 999px; background: var(--surface-2); font: 600 12.5px/1.2 var(--sans); color: var(--ink-2); }
.sy-sommaire button b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 700 10px/1 var(--mono); }
.sy-sommaire button:hover { background: var(--ink); color: #fff; }
.pitch.is-detail .sy-chapitre {
  padding: 30px 32px 30px; border-top: 0; border-radius: 24px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule), 0 24px 48px -40px rgba(14, 15, 12, .45); scroll-margin-top: calc(var(--header-h) + 150px);
}
.pitch.is-detail .sy-chapitre .sy-act-no { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
.pitch.is-detail .sy-chapitre .sy-act-no > b { width: 28px; height: 28px; font-size: 12px; background: var(--accent); color: var(--accent-ink); }
.pitch.is-detail .sy-chapitre .sy-act-title { margin-top: 6px; }
.pitch.is-detail .sy-card, .pitch.is-detail .sy-fact, .pitch.is-detail .sy-feature-main, .pitch.is-detail .sy-band { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.sy-card-body.is-coupe { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sy-lire { margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 12px/1.3 var(--sans); color: var(--signal-ink); }
.sy-lire:hover { text-decoration: underline; }
.sy-why { margin-top: 10px; border-top: 1px dashed var(--rule); padding-top: 8px; }
.sy-why > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--sans); color: var(--ink-3); }
.sy-why > summary::-webkit-details-marker { display: none; }
.sy-why > summary::before { content: '+'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); font: 700 11px/1 var(--mono); color: var(--ink-3); }
.sy-why[open] > summary::before { content: '−'; }
.sy-why > p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
/* Le sommaire se colle sous « Lire le pitch », sur une ligne qui défile de
   côté si elle déborde ; la partie lue s'y allume. Les parties s'arrêtent
   sous la pile des barres collées quand on y saute. */
.pitch.is-detail .sy-sommaire {
  position: sticky; top: calc(var(--header-h) + var(--h-tab) + 48px); z-index: 14;
  flex-wrap: nowrap; padding: 7px 8px; gap: 12px; background: var(--paper);
}
.pitch.is-detail .sy-sommaire ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.pitch.is-detail .sy-sommaire ol::-webkit-scrollbar { display: none; }
.pitch.is-detail .sy-sommaire li { flex: none; }
.pitch.is-detail .sy-sommaire button { white-space: nowrap; }
.pitch.is-detail .sy-sommaire button.is-on { background: var(--ink); color: #fff; }
.pitch.is-detail [id^="sy-ed-"], .pitch.is-detail #sy-hypotheses, .pitch.is-detail #sy-comptes { scroll-margin-top: calc(var(--header-h) + 150px); }
@media (max-width: 640px) {
  .pitch.is-detail .sy-chapitre { padding: 20px 16px; border-radius: 18px; }
  .pitch.is-detail .sy-sommaire { position: static; flex-wrap: wrap; }
  .pitch.is-detail .sy-sommaire ol { flex-wrap: wrap; overflow: visible; }
  .pitch.is-detail [id^="sy-ed-"], .pitch.is-detail #sy-hypotheses, .pitch.is-detail #sy-comptes, .pitch.is-detail .sy.is-edito .sy-chapitre { scroll-margin-top: 110px; }
}

/* ═══════════ Pitch · En détail, en article ═══════════
   Le détail se lit comme un dossier imprimé : l'ouverture en très grand —
   chiffre d'affaires, résultat, marge —, les six chiffres sur une règle, puis
   chaque partie avec son grand titre, trois chiffres, son dessin, et un filet
   avant la suivante. Les panneaux blancs empilés sont partis ; seuls les
   tableaux et les cascades gardent un cadre, parce qu'on les consulte. */
.pitch.is-detail .sy.is-edito { gap: 0; grid-template-columns: minmax(0, 1fr); }
.pitch.is-detail .sy.is-edito > * { min-width: 0; }
.sy.is-edito .sy-intro { padding: 2px 0 var(--s-5); border-top: 0; }
.sy.is-edito .sy-intro .sy-act-no > span { font: 600 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.sy.is-edito .sy-intro .sy-act-title { margin-top: 8px; max-width: 34ch; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.03em; }
.sy-intro-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-4); border-top: 1.5px solid var(--ink); }
.sy-intro-fig { display: grid; gap: 2px; align-content: start; padding: 10px 16px 2px 0; margin-right: 16px; border-right: 1px solid var(--rule); min-width: 0; }
.sy-intro-fig:last-child { border-right: 0; margin-right: 0; }
.sy-intro-fig b { font: 800 clamp(24px, 2.1vw, 30px)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sy-intro-fig.is-bad b { color: var(--loss); }
.sy-intro-fig.is-good b { color: var(--gain); }
.sy-intro-fig span { font-size: 13px; color: var(--ink-3); }
.sy-intro-suite { margin: var(--s-3) 0 0; max-width: 80ch; font: 600 15px/1.5 var(--display); color: var(--ink-2); }

.sy.is-edito .sy-figs.is-compact { padding: var(--s-5) 0 var(--s-5); border-top: 1px solid var(--rule); }
.sy.is-edito .sy-figs.is-compact .sy-act-title { font-size: clamp(20px, 1.8vw, 24px); }
.sy-figs-grid.is-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; align-items: start; margin-top: 16px; border-top: 1.5px solid var(--ink); }
.sy-figs-grid.is-six .sy-fig { border-bottom: 0; border-right: 1px solid var(--rule); padding-right: 14px; margin-right: 14px; min-width: 0; }
.sy-figs-grid.is-six .sy-fig:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.sy-figs-grid.is-six .sy-fig-head { padding: 10px 0 8px; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'label' 'val' 'note' 'more'; gap: 4px; }
.sy-figs-grid.is-six .sy-fig-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.sy-figs-grid.is-six .sy-fig-val { font-size: 20px; white-space: nowrap; }
.sy-figs-grid.is-six .sy-fig-head > .sy-vis, .sy-figs-grid.is-six .sy-fig-head > svg { display: none; }
.sy-figs-grid.is-six .sy-fig-more { grid-area: more; justify-self: start; margin-top: 4px; }

.pitch.is-detail .sy.is-edito .sy-chapitre { padding: var(--s-6) 0 var(--s-5); border-radius: 0; background: transparent; box-shadow: none; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 150px); }
.pitch.is-detail .sy.is-edito .sy-chapitre .sy-act-no { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.sy-ed .sy-act-title { max-width: 34ch; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -.025em; }
.sy-clair.sy-ed-dit { margin: 8px 0 0; padding: 0; background: none; box-shadow: none; max-width: 80ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.sy-ed-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: var(--s-4); border-top: 1.5px solid var(--ink); }
.sy-ed-fig { display: grid; gap: 2px; align-content: start; padding: 10px 16px 2px 0; margin-right: 16px; border-right: 1px solid var(--rule); min-width: 0; }
.sy-ed-fig:last-child { border-right: 0; margin-right: 0; }
.sy-ed-fig-l { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sy-ed-fig-v { font: 800 24px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sy-ed-fig.is-bad .sy-ed-fig-v { color: var(--loss); }
.sy-ed-fig.is-good .sy-ed-fig-v { color: var(--gain); }
.sy-ed-fig-n { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.sy-ed-dessin { margin-top: var(--s-4); max-width: 820px; }
.sy-ed .as-table-wrap { margin-top: var(--s-4); padding: 4px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.sy-ed .as-cascade { padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.sy-ed-sous { margin-top: var(--s-5); }
.sy-ed-sous h3 { margin: 0 0 8px; font: 700 var(--t-block)/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.sy-ed-note { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.sy-ed-pieges { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.sy-ed-pieges b { color: var(--ink); }
.sy-ed .sy-why { margin-top: var(--s-3); }
.sy-ed-lien { margin-top: 14px; }
@media (max-width: 1100px) { .sy-figs-grid.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sy-figs-grid.is-six .sy-fig:nth-child(3n) { border-right: 0; margin-right: 0; padding-right: 0; } }
@media (max-width: 640px) {
  .sy-intro-figs { grid-template-columns: minmax(0, 1fr); }
  .sy-intro-fig { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
  .sy-figs-grid.is-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-figs-grid.is-six .sy-fig { border-right: 0; margin-right: 0; padding-right: 10px; border-bottom: 1px solid var(--rule); }
  .pitch.is-detail .sy.is-edito .sy-chapitre { padding: var(--s-5) 0 var(--s-4); }
  .sy-ed-figs { grid-template-columns: minmax(0, 1fr); }
  .sy-ed-fig { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
  .sy-ed-fig-v { font-size: 21px; }
}

/* ═══════════ Un avertissement ouvert passe devant tout ═══════════
   La bulle « à vérifier » s'ouvrait sous le guide flottant (« Prochaine
   étape », en bas à droite) et sous la barre du haut : on lisait la moitié
   d'une phrase. Ouverte, elle et le bloc qui la porte passent au-dessus de
   tous les calques de la page — seules les fenêtres de dialogue restent
   devant. */
.sx:has(.garde[open]), .sy-act:has(.garde[open]), .sx-right-row:has(.garde[open]), .sx-ribbon:has(.garde[open]) { position: relative; z-index: 150; }
.sx-right-row .garde-body, .sx-ribbon-ctrl .garde-body { z-index: 150; }

/* Charges par vente : deux choix, côte à côte. */
.cost-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); flex: none; }
.cost-seg-opt { border: 0; background: none; cursor: pointer; padding: 6px 11px; border-radius: 8px; font: 600 12.5px/1.2 var(--sans); color: var(--ink-3); white-space: nowrap; }
.cost-seg-opt:hover { color: var(--ink); }
.cost-seg-opt.is-on { background: var(--ink); color: var(--accent); }
.cost-forfait { border: 0; cursor: pointer; padding: 4px 9px; border-radius: 999px; background: var(--warn-wash); color: var(--warn); font: 600 11.5px/1.2 var(--sans); white-space: nowrap; }
.cost-forfait:hover { background: var(--warn); color: #fff; }
@media (max-width: 640px) { .cost-seg { width: 100%; } .cost-seg-opt { flex: 1; } }

/* Le « i » d'un champ : à côté du libellé, à sa taille, et sa bulle part vers
   la droite — centrée, elle sortait de la colonne de gauche. Elle passe
   devant la barre d'étape comme devant le reste. */
.switch-name-i { display: inline-flex; align-items: center; gap: 6px; }
.info-point.is-champ { width: 18px; height: 18px; font-size: 11.5px; z-index: 150; }
.info-point.is-champ::after { left: -8px; z-index: 150; transform: translate(0, -4px); }
.info-point.is-champ:hover::after, .info-point.is-champ:focus-visible::after, .info-point.is-champ.is-open::after { transform: translate(0, 0); }
@media (max-width: 720px) {
  .info-point.is-champ::after { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-width: none; transform: none !important; }
}

/* ═══════════ Le libellé dans le champ ═══════════
   Au-dessus du cadre, le libellé coûtait une ligne à chaque rangée de
   champs. Il se pose maintenant dans le cadre, en petit, au-dessus de la
   valeur : le champ dit toujours ce qu'il contient — même rempli — et la
   rangée gagne une ligne. Un cadre « nu » (un bouton rangé comme un champ)
   garde son libellé au-dessus. */
.field:has(> .control:not(.control-bare)) { position: relative; gap: 4px; }
.field:has(> .control:not(.control-bare)) > label {
  position: absolute; z-index: 1; top: 5px; left: 11px; right: 11px; margin: 0;
  display: block; font: 500 10.5px/1.25 var(--sans); color: var(--ink-4); letter-spacing: .005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.field:has(> .control:not(.control-bare)) > label :is(button, a) { pointer-events: auto; vertical-align: -2px; margin-left: 4px; }
.field:has(> .control:not(.control-bare)) > .control :is(input, select) { padding-top: 19px; padding-bottom: 5px; }
.field:has(> .control:not(.control-bare)) > .control textarea { padding-top: 21px; }
/* Un montant à unités (€ / mois, € / an) : le libellé s'arrête avant les boutons d'unité. */
.field:has(> .unit-control) > label { right: auto; max-width: calc(100% - 175px); }
.field:has(> .control:not(.control-bare)) > .control .affix { align-items: flex-end; padding-bottom: 8px; }
.field:has(> .control:not(.control-bare)) > .control:focus-within ~ label,
.field:has(> .control:not(.control-bare)):focus-within > label { color: var(--ink-2); }
.grid-fields > .field:has(> .control:not(.control-bare)) { grid-template-rows: auto 1fr; }

/* L'en-tête d'une offre : les chiffres de l'année lue, sur la même ligne. */
.item-figs { display: flex; align-items: baseline; gap: 12px; flex: none; white-space: nowrap; font-size: 12.5px; color: var(--ink-4); }
.item-figs b { font: 650 13.5px/1.2 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.item-figs .is-marge b { color: var(--gain); }
.item-figs .is-marge.is-neg b { color: var(--loss); }
.item-garde {
  flex: none; border: 0; cursor: pointer; white-space: nowrap; padding: 4px 10px; border-radius: 999px;
  background: var(--warn-wash); color: var(--warn); font: 600 12px/1.2 var(--sans);
}
.item-garde:hover { background: var(--warn); color: #fff; }
.item-annees { display: inline-flex; gap: 2px; flex: none; }
.item-an { border: 0; background: none; cursor: pointer; padding: 3px 6px; border-radius: 6px; font: 600 11px/1.2 var(--mono); color: var(--ink-4); }
.item-an:hover { color: var(--ink); background: var(--surface-2); }
.item-an.is-on { background: var(--ink); color: var(--accent); }
@media (max-width: 760px) {
  .item-figs .is-marge, .item-annees { display: none; }
}

/* ─── Mes scénarios : une grille, sans défilement ─── */
.scen-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.scen-case {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface);
}
.scen-case.is-actuel { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--accent); }
.scen-tete { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scen-nom { flex: 1 1 auto; min-width: 0; font: 700 14px/1.3 var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scen-actuel { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--accent); font: 600 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.scen-date { font-size: 12px; color: var(--ink-4); }
.scen-gestes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.scen-geste { border: 0; background: none; padding: 2px 0; cursor: pointer; font: 600 12px/1.3 var(--sans); color: var(--ink-2); }
.scen-geste:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.scen-geste.is-ouvrir { color: var(--signal-ink); }
.scen-geste.is-supprimer { color: var(--loss); }

/* ─────────────── Fynomia en ligne : compte, connexion, calcul ───────────────
   Hors de la charpente, comme le parcours guidé : une carte au centre, le
   papier autour. La marque reprend l'encre et le vert de la maison. */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; background: var(--paper); }
.auth-carte { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 28px 28px 22px; }
.auth-marque { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--accent); display: grid; place-items: center; font: 800 18px/1 var(--display); }
.auth-nom { font: 700 17px/1 var(--display); color: var(--ink); letter-spacing: -.01em; }
.auth-titre { font: 700 26px/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 6px; color: var(--ink); }
.auth-sous { margin: 0 0 20px; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.auth-field .control input { width: 100%; }
.auth-bouton { width: 100%; justify-content: center; margin-top: 4px; }
/* Continuer avec Google : blanc, logo en couleurs, comme Google le demande. */
.auth-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; text-decoration: none; font-weight: 500; }
.auth .auth-google { width: 100%; }
.auth-google:hover { background: #f8f9fa; border-color: #c6c9cc; color: #1f1f1f; }
.auth-google-logo { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }
.auth-google-logo svg { width: 18px; height: 18px; }
.auth-ou { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; color: var(--ink-3); font-size: 12.5px; }
.auth-ou::before, .auth-ou::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.auth-message { margin: 0; min-height: 1.4em; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.auth-message.is-erreur { color: var(--loss); }
.auth-message.is-ok { color: var(--gain); }
.auth-pied { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; }
.auth-pied a { color: var(--signal-ink); text-decoration: none; }
.auth-pied a:hover { text-decoration: underline; }
.auth-attente { text-align: center; color: var(--ink-3); font-size: 14px; }
.auth-attente .auth-marque { justify-content: center; }

/* Le calcul part au serveur : un fil fin en haut de page, le temps de
   l'aller-retour. Rien ne bouge d'autre ; les chiffres suivent à l'arrivée. */
.calcul-fil { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(90deg, transparent, var(--accent-dim), transparent); background-size: 40% 100%; background-repeat: no-repeat; }
html.is-calcul .calcul-fil { opacity: 1; animation: calcul-fil 1.1s linear infinite; }
@keyframes calcul-fil { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { html.is-calcul .calcul-fil { animation: none; background: var(--accent-dim); opacity: .6; } }

/* L'administration : la bande dit dans quel mode on est, en permanence. */
.admin-bande { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 9px 14px; margin: 0 0 16px; background: var(--ink); color: var(--paper); border-radius: 10px; font-size: 13px; }
.admin-bande b { color: var(--accent); letter-spacing: .06em; font-size: 12px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 16px; }
.admin-stat { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.admin-stat-v { font: 700 22px/1.1 var(--display); color: var(--ink); }
.admin-stat-l { font-size: 12.5px; color: var(--ink-3); }
.admin-onglets { display: flex; gap: 6px; margin: 0 0 12px; }
.admin-onglet { border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.admin-onglet.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.admin-recherche { min-width: 260px; }
.admin-recherche input { width: 100%; }
.admin-ligne { cursor: pointer; }
.admin-ligne:hover td { background: var(--surface-2); }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.admin-plan { background: var(--surface-2); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.admin-plan h3 { margin: 0 0 4px; font-size: var(--t-row); }