/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    MODULE REPORTING — où en est l'exercice, comparé (préfixe `rep-`).

    Écran plein cadre, par-dessus le hub, bâti comme le module Création : un en-tête qui dit où l'on
    est, une SURFACE DE CONTRÔLE qui ne bouge jamais (la fenêtre lue, la base comparée, la vue), et
    un corps qui change.

    Trois partis pris de dessin, et ils sont des décisions de lecture :
      · le tableau de bord tient sur UNE page — un reporting qu'on fait défiler pour trouver son sujet
        n'a pas de sujet ; les états et le détail mensuel sont des vues, pas des sections ;
      · la COULEUR SÉMANTIQUE est réservée aux écarts. Les cartes n'ont pas de teinte d'humeur : elles
        sont des éclaircies du texte sur le fond, comme dans le module Création ;
      · un seul chiffre domine (le titre du constat), le reste se range dessous. Une grille de tuiles
        de même poids ne dit pas ce qu'il faut lire en premier.

    Jetons locaux rebranchés sur tokens.css, jamais de couleur en dur hors de ce bloc.
    ⚠️ Toute modification ici doit bumper le `?v=` de reporting.css dans index.html.
    ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.rep-root {
    --rep-gap: 1.25rem;
    --rep-ink: var(--color-text-primary);
    --rep-sub: var(--color-text-secondary);
    --rep-dim: var(--color-text-dim);
    --rep-line: var(--color-border-light);
    --rep-accent: var(--color-teal);
    --rep-ok: var(--color-success);
    --rep-warn: var(--color-warning);
    --rep-bad: var(--color-danger);
    --rep-tint: color-mix(in srgb, var(--rep-ink) 3%, transparent);
    --rep-tint-2: color-mix(in srgb, var(--rep-ink) 5%, transparent);
    --rep-hair: color-mix(in srgb, var(--rep-ink) 9%, transparent);
    --rep-on: var(--brand-contrast, #04121a);

    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    /*  🚨 La couleur de repli reste en dur : un fond plein ne doit jamais dépendre d'un jeton qui
        manque, sinon le module s'ouvre transparent par-dessus le hub. */
    background:
        radial-gradient(1200px 640px at 8% -10%, color-mix(in srgb, var(--rep-accent) 18%, transparent), transparent 60%),
        radial-gradient(900px 520px at 98% -4%, color-mix(in srgb, var(--brand2, #44C1A3) 11%, transparent), transparent 55%),
        var(--surf-app, #071d28);
    color: var(--rep-ink);
    font-family: var(--font-family);
    overflow: hidden;
}

html[data-theme="light"] .rep-root {
    --rep-tint: color-mix(in srgb, var(--rep-ink) 4%, transparent);
    --rep-tint-2: color-mix(in srgb, var(--rep-ink) 6%, transparent);
    --rep-hair: color-mix(in srgb, var(--rep-ink) 12%, transparent);
    background:
        radial-gradient(1200px 640px at 8% -10%, color-mix(in srgb, var(--rep-accent) 10%, transparent), transparent 58%),
        radial-gradient(900px 520px at 98% -4%, color-mix(in srgb, var(--brand2, #44C1A3) 7%, transparent), transparent 54%),
        var(--surf-app, #f6f9fb);
}

/* ── L'en-tête ───────────────────────────────────────────────────────────────────────────────── */
.rep-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 22px 12px;
    border-bottom: 1px solid var(--rep-hair);
}
.rep-head-m { font: 900 12px/1 var(--font-family); letter-spacing: .12em; text-transform: uppercase; color: var(--rep-accent); }
.rep-head-bar { width: 1px; height: 17px; background: var(--rep-hair); }
.rep-head-t { font: 700 14.5px/1.2 var(--font-family); letter-spacing: -.012em; }
.rep-head-s { font-size: 12px; color: var(--rep-dim); }
.rep-head-sp { flex: 1; }

/*  La promesse locale, une fois et une seule : le module est ouvert à tous, il doit dire pourquoi il
    peut l'être. La redire ailleurs sur l'écran la ferait relire, donc ignorer. */
.rep-puce {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--rep-ok) 34%, transparent);
    background: color-mix(in srgb, var(--rep-ok) 8%, transparent);
    font-size: 10.5px; font-weight: 600; color: var(--rep-ok);
}
.rep-puce > svg { color: var(--rep-ok); }

.rep-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 33px; padding: 0 13px; border-radius: 9px;
    border: 1px solid var(--rep-hair); background: transparent;
    color: var(--rep-sub); font: 600 12.5px var(--font-family); cursor: pointer;
}
.rep-btn:hover { background: var(--rep-tint); color: var(--rep-ink); }
.rep-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 0; border-radius: 9px;
    background: transparent; color: var(--rep-sub); cursor: pointer;
}
.rep-x:hover { background: var(--rep-tint-2); color: var(--rep-ink); }

/* ── La surface de contrôle ──────────────────────────────────────────────────────────────────── */
.rep-ctrl {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 22px;
    border-bottom: 1px solid var(--rep-hair);
    background: var(--rep-tint);
}
.rep-pt { width: 7px; height: 7px; border-radius: 999px; background: var(--rep-ok); flex: 0 0 auto; }
.rep-lbl { font: 700 10px/1 var(--font-family); letter-spacing: .08em; text-transform: uppercase; color: var(--rep-dim); }
.rep-fen { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rep-sep { width: 1px; height: 20px; background: var(--rep-hair); }
.rep-note { font-size: 11.5px; color: var(--rep-dim); }
.rep-sel {
    height: 31px; padding: 0 9px; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--rep-accent) 45%, transparent);
    background: color-mix(in srgb, var(--rep-accent) 12%, transparent);
    color: var(--rep-ink); font: 700 12.5px var(--font-family);
}
.rep-root .rep-seg .iku-seg-b { font-size: 12px; padding: 0 12px; min-height: 0; height: 28px; }

/* ── Le corps ────────────────────────────────────────────────────────────────────────────────── */
.rep-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 22px 18px; }
.rep-vide { margin: 0; padding: 60px 0; text-align: center; color: var(--rep-sub); }

.rep-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--rep-hair);
    background: var(--rep-tint);
}
.rep-card-h { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.rep-card-s { font-size: 11.5px; color: var(--rep-dim); }
.rep-h2 { margin: 0; font: 700 11.5px/1.2 var(--font-family); letter-spacing: .09em; text-transform: uppercase; color: var(--rep-accent); }
.rep-oeil { font: 700 10px/1.3 var(--font-family); letter-spacing: .1em; text-transform: uppercase; color: var(--rep-dim); }

/*  Le sens, jamais le signe : une charge qui monte est `is-bad` même si son écart est positif. */
.is-ok { color: var(--rep-ok); }
.is-bad { color: var(--rep-bad); }

/* ── Tableau de bord ─────────────────────────────────────────────────────────────────────────── */
.rep-bord { display: flex; flex-direction: column; gap: 12px; min-height: 100%; }

.rep-constat { display: grid; grid-template-columns: minmax(0, 1fr) 27rem; gap: 26px; align-items: center; }
.rep-t { margin: 6px 0 0; font: 800 33px/1.1 var(--font-family); letter-spacing: -.028em; text-wrap: balance; }
.rep-p { margin: 9px 0 0; max-width: 74ch; font-size: 14.5px; line-height: 1.55; color: var(--rep-sub); }
.rep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.rep-chip {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--rep-hair); background: var(--rep-tint-2);
    font-variant-numeric: tabular-nums;
}
.rep-chip > span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rep-dim); }
.rep-chip > b { font-size: 14px; }
.rep-chip.is-ok { border-color: color-mix(in srgb, var(--rep-ok) 34%, transparent); background: color-mix(in srgb, var(--rep-ok) 9%, transparent); }
.rep-chip.is-bad { border-color: color-mix(in srgb, var(--rep-bad) 36%, transparent); background: color-mix(in srgb, var(--rep-bad) 10%, transparent); }
.rep-chip.is-ok > b { color: var(--rep-ok); }
.rep-chip.is-bad > b { color: var(--rep-bad); }

.rep-att { padding: 15px 17px; border-radius: 14px; border: 1px solid var(--rep-hair); background: var(--rep-tint-2); }
.rep-att-l { display: flex; align-items: flex-end; gap: 16px; margin-top: 9px; }
.rep-att-v { font: 800 31px/1 var(--font-family); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rep-att-v2 { font: 800 20px/1.1 var(--font-family); font-variant-numeric: tabular-nums; }
.rep-att-c { padding-left: 15px; border-left: 1px solid var(--rep-hair); }
.rep-att-s { margin-top: 3px; font-size: 11px; color: var(--rep-dim); }
.rep-att-p { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--rep-dim); }

.rep-preuve { flex: 1; min-height: 17rem; display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 14px; }
.rep-graphe { display: flex; flex-direction: column; }
.rep-g { flex: 1; min-height: 9rem; margin-top: 10px; }
.rep-g > svg { width: 100%; height: 100%; }
.rep-g-ax { stroke: color-mix(in srgb, var(--rep-ink) 22%, transparent); stroke-width: 1; }
.rep-g-gr { stroke: color-mix(in srgb, var(--rep-ink) 6%, transparent); stroke-width: 1; }
.rep-g-b { fill: var(--rep-accent); }
.rep-g-p { fill: none; stroke: var(--rep-dim); stroke-width: 2.2; stroke-linejoin: round; }
.rep-g-x, .rep-g-d { display: grid; text-align: center; font-variant-numeric: tabular-nums; }
.rep-g-x { font-size: 11px; color: var(--rep-dim); }
.rep-g-d { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rep-hair); font-size: 12px; font-weight: 700; }
.rep-g-f { display: flex; align-items: baseline; margin-top: 4px; font-size: 10.5px; color: var(--rep-dim); }
.rep-g-f b { font-variant-numeric: tabular-nums; }
.rep-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--rep-sub); }
.rep-leg i { width: 11px; height: 11px; border-radius: 3px; background: var(--rep-accent); }
.rep-leg i.rep-leg-l { width: 15px; height: 2px; border-radius: 0; background: var(--rep-dim); }
.rep-leg i.rep-leg-ok { background: color-mix(in srgb, var(--rep-ok) 55%, transparent); }
.rep-leg i.rep-leg-ko { background: color-mix(in srgb, var(--rep-bad) 55%, transparent); }

/*  Le sélecteur d'agrégat : ce n'est pas une liste d'indicateurs choisis d'avance, c'est le plan
    comptable du dossier. Le panneau flotte au-dessus du graphique plutôt que de pousser la page. */
.rep-agr { position: relative; }
.rep-agr-b {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--rep-accent) 45%, transparent);
    background: color-mix(in srgb, var(--rep-accent) 12%, transparent);
    color: var(--rep-ink); font: 700 13.5px var(--font-family); cursor: pointer;
}
.rep-agr-b > svg { color: var(--rep-accent); }
.rep-agr-p {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
    width: 24rem; max-height: 24rem; display: flex; flex-direction: column;
    border-radius: 12px; border: 1px solid color-mix(in srgb, var(--rep-accent) 40%, transparent);
    background: var(--surf-1, #0a2632);
    box-shadow: 0 18px 44px rgb(0 0 0 / .45);
    overflow: hidden;
}
.rep-agr-r { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--rep-hair); color: var(--rep-dim); }
.rep-agr-i { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--rep-ink); font: 500 12.5px var(--font-family); outline: none; }
.rep-agr-l { flex: 1; min-height: 0; overflow: auto; padding: 5px 0; }
.rep-agr-g { padding: 8px 13px 4px; font: 700 9.5px/1 var(--font-family); letter-spacing: .1em; text-transform: uppercase; color: var(--rep-dim); }
.rep-agr-o {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 13px; border: 0; border-left: 3px solid transparent;
    background: transparent; color: var(--rep-ink);
    font: 500 12.5px var(--font-family); text-align: left; cursor: pointer;
}
.rep-agr-o:hover { background: var(--rep-tint-2); }
.rep-agr-o.is-sub { padding-left: 27px; font-style: italic; color: var(--rep-sub); }
.rep-agr-o.is-on { border-left-color: var(--rep-accent); background: color-mix(in srgb, var(--rep-accent) 16%, transparent); font-weight: 700; }
.rep-agr-o > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-agr-o > b { font-size: 11px; font-variant-numeric: tabular-nums; }

/*  Les repères : une barre par indicateur, et un TRAIT qui marque la base comparée. Un cadran ne sait
    pas montrer « où je suis » et « d'où je viens » en même temps ; une barre à repère, si. */
.rep-rep { display: flex; flex-direction: column; }
.rep-rep-l { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; margin-top: 11px; }
.rep-j-h { display: flex; align-items: baseline; gap: 7px; }
.rep-j-l { font-size: 11.5px; font-weight: 600; color: var(--rep-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-j-v { margin-left: auto; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rep-j-e { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rep-j-t { position: relative; height: 6px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, var(--rep-ink) 10%, transparent); }
.rep-j-f { position: absolute; left: 0; top: 0; height: 6px; border-radius: 999px; background: var(--rep-accent); }
.rep-j-f.is-ok { background: var(--rep-ok); }
.rep-j-f.is-bad { background: var(--rep-bad); }
.rep-j-m { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 1px; background: var(--rep-ink); }

.rep-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rep-pont { margin-top: 10px; }
.rep-pont > svg { width: 100%; height: auto; }
.rep-pt-a { fill: var(--rep-dim); }
.rep-pt-b { fill: var(--rep-accent); }
.rep-pt-p { fill: var(--rep-ok); }
.rep-pt-n { fill: var(--rep-bad); }
.rep-pt-j { stroke: color-mix(in srgb, var(--rep-ink) 26%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.rep-pt-vp { fill: var(--rep-ok); font: 700 10px var(--font-family); text-anchor: middle; }
.rep-pt-vn { fill: var(--rep-bad); font: 700 10px var(--font-family); text-anchor: middle; }
/*  Libellés et montants du pont : du HTML sous le dessin, jamais des <text> SVG (Razor réserve
    cette balise). Ils y gagnent la typographie et les jetons du thème. */
.rep-pont-x { display: grid; margin-top: 7px; text-align: center; }
.rep-pont-x > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-pont-x b { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rep-pont-x i { font-style: normal; font-size: 9.5px; line-height: 1.25; color: var(--rep-dim); overflow: hidden; text-overflow: ellipsis; }

.rep-lev { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 11px; margin-top: 11px; }
.rep-lev-c { padding: 11px 13px; border-radius: 11px; border: 1px solid var(--rep-hair); background: var(--rep-tint-2); }
.rep-lev-v { font: 800 21px/1 var(--font-family); letter-spacing: -.02em; color: var(--rep-ok); font-variant-numeric: tabular-nums; }
.rep-lev-t { margin-top: 5px; font-size: 12.5px; font-weight: 700; }
.rep-lev-p { margin: 4px 0 0; font-size: 11px; line-height: 1.45; color: var(--rep-dim); }
.rep-lev-rien { margin: 11px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--rep-dim); }

/* ── Les trois états, et le détail mensuel ───────────────────────────────────────────────────── */
.rep-etats, .rep-mois { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.rep-etats-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/*  🚨 Sans hauteur explicite, `.ftt-wrap` (height: 100%) s'effondre sur un parent en hauteur auto :
    le tableau disparaît sans la moindre erreur. Même piège que dans le module Création. */
.rep-tab { flex: 1; min-height: 22rem; padding: 0; overflow: hidden; }
.rep-tab .ftt-wrap { height: 100%; }

.rep-grille { flex: 1; min-height: 0; padding: 0; overflow: auto; }
.rep-gt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rep-gt th, .rep-gt td { padding: 6px 10px; font-size: 12px; text-align: right; white-space: nowrap; }
.rep-gt thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surf-1, #0a2632);
    border-bottom: 1px solid var(--rep-hair);
    font: 700 10px/1.2 var(--font-family); letter-spacing: .07em; text-transform: uppercase; color: var(--rep-dim);
}
.rep-gt .rep-gt-p { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surf-1, #0a2632); font-weight: 500; }
.rep-gt thead .rep-gt-p { z-index: 3; }
.rep-gt .rep-gt-c { border-left: 1px solid var(--rep-hair); font-weight: 800; }
.rep-gt tbody tr.is-total > .rep-gt-p, .rep-gt tbody tr.is-total > td { font-weight: 700; }
.rep-gt tbody tr.is-titre > .rep-gt-p {
    padding-top: 12px; font: 700 10px/1.2 var(--font-family); letter-spacing: .09em;
    text-transform: uppercase; color: var(--rep-accent);
}
.rep-gt tbody tr:hover > td, .rep-gt tbody tr:hover > .rep-gt-p { background-color: var(--rep-tint); }

/* ── Écrans étroits ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .rep-constat, .rep-preuve, .rep-bas { grid-template-columns: minmax(0, 1fr); }
    .rep-t { font-size: 29px; }
    .rep-note { display: none; }
}
@media (max-width: 720px) {
    .rep-head, .rep-ctrl { padding-left: 14px; padding-right: 14px; }
    .rep-body { padding: 14px; }
    .rep-puce, .rep-head-s { display: none; }
    /*  🚨 Le libellé du bouton passait sur deux lignes et poussait la croix hors de l'écran (constaté à
        390 px). Sous 720 px il ne reste que l'icône — la cible tactile, elle, garde ses 44 px. */
    .rep-btn { width: 44px; min-width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
    .rep-head { gap: 8px; }
    .rep-head-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rep-t { font-size: 25px; }
    .rep-agr-p { width: min(24rem, calc(100vw - 32px)); }
}

/* ── « Et après ? » : le pont vers le pilotage ────────────────────────────────────────────────── */
/*  Deux fins d'année côte à côte, et la frontière du réalisé TRACÉE sur la courbe. Sans cette barre,
    un mois projeté se lit comme une écriture — c'est la seule chose que cet écran ne doit pas laisser
    faire. */
.rep-apres { display: flex; flex-direction: column; gap: 14px; max-width: 78rem; }
.rep-t2 { margin: 0; font: 800 26px/1.15 var(--font-family); letter-spacing: -.024em; text-wrap: balance; }

.rep-g-an { min-height: 12rem; }
.rep-g-bp { fill: color-mix(in srgb, var(--rep-accent) 26%, transparent); stroke: var(--rep-accent); stroke-width: 1.4; stroke-dasharray: 4 3; }
.rep-g-fc { fill: color-mix(in srgb, var(--rep-accent) 5%, transparent); }
.rep-g-fr { stroke: var(--rep-accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.rep-leg i.rep-leg-pv { background: transparent; border: 1.5px dashed var(--rep-accent); }
.rep-g-x span.is-pv { color: color-mix(in srgb, var(--rep-accent) 78%, var(--rep-dim)); }

.rep-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 12px; }
.rep-fin-l { font: 700 11.5px/1.2 var(--font-family); letter-spacing: .06em; text-transform: uppercase; color: var(--rep-dim); }
.rep-fin-r { display: flex; align-items: flex-end; gap: 14px; margin-top: 9px; }
.rep-fin-v { font: 800 25px/1 var(--font-family); letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.rep-fin-v2 { font: 800 19px/1.05 var(--font-family); letter-spacing: -.02em; color: var(--rep-sub); font-variant-numeric: tabular-nums; }
.rep-fin-c { padding-left: 14px; border-left: 1px solid var(--rep-hair); }
.rep-fin-s { margin-top: 3px; font-size: 10.5px; line-height: 1.35; color: var(--rep-dim); }
.rep-fin-p { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--rep-hair); font-size: 11.5px; line-height: 1.45; }

.rep-passe-l { margin: 11px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; line-height: 1.55; color: var(--rep-sub); }
.rep-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 42px; margin-top: 14px; padding: 0 20px; border: 0; border-radius: 11px;
    background: var(--rep-accent); color: var(--rep-on);
    font: 700 13.5px var(--font-family); cursor: pointer;
}
.rep-cta:hover { filter: brightness(1.08); }

@media (max-width: 720px) {
    .rep-t2 { font-size: 21px; }
    .rep-fin-r { flex-direction: column; align-items: flex-start; gap: 10px; }
    .rep-fin-c { padding-left: 0; padding-top: 10px; border-left: 0; border-top: 1px solid var(--rep-hair); width: 100%; }
    .rep-cta { width: 100%; }
}
.rep-passe-p { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--rep-ink); }

/*  Fiabilité du provisoire : une pastille sur la surface de contrôle, pas un écran à ouvrir. Un mois à
    moitié saisi tire tous les cumuls vers le bas — le taire serait pire que de l'afficher. */
.rep-fiab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--rep-warn) 38%, transparent);
    background: color-mix(in srgb, var(--rep-warn) 9%, transparent);
    font-size: 10.5px; font-weight: 600; color: var(--rep-warn);
}
.rep-maj { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rep-maj > div { flex: 1 1 22rem; min-width: 0; }
.rep-maj-p { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: var(--rep-sub); }
.rep-cta2 {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 40px; padding: 0 18px; flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--rep-accent) 45%, transparent);
    border-radius: 11px; background: color-mix(in srgb, var(--rep-accent) 12%, transparent);
    color: var(--rep-ink); font: 700 13px var(--font-family); cursor: pointer;
}
.rep-cta2:hover { background: color-mix(in srgb, var(--rep-accent) 20%, transparent); }
@media (max-width: 720px) { .rep-cta2 { width: 100%; } }

/* ── Le budget des douze prochains mois ───────────────────────────────────────────────────────── */
.rep-crois { display: flex; gap: 2px; padding: 2px; border-radius: 9px; border: 1px solid var(--rep-hair); }
.rep-crois-b {
    height: 28px; padding: 0 11px; border: 0; border-radius: 7px;
    background: transparent; color: var(--rep-sub);
    font: 600 12px var(--font-family); font-variant-numeric: tabular-nums; cursor: pointer;
}
.rep-crois-b:hover { background: var(--rep-tint-2); color: var(--rep-ink); }
.rep-crois-b.is-on { background: var(--rep-accent); color: var(--rep-on); font-weight: 700; }

.rep-bud { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; margin-top: 13px; }
.rep-bud-c { padding: 13px 15px; border-radius: 12px; border: 1px solid var(--rep-hair); background: var(--rep-tint-2); }
.rep-bud-c.is-fort { border-color: color-mix(in srgb, var(--rep-accent) 34%, transparent); background: color-mix(in srgb, var(--rep-accent) 7%, transparent); }
.rep-bud-l { font: 700 10px/1.25 var(--font-family); letter-spacing: .075em; text-transform: uppercase; color: var(--rep-dim); }
.rep-bud-v { margin-top: 6px; font: 800 25px/1 var(--font-family); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.rep-bud-s { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--rep-sub); font-variant-numeric: tabular-nums; }
.rep-bud-p { margin: 13px 0 0; max-width: 92ch; font-size: 12.5px; line-height: 1.6; color: var(--rep-sub); }
.rep-bud-p.is-fine { margin-top: 7px; font-size: 11.5px; color: var(--rep-dim); }

/*  La frontière, quand elle est fermée. Deux phrases, jamais par la négative, et la raison économique
    affirmée — pas une liste de ce qu'on n'a pas. Aucun prix : le chemin vers l'offre est chez l'hôte. */
.rep-mur { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rep-mur > div { flex: 1 1 26rem; min-width: 0; }
.rep-mur-t { font-size: 14px; font-weight: 800; }
.rep-mur-p { margin: 9px 0 0; max-width: 84ch; font-size: 13.5px; line-height: 1.6; color: var(--rep-sub); }
.rep-mur-p.is-trait { margin-top: 10px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--rep-accent) 55%, transparent); }