:root {
            --bg: #0f1218;
            --panel: #171c26;
            --panel2: #1e2531;
            --line: #2a3342;
            --txt: #e6ebf2;
            --muted: #8b97a8;
            --accent: #4c9aff;
            --accent2: #2d6fd6;
            --green: #37c07a;
            --red: #ff6b6b;
            --amber: #ffb454;
            --violet: #a78bfa;
            --chip: #232b38;
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            margin: 0;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg);
            color: var(--txt);
            font-size: 13px
        }

        #app {
            display: flex;
            height: 100vh;
            overflow: hidden
        }

        /* Sidebar */
        #side {
            width: 220px;
            flex: 0 0 220px;
            background: var(--panel);
            border-right: 1px solid var(--line);
            display: flex;
            flex-direction: column
        }

        #side .brand {
            padding: 16px 16px 10px;
            font-weight: 700;
            font-size: 15px;
            letter-spacing: .3px
        }

        #side .brand small {
            display: block;
            color: var(--muted);
            font-weight: 400;
            font-size: 11px;
            margin-top: 2px
        }

        #nav {
            padding: 6px;
            overflow: auto;
            flex: 1
        }

        .navitem {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 8px;
            cursor: pointer;
            color: var(--muted);
            font-weight: 500;
            user-select: none
        }

        .navitem:hover {
            background: var(--panel2);
            color: var(--txt)
        }

        .navitem.active {
            background: var(--accent2);
            color: #fff
        }

        .navitem .ic {
            width: 18px;
            text-align: center
        }

        #side .foot {
            padding: 10px 14px;
            border-top: 1px solid var(--line);
            color: var(--muted);
            font-size: 11px
        }

        /* Main */
        #main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0
        }

        #top {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 18px;
            border-bottom: 1px solid var(--line);
            background: var(--panel)
        }

        #top h1 {
            font-size: 15px;
            margin: 0;
            font-weight: 600
        }

        #top .spacer {
            flex: 1
        }

        select,
        input,
        button {
            font-family: inherit;
            font-size: 12px
        }

        /* `password` figure ici depuis qu'un bouton permet d'afficher la
           saisie : sans lui, basculer le champ en `text` lui aurait fait
           gagner d'un coup bordure, fond et arrondis — un saut visuel au
           moment précis où l'on cherche à relire ce qu'on a tapé. */
        select,
        input[type=text],
        input[type=password],
        input[type=date],
        input[type=number] {
            background: var(--panel2);
            border: 1px solid var(--line);
            color: var(--txt);
            padding: 7px 9px;
            border-radius: 7px;
            outline: none
        }

        /* ---------- Champ de mot de passe avec bouton d'affichage ---------- */
        .mdp-champ {
            position: relative;
            display: block;
        }

        .mdp-champ input {
            width: 100%;
            /* Place réservée au bouton, pour que le texte ne passe pas
               dessous sur un mot de passe long. */
            padding-right: 34px;
        }

        .mdp-oeil {
            position: absolute;
            right: 1px;
            top: 1px;
            bottom: 1px;
            width: 30px;
            background: none;
            border: 0;
            border-radius: 0 6px 6px 0;
            color: var(--txt);
            opacity: .5;
            cursor: pointer;
            font-size: 13px;
            line-height: 1;
            padding: 0;
        }

        .mdp-oeil:hover {
            opacity: 1;
            background: none;
        }

        select:focus,
        input:focus {
            border-color: var(--accent)
        }

        .ms-box {
            background: var(--panel2);
            border: 1px solid var(--line);
            color: var(--txt);
            padding: 7px 9px;
            border-radius: 7px;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: border-color .15s, box-shadow .15s;
        }

        .ms-box:hover {
            border-color: var(--accent);
            box-shadow: 0 0 0 1px rgba(76, 154, 255, .15);
        }

        .ms-box .ms-arrow {
            font-size: 8px;
            margin-left: 6px;
            opacity: .5;
            transition: transform .2s;
        }

        .ms-dd {
            display: none;
            position: absolute;
            top: calc(100% + 2px);
            left: 0;
            min-width: 100%;
            width: max-content;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 6px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04);
            z-index: 100;
            max-height: 280px;
            overflow-y: auto;
            padding: 2px 0;
        }

        .ms-opt {
            padding: 4px 10px;
            margin: 0;
            cursor: pointer;
            font-size: 12px;
            color: var(--muted);
            transition: background .1s, color .1s;
            user-select: none;
        }

        .ms-opt:hover {
            background: var(--panel2);
            color: var(--txt);
        }

        .ms-opt.on {
            color: var(--accent);
            font-weight: 500;
        }

        .ms-opt.ms-sep {
            border-bottom: 1px solid var(--line);
            margin-bottom: 1px;
            padding-bottom: 5px;
        }

        button {
            background: var(--panel2);
            border: 1px solid var(--line);
            color: var(--txt);
            padding: 7px 12px;
            border-radius: 7px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px
        }

        button:hover {
            background: var(--chip)
        }

        button.primary {
            background: var(--accent2);
            border-color: var(--accent2);
            color: #fff
        }

        button.primary:hover {
            background: var(--accent)
        }

        button.danger {
            color: var(--red);
            border-color: #40262b
        }

        #content {
            flex: 1;
            overflow: auto;
            padding: 18px
        }

        .view {
            display: none
        }

        .view.active {
            display: block
        }

        .muted {
            color: var(--muted)
        }

        .card {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px
        }

        .card h2 {
            margin: 0 0 12px;
            font-size: 14px
        }

        .grid {
            display: grid;
            gap: 12px
        }

        /* KPI */
        .kpis {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 12px
        }

        .kpi {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 14px
        }

        .kpi .lbl {
            color: var(--muted);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .4px
        }

        .kpi .val {
            font-size: 22px;
            font-weight: 700;
            margin-top: 6px
        }

        .kpi .sub {
            font-size: 11px;
            color: var(--muted);
            margin-top: 2px
        }

        /* KPI numérique : montant calé à droite, même typographie que les montants
     des tableaux (dont le solde cumulé) : 12px, graisse normale, chiffres tabulaires */
        .kpi.num .val,
        .kpi.num .sub {
            text-align: right;
            font-variant-numeric: tabular-nums
        }

        .kpi.num .val {
            font-size: 12px;
            font-weight: 400
        }

        /* Table */
        .tablewrap {
            overflow: auto;
            border: 1px solid var(--line);
            border-radius: 10px
        }

        table {
            border-collapse: collapse;
            width: 100%;
            font-size: 12px;
            white-space: nowrap
        }

        thead th {
            position: sticky;
            top: 0;
            background: var(--panel2);
            text-align: left;
            padding: 8px 10px;
            border-bottom: 1px solid var(--line);
            font-weight: 600;
            cursor: pointer;
            z-index: 2
        }

        thead th.no-sort {
            cursor: default
        }

        tbody td {
            padding: 6px 10px;
            border-bottom: 1px solid var(--line)
        }

        tbody tr:hover {
            background: var(--panel2)
        }

        td.num,
        th.num {
            text-align: right;
            font-variant-numeric: tabular-nums
        }

        /* --- Fenêtre modale « écriture complète » --- */
        .modal-back {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .62);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px
        }

        .modal-box {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 12px;
            max-width: min(1400px, 96vw);
            width: 100%;
            max-height: 86vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 18px 50px rgba(0, 0, 0, .55)
        }

        .modal-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            flex: 0 0 auto
        }

        .modal-head .ttl {
            font-weight: 700;
            font-size: 15px
        }

        .modal-close {
            background: var(--panel2);
            border: 1px solid var(--line);
            color: var(--txt);
            border-radius: 7px;
            padding: 6px 12px;
            cursor: pointer;
            font-size: 13px
        }

        .modal-close:hover {
            border-color: var(--accent)
        }

        .modal-body {
            padding: 14px 16px;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column
        }

        /* le tableau défile à l'intérieur : l'ascenseur horizontal reste toujours visible,
     même pour une écriture d'à-nouveau de plusieurs centaines de lignes */
        .modal-body .tablewrap {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto
        }

        /* dans la fenêtre, les libellés longs passent à la ligne (au lieu d'élargir le tableau) ;
     les montants, dates et comptes restent sur une seule ligne */
        #ecrModal table {
            white-space: normal
        }

        #ecrModal td.num,
        #ecrModal th.num,
        #ecrModal td:first-child {
            white-space: nowrap
        }

        #ecrModal tfoot td {
            position: sticky;
            bottom: 0;
            background: var(--panel2);
            border-top: 1px solid var(--line)
        }

        /* --- Bouton Paramétrage (roue dentée) --- */
        .gear {
            background: transparent;
            border: none;
            color: var(--muted);
            font-size: 17px;
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 7px;
            line-height: 1;
            flex: 0 0 auto
        }

        .gear:hover {
            color: var(--txt);
            background: var(--panel2)
        }

        .set-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 9px 4px;
            border-bottom: 1px solid var(--line)
        }

        .set-row:last-child {
            border-bottom: none
        }

        .set-row .ic {
            width: 20px;
            text-align: center
        }

        .set-row .ttl {
            flex: 1
        }

        .set-row.locked {
            opacity: .55
        }

        /* --- Interrupteur style iOS --- */
        .aswitch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 22px;
            flex: 0 0 auto
        }

        .aswitch input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute
        }

        .aswitch .asl {
            position: absolute;
            inset: 0;
            background: var(--panel2);
            border: 1px solid var(--line);
            border-radius: 22px;
            cursor: pointer;
            transition: background .18s, border-color .18s
        }

        .aswitch .asl:before {
            content: "";
            position: absolute;
            height: 16px;
            width: 16px;
            left: 2px;
            top: 2px;
            background: #fff;
            border-radius: 50%;
            transition: transform .18s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .45)
        }

        .aswitch input:checked+.asl {
            background: #34c759;
            border-color: #34c759
        }

        .aswitch input:checked+.asl:before {
            transform: translateX(18px)
        }

        .aswitch input:focus-visible+.asl {
            outline: 2px solid var(--accent);
            outline-offset: 2px
        }

        /* --- Cadre de synthèse du compte (grand livre) --- */
        .gl-synth {
            margin-left: auto;
            min-width: 330px;
            max-width: 430px;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 12px 16px
        }

        .gl-synth .gs-title {
            color: var(--muted);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .5px;
            margin-bottom: 8px
        }

        .gl-synth .gs-row {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 4px 0;
            font-size: 12px
        }

        .gl-synth .gs-row .amt {
            font-variant-numeric: tabular-nums;
            text-align: right;
            white-space: nowrap
        }

        .gl-synth .gs-sub {
            border-top: 1px solid var(--line);
            margin-top: 4px;
            padding-top: 6px
        }

        .gl-synth .gs-total {
            font-weight: 700
        }

        .gl-synth .gs-total .amt {
            border-bottom: 3px double var(--txt);
            padding-bottom: 2px
        }

        tr.ecr-hl td {
            background: rgba(76, 154, 255, .10)
        }

        td.ecr-link {
            cursor: zoom-in
        }

        .clickable {
            color: var(--accent);
            cursor: pointer
        }

        .clickable:hover {
            text-decoration: underline
        }

        /* Réglage qui ne s'applique pas à soi-même : lisible, mais
           visiblement hors d'atteinte. Ni couleur d'accentuation ni
           soulignement au survol — rien qui laisse croire qu'on peut
           cliquer. */
        .verrouille {
            color: var(--txt);
            opacity: .42;
            cursor: not-allowed;
        }

        /* Même traitement pour les commandes désactivées, que les
           navigateurs grisent trop discrètement pour qu'on le remarque
           avant d'avoir essayé. */
        select:disabled,
        button:disabled,
        input[type="checkbox"]:disabled+.asl {
            opacity: .42;
            cursor: not-allowed;
        }

        /* Un bouton désactivé ne doit pas réagir au survol : le
           changement de fond suggérerait qu'il attend un clic. */
        button:disabled:hover {
            background: inherit;
            border-color: inherit;
        }

        .aswitch:has(input:disabled) {
            cursor: not-allowed;
        }

        .pos {
            color: var(--green)
        }

        .neg {
            color: var(--red)
        }

        .chip {
            display: inline-block;
            background: var(--chip);
            border-radius: 20px;
            padding: 2px 9px;
            font-size: 11px
        }

        .chip.let {
            background: #22402f;
            color: #7fe0a8
        }

        .chip.unlet {
            background: #3a2c22;
            color: #ffcf9e
        }

        .chip.an {
            background: #2b2a45;
            color: #c3b8ff;
            font-weight: 700
        }

        .badge {
            display: inline-block;
            padding: 1px 7px;
            border-radius: 6px;
            font-size: 11px;
            background: var(--chip)
        }

        /* Filters bar */
        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: end;
            margin-bottom: 14px
        }

        /* Rangée de sélection du compte (grand livre) : hauteur unique pour
     le champ, les flèches et les boutons, afin qu'ils s'alignent au pixel */
        #glCn,
        #glPrev,
        #glNext,
        #glGo,
        #glTcd {
            height: 34px;
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #glCn {
            justify-content: flex-start
        }

        #glPrev,
        #glNext {
            padding: 0 12px;
            font-size: 15px;
            line-height: 1
        }

        #glGo,
        #glTcd {
            padding: 0 14px
        }

        .filters .f,
        #glViewBar .f {
            display: flex;
            flex-direction: column;
            gap: 4px
        }

        .filters .f label,
        #glViewBar .f label {
            font-size: 10px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .4px
        }

        .filters .f input,
        .filters .f select,
        #glViewBar .f select {
            min-width: 120px
        }

        .seg {
            display: inline-flex;
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden
        }

        .seg button {
            border: 0;
            border-radius: 0;
            background: var(--panel2);
            padding: 7px 12px
        }

        .seg button.on {
            background: var(--accent2);
            color: #fff
        }

        /* Dropzone */
        #drop {
            border: 2px dashed var(--line);
            border-radius: 14px;
            padding: 40px;
            text-align: center;
            color: var(--muted);
            transition: .15s;
            background: var(--panel)
        }

        #drop.over {
            border-color: var(--accent);
            background: #17233a;
            color: var(--txt)
        }

        #drop .big {
            font-size: 40px;
            margin-bottom: 8px
        }

        .filelist {
            margin-top: 16px
        }

        .filerow {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid var(--line);
            border-radius: 10px;
            margin-bottom: 8px;
            background: var(--panel)
        }

        .filerow .nm {
            font-weight: 600
        }

        .filerow .meta {
            color: var(--muted);
            font-size: 11px
        }

        .filerow .spacer {
            flex: 1
        }

        .pager {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: flex-end;
            padding: 10px 2px;
            color: var(--muted)
        }

        .pill {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 20px;
            background: var(--chip)
        }

        .warn {
            background: #3a2c22;
            border: 1px solid #5c3f22;
            color: #ffcf9e;
            padding: 10px 14px;
            border-radius: 10px;
            margin-bottom: 12px
        }

        .warn-crit {
            background: rgba(255, 69, 58, .12);
            border: 1px solid rgba(255, 69, 58, .55);
            color: #ff6b60;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600
        }

        .ok {
            background: #1c3325;
            border: 1px solid #2c5a3d;
            color: #8fe6b3;
            padding: 10px 14px;
            border-radius: 10px;
            margin-bottom: 12px
        }

        .toolbar {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 12px;
            flex-wrap: wrap
        }

        .sub-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 14px;
            flex-wrap: wrap
        }

        .sub-tabs button {
            background: var(--panel2)
        }

        .sub-tabs button.on {
            background: var(--accent2);
            border-color: var(--accent2);
            color: #fff
        }

        .two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px
        }

        @media(max-width:900px) {
            .two-col {
                grid-template-columns: 1fr
            }
        }

        .fin-table td:first-child {
            white-space: normal
        }

        .fin-table .grp {
            font-weight: 700;
            background: var(--panel2)
        }

        .fin-table .tot {
            font-weight: 700;
            border-top: 2px solid var(--line)
        }

        .hint {
            font-size: 11px;
            color: var(--muted);
            margin-top: 6px;
            line-height: 1.5
        }

        a {
            color: var(--accent)
        }

        .spin {
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid var(--line);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: sp .7s linear infinite;
            vertical-align: middle
        }

        @keyframes sp {
            to {
                transform: rotate(360deg)
            }
        }

        #overlay {
            position: fixed;
            inset: 0;
            background: rgba(6, 9, 14, .7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50
        }

        #overlay .box {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 24px 30px;
            text-align: center
        }

        .empty {
            text-align: center;
            color: var(--muted);
            padding: 60px 20px
        }

        .empty .big {
            font-size: 46px;
            margin-bottom: 10px
        }

        /* L'encart pour mettre en évidence l'exercice actif */
        .ex-highlight {
            display: inline-block;
            background: var(--accent2);
            color: #fff;
            font-size: 15px;
            padding: 6px 14px;
            border-radius: 8px;
            font-weight: 700;
            box-shadow: 0 4px 10px rgba(45, 111, 214, 0.4);
        }

        /* L'en-tête d'impression n'existe que sur papier */
        .print-only {
            display: none
        }

        /* ========== STYLES POUR L'IMPRESSION (PDF) ========== */
        /* Marges de page à zéro : les en-têtes/pieds du navigateur (date, titre,
     chemin du fichier, n° de page) vivent dans ces marges — sans marge,
     ils disparaissent. Les marges du document sont rendues par le padding. */
        @page {
            margin: 0;
        }

        @media print {
            body {
                padding: 12mm 11mm !important;
            }

            .print-only {
                display: block !important;
            }

            #glSynth,
            #glName,
            #glViewBar,
            .no-print {
                display: none !important;
            }

            /* remplacés par l'en-tête d'impression */

            /* --- En-tête professionnel du grand livre --- */
            #glPrint {
                color: #000;
                margin-bottom: 14px;
            }

            #glPrint .gp-band {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 20px;
                border-bottom: 3px double #000;
                padding-bottom: 10px;
            }

            #glPrint .gp-title {
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 1px;
            }

            #glPrint .gp-compte {
                font-size: 14px;
                font-weight: 700;
                margin-top: 4px;
            }

            #glPrint .gp-meta {
                font-size: 10px;
                margin-top: 4px;
                line-height: 1.6;
            }

            #glPrint .gp-edit {
                font-size: 10px;
                text-align: right;
                white-space: nowrap;
            }

            #glPrint table.gp-synth {
                border-collapse: collapse;
                font-size: 11px;
                margin-left: auto;
            }

            #glPrint table.gp-synth td {
                border: none !important;
                padding: 2px 0 2px 24px;
                text-align: right;
            }

            #glPrint table.gp-synth td:first-child {
                text-align: left;
                padding-left: 0;
            }

            #glPrint table.gp-synth tr.gp-tot td {
                font-weight: 700;
                border-top: 1px solid #000 !important;
            }

            #glPrint table.gp-synth tr.gp-tot td:last-child {
                border-bottom: 3px double #000 !important;
            }

            /* --- En-tête d'impression de la balance ---
               Sobre à dessein : le tableau doit rester la matière de la
               page. Corps de texte normal, pas de titre démesuré, un
               simple filet pour séparer. */
            #balPrint {
                color: #000;
                margin-bottom: 10px;
            }

            #balPrint .bp-band {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                gap: 16px;
                border-bottom: 1.5px solid #000;
                padding-bottom: 3px;
            }

            #balPrint .bp-title {
                font-size: 13px;
                font-weight: 700;
                letter-spacing: .6px;
            }

            #balPrint .bp-ex {
                font-size: 11px;
                font-weight: 600;
                white-space: nowrap;
            }

            #balPrint .bp-meta {
                font-size: 10px;
                margin-top: 3px;
                line-height: 1.45;
            }

            #balPrint .bp-alerte {
                font-size: 10px;
                font-weight: 700;
                margin-top: 2px;
            }

            #balPrint .bp-edit {
                font-size: 9px;
                margin-top: 2px;
            }

            /* Repris dans le bandeau ci-dessus, sous une forme adaptée
               au papier. */
            #balSummary,
            #balNote {
                display: none !important;
            }

            #side,
            #top,
            .filters,
            .pager,
            .toolbar,
            .sub-tabs,
            #drop,
            .filelist,
            #btnExport,
            #btnPrint {
                display: none !important;
            }

            body,
            html,
            #app,
            #main,
            #content {
                height: auto !important;
                overflow: visible !important;
                display: block !important;
                background: #fff;
                color: #000;
                font-size: 11px;
            }

            /* body est exclu à dessein : ses 12 mm / 11 mm SONT les
               marges de page. Le remplissage de 18 px de #content, lui,
               s'y ajoutait et rognait la largeur utile pour rien. Une
               fois retiré, bandeau de titre et tableau partagent
               exactement le même alignement, de bord à bord. */
            html,
            #app,
            #main,
            #content {
                padding: 0 !important;
                margin: 0 !important;
            }

            .card {
                border: none !important;
                margin: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
                background: transparent !important;
            }

            .tablewrap {
                max-height: none !important;
                overflow: visible !important;
                border: none !important;
            }

            /* --- Largeur des tableaux imprimés ---
               À l'écran, `white-space: nowrap` empêche qu'un montant se
               coupe en deux lignes, et la barre de défilement absorbe
               ce qui dépasse. Sur papier il n'y a pas de défilement :
               le tableau débordait donc à droite, au-delà de la zone
               imprimable, et la page semblait décalée vers la gauche —
               marge à gauche, aucune à droite.

               On rend donc leur souplesse aux colonnes de texte, qui
               peuvent se replier, tout en la refusant aux montants et
               aux dates, qu'une coupure rendrait illisibles. Le tableau
               s'aligne alors exactement sur le bandeau de titre. */
            .tablewrap table {
                width: 100% !important;
                max-width: 100% !important;
                font-size: 10px;
            }

            .tablewrap th,
            .tablewrap td {
                white-space: normal !important;
                overflow-wrap: anywhere;
                padding-left: 4px !important;
                padding-right: 4px !important;
            }

            /* Un montant, une date ou un code ne se coupent jamais. */
            .tablewrap th.num,
            .tablewrap td.num,
            .tablewrap td .chip,
            .tablewrap td .badge {
                white-space: nowrap !important;
            }

            thead th {
                position: static !important;
                background: #f0f0f0 !important;
                color: #000 !important;
                border-bottom: 2px solid #000 !important;
            }

            tbody td {
                border-bottom: 1px solid #ddd !important;
            }

            .badge,
            .chip {
                background: transparent !important;
                color: #000 !important;
                border: 1px solid #000;
            }

            .pos {
                color: #000 !important;
            }

            .neg {
                color: #000 !important;
                font-weight: bold;
            }

            .kpi {
                border: 1px solid #ccc !important;
            }

            table {
                width: 100%;
                page-break-inside: auto;
            }

            tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }

            thead {
                display: table-header-group;
            }

            .ex-highlight {
                background: transparent !important;
                color: #000 !important;
                border: 2px solid #000;
                box-shadow: none !important;
            }
        }

        .pvtUi {
            color: #333
        }

        table.pvtTable {
            font-size: 8pt;
            text-align: left;
            border-collapse: collapse
        }

        table.pvtTable tbody tr th,
        table.pvtTable thead tr th {
            background-color: #e6EEEE;
            border: 1px solid #CDCDCD;
            font-size: 8pt;
            padding: 5px
        }

        table.pvtTable .pvtColLabel {
            text-align: center
        }

        table.pvtTable .pvtTotalLabel {
            text-align: right
        }

        table.pvtTable tbody tr td {
            color: #3D3D3D;
            padding: 5px;
            background-color: #FFF;
            border: 1px solid #CDCDCD;
            vertical-align: top;
            text-align: right
        }

        .pvtGrandTotal,
        .pvtTotal {
            font-weight: 700
        }

        .pvtVals {
            text-align: center;
            white-space: nowrap
        }

        .pvtColOrder,
        .pvtRowOrder {
            cursor: pointer;
            width: 15px;
            margin-left: 5px;
            display: inline-block
        }

        .pvtAggregator {
            margin-bottom: 5px
        }

        .pvtAxisContainer,
        .pvtVals {
            border: 1px solid gray;
            background: #EEE;
            padding: 5px;
            min-width: 20px;
            min-height: 20px;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
            -ms-user-select: none
        }

        .pvtAxisContainer li {
            padding: 8px 6px;
            list-style-type: none;
            cursor: move
        }

        .pvtAxisContainer li.pvtPlaceholder {
            -webkit-border-radius: 5px;
            padding: 3px 15px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            border: 1px dashed #aaa
        }

        .pvtAxisContainer li span.pvtAttr {
            -webkit-text-size-adjust: 100%;
            background: #F3F3F3;
            border: 1px solid #DEDEDE;
            padding: 2px 5px;
            white-space: nowrap;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px
        }

        .pvtTriangle {
            cursor: pointer;
            color: grey
        }

        .pvtHorizList li {
            display: inline
        }

        .pvtVertList {
            vertical-align: top
        }

        .pvtFilteredAttribute {
            font-style: italic
        }

        .pvtFilterBox {
            z-index: 100;
            width: 300px;
            border: 1px solid gray;
            background-color: #fff;
            position: absolute;
            text-align: center
        }

        .pvtFilterBox h4 {
            margin: 15px
        }

        .pvtFilterBox p {
            margin: 10px auto
        }

        .pvtFilterBox label {
            font-weight: 400
        }

        .pvtFilterBox input[type=checkbox] {
            margin-right: 10px;
            margin-left: 10px
        }

        .pvtFilterBox input[type=text] {
            width: 230px
        }

        .pvtFilterBox .count {
            color: gray;
            font-weight: 400;
            margin-left: 3px
        }

        .pvtCheckContainer {
            text-align: left;
            font-size: 14px;
            white-space: nowrap;
            overflow-y: scroll;
            width: 100%;
            max-height: 250px;
            border-top: 1px solid #d3d3d3;
            border-bottom: 1px solid #d3d3d3
        }

        .pvtCheckContainer p {
            margin: 5px
        }

        .pvtRendererArea {
            padding: 5px
        }

        /* ============================================================
   TCD (PivotTable.js) — habillage aux couleurs de l'application.
   100 % cosmétique : aucune classe n'est renommée, aucun élément
   déplacé. Tout est porté par #tcdPivot / #tcdPivotWrap, dont la
   spécificité (id) l'emporte sur la feuille de style de la lib.
   ============================================================ */

        /* --- Conteneur --- */
        #tcdPivotWrap {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--txt);
            padding: 12px;
            overflow: auto;
            max-height: calc(100vh - 300px);
            scrollbar-color: var(--line) transparent;
        }

        /* --- Grille de l'interface (zones de dépôt) --- */
        #tcdPivot table.pvtUi {
            color: var(--txt);
            border-collapse: separate;
            border-spacing: 8px;
            width: 100%;
        }

        #tcdPivot .pvtUiCell {
            background: transparent
        }

        #tcdPivot .pvtAxisContainer,
        #tcdPivot td.pvtVals {
            background: var(--bg);
            border: 1px dashed var(--line);
            border-radius: 8px;
            padding: 8px;
        }

        #tcdPivot .pvtAxisContainer li {
            padding: 4px 3px
        }

        /* --- Étiquettes de champs (draggables) --- */
        #tcdPivot .pvtAxisContainer li span.pvtAttr {
            background: var(--chip);
            border: 1px solid var(--line);
            color: var(--txt);
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 12px;
        }

        #tcdPivot .pvtAxisContainer li span.pvtAttr:hover {
            border-color: var(--accent)
        }

        #tcdPivot .pvtAxisContainer li.pvtPlaceholder {
            border: 1px dashed var(--accent);
            border-radius: 6px;
            background: rgba(76, 154, 255, .08);
        }

        /* Un champ filtré est signalé en ambre (repère visuel utile) */
        #tcdPivot .pvtFilteredAttribute {
            font-style: italic;
            color: var(--amber)
        }

        #tcdPivot .pvtTriangle {
            color: var(--muted)
        }

        #tcdPivot .pvtTriangle:hover {
            color: var(--accent)
        }

        #tcdPivot .pvtRowOrder,
        #tcdPivot .pvtColOrder {
            color: var(--muted)
        }

        #tcdPivot .pvtRowOrder:hover,
        #tcdPivot .pvtColOrder:hover {
            color: var(--accent)
        }

        /* --- Listes déroulantes (rendu / agrégation) --- */
        #tcdPivot select.pvtRenderer,
        #tcdPivot select.pvtAggregator,
        #tcdPivot select.pvtAttrDropdown,
        #tcdPivot .pvtVals select,
        #tcdPivotWrap select {
            background: var(--panel2);
            border: 1px solid var(--line);
            color: var(--txt);
            padding: 6px 8px;
            border-radius: 7px;
            font-family: inherit;
            font-size: 12px;
        }

        #tcdPivot select:focus {
            border-color: var(--accent);
            outline: none
        }

        #tcdPivot .pvtRendererArea {
            padding: 4px 0 0
        }

        /* --- Tableau croisé --- */
        #tcdPivot table.pvtTable {
            font-size: 12px;
            border-collapse: collapse
        }

        /* Neutralise les règles globales de l'app qui fuyaient ici
   (en-têtes collants superposés sur les tableaux à plusieurs
   niveaux, et curseur « cliquable » trompeur). */
        #tcdPivot table.pvtTable thead tr th,
        #tcdPivot table.pvtTable tbody tr th {
            position: static;
            cursor: default;
            background: var(--panel2);
            color: var(--txt);
            border: 1px solid var(--line);
            font-size: 12px;
            font-weight: 600;
            padding: 6px 10px;
            text-align: center;
        }

        #tcdPivot table.pvtTable tbody tr td {
            background: var(--panel);
            color: var(--txt);
            border: 1px solid var(--line);
            padding: 6px 10px;
            text-align: right;
            vertical-align: middle;
            font-variant-numeric: tabular-nums;
        }

        #tcdPivot table.pvtTable tbody tr:hover td {
            background: var(--panel2)
        }

        #tcdPivot table.pvtTable th.pvtRowLabel {
            text-align: left;
            font-weight: 500
        }

        #tcdPivot table.pvtTable th.pvtTotalLabel {
            text-align: right;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .4px;
            font-size: 11px
        }

        #tcdPivot table.pvtTable .pvtTotal,
        #tcdPivot table.pvtTable .pvtGrandTotal {
            font-weight: 700;
            background: var(--panel2);
        }

        #tcdPivot table.pvtTable .pvtGrandTotal {
            border-top: 2px solid var(--line)
        }

        /* --- Fenêtre de filtre d'un champ --- */
        #tcdPivot .pvtFilterBox {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--txt);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
        }

        #tcdPivot .pvtFilterBox h4 {
            color: var(--txt)
        }

        #tcdPivot .pvtFilterBox .count {
            color: var(--muted)
        }

        #tcdPivot .pvtFilterBox input[type=text],
        #tcdPivot .pvtFilterBox input.pvtSearch {
            background: var(--panel2);
            border: 1px solid var(--line);
            color: var(--txt);
            padding: 6px 8px;
            border-radius: 7px;
            font-family: inherit;
        }

        #tcdPivot .pvtFilterBox input[type=text]:focus {
            border-color: var(--accent);
            outline: none
        }

        #tcdPivot .pvtFilterBox button {
            background: var(--panel2);
            border: 1px solid var(--line);
            color: var(--txt);
            padding: 6px 10px;
            border-radius: 7px;
            font-family: inherit;
            font-size: 12px;
            cursor: pointer;
        }

        #tcdPivot .pvtFilterBox button:hover {
            background: var(--chip);
            border-color: var(--accent)
        }

        #tcdPivot .pvtCheckContainer {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            font-size: 12px;
        }

        #tcdPivot .pvtCheckContainer p {
            margin: 0;
            padding: 4px 6px;
            border-radius: 6px
        }

        #tcdPivot .pvtCheckContainer p:hover {
            background: var(--panel2)
        }

        #tcdPivot .pvtCheckContainer p.selected {
            background: var(--panel2)
        }

        #tcdPivot .pvtFilterBox label {
            color: var(--txt);
            font-weight: 400
        }

        /* --- Impression : on repasse le TCD en clair pour le papier --- */
        @media print {
            #tcdPivotWrap {
                background: #fff !important;
                border: none !important;
                max-height: none !important;
                overflow: visible !important;
                padding: 0 !important;
            }

            #tcdPivot table.pvtTable thead tr th,
            #tcdPivot table.pvtTable tbody tr th {
                background: #f0f0f0 !important;
                color: #000 !important;
                border: 1px solid #999 !important;
            }

            #tcdPivot table.pvtTable tbody tr td {
                background: #fff !important;
                color: #000 !important;
                border: 1px solid #ccc !important;
            }

            #tcdPivot table.pvtTable .pvtTotal,
            #tcdPivot table.pvtTable .pvtGrandTotal {
                background: #f0f0f0 !important;
                color: #000 !important
            }

            /* les zones de glisser-déposer n'ont pas de sens sur papier */
            #tcdPivot .pvtAxisContainer.pvtUnused,
            #tcdPivot .pvtRendererArea select,
            #tcdPivot .pvtTriangle {
                display: none !important
            }

            #tcdPivot .pvtAxisContainer,
            #tcdPivot td.pvtVals {
                background: transparent !important;
                border: none !important;
            }

            #tcdPivot .pvtAxisContainer li span.pvtAttr {
                background: transparent !important;
                color: #000 !important;
                border: 1px solid #000 !important;
            }
        }

/* ---------- Compte rendu par fichier + éclatement des tiers ---------- */
.filewrap {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--panel);
}
.filewrap .filerow {
    border: 0;
    margin: 0;
    background: transparent;
}
.filedet {
    border-top: 1px solid var(--line);
    padding: 0 12px 10px;
}
.filedet > summary {
    cursor: pointer;
    padding: 8px 0;
    font-size: 12px;
    color: var(--accent);
}
.filedet-body {
    font-size: 12px;
}
.rep-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 14px;
    font-size: 12px;
    margin: 4px 0 10px;
}
.rep-grid .k {
    color: var(--muted);
}
.rep-h {
    font-weight: 600;
    font-size: 12px;
    margin: 10px 0 2px;
}
.rep-prev {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.7;
}

/* ---------- Balance : sous-lignes auxiliaires, dépliage, filtres ---------- */
.filters .f.f-check {
    justify-content: flex-end;
}
.filters .f.f-check label {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 0;
    white-space: nowrap;
    cursor: pointer;
}
.filters .f.f-check input[type=checkbox] {
    min-width: 0;
    width: 14px;
    height: 14px;
    margin: 0;
}
tbody tr.bal-sub td {
    background: rgba(255, 255, 255, .028);
    font-size: 11px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.bal-exp { cursor: pointer; }
.exp-c {
    display: inline-block;
    width: 10px;
    font-size: 10px;
}

/* ---------- TCD : adaptation de PivotTable.js au thème sombre ----------
   Les règles d'origine (plus haut) sont en thème clair : cellules blanches
   sur fond sombre. On les surcharge ici plutôt que de les réécrire. */
.pvtUi {
    color: var(--txt);
    background: transparent;
}
.pvtUi select,
.pvtUi input {
    background: var(--panel2);
    color: var(--txt);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
}
table.pvtTable {
    font-size: 12px;
    color: var(--txt);
}
table.pvtTable tbody tr th,
table.pvtTable thead tr th {
    background-color: var(--panel2);
    border: 1px solid var(--line);
    color: var(--txt);
    font-size: 12px;
    font-weight: 600;
}
table.pvtTable tbody tr td {
    background-color: var(--panel);
    border: 1px solid var(--line);
    color: var(--txt);
    font-variant-numeric: tabular-nums;
}
.pvtGrandTotal,
.pvtTotal {
    background-color: var(--panel2) !important;
    font-weight: 700;
}
.pvtAxisContainer,
.pvtVals,
.pvtRenderers,
.pvtAggregator {
    background: var(--panel2);
    border: 1px solid var(--line);
    color: var(--txt);
}
.pvtAxisContainer li span.pvtAttr {
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--txt);
    border-radius: 6px;
    padding: 3px 6px;
}
.pvtTriangle { color: var(--muted); }
.pvtFilterBox {
    background: var(--panel);
    color: var(--txt);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.pvtFilterBox h4,
.pvtFilterBox p,
.pvtFilterBox label { color: var(--txt); }
.pvtCheckContainer { color: var(--txt); }
.pvtCheckContainer p { background: var(--panel2); }
.pvtCheckContainer p.selected { background: var(--accent); color: #fff; }
.pvtDragHandle { color: var(--muted); }
.pvtRowOrder,
.pvtColOrder { color: var(--muted); }
/* Le tableau croisé peut être très large : il défile dans son propre cadre
   plutôt que de pousser la page entière. */
#tcdPivot {
    overflow-x: auto;
    max-width: 100%;
}

/* ---------- Écran de connexion ---------- */
#connexion {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    z-index: 200;
}
/* Fond personnalisé. Le voile sombre n'est pas décoratif : sans lui,
   une photo claire rendrait les champs de saisie illisibles, et l'écran
   de connexion doit rester utilisable quelle que soit l'image choisie. */
#connexion.avec-fond {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#connexion.avec-fond::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 11, 18, .66);
    backdrop-filter: blur(3px);
}

#connexion .card {
    padding: 28px;
    /* Au-dessus du voile, qui couvre toute la surface. */
    position: relative;
    z-index: 1;
}

#connexion.avec-fond .card {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
#connexion .brand {
    padding: 0;
    border: 0;
    font-weight: 700;
    font-size: 15px;
}
/* Le passage à la ligne n'était porté que par « #side .brand small » :
   hors du bandeau latéral, le sous-titre venait se coller au titre. */
#connexion .brand small {
    display: block;
    color: var(--muted);
    font-weight: 400;
    font-size: 11px;
    margin-top: 3px;
}
#connexion input {
    background: var(--panel2);
    color: var(--txt);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
}
#connexion input:focus {
    outline: none;
    border-color: var(--accent);
}

/* ---------- Évolution des soldes ----------
   Palette des courbes : voir EVO_COULEURS dans app.js. Les huit teintes
   ont été validées contre --panel (#171c26) — bande de clarté, plancher
   de chroma, écart en vision daltonienne et contraste sur le fond. */
.evo-barre {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.evo-serie {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-top: 1px solid var(--line);
}
.evo-serie:first-child { border-top: 0; }
.evo-serie input[type=text],
.evo-serie select {
    background: var(--panel2);
    color: var(--txt);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 7px;
    font-size: 12px;
}
.evo-inv {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}
.evo-pastille {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
    display: inline-block;
}

/* La hauteur suit le contenu : figer le conteneur ferait défiler la
   carte pour quelques pixels d'axe. */
.evo-graphe {
    position: relative;
    width: 100%;
}
.evo-graphe svg { display: block; }

.evo-bulle {
    position: absolute;
    pointer-events: none;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    white-space: nowrap;
    z-index: 5;
}
.evo-bulle-t {
    color: var(--txt);
    font-weight: 600;
    margin-bottom: 5px;
}
.evo-bulle-l {
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.7;
}
/* Le texte porte l'encre courante ; la pastille porte l'identité. */
.evo-bulle-n { color: var(--muted); }
.evo-bulle-v {
    color: var(--txt);
    margin-left: auto;
    padding-left: 14px;
    font-variant-numeric: tabular-nums;
}

.evo-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.evo-lg {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--txt);
    cursor: pointer;
}
.evo-lg:hover { border-color: var(--accent); }
.evo-lg .muted { font-size: 11px; }
.evo-lg.off { opacity: .45; }
.evo-lg.off span:not(.evo-pastille) { text-decoration: line-through; }

@media print {
    .evo-barre, .evo-serie button, .evo-bulle { display: none !important; }
}

/* ---------- Évolution : repli de la sélection et zoom ---------- */

/* grid-template-rows 1fr → 0fr anime vers la hauteur réelle du contenu,
   ce que max-height ne sait pas faire sans valeur arbitraire. */
.evo-repli {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1),
                opacity .22s ease, margin-top .3s cubic-bezier(.4, 0, .2, 1);
    opacity: 1;
}
.evo-repli > div {
    overflow: hidden;
    min-height: 0;
}
.evo-repli.ferme {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: -6px;
}

.evo-bouton-repli .evo-chevron {
    display: inline-block;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    font-size: 10px;
    opacity: .7;
}
.evo-bouton-repli.ferme .evo-chevron { transform: rotate(-90deg); }

.evo-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 11px;
    min-height: 26px;
}
.evo-zoom-actif { color: var(--txt); }
.evo-zoom button {
    padding: 3px 9px;
    font-size: 11px;
}
/* Repère d'usage : discret, il s'efface dès qu'on a compris. */
.evo-astuce {
    color: var(--muted);
    opacity: .65;
    margin-left: auto;
}

.evo-graphe svg { touch-action: pan-y; }

/* Un mouvement qui gêne doit pouvoir être coupé. */
@media (prefers-reduced-motion: reduce) {
    .evo-repli,
    .evo-bouton-repli .evo-chevron {
        transition: none;
    }
}

@media print {
    .evo-zoom { display: none !important; }
    .evo-repli.ferme { grid-template-rows: 1fr; opacity: 1; }
}