/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    TRÉSORERIE À 13 SEMAINES (2026-10-14) : préfixe `t13-` (Pages/Tresorerie13SemainesVue.razor).

    Plein cadre dans la peau du module Reporting : `.rep-root` (sol du hub, jetons `--rep-*`, en-tête), `rep-card`, tableaux
    `pg-tab` de « Prévisions tenues ? ». Rien ici n'invente une couleur. Le lien de la carte « Simuler mes décisions » du hub
    (`.t13-lien`) suit les jetons du hub (--brand).
    ⚠️ Toute modification ici doit bumper le `?v=` de tresorerie-13-semaines.css dans index.html.
    ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/*  Au-dessus du simulateur (fenêtre des vues, 1000) et du Reporting (1200), qui peuvent l'ouvrir. */
.rep-root.t13-root { z-index: 1250; }
/*  Avec une image d'ambiance, le sol de `.rep-root` est un voile translucide (entry.css) : ouverte depuis le simulateur, la vue
    laissait voir le simulateur au travers (titres et courbes mêlés, relevé le 14/10 à 1 000 px). Comme le hub (entry.css),
    les fenêtres qui l'ouvrent sont masquées tant qu'elle est là : seule la photo transparaît. Elles restent montées.
    Opacité et non `visibility` : la vue active du simulateur (`.intent-popup-view-wrapper.active`) pose son propre
    `visibility: visible`, qui l'emporte sur un parent masqué (mesuré : le simulateur restait visible). */
html[data-fond] body:has(.t13-root) :is(.intent-popup-backdrop, .rep-root:not(.t13-root)) { opacity: 0; pointer-events: none; }

.t13 { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── L'en-tête : le constat, et les hypothèses ──────────────────────────────────────────────── */
.t13-tete { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 26px; align-items: start; }
.t13-tete-t { min-width: 0; }
.t13-banque { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--rep-sub); }
.t13-banque-l { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1.3 var(--font-family); letter-spacing: .06em; text-transform: uppercase; color: var(--rep-dim); }
.t13-banque-l i { width: 14px; height: 0; border-top: 2px dotted var(--rep-warn); }

.t13-hyp { padding: 16px; border-radius: var(--rep-r-carte); border: 1px solid var(--rep-hair); background: var(--rep-tint-2); min-width: 0; }
.t13-hyp-s { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--rep-sub); }
.t13-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 12px; }
.t13-ch { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; color: var(--rep-dim); }
.t13-ch.t13-ch-l { grid-column: 1 / -1; }
.t13-ch input, .t13-in, .t13-sel {
    height: 34px; min-width: 0; padding: 0 10px; border-radius: var(--rep-r-ctrl);
    border: 1px solid var(--rep-hair); background: var(--rep-tint); color: var(--rep-ink);
    font: 500 12.5px var(--font-family); font-variant-numeric: tabular-nums;
}
.t13-ch input:focus-visible, .t13-in:focus-visible, .t13-sel:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 1px; }
.t13-in::placeholder, .t13-ch input::placeholder { color: var(--rep-dim); }
.t13-case { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--rep-sub); cursor: pointer; }
.t13-case input { margin-top: 2px; accent-color: var(--rep-accent); }
.t13-ajout { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.t13-ajout-t { flex-basis: 100%; font-size: 11px; color: var(--rep-dim); }
.t13-sel { flex: 0 0 auto; }
.t13-in { flex: 1 1 7rem; }
.t13-in.t13-in-l { flex-basis: 9rem; }
.rep-cta2.t13-ajout-b { margin-top: 0; }
.t13-ajouts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.t13-ajouts li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rep-sub); font-variant-numeric: tabular-nums; }
.t13-ajouts li b { color: var(--rep-ink); }
.t13-ajouts li i { flex: 1; min-width: 0; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t13-reinit { margin: 12px 0 0; }

/* ── La courbe ───────────────────────────────────────────────────────────────────────────────── */
.t13-graph { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rep-hair); }
.t13-graph .rep-card-h, .t13-tab .rep-card-h, .t13-coh .rep-card-h, .t13-flux .rep-card-h { margin-bottom: 10px; }
.t13-g { min-width: 0; }
/*  Échelle à gauche (14/10) : l'axe ne part pas de zéro, il le dit. */
.t13-g-c { position: relative; height: 13.75rem; display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); }
.t13-g-y { position: relative; }
.t13-g-y span {
    position: absolute; right: 8px; transform: translateY(-50%); font-size: 10.5px; color: var(--rep-dim);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.t13-g-p { position: relative; min-width: 0; }
.t13-g-c svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.t13-g-h { stroke: var(--rep-hair); stroke-width: 1; stroke-dasharray: 2 4; }
.t13-g-f0 { stop-color: var(--rep-accent); stop-opacity: .2; }
.t13-g-f1 { stop-color: var(--rep-accent); stop-opacity: 0; }
.t13-g-bas-l {
    position: absolute; transform: translate(10px, 8px); font: 700 11px/1.2 var(--font-family); color: var(--rep-warn);
    white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums;
}
.t13-g-bas-l.is-g { transform: translate(calc(-100% - 10px), 8px); }
.t13-g-l { fill: none; stroke: var(--rep-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.t13-g-a { fill: url(#t13-g-fondu); stroke: none; }
.t13-g-sem { stroke: var(--rep-hair); stroke-width: 1; }
.t13-g-0 { stroke: color-mix(in srgb, var(--rep-bad) 55%, transparent); stroke-width: 1; stroke-dasharray: 4 3; }
.t13-g-bas {
    position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
    background: var(--rep-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rep-warn) 25%, transparent);
}
.t13-g-x { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); margin: 6px 0 0 3.75rem; font-size: 10.5px; color: var(--rep-dim); text-align: center; font-variant-numeric: tabular-nums; }
.t13-g-x span.is-bas { color: var(--rep-warn); font-weight: 700; }
.rep-leg i.t13-leg-s { width: 15px; height: 2.2px; border-radius: 0; background: var(--rep-accent); }
.rep-leg i.t13-leg-b { width: 9px; height: 9px; border-radius: 50%; background: var(--rep-warn); }

/* ── Les tableaux ────────────────────────────────────────────────────────────────────────────── */
/*  Pastille de nature (devant un flux, dans les totaux et les factures). */
.t13-pt { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--rep-dim); }
.t13-pt-clients { background: var(--rep-ok); }
.t13-pt-fournisseurs { background: var(--rep-bad); }
.t13-pt-salaires { background: var(--rep-accent); }
.t13-pt-social { background: color-mix(in srgb, var(--rep-accent) 55%, var(--rep-dim)); }
.t13-pt-tva { background: var(--rep-warn); }
.t13-pt-emprunts { background: color-mix(in srgb, var(--rep-bad) 50%, var(--rep-dim)); }
/*  Méthode directe (2026-10-14) : ventes et achats à venir en couleur adoucie de leur famille (ouvertes : pleine), impôt et
    investissements dans leurs tons propres. */
.t13-pt-clients-avenir { background: color-mix(in srgb, var(--rep-ok) 50%, transparent); box-shadow: inset 0 0 0 1.5px var(--rep-ok); }
.t13-pt-fournisseurs-avenir { background: color-mix(in srgb, var(--rep-bad) 45%, transparent); box-shadow: inset 0 0 0 1.5px var(--rep-bad); }
.t13-pt-impot { background: color-mix(in srgb, var(--rep-warn) 55%, var(--rep-bad)); }
.t13-pt-invest { background: color-mix(in srgb, var(--rep-accent) 45%, var(--rep-ink)); }
.t13-pt-autres { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rep-dim); }
.t13-pt-ajouts { background: transparent; box-shadow: inset 0 0 0 2px var(--rep-accent); }

/*  Semaine par semaine. */
.t13-t { border-collapse: separate; border-spacing: 0; }
.t13-t td, .t13-t th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.t13-t tbody th {
    text-align: left; font: 500 12.5px/1.3 var(--font-family); text-transform: none; letter-spacing: normal;
    color: var(--rep-sub); width: 1%; padding-right: 18px;
}
.t13-t td, .t13-t thead tr:last-child th { padding-left: 8px; padding-right: 8px; }
.t13-t tbody td { text-align: right; }
.t13-t .t13-coin { width: 1%; }
.t13-t thead th, .t13-t .t13-coin { text-align: right; }
.t13-mois th { padding-bottom: 4px; border-bottom: 0; }
.t13-mois-c {
    text-align: left !important; font: 700 10.5px/1.2 var(--font-family); letter-spacing: .08em; text-transform: uppercase; color: var(--rep-dim);
    border-left: 1px solid var(--rep-hair); padding-left: 10px !important;
}
.t13-mois-c:first-of-type { border-left: 0; }
.t13-t thead tr:last-child th { vertical-align: bottom; }
.t13-s-n { display: block; font-weight: 700; color: var(--rep-ink); }
.t13-s-d { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--rep-dim); }
.t13-s-bas {
    display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 999px; font: 700 9.5px/1.4 var(--font-family);
    color: var(--rep-warn); background: color-mix(in srgb, var(--rep-warn) 14%, transparent);
}
.t13-t .is-mois { border-left: 1px solid var(--rep-hair); }
.t13-t .is-bas { background: color-mix(in srgb, var(--rep-warn) 8%, transparent); }
.t13-r-ouv th, .t13-r-ouv td { color: var(--rep-dim); font-size: 12px; }
.t13-r-flux:hover > * { background: var(--rep-tint); }
.t13-t td.is-pos { color: var(--rep-ok); }
.t13-t td.is-neg { color: var(--rep-sub); }
.t13-t td.is-vide { color: color-mix(in srgb, var(--rep-dim) 45%, transparent); }
.t13-r-fin th { font-weight: 700; color: var(--rep-ink); }
.t13-r-fin th, .t13-r-fin td { border-top: 1px solid var(--rep-line, var(--rep-hair)); padding-top: 10px; vertical-align: top; }
.t13-r-fin td b { display: block; font-size: 13.5px; color: var(--rep-ink); }
.t13-niv { display: block; height: 4px; margin: 6px 0 5px auto; width: 100%; max-width: 64px; border-radius: 2px; background: var(--rep-hair); overflow: hidden; }
.t13-niv i { display: block; height: 100%; margin-left: auto; border-radius: 2px; background: var(--rep-accent); }
.t13-r-fin td.is-bas .t13-niv i { background: var(--rep-warn); }
.t13-bas { display: block; font-size: 10.5px; color: var(--rep-dim); }
.t13-r-fin td.is-bas .t13-bas { color: var(--rep-warn); font-weight: 600; }
/*  La colonne des libellés reste en place quand le tableau glisse, sur un fond plein. */
.t13-t tbody th, .t13-t .t13-coin { position: sticky; left: 0; z-index: 1; background: var(--rep-solide); }

/*  Cohérence avec le prévisionnel : une tuile par mois. */
.t13-c-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 10px; }
.t13-c-m { min-width: 0; padding: 12px 14px; border-radius: var(--rep-r-ctrl, 10px); background: var(--rep-tint); border: 1px solid var(--rep-hair); }
.t13-c-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t13-c-t { font-weight: 700; color: var(--rep-ink); text-transform: capitalize; }
.t13-c-p { padding: 2px 8px; border-radius: 999px; font: 700 10.5px/1.4 var(--font-family); white-space: nowrap; }
.t13-c-m.is-ok .t13-c-p { color: var(--rep-ok); background: color-mix(in srgb, var(--rep-ok) 13%, transparent); }
.t13-c-m.is-warn .t13-c-p { color: var(--rep-warn); background: color-mix(in srgb, var(--rep-warn) 14%, transparent); }
.t13-c-j { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--rep-dim); }
.t13-c-jb { flex: 1; height: 4px; border-radius: 2px; background: var(--rep-hair); overflow: hidden; }
.t13-c-jb i { display: block; height: 100%; border-radius: 2px; background: var(--rep-accent); }
.t13-c-v { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.t13-c-v.t13-c-v3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t13-c-v dt .t13-pt { width: 7px; height: 7px; margin-right: 5px; }
.t13-c-jours { font-size: 11px; color: var(--rep-dim); white-space: nowrap; }
.t13-c-v div { min-width: 0; }
.t13-c-v dt { font-size: 10.5px; color: var(--rep-dim); }
.t13-c-v dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rep-ink); }
/*  Le reste expliqué, poste par poste (2026-10-14) ; un reste important a un filet d'avertissement. */
.t13-c-m.is-gros { border-color: color-mix(in srgb, var(--rep-warn) 45%, var(--rep-hair)); }
.t13-c-why { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--rep-hair); }
.t13-c-why-t { margin: 0 0 4px; font-size: 10.5px; font-weight: 700; color: var(--rep-dim); text-transform: uppercase; letter-spacing: .04em; }
.t13-c-m.is-gros .t13-c-why-t { color: var(--rep-warn); }
.t13-c-why-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.t13-c-why-l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; font-size: 11.5px; color: var(--rep-sub); }
.t13-c-why-l li b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rep-ink); white-space: nowrap; }
.t13-c-why-l li small { grid-column: 1 / -1; font-size: 10.5px; color: var(--rep-dim); }
/*  Ce que les comptes mesurent pour dater (TVA, délais). */
.t13-mesure { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 10px; font-size: 11.5px; line-height: 1.45; color: var(--rep-dim); }
.t13-mesure > svg, .t13-mesure > i { flex: none; margin-top: 2px; }

/*  Factures ouvertes attendues : totaux, fenêtre à hauteur bornée qui défile, en-tête collant. */
.t13-f-som { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -2px 0 10px; font-size: 12px; color: var(--rep-sub); }
.t13-f-som b { color: var(--rep-ink); }
.t13-f-som .is-pos { color: var(--rep-ok); } .t13-f-som .is-neg { color: var(--rep-sub); }
.t13-f-w { max-height: 22rem; overflow: auto; overscroll-behavior: contain; border-radius: var(--rep-r-ctrl, 10px); border: 1px solid var(--rep-hair); }
.t13-f-w:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 2px; }
.t13-f { font-variant-numeric: tabular-nums; }
.t13-f thead th { position: sticky; top: 0; z-index: 1; background: var(--rep-solide); }
.t13-f th, .t13-f td { white-space: nowrap; }
.t13-f th:nth-child(-n+4), .t13-f td:nth-child(-n+4) { text-align: left; }
.t13-f td:first-child { color: var(--rep-dim); }
.t13-f-tiers { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; color: var(--rep-ink); }
.t13-f tbody tr:hover > td { background: var(--rep-tint); }
.t13-f td.is-pos b { color: var(--rep-ok); } .t13-f td.is-neg b { color: var(--rep-sub); }
.t13-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font: 700 10.5px/1.5 var(--font-family); color: var(--rep-ink); background: color-mix(in srgb, var(--rep-accent) 16%, transparent); }
.t13-chip.is-bas { color: var(--rep-warn); background: color-mix(in srgb, var(--rep-warn) 14%, transparent); }
.t13-nat { display: inline-flex; align-items: center; font-size: 12px; color: var(--rep-sub); }

/* ── Le lien de la carte « Simuler mes décisions » (hub) ─────────────────────────────────────── */
.t13-lien {
    appearance: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px; border-radius: 999px;
    font: 600 11px/1.2 var(--font-family); cursor: pointer; color: var(--brand-strong, var(--brand));
    background: color-mix(in srgb, var(--brand) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    position: relative; z-index: 2;
}
/*  Pied de la carte : « Ouvrir le simulateur → » et le lien sur la même ligne (le pied reprend le margin-top: auto du CTA). */
.t13-pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.t13-pied .intent-card-cta { margin-top: 0; }
.t13-pied .t13-lien { margin-top: 0; }
.t13-lien:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.t13-lien:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 1024px) {
    .t13-tete { grid-template-columns: minmax(0, 1fr); }
}
/*  Sur un écran étroit, le tableau glisse sous le doigt : la colonne des libellés reste en place, sur un fond plein. */
@media (max-width: 900px) {
    .t13-f-w { max-height: 18rem; }
}
@media (max-width: 640px) {
    .t13-champs { grid-template-columns: minmax(0, 1fr); }
    /*  Les libellés passent sur deux lignes : la colonne collée ne prend plus la moitié de l'écran. */
    .t13-t tbody th { white-space: normal; min-width: 6.5rem; max-width: 7.5rem; font-size: 11.5px; padding-right: 10px; }
    .t13-g-c { height: 11rem; }
    .t13-g-x span:nth-child(even) { visibility: hidden; }
}