/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    GESTION (2026-11-04) : le compte de résultat de gestion, vue du Reporting (Pages/VueGestion.razor, préfixe `gv-`).

    Posée DANS `.rep-root` : cartes et jetons du module (`rep-card`, `--rep-*`), qui suivent Moderne / Mat / Papier, clair / sombre.
    Rien ici n'invente une couleur. ⚠️ Toute modification doit bumper le `?v=` de gestion.css dans index.html.
    ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.gv { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gv-vide { padding: 18px; }

/* ── En-tête : le constat, le modèle, l'IA ── */
.gv-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.gv-tete-t { min-width: 0; flex: 1 1 360px; }
.gv-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gv-modele { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rep-sub); }
.gv-modele select {
    height: 36px; padding: 0 30px 0 12px; border-radius: var(--rep-r-ctrl, 10px); border: 1px solid var(--rep-hair);
    background: var(--rep-tint); color: var(--rep-ink); font: 600 13px var(--font-family); cursor: pointer; max-width: 100%;
}
.gv-modele select:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 1px; }
.rep-cta.gv-ia { margin-top: 0; display: inline-flex; align-items: center; gap: 6px; }
.rep-cta:disabled { opacity: .6; cursor: default; }
.gv-lien { border: 0; background: none; padding: 4px 2px; color: var(--rep-accent); font: 600 12.5px var(--font-family); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.gv-lien:disabled { opacity: .5; cursor: default; }
.gv-lien:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 2px; border-radius: 3px; }

/* ── Panneau de l'IA : accord, puis propositions ── */
.gv-ia-p { display: flex; flex-direction: column; gap: 10px; border-color: color-mix(in srgb, var(--rep-accent) 40%, var(--rep-hair)); }
.gv-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--rep-ink); }
.gv-txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--rep-ink); max-width: 80ch; }
.gv-dim { color: var(--rep-sub); }
.gv-txt.gv-dim { font-size: 12px; }
.gv-consigne { display: flex; flex-direction: column; gap: 4px; max-width: 520px; font-size: 12px; color: var(--rep-sub); }
.gv-consigne input {
    height: 36px; padding: 0 12px; border-radius: var(--rep-r-ctrl, 10px); border: 1px solid var(--rep-hair);
    background: var(--rep-tint); color: var(--rep-ink); font: 500 13px var(--font-family);
}
.gv-consigne input::placeholder { color: var(--rep-dim); }
.gv-consigne input:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 1px; }
.gv-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gv-act .rep-cta { margin-top: 0; display: inline-flex; align-items: center; gap: 6px; }
.gv-err { margin: 0; font-size: 12.5px; color: var(--rep-bad); }
.gv-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: gv-tourne .8s linear infinite; }
@keyframes gv-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gv-spin { animation: none; } }

.gv-props { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.gv-prop {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "x c m" "x l l" "x r r";
    gap: 2px 10px; align-items: center; padding: 8px 8px; border-radius: 8px; cursor: pointer;
}
.gv-prop:hover { background: var(--rep-tint); }
.gv-prop input { grid-area: x; width: 16px; height: 16px; accent-color: var(--rep-accent); }
.gv-prop-c { grid-area: c; min-width: 0; font-size: 13px; color: var(--rep-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-prop-c b { font-variant-numeric: tabular-nums; margin-right: 4px; }
.gv-prop-m { grid-area: m; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--rep-sub); }
.gv-prop-l { grid-area: l; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--rep-sub); }
.gv-prop-l b { color: var(--rep-ink); font-weight: 600; }
.gv-prop-r { grid-area: r; font-size: 11.5px; color: var(--rep-dim); font-style: italic; }

/* ── Le tableau ── */
.gv-tab-c { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gv-tab-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.gv-per { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rep-sub); }
.gv-note { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--rep-warn, var(--rep-sub)); }
.gv-scroll { overflow-x: auto; min-width: 0; }
.gv-tab { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.gv-tab th { position: sticky; top: 0; padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--rep-sub); text-align: left; border-bottom: 1px solid var(--rep-hair); background: var(--rep-solide); white-space: nowrap; }
.gv-tab td { padding: 7px 10px; border-bottom: 1px solid color-mix(in srgb, var(--rep-hair) 60%, transparent); color: var(--rep-ink); white-space: nowrap; }
.gv-tab .num { text-align: right; }
.gv-tab .gv-lib { min-width: 240px; max-width: 420px; }
.gv-tab .gv-tot { font-weight: 700; }
.gv-tab .gv-dim { color: var(--rep-sub); }
.gv-r-tot td { font-weight: 700; background: var(--rep-tint); border-bottom-color: var(--rep-hair); }
.gv-r-aranger td { color: var(--rep-warn, var(--rep-ink)); }
.gv-neg { color: var(--rep-bad) !important; }
.gv-pos { color: var(--rep-ok); }
.gv-pli { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.gv-pli:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 2px; border-radius: 3px; }
.gv-nb { font-size: 10.5px; font-weight: 700; color: var(--rep-dim); background: var(--rep-tint); border-radius: 999px; padding: 0 6px; }
.gv-r-cpt td { font-size: 12px; color: var(--rep-sub); background: color-mix(in srgb, var(--rep-tint) 45%, transparent); }
.gv-r-cpt .gv-lib { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 28px; }
.gv-cpt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-cpt b { color: var(--rep-ink); font-weight: 600; margin-right: 4px; }
.gv-tag { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--rep-accent); background: color-mix(in srgb, var(--rep-accent) 14%, transparent); border-radius: 5px; padding: 1px 5px; cursor: help; }
.gv-tag-m { color: var(--rep-sub); background: var(--rep-tint); cursor: default; }
.gv-dep {
    flex-shrink: 0; height: 26px; max-width: 170px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--rep-hair);
    background: var(--rep-solide); color: var(--rep-sub); font: 500 11.5px var(--font-family); cursor: pointer;
}
.gv-dep:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 1px; }
.gv-pied { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--rep-dim); max-width: 100ch; }

@media (max-width: 640px) {
    .gv-tab .gv-lib { min-width: 180px; }
    .gv-r-cpt .gv-lib { flex-direction: column; align-items: flex-start; gap: 4px; }
    .gv-dep { max-width: 100%; }
}

/* ── Plusieurs vues de gestion (04/11) : onglets, nom de la vue ── */
.gv-vues { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px; border-radius: var(--rep-r-ctrl, 10px); border: 1px solid var(--rep-hair); background: var(--rep-tint); }
.gv-vue { border: 0; background: none; padding: 5px 10px; border-radius: 7px; color: var(--rep-sub); font: 600 12.5px var(--font-family); cursor: pointer; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.gv-vue:hover { color: var(--rep-ink); }
.gv-vue.on { background: var(--rep-solide); color: var(--rep-ink); box-shadow: inset 0 0 0 1px var(--rep-hair); }
.gv-vue-plus { display: inline-flex; align-items: center; gap: 4px; color: var(--rep-accent); }
.gv-vue:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 1px; }
.gv-modele input {
    height: 36px; width: 170px; max-width: 100%; padding: 0 10px; border-radius: var(--rep-r-ctrl, 10px); border: 1px solid var(--rep-hair);
    background: var(--rep-tint); color: var(--rep-ink); font: 600 13px var(--font-family);
}
.gv-modele input:focus-visible { outline: 2px solid var(--rep-accent); outline-offset: 1px; }

/* ── Tableau, retouche du 04/11 (Arthur : « améliore ux/design de ces tableaux ») ──
   Une unité dite dans l'en-tête, des tirets à la place des zéros, les groupes de la vue (sous-total repliable, lignes en retrait),
   le taux de chaque total en mois par mois, la colonne des libellés figée quand les mois défilent. */
.gv-unite { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--rep-dim); }
.gv-tab th:first-child, .gv-tab td:first-child { position: sticky; left: 0; z-index: 1; background: var(--rep-solide); }
.gv-tab thead th:first-child { z-index: 2; }
.gv-tab-mois td:first-child, .gv-tab-mois th:first-child { box-shadow: 1px 0 0 var(--rep-hair); }
.gv-tab-mois .gv-lib { min-width: 220px; }
.gv-tab-mois th.num, .gv-tab-mois td.num { min-width: 64px; padding-left: 6px; padding-right: 8px; }
.gv-tab-mois .gv-tot { border-left: 1px solid var(--rep-hair); font-weight: 600; }
.gv-tab .gv-zero { color: var(--rep-dim); }
.gv-tab .gv-n1 { color: var(--rep-sub); }
.gv-r-nul td { opacity: .55; }
.gv-r-nul td:first-child { opacity: 1; color: var(--rep-sub); }

/* Groupe : sous-total, une ligne de séparation au-dessus, libellé en petites capitales. */
.gv-r-grp td { font-weight: 650; border-top: 1px solid var(--rep-hair); background: color-mix(in srgb, var(--rep-tint) 50%, transparent); }
.gv-r-grp td:first-child { background: linear-gradient(color-mix(in srgb, var(--rep-tint) 50%, transparent), color-mix(in srgb, var(--rep-tint) 50%, transparent)), var(--rep-solide); }
.gv-r-grp .gv-pli { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rep-sub); }
.gv-r-in .gv-lib { padding-left: 26px; }
.gv-r-cpt.gv-r-in .gv-lib { padding-left: 46px; }

/* Totaux : la bande pleine, aussi sous la colonne figée. */
.gv-r-tot td:first-child { background: linear-gradient(var(--rep-tint), var(--rep-tint)), var(--rep-solide); }
.gv-r-tot td { border-top: 1px solid var(--rep-hair); }

/* Taux sous un total (mois par mois). */
.gv-r-taux td { padding-top: 1px; padding-bottom: 7px; font-size: 11.5px; font-style: italic; color: var(--rep-sub); border-bottom-color: var(--rep-hair); }
.gv-r-taux .gv-lib { padding-left: 10px; font-style: normal; font-size: 11px; color: var(--rep-dim); }
.gv-r-tot:has(+ .gv-r-taux) td { border-bottom: 0; }